File: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/../tmpr/../tmpr/..//tmpr/..//wowX/old.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Brand AI - Wow Editor</title>
<meta charset="UTF-8">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="https://www.thebrand.ai/favicon/favicon.ico" type="image/x-icon" />
<link href="https://www.thebrand.ai/wowX/css/material-icons.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://www.thebrand.ai/wowX/css/roboto.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://www.thebrand.ai/wowX/beautiful/styles-cleaned.css?250563">
<link rel="stylesheet" href="https://www.thebrand.ai/wowX/beautiful/brand-cleaned.css?250563" media="all" onload="this.media='all'">
<link href="https://www.thebrand.ai/wowX/css/select2-cleaned.css" rel="stylesheet" type="text/css">
<link href="https://www.thebrand.ai/wowX/css/spectrum.css" rel="stylesheet" type="text/css">
<link href="https://www.thebrand.ai/wowX/css/ruler.css" rel="stylesheet" type="text/css">
<link href="https://www.thebrand.ai/wowX/css/toastr.css" rel="stylesheet" type="text/css">
<link href="https://www.thebrand.ai/wowX/css/style-cleaned.css?250563" rel="stylesheet" type="text/css">
<link id="brand-theme-link" href="https://www.thebrand.ai/wowX/css/light-cleaned.css?250563" rel="stylesheet" type="text/css">
<link href="https://www.thebrand.ai/wowX/css/ai-cleaned.css" rel="stylesheet" type="text/css">
<link href="https://www.thebrand.ai/wowX/beautiful/context-menu.css" rel="stylesheet" type="text/css">
<link href="https://www.thebrand.ai/wowX/css/animation.css" rel="stylesheet" type="text/css">
<!-- <link href="https://www.thebrand.ai/wowX/css/beautyforms.css" rel="stylesheet" type="text/css"> -->
<script>
window.BASE_URL = 'https://www.thebrand.ai/wowX';
</script>
<script>
window.DID_YOU_KNOW_FACTS = ["It takes only 0.05 seconds for people to form an opinion about your brand based on your website.","Consistent brand presentation across all platforms increases revenue by up to 23%.","The color blue is used by 33% of the world's top brands because it conveys trust and reliability.","86% of consumers say authenticity is a key factor when deciding what brands they like and support.","The Nike swoosh was designed by a student for just $35 in 1971.","Using a signature color can increase brand recognition by 80%.","Companies with strong brands outperform the S&P 500 by up to 73%.","64% of consumers cite shared values as the primary reason they have a relationship with a brand.","The Apple logo has a bite taken out of it so people don't confuse it with a cherry.","Red and yellow together stimulate appetite, which is why so many fast-food brands use them.","77% of B2B marketing leaders say branding is critical to growth.","The FedEx logo has a hidden arrow between the 'E' and 'x' representing speed and precision.","People are 71% more likely to make a purchase based on social media referrals.","Coca-Cola's brand is recognized by 94% of the world's population.","Your brand voice should be as recognizable as your logo—consistency is everything.","55% of brand impressions come from visual elements, not text.","A brand's personality influences purchase decisions for 89% of shoppers.","The Amazon logo has an arrow from 'a' to 'z' showing they sell everything, and it looks like a smile.","Changing your brand color can increase conversion rates by 24%.","It takes 5-7 impressions for someone to remember your brand.","89% of shoppers stay loyal to brands that share their values.","The average person sees 5,000 to 10,000 brand messages every single day.","Google's name comes from 'googol,' a mathematical term for 1 followed by 100 zeros.","Brands that blog get 97% more links to their website than those that don't.","The world's most valuable brand, Apple, is worth over $500 billion.","48% of consumers expect specialized treatment for being loyal customers.","Brand storytelling can increase the value of a product or service by over 20 times.","The Starbucks siren logo doesn't include the company name anymore—that's true brand recognition.","Using video in your branding can increase conversions by 80%.","73% of consumers love a brand because of helpful customer service.","The Twitter bird is named Larry, after basketball legend Larry Bird.","Personalized branding experiences can increase sales by 20%.","Your brand's font choice affects how trustworthy people think you are.","91% of consumers prefer to buy from an authentic brand rather than a generic alternative.","The McDonald's golden arches are more recognizable worldwide than the Christian cross.","Emotional connections drive 50% of all purchasing decisions.","It can take years to build a strong brand, but only seconds to lose customer trust.","The Target bullseye is so iconic that the company trademarked the color red for retail.","Instagram posts with location tags get 79% more engagement than those without.","A strong brand can command premium pricing—customers will pay up to 50% more.","The Toblerone logo has a hidden bear in the mountain, representing Bern, Switzerland.","92% of consumers trust recommendations from people they know over branded content.","Small businesses with professional branding grow 3x faster than those without.","The word 'brand' originally meant a burning piece of wood, used to mark livestock.","68% of consumers say the primary reason they follow a brand on social media is to stay informed.","Your logo will be seen an average of 7 times before someone actually remembers it.","The LG logo looks like a smiling face, making the brand appear friendly and approachable.","Brands that evoke emotional responses get 3x more word-of-mouth recommendations.","Purple is rarely used in food branding because it's an appetite suppressant.","Creating a brand style guide increases brand consistency by up to 300%.","The most expensive logo ever designed was Pepsi's 2008 rebrand at $1 million.","Customers are 4x more likely to buy from a brand they feel emotionally connected to.","The Beats by Dre logo is designed to look like a person wearing headphones.","Green in branding is associated with health, growth, and environmental consciousness.","46% of consumers say a website's design is the number one factor in determining credibility.","The Adidas three stripes represent a mountain, symbolizing challenges athletes overcome.","Brands with a consistent voice across all channels see a 33% increase in revenue.","Orange is used in branding to evoke enthusiasm, creativity, and affordability.","User-generated content increases brand trust by 50% compared to traditional advertising.","The Baskin-Robbins logo has '31' hidden in the 'B' and 'R' for their 31 flavors.","A brand's reputation accounts for 63% of a company's market value.","Having a memorable brand name increases word-of-mouth marketing by 39%.","The BMW logo represents a spinning aircraft propeller against a blue sky.","Millennials and Gen Z are 2.5x more likely to buy from brands that support social causes.","Your brand's first impression is 94% design-related.","The Formula 1 logo has a hidden '1' in the negative space between the 'F' and the stripes.","Black in branding represents luxury, sophistication, and exclusivity.","78% of consumers say they're more likely to recommend brands with excellent content.","Your brand should solve a problem, not just sell a product.","The NBC peacock has 6 feathers representing their 6 divisions at the time of creation.","Companies with strong employer branding reduce hiring costs by up to 50%.","A clear brand message can increase click-through rates by 400%.","The Hyundai logo isn't just an 'H'—it's two people shaking hands, representing trust.","Brands that prioritize customer experience generate 60% higher profits.","Yellow grabs attention faster than any other color, which is why caution signs use it.","60% of people avoid companies with ugly or poorly designed logos.","The Cisco logo represents the Golden Gate Bridge and an electromagnetic signal.","A memorable brand slogan can increase sales by 20%.","96% of consumers don't trust ads, but they do trust authentic brand stories.","The Unilever logo contains 25 icons representing their diverse range of products.","Customers spend 140% more after a positive brand experience.","A strong brand can increase your business valuation by 20% or more.","The Spotify logo uses sound waves to represent their audio streaming service.","Your tagline should be 7 words or less for maximum memorability.","Brands that respond to customer feedback within 24 hours see 77% customer retention.","The Wendy's collar has the word 'Mom' hidden in it, emphasizing home-cooked quality.","White space in branding improves comprehension by 20%.","86% of women say authenticity is important when deciding which brands to support.","The Pinterest logo's 'P' is designed to look like a push pin.","Strong brands have 20% less customer churn than weak brands.","The Sony VAIO logo transitions from analog (waves) to digital (binary 1 and 0).","Customers who love your brand will spend 300% more over their lifetime.","A unified brand experience across channels increases purchase intent by 90%.","The London Symphony Orchestra logo looks like both 'LSO' and a conductor.","Pink in branding appeals to compassion, nurturing, and youthfulness.","82% of investors say a strong brand makes them more confident investing in a company.","Your brand is not what you say it is—it's what your customers say it is.","The Tour de France logo has a cyclist hidden in the 'R,' with the 'O' as a wheel.","Brands that tell stories create memories that last 22 times longer than facts alone.","The most successful brands focus on being meaningful, not just memorable."];
(function() {
function getRandomFact() {
try {
var list = Array.isArray(window.DID_YOU_KNOW_FACTS) ? window.DID_YOU_KNOW_FACTS : [];
if (!list.length) return null;
return list[Math.floor(Math.random() * list.length)] || null;
} catch (_) {
return null;
}
}
function setFact(text) {
var el = document.getElementById('brand-didyouknow-fact');
if (el) el.textContent = text || '';
var el2 = document.getElementById('brand-canvas-didyouknow-fact');
if (el2) el2.textContent = text || '';
}
function closeMainLoader() {
var wrap = document.getElementById('brand-main-loader');
if (!wrap) return;
if (wrap.classList.contains('hide')) return;
wrap.classList.add('brand-loader-closing');
window.setTimeout(function() {
wrap.classList.add('hide');
}, 380);
}
window.brandLoader = window.brandLoader || {};
window.brandLoader.close = closeMainLoader;
window.brandLoader.setFact = setFact;
window.brandLoader._iconsReady = false;
window.brandLoader._appReady = false;
window.brandLoader._firstRender = false;
window.brandLoader._closed = false;
window.brandLoader._maybeClose = function() {
if (window.brandLoader._closed) return;
if (window.brandLoader._iconsReady && window.brandLoader._appReady && window.brandLoader._firstRender) {
window.brandLoader._closed = true;
closeMainLoader();
}
};
window.brandLoader.onIconsReady = function() {
window.brandLoader._iconsReady = true;
window.brandLoader._maybeClose();
};
window.brandLoader.onAppReady = function() {
window.brandLoader._appReady = true;
window.brandLoader._maybeClose();
};
window.brandLoader.onFirstRender = function() {
window.brandLoader._firstRender = true;
window.brandLoader._maybeClose();
};
function initBrandLoaderDom() {
var fact = getRandomFact();
if (!fact) fact = 'A strong brand can command premium pricing—customers will pay up to 50% more.';
setFact(fact);
var titles = [
'Warming up your workspace',
'Setting up your creative canvas',
'Loading your design studio',
'Getting your tools ready',
'Spinning up the editor',
'Calibrating the canvas',
'Tuning the design engine',
'Lining up the pixels',
'Gathering your brand ingredients',
'Assembling your workspace',
'Polishing the editor',
'Bringing your editor to life',
'Booting up your brand lab',
'Hanging the tools on the wall',
'Prepping your design desk',
'Powering up your editor',
'Opening the creative workshop',
'Making room for brilliance',
'Getting everything in place',
'Firing up your editor'
];
var pickTitle = function() {
if (!titles.length) return null;
return titles[Math.floor(Math.random() * titles.length)] || null;
};
var applyTitle = function() {
var titleEl = document.querySelector('.brand-loader-title');
if (!titleEl) return false;
var nextTitle = pickTitle();
if (nextTitle) titleEl.textContent = nextTitle;
return true;
};
if (!applyTitle()) {
var attempts = 0;
var maxAttempts = 600;
var retry = function() {
attempts++;
if (applyTitle() || attempts >= maxAttempts) return;
window.setTimeout(retry, 50);
};
window.setTimeout(retry, 0);
}
var startedAt = Date.now();
var maxMs = 30000;
var tick = function() {
try {
var dl = document.getElementById('designLoaded');
if (dl && String(dl.value) === '1') {
if (window.brandLoader && typeof window.brandLoader.onAppReady === 'function') {
window.brandLoader.onAppReady();
}
}
if (Date.now() - startedAt > maxMs) {
closeMainLoader();
return;
}
} catch (_) {}
window.setTimeout(tick, 300);
};
window.setTimeout(tick, 300);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initBrandLoaderDom);
} else {
initBrandLoaderDom();
}
})();
</script>
<style>
.draggable {
cursor: pointer;touch-action: auto;
}
canvas{
box-shadow:0 10px 16px 0 rgba(0,0,0,0.1),0 6px 20px 0 rgba(0,0,0,0.05) !important;
}
.demo{
margin: 0px!important;
}
/*#for mobile to move editpr up*/
/* Styles for screens with a maximum width of 768 pixels */
@media (max-width: 768px) {
/* Your CSS styles for smaller screens */
.TheBrandControlListScroller, .TheBrandScrollable {
width: auto;
max-width: 400px;
-webkit-overflow-scrolling: touch;
overflow: auto;
touch-action: auto;
/* scrollbar-width: none;*/
}
.TheBrandScrollable::-webkit-scrollbar {
width: 3px; /* Adjust the width as needed */
}
.TheBrandControlListScroller::-webkit-scrollbar {
width: 3px; /* Adjust the width as needed */
}
.TheBrandScrollable::-webkit-scrollbar-track {
background: transparent;
}
.TheBrandControlListScroller::-webkit-scrollbar-track {
background: transparent;
}
.TheBrandScrollable::-webkit-scrollbar-thumb {
background: transparent;
}
.TheBrandControlListScroller::-webkit-scrollbar-thumb {
background: transparent;
}
}
/* #brand-toggle-left, #brand-icon-panel-inner {
visibility: hidden;
display: none;
}*/
/* Set the scrollbar height and color */
::-webkit-scrollbar {
height: 3px;
}
::-webkit-scrollbar-thumb {
background-color: #cccccc;
}
/* Ensure the scrollbar is only visible when there is overflow */
::-webkit-scrollbar-track {
background: transparent;
}
.TheBrandScrollable {
z-index: 10;
}
/* For WebKit browsers (Chrome, Safari) */
#brand-layers::-webkit-scrollbar {
width: 10px; /* Set the width of the scrollbar */
}
#brand-layers::-webkit-scrollbar-thumb {
background-color: #aaa; /* Set the color of the thumb */
}
#brand-layers::-webkit-scrollbar-track {
background-color: #eee; /* Set the color of the track */
}
.brand-slider {
background-color: #d8d8db;
}
.brand-btn {
border-radius: 10px;
}
#btn-resize-image,#btn-resize-elements,#btn-resize-shapes,#btn-resize-text,#btn-resize-adjust,#btn-resize-elements ,#btn-resize-effects,#btn-resize-apps,#btn-resize-frames {
position: absolute; /* Positioning the button absolutely */
top: 3px; /* Distance from the top */
right: 0px; /* Distance from the right */
cursor: pointer; /* Pointer cursor for button */
/* Increase padding for better touch target */
padding-top: 5px;
padding-right: 5px;
padding-left: 10px;
padding-bottom: 5px;
font-size: 12px; /* Larger font size for readability */
z-index: 999999999999999999;
border-radius: 20px;
color: #666666;
}
.padditX {
padding-right: 13px!important;
margin-top: 10px;
}
.paddingMaterial {
font-size: 14px; padding-top: 11px
}
.paddingLabel {
margin-bottom: 10px!important;margin-top: 5px!important;
}
.defaultIt {
padding: 0px!important;
/* outline: none!important;*/
box-shadow: none!important;
color: #666666!important;
font-size: 1rem!important;
border: 0px solid #d1d1d1 !important;
}
.brand-slider {
max-width: 120px!important;
}
.resizeSVG {
width: 18px!important;
height: auto; /* Keeps aspect ratio */
padding-right: 7px;
padding-top: 3px;
}
.brand-control-label
{
color: #666666!important;
font-size: 13px!important;
padding-top: 12px;
font-family: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
.brand-tool-nav-toolbar-inner input,
.brand-tool-nav-toolbar-inner select,
.brand-tool-nav-toolbar-inner button,
.brand-tool-nav-toolbar-inner label,
.brand-tool-nav-toolbar-inner .brand-tool-color,
.brand-tool-nav-toolbar-inner .brand-tool-range,
.brand-tool-nav-toolbar-inner .brand-tool-select {
margin-right: 3px;
}
.brand-grid li {
font-family: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
.TheBrandUtilFooter
{
}
fieldset
{
background:none;
}
#websafe-fonts,
#google-fonts {
/*font-size: 18px;*/
}
.brand-tooltip {
position: fixed;
z-index: 2147483647;
background: #111827;
color: #fff;
font-size: 12px;
line-height: 1.4;
padding: 6px 8px;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 120ms ease, transform 120ms ease;
max-width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brand-tooltip[data-show="true"] {
opacity: 1;
transform: translateY(0);
}
.brand-tooltip:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: inherit;
transform: rotate(45deg);
}
.brand-tooltip[data-placement="top"]:after {
bottom: -4px;
left: 12px;
}
.brand-tooltip[data-placement="bottom"]:after {
top: -4px;
left: 12px;
}
.brand-tooltip[data-placement="left"]:after {
right: -4px;
top: 12px;
}
.brand-tooltip[data-placement="right"]:after {
left: -4px;
top: 12px;
}
#modal-save.brand-share-dropdown{position:absolute;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 20px 45px rgba(0,0,0,.15);width:360px;max-height:70vh;overflow:auto;padding:12px;z-index:999999}
#modal-save.brand-share-dropdown .brand-modal-wrap{padding:0}
#modal-save.brand-share-dropdown .brand-modal-inner{width:100%;max-width:none}
#modal-save.brand-share-dropdown .brand-modal-close{position:absolute;top:8px;right:8px}
#modal-save.brand-share-dropdown .brand-block-33{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#modal-save.brand-share-dropdown .brand-block-50{display:grid;grid-template-columns:2fr 1fr;gap:8px}
#modal-save.brand-share-dropdown .brand-block-50 > *{width:auto}
#modal-save.brand-share-dropdown label{font-size:.85rem;color:#334155;margin-bottom:4px}
#modal-save.brand-share-dropdown .brand-select,#modal-save.brand-share-dropdown .brand-form-field{height:30px;padding:6px 10px;border-radius:8px}
#modal-save.brand-share-dropdown .brand-btn{padding:8px 12px;border-radius:10px;font-size:9px}
#modal-save.brand-share-dropdown .brand-modal-inner > .brand-tabs > .brand-tab, #modal-save.brand-share-dropdown .brand-modal-bg{background:transparent;box-shadow:none;border-radius:0;padding:5px}
#modal-save.brand-share-dropdown .brand-section-title{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;color:#0f172a;margin:8px 0 10px}
#modal-save.brand-share-dropdown .brand-input-with-icon{position:relative}
#modal-save.brand-share-dropdown .brand-input-with-icon>.material-icons{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:#64748b}
#modal-save.brand-share-dropdown .brand-input-with-icon>.brand-form-field{padding-left:36px}
#modal-save.brand-share-dropdown .social-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#modal-save.brand-share-dropdown .social-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid #e5e7eb;background:#f8fafc;color:#0f172a;padding:0}
#modal-save.brand-share-dropdown .social-btn svg{width:18px;height:18px}
#modal-save.brand-share-dropdown .social-btn.facebook{color:#1877f2;border-color:#cfe2ff;background:#f0f7ff}
#modal-save.brand-share-dropdown .social-btn.instagram{color:#e1306c;border-color:#ffd0de;background:#fff1f5}
#modal-save.brand-share-dropdown .social-btn.linkedin{color:#0a66c2;border-color:#cfe8ff;background:#f0f7ff}
#modal-save.brand-share-dropdown .social-btn.twitter{color:#1d9bf0;border-color:#cfe8ff;background:#f0f7ff}
#modal-save.brand-share-dropdown #brand-design-link{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace}
#modal-save.brand-share-dropdown .brand-btn.icon-left .material-icons{font-size:18px;margin-right:6px}
#modal-save.brand-share-dropdown .brand-section{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
#modal-save.brand-share-dropdown .brand-divider{height:1px;background:#e5e7eb;margin:8px 0}
#modal-save.brand-share-dropdown .brand-input-action{display:flex;gap:8px}
#modal-save.brand-share-dropdown .brand-chip-list{display:flex;flex-wrap:wrap;gap:6px}
#modal-save.brand-share-dropdown .brand-chip-list .chip{display:flex;align-items:center;gap:6px;background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0;border-radius:999px;padding:4px 10px;font-size:.85rem}
#modal-save.brand-share-dropdown .brand-chip-list .chip .remove{cursor:pointer}
#modal-save.brand-share-dropdown .social-btn:hover{filter:brightness(0.98)}
</style>
<style>
/* Teams UI */
body.teams-page{overflow:auto!important;background:var(--color-background, #fff)}
.teams-ui{padding:10px; padding-bottom: 0px!important;}
.teams-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.teams-title{display:flex;align-items:center;gap:8px;font-size:1.25rem;font-weight:700;color:var(--color-text-dark, #383a3f)}
.teams-actions{display:flex;gap:8px;flex-wrap:wrap}
.teams-section{margin-bottom:18px}
.teams-inline{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.teams-pagination{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 20px}
.teams-subtitle{font-size:1rem;font-weight:600;color:var(--color-text, #53565c);margin:8px 0}
.teams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.teams-grid.teams-grid-spacious{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.teams-grid.teams-grid-overview{grid-template-columns:repeat(4,minmax(0,1fr))}
.teams-popover{position:fixed;z-index:1000000;width:380px;max-width:calc(100vw - 24px);max-height:calc(100vh - 120px);overflow:auto;border:1px solid var(--color-line, rgba(15,23,42,.12));border-radius:calc(var(--border-radius, .75rem) * .9);background:var(--color-background, #fff);box-shadow:0 28px 80px rgba(15,23,42,.22);padding:12px}
.teams-popover-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-weight:700;color:var(--color-text-dark, #383a3f)}
.teams-popover-body{display:grid;gap:10px}
.teams-popover-body .font-item{display:flex;flex-direction:column;gap:4px;border:1px solid rgba(15,23,42,.10);background:linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,0));border-radius:calc(var(--border-radius, .75rem) * .85);padding:10px 12px;transition:transform var(--motion-duration-base) var(--motion-ease-out), box-shadow var(--motion-duration-base) var(--motion-ease-out), border-color var(--motion-duration-base) var(--motion-ease-out);box-shadow:0 8px 18px rgba(15,23,42,.06)}
.teams-popover-body .font-item:hover{transform:translateY(-1px);border-color:rgba(15,23,42,.16);box-shadow:0 14px 28px rgba(15,23,42,.10)}
.teams-popover-body .font-item > div:first-child{font-weight:600;color:var(--color-text-dark, #383a3f)}
.teams-popover-body .font-item > div:last-child{font-size:12px;color:var(--color-text-dim, #70737b)}
.team-card,.teams-card{border:1px solid var(--color-line, rgba(15,23,42,.10));border-radius:calc(var(--border-radius, .75rem) * .9);background:var(--color-background, #fff);padding:14px;box-shadow:0 10px 30px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06);transition:transform var(--motion-duration-base) var(--motion-ease-out), box-shadow var(--motion-duration-base) var(--motion-ease-out)}
.team-card:hover,.teams-card:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(15,23,42,.14)}
.team-card-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--color-text-dark, #383a3f);font-weight:700}
.team-card-header .team-avatar{width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-tab-active-background, #ebecef);color:var(--color-text-dark, #383a3f);font-size:.9rem;font-weight:700}
.team-card .team-name{font-size:1.2rem;font-weight:700;line-height:1.1}
.team-card--square{aspect-ratio:1/1;display:flex;flex-direction:column}
.team-card--square .team-card-header{flex-direction:column;justify-content:center;gap:10px;text-align:center}
.team-card--square .team-card-header .team-avatar{width:72px;height:72px;font-size:1.35rem}
.team-card--square .team-card-actions{margin-top:auto;justify-content:center}
.team-card-actions{display:flex;flex-wrap:wrap;gap:10px}
.team-card-actions .brand-btn.small{padding:6px 8px;min-width:34px;display:inline-flex;align-items:center;justify-content:center}
.team-card-actions .brand-btn.small .material-icons{margin-right:0}
.team-card-actions .brand-btn.small:not(.icon-only){min-width:0;padding:6px 10px}
.team-card-actions .brand-btn.small:not(.icon-only) .material-icons{margin-right:6px}
.brand-btn.danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.brand-btn.small{padding:6px 10px;font-size:12px}
#teamsList .team-card,#brandsList .team-card,#foldersList .team-card{position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(15,23,42,.035), rgba(255,255,255,1) 44%);border-color:rgba(15,23,42,.10)}
#teamsList .team-card::before,#brandsList .team-card::before,#foldersList .team-card::before{content:"";position:absolute;inset:-120px -80px auto -80px;height:220px;background:radial-gradient(closest-side, rgba(99,102,241,.14), rgba(99,102,241,0));pointer-events:none}
#teamsList .team-card>* ,#brandsList .team-card>* ,#foldersList .team-card>*{position:relative;z-index:1}
#teamsList .team-card--square,#brandsList .team-card--square,#foldersList .team-card--square{padding:18px}
#teamsList .team-card-header,#brandsList .team-card-header,#foldersList .team-card-header{margin-bottom:16px}
#teamsList .team-card-header .team-avatar,#brandsList .team-card-header .team-avatar,#foldersList .team-card-header .team-avatar{background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(16,185,129,.12));border:1px solid rgba(15,23,42,.10);box-shadow:0 18px 40px rgba(15,23,42,.14)}
#foldersList .team-card-header .team-avatar .material-icons{font-size:28px;line-height:1}
#teamsList .team-card-header .team-name,#brandsList .team-card-header .team-name,#foldersList .team-card-header .team-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
#teamsList .team-card-tools,#brandsList .team-card-tools,#foldersList .team-card-tools{position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:2;opacity:.72;transition:opacity var(--motion-duration-base) var(--motion-ease-out), transform var(--motion-duration-base) var(--motion-ease-out)}
#teamsList .team-card:hover .team-card-tools,#brandsList .team-card:hover .team-card-tools,#foldersList .team-card:hover .team-card-tools{opacity:1;transform:translateY(-1px)}
#teamsList .team-card-tools .brand-btn.small.icon-only,#brandsList .team-card-tools .brand-btn.small.icon-only,#foldersList .team-card-tools .brand-btn.small.icon-only{width:34px;height:34px;padding:0;min-width:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
#teamsList .team-card-tools .brand-btn.small.icon-only .material-icons,#brandsList .team-card-tools .brand-btn.small.icon-only .material-icons,#foldersList .team-card-tools .brand-btn.small.icon-only .material-icons{margin-right:0}
#teamsList .team-card-actions,#brandsList .team-card-actions,#foldersList .team-card-actions{display:grid;gap:10px;margin-top:auto}
#teamsList .team-card-actions>.brand-btn.small,#brandsList .team-card-actions>.brand-btn.small,#foldersList .team-card-actions>.brand-btn.small{width:100%;justify-content:center;border-radius:12px;padding:9px 12px;font-size:12.5px}
#teamsList .team-card-actions-secondary,#foldersList .team-card-actions-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#teamsList .team-card-actions-secondary .brand-btn.small,#foldersList .team-card-actions-secondary .brand-btn.small{width:100%;justify-content:center;border-radius:12px;padding:9px 12px}
#teamsList .team-card-actions-secondary .brand-btn.small .material-icons,#foldersList .team-card-actions-secondary .brand-btn.small .material-icons{margin-right:6px}
#brandsList .team-card-actions{grid-template-columns:1fr}
#brandsList .team-card-actions>.brand-btn.small{width:100%;justify-content:center}
@media (max-width: 520px){
#teamsList .team-card--square,#brandsList .team-card--square,#foldersList .team-card--square{aspect-ratio:auto}
#teamsList .team-card-actions-secondary,#foldersList .team-card-actions-secondary{grid-template-columns:1fr}
}
.teams-sheet{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--modal-background-color, #fff);border:1px solid var(--color-line, #dee0e6);border-radius:calc(var(--border-radius, .75rem) * .9);box-shadow:0 20px 45px rgba(0,0,0,.15);width:440px;max-width:92vw;padding:12px;z-index:999999}
.teams-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.teams-sheet-header h5{margin:0;display:flex;align-items:center;gap:8px;color:var(--color-text-dark, #383a3f);font-weight:700}
.teams-sheet-body{display:grid;grid-template-columns:1fr;gap:10px}
.teams-sheet-footer{display:flex;justify-content:flex-end;margin-top:10px}
.teams-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.teams-tabs a{border:1px solid var(--color-tab-outline, rgba(0,0,0,0.1));background:var(--color-tab-background, #fff);color:var(--color-tab-text, #777980);border-radius:999px;padding:8px 12px;font-size:13px;line-height:1;text-decoration:none;transition:background .15s ease,color .15s ease,box-shadow .15s ease;display:inline-flex;align-items:center;gap:6px}
.teams-tabs a .material-icons{font-size:1em;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em}
.teams-tabs a:hover{background:var(--color-tab-active-background, #ebecef);color:var(--color-text-dark, #383a3f)}
.teams-tabs a.is-active{background:var(--color-tab-active-background, #ebecef);color:var(--color-tab-active-text, var(--color-text, #53565c));box-shadow:var(--button-shadow, 0 0 0.25rem rgba(0,0,0,0.04))}
.teams-search{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.teams-search .brand-input-with-icon{flex:1;display:flex;align-items:center;gap:8px}
.teams-search .brand-input-with-icon>.material-icons{font-size:18px;color:#64748b;flex:0 0 auto}
.teams-search .brand-input-with-icon>.brand-form-field{flex:1;min-width:0}
input[type=file]{width:100%;max-width:100%;border:1px solid var(--color-line, rgba(15,23,42,.12));border-radius:calc(var(--border-radius, .75rem) * .75);background:var(--color-background, #fff);color:var(--color-text-dark, #383a3f);padding:8px 10px;font-size:13px;line-height:1.2;box-shadow:var(--button-shadow, 0 0 0.25rem rgba(0,0,0,0.04))}
input[type=file]::file-selector-button{border:1px solid var(--color-line, rgba(15,23,42,.12));background:var(--color-background-alt, #f2f5f8);color:var(--color-text-dark, #383a3f);border-radius:999px;padding:6px 10px;margin-right:10px;font-size:12px;line-height:1;cursor:pointer}
input[type=file]::-webkit-file-upload-button{border:1px solid var(--color-line, rgba(15,23,42,.12));background:var(--color-background-alt, #f2f5f8);color:var(--color-text-dark, #383a3f);border-radius:999px;padding:6px 10px;margin-right:10px;font-size:12px;line-height:1;cursor:pointer}
.teams-thumb{width:100%;aspect-ratio:1/1;border-radius:calc(var(--border-radius, .75rem) * .75);background:var(--color-background-alt, #f2f5f8);overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-line-dim, #eef0f4)}
.teams-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.teams-card-title{font-weight:700;color:var(--color-text-dark, #383a3f);margin-top:10px}
.teams-card-meta{font-size:12px;color:var(--color-text-dim, #70737b);margin-top:2px}
.teams-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.swatch{width:36px;height:36px;border-radius:999px;border:1px solid var(--color-line, #dee0e6);box-shadow:var(--button-shadow, 0 0 0.25rem rgba(0,0,0,0.04))}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px}
.bk-grid--thumbs{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.bk-grid--colors{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.bk-cardLink{display:block;text-decoration:none;color:inherit}
.bk-card{position:relative;border:1px solid rgba(15,23,42,.10);border-radius:calc(var(--border-radius, .75rem) * .85);background:linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,0));padding:10px;box-shadow:0 10px 24px rgba(15,23,42,.08);transition:transform var(--motion-duration-base) var(--motion-ease-out), box-shadow var(--motion-duration-base) var(--motion-ease-out), border-color var(--motion-duration-base) var(--motion-ease-out);min-width:0}
.bk-card:hover{transform:translateY(-2px);border-color:rgba(15,23,42,.16);box-shadow:0 18px 44px rgba(15,23,42,.14)}
.bk-thumb{width:100%;aspect-ratio:1/1;border-radius:calc(var(--border-radius, .75rem) * .7);background:var(--color-background-alt, #f2f5f8);overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(15,23,42,.08)}
.bk-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.bk-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;color:var(--color-text-dim, #70737b)}
.bk-meta .material-icons{font-size:16px;color:#94a3b8}
.bk-truncate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid rgba(15,23,42,.10);background:rgba(15,23,42,.02);font-size:12px;color:var(--color-text, #53565c);line-height:1}
.bk-color{display:flex;align-items:center;gap:12px}
.bk-swatch{width:42px;height:42px;border-radius:14px;border:1px solid rgba(15,23,42,.12);box-shadow:0 10px 22px rgba(15,23,42,.10);background:transparent}
.bk-color-code{font-weight:700;color:var(--color-text-dark, #383a3f);font-size:13px;letter-spacing:.02em}
.bk-muted{font-size:12px;color:var(--color-text-dim, #70737b)}
.bk-voiceList{display:grid;gap:10px;margin-top:12px}
.bk-voiceCard{border:1px solid rgba(15,23,42,.10);border-radius:calc(var(--border-radius, .75rem) * .85);background:linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,0));padding:12px 14px;box-shadow:0 8px 18px rgba(15,23,42,.06)}
.bk-voiceCard p{margin:0;color:var(--color-text, #53565c);line-height:1.45;white-space:pre-wrap}
.bk-fontList{display:grid;gap:10px;margin-top:12px}
.bk-fontCard{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(15,23,42,.10);border-radius:calc(var(--border-radius, .75rem) * .85);background:var(--color-background, #fff);padding:10px 12px;box-shadow:0 8px 18px rgba(15,23,42,.06)}
.bk-fontLeft{display:grid;gap:4px;min-width:0}
.bk-fontName{font-weight:700;color:var(--color-text-dark, #383a3f)}
.bk-fontMeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bk-empty{padding:10px 12px;border:1px dashed rgba(15,23,42,.20);border-radius:calc(var(--border-radius, .75rem) * .85);color:var(--color-text-dim, #70737b);font-size:13px;background:rgba(15,23,42,.02)}
.teams-autocomplete{position:relative}
.teams-autocomplete-list{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:6px;background:var(--color-background, #fff);border:1px solid var(--color-line, #dee0e6);border-radius:calc(var(--border-radius, .75rem) * .9);box-shadow:0 14px 30px rgba(15,23,42,.12);max-height:220px;overflow:auto}
.teams-autocomplete-item{padding:10px 12px;cursor:pointer;color:var(--color-text-dark, #383a3f)}
.teams-autocomplete-item:hover{background:var(--color-background-alt, #f2f5f8)}
.teams-sheet-backdrop{position:fixed;inset:0;background:rgba(10,15,25,.45);backdrop-filter:saturate(1.15) blur(6px);z-index:999998;display:none}
body.teams-page .brand-modal{z-index:999999}
body.teams-modal-open{overflow:hidden!important}
.d-none{display:none!important}
.alert{border:1px solid var(--color-line, #dee0e6);border-radius:calc(var(--border-radius, .75rem) * .75);padding:10px 12px;margin:10px 0;font-size:13px;color:var(--color-text-dark, #383a3f);background:var(--color-background-alt, #f2f5f8)}
.alert-success{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10);color:#14532d}
.alert-danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10);color:#7f1d1d}
@media (max-width: 980px){.teams-grid.teams-grid-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 520px){.teams-grid.teams-grid-overview{grid-template-columns:1fr}}
@media (max-width: 640px){.teams-inline{grid-template-columns:1fr}.teams-ui{padding:14px}}
</style>
<script src="https://www.thebrand.ai/wowX/js/jquery.min.js"></script>
<script src="https://www.thebrand.ai/wowX/js/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
//default position initialise
/* $("#brand-toggle-left").trigger("click"); $("#brand-toggle-right").trigger("click");*/
// Hide all tab panels except the first one
$(".MidTabPanel:not(:first)").hide();
// Hide all card panels except the first one
$(".cardPanel:not(:first)").hide();
//default load text tab parameters
$("#panel-brand-tab-annotate").show();
// Handle tab clicks
$(".TheBrandTabList li").on("click", "button", function() {
if ($(this).closest('.TheBrandNavMain').length && $(this).closest('li.brand-icon-menu-btn').length) {
return;
}
// Get the target tab panel's ID
var targetPanelId = $(this).closest("li").attr("aria-controls");
var targetCardId = $(this).closest("li").attr("id");
$(".TheBrandTabList li").attr("aria-selected", "false");
$(this).closest("li").attr("aria-selected", "true");
function showTargetPanels() {
if (targetPanelId) {
$("#" + targetPanelId).show();
}
if (targetCardId) {
$("." + targetCardId).show();
}
}
function centerCanvasWrap() {
// var w = $(window).width();
// var leftOpen = !$("#brand-toggle-left").hasClass('closed');
// var leftW = leftOpen ? ($("#brand-icon-panel").outerWidth() || 240) : 0;
// var rightOpen = $("#brand-right-col").is(":visible");
// var rightW = rightOpen ? ($("#brand-right-col").outerWidth() || 200) : 0;
// var target = Math.max(Math.min(w - leftW - rightW, w * 0.7), w * 0.6);
// $("#brand-canvas-wrap").css({
// width: target + "px",
// marginLeft: 'auto',
// marginRight: 'auto'
// });
}
setTimeout(centerCanvasWrap, 0);
//closee all modals
$(".brand-modal-close").trigger("click");
$(".brand-modal-compact-close").trigger("click");
// if ($("#brand-toggle-left").hasClass('closed')) {
// $("#brand-toggle-left").trigger("click");
// }
// $("#brand-toggle-left").trigger("click");
setTimeout(centerCanvasWrap, 0);
if (targetPanelId === "panel-brand-tab-Settings") {
$("#settingsMe").trigger("click");
$("#brand-settings").show();
showTargetPanels();
return;
}
// Hide all tab panels
$(".MidTabPanel").hide();
// Hide all tab panels
$(".thirdTab").hide();
// Hide all tab panels
$(".secondTab").hide();
// Hide all card panels
$(".cardPanel").hide();
// Hide all top tabs
$(".topclear").not("#brand-top-icons-zoom-tools").hide();
if (targetPanelId === "panel-brand-tab-elements") {
$("#radio-group-bytosri-all-elementsX").trigger("click");
/* $("#modal-text-compact").show();*/
}
if (targetPanelId === "panel-brand-tab-adjust") {
$("#radio-group-bytosri-cropX").trigger("click");
}
if (targetPanelId === "panel-brand-tab-filterz") {
$("#radio-group-bytosri-filtaX").trigger("click");
}
//open correspoding compact modals
if (targetPanelId === "panel-brand-tab-annotate") {
$("#" + targetPanelId).show();
$("#textlayouts").trigger("click");
// $("#brand-top-text-optionsX").show();
$("#modal-text-compact").show();
$("#brand-toggle-left").removeClass('closed');
$("#brand-toggle-left").find(".material-icons").html('chevron_left');
showTargetPanels();
return;
}
if (targetPanelId === "panel-brand-tab-adjust") {
// $("#brand-btn-adjust").trigger("click");
// $("#modal-adjust-compact").show();
/* $("#brand-toggle-left").removeClass('closed');
$("#brand-toggle-left").find(".material-icons").html('chevron_left');*/
showTargetPanels();
return;
}
if (targetPanelId === "panel-brand-tab-brand") {
$("#" + targetPanelId).show();
$("#brand-toggle-left").removeClass('closed');
$("#brand-toggle-left").find(".material-icons").html('chevron_left');
showTargetPanels();
return;
}
if (targetPanelId === "panel-brand-tab-Apps") {
/* $("#appsMe").trigger("click");
$("#modal-app-compact").show();
*/
$("#modal-app-compact").show();
$("#brand-toggle-left").removeClass('closed');
$("#brand-toggle-left").find(".material-icons").html('chevron_left');
showTargetPanels();
return;
}
//execute effects
if (targetPanelId === "panel-brand-tab-filterz") {
/* $("#appsMe").trigger("click");
$("#modal-app-compact").show();
*/
$("#modal-tools-compact").show();
$("#brand-toggle-left").removeClass('closed');
$("#brand-toggle-left").find(".material-icons").html('chevron_left');
showTargetPanels();
return;
}
if (targetPanelId === "panel-brand-tab-crop") {
$("#modal-image-compact").show();
// $("#brand-top-image-optionsX").show();
$('#brand-image-main').show();
$('#brand-image-settings').hide();
$("#brand-toggle-left").removeClass('closed');
$("#brand-toggle-left").find(".material-icons").html('chevron_left');
showTargetPanels();
return;
}
if (targetPanelId === "panel-brand-tab-shapes") {
$("#modal-shapes-compact").show();
/* $("#brand-top-shape-optionsX").show();*/
$("#brand-toggle-left").removeClass('closed');
$("#brand-toggle-left").find(".material-icons").html('chevron_left');
showTargetPanels();
return;
}
$(".TheBrandTabList li").attr("aria-selected", "false");
$(this).closest("li").attr("aria-selected", "true");
// Show the selected tab panel
$("#" + targetPanelId).show();
// Show the selected tab panel
$("." + targetCardId).show();
return false; // Prevent the default behavior of the button
});
$(window).on('resize', function() {
// var w = $(window).width();
// var leftOpen = !$("#brand-toggle-left").hasClass('closed');
// var leftW = leftOpen ? ($("#brand-icon-panel").outerWidth() || 240) : 0;
// var rightOpen = $("#brand-right-col").is(":visible");
// var rightW = rightOpen ? ($("#brand-right-col").outerWidth() || 200) : 0;
// var target = Math.max(Math.min(w - leftW - rightW, w * 0.7), w * 0.6);
// $("#brand-canvas-wrap").css({
// width: target + "px",
// marginLeft: 'auto',
// marginRight: 'auto'
// });
});
$(document).on('click', '.brand-modal-compact-close, .brand-modal-open, #brand-toggle-left, #brand-toggle-right', function() {
// setTimeout(function() {
// var w = $(window).width();
// var leftOpen = !$("#brand-toggle-left").hasClass('closed');
// var leftW = leftOpen ? ($("#brand-icon-panel").outerWidth() || 240) : 0;
// var rightOpen = $("#brand-right-col").is(":visible");
// var rightW = rightOpen ? ($("#brand-right-col").outerWidth() || 200) : 0;
// var target = Math.max(Math.min(w - leftW - rightW, w * 0.7), w * 0.6);
// $("#brand-canvas-wrap").css({
// width: target + "px",
// marginLeft: 'auto',
// marginRight: 'auto'
// });
// }, 0);
});
$('.design_settings').click(function() {
$("#settingsMe").trigger("click");
$("#brand-settings").show();
return;
});
//the one for text format templates
$('#brand-add-text-proxy').click(function() {
$("#brand-add-text").trigger("click");
return;
});
$('#brand-img-upload-proxy').click(function() {
$("#clickUpload").trigger("click");
return;
});
$('#crop-image-object-proxy').click(function() {
$("#crop-image-object").trigger("click");
$("#crop-image-object-proxy").hide();
$("#crop-image-object-selection-proxy").show();
return;
});
$('#crop-image-replace-proxy').click(function() {
$("#brand-img-replace-media-library").trigger("click");
return;
});
$('#crop-image-object-selection-proxy').click(function() {
$("#crop-image-object-selection").trigger("click");
$("#crop-image-object-selection-proxy").hide();
$("#crop-image-object-proxy").show();
return;
});
$('#brand-icons-edit').click(function() {
/* $("#brand-btn-icons").trigger("click");*/
$("#brand-svg-media-library").trigger("click");
return;
});
$('#brand-elements-edit').click(function() {
return;
});
$('.brand-frames-edit').click(function() {
return;
});
$('.brand-img-layerMe').click(function() {
$("#brand-toggle-right").trigger("click");
return;
});
$('#img-ai').click(function() {
$("#brand-image-ai-context").trigger("click");
return;
});
$('#img-ai2').click(function() {
$("#brand-image-ai-context").trigger("click");
return;
});
$('#brand-img-media-library-i').click(function() {
$("#brand-img-media-library").trigger("click");
return;
});
$('#brand-img-upload-i').click(function() {
$("#brand-img-upload").trigger("click");
return;
});
$('#brand-img-layer-wow').click(function() {
$("#brand-toggle-right").trigger("click");
return;
});
//text compact modal
/* // Initially set the first tab as active
$(".TheBrandTabList li:first button").trigger("click");
// Initially set the first tab as active
$(".radio-group-bytosri-4").trigger("click");*/
});
</script>
<script>
(function(){
var tooltipEl = null;
var showTimer = null;
function ensureTooltip(){
if (!tooltipEl){
tooltipEl = document.createElement('div');
tooltipEl.className = 'brand-tooltip';
tooltipEl.setAttribute('data-placement','top');
document.body.appendChild(tooltipEl);
}
return tooltipEl;
}
function getPlacement(rect){
var vh = window.innerHeight;
if (rect.top > 44) return 'top';
if (vh - rect.bottom > 44) return 'bottom';
return 'top';
}
function position(el, target, placement){
var rect = target.getBoundingClientRect();
var tw = el.offsetWidth;
var th = el.offsetHeight;
var x = rect.left + (rect.width/2) - (tw/2);
var y = 0;
var margin = 10;
if (placement === 'top'){
y = rect.top - th - margin;
} else if (placement === 'bottom'){
y = rect.bottom + margin;
} else if (placement === 'left'){
x = rect.left - tw - margin;
y = rect.top + (rect.height/2) - (th/2);
} else {
x = rect.right + margin;
y = rect.top + (rect.height/2) - (th/2);
}
var vw = window.innerWidth;
if (x < 8) x = 8;
if (x + tw > vw - 8) x = vw - tw - 8;
el.style.left = Math.round(x) + 'px';
el.style.top = Math.round(y) + 'px';
}
function show(target){
var text = target.getAttribute('data-tooltip');
if (!text) return;
var placement = target.getAttribute('data-tooltip-placement') || getPlacement(target.getBoundingClientRect());
var el = ensureTooltip();
el.textContent = text;
el.setAttribute('data-placement', placement);
el.setAttribute('data-show','true');
el.style.visibility = 'hidden';
el.style.left = '-9999px';
el.style.top = '-9999px';
requestAnimationFrame(function(){
el.style.visibility = 'visible';
position(el, target, placement);
});
}
function hide(){
if (!tooltipEl) return;
tooltipEl.removeAttribute('data-show');
}
function attach(node){
node.addEventListener('mouseenter', function(){
clearTimeout(showTimer);
var self = this;
showTimer = setTimeout(function(){ show(self); }, 500);
});
node.addEventListener('mouseleave', function(){
clearTimeout(showTimer);
hide();
});
node.addEventListener('focus', function(){
clearTimeout(showTimer);
var self = this;
showTimer = setTimeout(function(){ show(self); }, 300);
});
node.addEventListener('blur', function(){
clearTimeout(showTimer);
hide();
});
}
function init(){
document.querySelectorAll('[data-tooltip]').forEach(attach);
document.querySelectorAll('.TheBrandButton, .brand-btn, .TheBrandTabList button, .brand-control-label, .brand-tool-toggle').forEach(function(el){
var t = el.getAttribute('title');
if (t && !el.getAttribute('data-tooltip')){
el.setAttribute('data-tooltip', t);
}
if (t) el.removeAttribute('title');
attach(el);
});
window.addEventListener('scroll', hide, true);
window.addEventListener('resize', hide);
}
if (document.readyState !== 'loading') init();
else document.addEventListener('DOMContentLoaded', init);
})();
</script>
<script>
$(document).ready(function() {
// Hide all tab panels except the first one
// $(".TheBrandShapeStyles:not(:first)").hide();
// Handle tab clicks
$(".TheBrandRadioGroupOptions li").on("click", "label", function() {
// Get the target tab panel's ID
var targetPanelId = $(this).closest("label").attr("for");
var checkboxId = $(this).attr('rel');
//trigger properties of text
if (targetPanelId === "none") {
var targetRelId = $(this).closest("label").attr("rel");
var targetAction = $(this).closest("label").attr("class");
if (targetRelId === "text") {
var gani = $(this).closest("label").attr("gani");
$("#" + targetAction).trigger("click");
}
} else {
//trigger properties of text
if (targetPanelId === "radio-group-bytosri-texta") {
$("#textproperties").trigger("click");
$("#brand-custom-text-options").show();
return;
}
if (targetPanelId === "elementaChoose" || targetPanelId === "elementEffects" || targetPanelId === "frameChoose") {
} else {
$(".thirdTab").hide();
// Hide all tab panels
$(".secondTab").hide();
}
//trigger properties of text
if (targetPanelId === "radio-group-bytosri-texta") {
$("#textproperties").trigger("click");
$("#brand-custom-text-options").show();
return;
}
//trigger properties of image
if (targetPanelId === "brand-img-upload") {
//$('#brand-img-upload').click();
return;
}
//trigger properties of image
if (targetPanelId === "nothing") {
return;
}
//trigger properties of image
if (targetPanelId === "brand-overlay-img-media-libraryX") {
$('#brand-img-media-library').click();
return;
}
//trigger properties of image
if (targetPanelId === "brand-overlay-img-media-libraryZ") {
$("#modal-media-library").show();
}
var scanId = $(this).closest("label").attr("id");
if (checkboxId === "tabFilter") {
return;
}
if (targetPanelId === "radio-group-bytosri-icons") {
$("#brand-svg-media-library").trigger("click");
/* $("#iconsMe").trigger("click");*/
return;
}
if (targetPanelId === "radio-group-bytosri-framez") {
$("#framesMe").trigger("click");
return;
}
if (targetPanelId === "elementaChoose") {
// Hide all tab panels
$(".thirdTab").hide();
var theID = $(this).closest("li").attr("id");
var gani = $(this).closest("label").attr("gani");
// var keyw = $(this).closest("li").attr("keyw");
$("#clickedElement").val(theID);
/* alert(theID);
return;*/
return;
}
if (targetPanelId === "frameChoose") {
// Hide all tab panels
$(".thirdTab").hide();
var theID = $(this).closest("li").attr("id");
var gani = $(this).closest("label").attr("gani");
// var keyw = $(this).closest("li").attr("keyw");
$("#clickedElement").val(theID);
$("#brand-all-frames ul.brand-accordion > li > a#" + theID).trigger('click');
$("#brand-all-frames").trigger("click");
$("#brand-frames").trigger("click");
return;
}
if (targetPanelId === "elementEffects") {
// Hide all tab panels
// Hide all tab panels
var panelID = $(this).closest("label").attr("rel");
// Hide all tab panels
$(".thirdTab").hide();
// Show the selected tab panel
$("#" + panelID).show();
$("#" + panelID).css("opacity", "1");
return;
}
$(".TheBrandRadioGroupOptions li").attr("data-selected", "false");
$(this).closest("li").attr("data-selected", "true");
if (scanId == "brand-add-textX") {
$("#brand-add-text").trigger("click");
$("#" + targetAction).trigger("click");
return;
}
// Hide all tab panels
// $(".secondTab").hide();
// Show the selected tab panel
$("." + targetPanelId).show();
$("." + targetPanelId).css("opacity", "1");
// Hide all tab panels by adding "hidden" attribute
$(".TheBrandTabPanel").attr("tabindex", "-1");
// Show the selected tab panel by removing the "hidden" attribute
$("#" + targetPanelId).attr("tabindex", "0");
$(".TheBrandTabList li").attr("aria-selected", "false");
$(this).closest("li").attr("aria-selected", "true");
// Remove the active class from all tabs
$(".TheBrandTabList li").attr("aria-selected", "false");
// Set the selected tab as active
$(this).closest("li").attr("aria-selected", "true");
return false; // Prevent the default behavior of the button
}
});
$("#brand-pan-options").show();
$("#textlayouts").trigger("click");
$("#textlayouts").trigger("click");
$("#crop-image-object-selection-proxy").hide();
});
$(document).ready(function() {
/* $("#custom-theme").val("light").change();*/
// Click event for the element with id="recents"
$('#recents_button').click(function() {
// Click on the button with id="add_design"
$('#add_design').click();
$('#mydesignstab').click();
});
// Click event for the element with id="recents"
$('#templates_button').click(function() {
// Click on the button with id="add_design"
$('#add_design').click();
$('#templatestab').click();
});
// Click event for the element with id="recents"
$('#blank_button').click(function() {
// Click on the button with id="add_design"
$('#add_design').click();
$('#blanktab').click();
});
// Click event for the element with id="recents"
$('#image_button').click(function() {
// Click on the button with id="add_design"
$('#add_design').click();
$('#imagetab').click();
});
// On first full page load, auto-click Card-Design
// $(window).on('load', function() {
// try {
// var key = 'brand_first_load_card_design';
// if (!sessionStorage.getItem(key)) {
// var $btn = $('#Card-Design').find('button');
// if ($btn.length) { $btn.trigger('click'); }
// sessionStorage.setItem(key, '1');
// }
// } catch (e) {
// var $btn2 = $('#Card-Design').find('button');
// if ($btn2.length) { $btn2.trigger('click'); }
// }
// });
});
</script>
<script>
/* Scrub-able labels — drag a slider label left/right to change its value (Figma-style) */
(function() {
// Inject cursor CSS — works regardless of when labels appear in DOM
var style = document.createElement('style');
style.textContent = '.slider-label { cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important; }';
document.head.appendChild(style);
var drag = null;
// Event delegation on document — handles labels inside modals or dynamically added panels
document.addEventListener('mousedown', function(e) {
// Walk up from actual click target (handles SVG children inside the label)
var label = e.target.closest ? e.target.closest('.slider-label') : null;
if (!label) return;
// Find associated input — walk up from label's parent
var input = null;
var node = label.parentElement;
while (node && node !== document.body) {
input = node.querySelector('input[type="range"], input.brand-slider');
if (input) break;
node = node.parentElement;
}
if (!input) return;
e.preventDefault();
var min = parseFloat(input.min) || 0;
var max = parseFloat(input.max);
if (!isFinite(max)) max = 100;
var step = parseFloat(input.step) || 1;
var range = max - min || 100;
drag = {
input : input,
startX : e.clientX,
startVal : parseFloat(input.value) || 0,
min : min,
max : max,
step : step,
speed : range / 200 // 200px drag = full range
};
document.body.style.cursor = 'ew-resize';
}, true); // capture phase so we run before anything else
document.addEventListener('mousemove', function(e) {
if (!drag) return;
var fineSpeed = e.shiftKey ? drag.speed / 10 : drag.speed;
var raw = drag.startVal + (e.clientX - drag.startX) * fineSpeed;
var clamped = Math.min(drag.max, Math.max(drag.min, raw));
var decimals = (drag.step.toString().split('.')[1] || '').length;
drag.input.value = parseFloat((Math.round(clamped / drag.step) * drag.step).toFixed(decimals));
drag.input.dispatchEvent(new Event('input', { bubbles: true }));
drag.input.dispatchEvent(new Event('change', { bubbles: true }));
e.preventDefault();
});
document.addEventListener('mouseup', function() {
if (!drag) return;
drag = null;
document.body.style.cursor = '';
});
})();
</script>
<script>
/* ================================================================
MOBILE BOTTOM SHEET — Canva/Figma-level UX
portrait+narrow only. Works alongside brand.js show/hide.
Snap points: MID (42vh) ↔ FULL (82vh). Velocity-aware drag.
================================================================ */
(function () {
/* ── guard: desktop gets none of this ── */
var root = document.querySelector('.TheBrandRoot');
if (!root) return;
var env = root.getAttribute('data-env') || '';
if (!/portrait/.test(env) || !/narrow/.test(env)) return;
var panel = document.getElementById('brand-icon-panel');
var toggle = document.getElementById('brand-toggle-left');
if (!panel || !toggle) return;
/* ── snap heights (vh converted to px at runtime) ── */
var SNAP = {
MID: 0.42, /* default open — canvas visible above */
FULL: 0.82 /* expanded — full browsing mode */
};
function snapPx(ratio) { return Math.round(window.innerHeight * ratio); }
/* ── backdrop ── */
var bd = document.createElement('div');
bd.id = 'brand-mobile-backdrop';
document.body.appendChild(bd);
bd.addEventListener('click', function () { hide(); });
/* ── helpers ── */
function setHeight(px, animate) {
if (!animate) panel.classList.add('bs-dragging');
panel.style.setProperty('height', px + 'px', 'important');
if (!animate) {
/* re-enable transition next frame */
requestAnimationFrame(function () {
panel.classList.remove('bs-dragging');
});
}
}
function showBackdrop(on) {
if (on) {
bd.style.display = 'block';
requestAnimationFrame(function () { bd.classList.add('bs-visible'); });
} else {
bd.classList.remove('bs-visible');
setTimeout(function () { bd.style.display = 'none'; }, 260);
}
}
function isVisible() {
return panel.style.display !== 'none' && panel.offsetParent !== null;
}
/* Call brand.js's toggle; it will call jQuery show/hide */
function hide() { if (!toggle.classList.contains('closed')) toggle.click(); }
function open() { if (toggle.classList.contains('closed')) toggle.click(); }
/* ── FAB styling & centering ── */
toggle.classList.add('bsm-fab');
/* Inject a text label into the FAB */
var fabLabel = document.createElement('span');
fabLabel.className = 'bsm-fab-text';
fabLabel.textContent = 'Tools';
toggle.appendChild(fabLabel);
/* Keep FAB centred — brand.js writes inline style.left = "Xpx" */
var fabLock = false;
function centerFAB() {
if (fabLock) return;
fabLock = true;
/* Write inline so it beats everything */
toggle.style.setProperty('left', '50%', 'important');
toggle.style.setProperty('right', 'auto', 'important');
toggle.style.setProperty('top', 'auto', 'important');
fabLock = false;
}
centerFAB();
new MutationObserver(function () {
/* brand.js just repositioned FAB — snap it back */
requestAnimationFrame(centerFAB);
}).observe(toggle, { attributes: true, attributeFilter: ['style'] });
/* ── Watch brand.js show/hide → update state ── */
new MutationObserver(function () {
var visible = panel.style.display !== 'none';
if (visible) {
/* Replay entrance animation */
panel.style.animationName = 'none';
requestAnimationFrame(function () {
panel.style.animationName = '';
setHeight(snapPx(SNAP.MID), true);
});
showBackdrop(true);
toggle.classList.add('bsm-open');
fabLabel.textContent = 'Close';
} else {
showBackdrop(false);
toggle.classList.remove('bsm-open');
fabLabel.textContent = 'Tools';
/* Reset height so next open starts at MID */
panel.style.setProperty('height', '42vh', 'important');
}
}).observe(panel, { attributes: true, attributeFilter: ['style'] });
/* ── Inject drag handle element ── */
var handle = document.createElement('div');
handle.className = 'bs-handle';
panel.insertBefore(handle, panel.firstChild);
/* ── Drag-to-resize ── */
var drag = null;
handle.addEventListener('touchstart', function (e) {
if (e.touches.length !== 1) return;
e.preventDefault();
handle.classList.add('dragging');
var t = e.touches[0];
drag = {
startY: t.clientY,
startH: panel.getBoundingClientRect().height,
lastY: t.clientY,
lastT: Date.now(),
vel: 0 /* px/ms, negative = dragging up = growing */
};
panel.classList.add('bs-dragging');
}, { passive: false });
document.addEventListener('touchmove', function (e) {
if (!drag) return;
e.preventDefault();
var t = e.touches[0];
var now = Date.now();
var dt = now - drag.lastT || 1;
var dy = t.clientY - drag.lastY; /* +ve = finger moved down */
drag.vel = dy / dt; /* px/ms */
drag.lastY = t.clientY;
drag.lastT = now;
/* New height: dragging UP (negative dy) increases height */
var newH = drag.startH + (drag.startY - t.clientY);
newH = Math.max(80, Math.min(window.innerHeight * 0.92, newH));
panel.style.setProperty('height', newH + 'px', 'important');
}, { passive: false });
document.addEventListener('touchend', function () {
if (!drag) return;
var finalH = panel.getBoundingClientRect().height;
var vel = drag.vel; /* px/ms: +ve = moving down, −ve = moving up */
drag = null;
handle.classList.remove('dragging');
panel.classList.remove('bs-dragging');
/* Snap logic — velocity beats distance */
var midPx = snapPx(SNAP.MID);
var fullPx = snapPx(SNAP.FULL);
var target;
if (vel > 0.6) {
/* Fast flick down → close */
hide(); return;
} else if (vel < -0.4) {
/* Fast flick up → expand to FULL */
target = fullPx;
} else {
/* Snap to nearest */
target = (Math.abs(finalH - midPx) < Math.abs(finalH - fullPx))
? midPx : fullPx;
/* If dragged below half of MID → close */
if (finalH < midPx * 0.55) { hide(); return; }
}
setHeight(target, true);
});
})();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.1.0/fontfaceobserver.standalone.js"></script>
<script src="https://www.thebrand.ai/wowX/beautiful/context-menu.js?250563"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
/*
// LEGACY INITIALIZATION DISABLED FOR MULTI-PAGE MIGRATION
// Poll for canvas availability
var attempts = 0;
var maxAttempts = 50; // 5 seconds
var checkCanvas = setInterval(function() {
attempts++;
// Try to find the canvas instance
// 1. Check global 'canvas' variable (most common)
// 2. Check if attached to the DOM element
var fabricCanvas = window.canvas || window.brandCanvas;
if (!fabricCanvas) {
// Try to find a global variable that looks like a fabric canvas
for (var key in window) {
if (window[key] && window[key].renderAll && window[key].getObjects && window[key].upperCanvasEl) {
fabricCanvas = window[key];
break;
}
}
}
if (fabricCanvas) {
clearInterval(checkCanvas);
console.log('Fabric canvas found, initializing context menu in 10seconds...');
// Lazy load images for brand-lyts after canvas is ready
var lazyImages = document.querySelectorAll('.lazy-fabric');
lazyImages.forEach(function(img) {
var src = img.getAttribute('data-src');
if (src) {
img.setAttribute('src', src);
img.classList.remove('lazy-fabric');
img.classList.add('lazy', 'entered', 'loaded');
img.setAttribute('data-ll-status', 'loaded');
}
});
if (window.initContextMenu) {
setTimeout(() => {
window.contextMenuInstance = window.initContextMenu(fabricCanvas);
}, 10000);
}
} else if (attempts >= maxAttempts) {
clearInterval(checkCanvas);
console.warn('Could not find Fabric canvas instance for Context Menu');
}
}, 100);
*/
});
</script>
<style>
@font-face {
font-family: 'Poppins';
src: url('https://www.thebrand.ai//assets/newfont/28bf1b32bcb3ed89393f5150d063bdd7lora-regular.ttf') format('truetype');
}
@font-face {
font-family: 'Lora Bold';
src: url('https://www.thebrand.ai//assets/newfont/01f462c6b328299737d999f47db4f719lora-bold.ttf') format('truetype');
}
</style>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #fff;
/* Keep background white */
}
}
</style>
<!-- Atelier Design System fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,600&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap" rel="stylesheet">
<!-- Atelier Design System overrides -->
<link rel="stylesheet" href="atelier.css">
</head>
<body id="brand" class="light-theme" data-module="ScrollTracker" class="page-landing" data-scroll="" data-scroll-progress="0">
<input type="text" id="clickedElement" value="shape-badges" style="display: none">
<input type="text" id="templateType" value="normal" style="display: none">
<input type="text" id="designLoaded" value="0" autocomplete="off" style="display: none">
<input type="text" id="designID" value="68175?mobile=yes" autocomplete="off" style="display: none">
<input type="text" id="designThemeid" value="Page 1" autocomplete="off" style="display: none">
<input type="text" id="designDefault" value="Page 1" autocomplete="off" style="display: none">
<input type="text" id="userID" value="6667" autocomplete="off" style="display: none">
<input type="text" id="colorID" value='d20962,f47721,7ac143,00a78e,00bce4,7d3f98,#888,#00F,#FFF,#555' autocomplete="off" style="display: none">
<input type="text" id="adminMe" value="0" autocomplete="off" style="display: none">
<div class="content-gutter content-limit-wide" style="padding-top: 10px;">
<!-- Page Loader START -->
<div id="brand-main-loader" class="brand-loader-wrap">
<div class="brand-loader-inner">
<div class="brand-loader-panel" role="status" aria-live="polite" aria-label="Loading editor">
<div class="brand-loader-top">
<div class="brand-loader-mark" aria-hidden="true">
<span class="brand-loader-mark-dot"></span>
</div>
<div class="brand-loader-headings">
<div class="brand-loader-kicker">Brand AI</div>
<div class="brand-loader-title">Preparing your editor</div>
</div>
<div class="brand-loader-spinner" aria-hidden="true">
<div class="brand-loader"></div>
</div>
</div>
<div class="brand-loader-progress" aria-hidden="true"><span></span></div>
<div class="brand-dyk">
<div class="brand-dyk-label">Did you know?</div>
<div class="brand-dyk-fact" id="brand-didyouknow-fact"></div>
</div>
</div>
</div>
</div>
<!-- Page Loader END -->
<!--
<div class="radio-set brand-counter" style="margin-bottom:10px;display: flex; justify-content: center;align-items: center; ">
<label id="brand-img-zoom-out" aria-label="Zoom Out" class="counter-minus TheBrandButton TheBraEndButtonIconOnly resetElements" title="Zoom out">
<svg class="TheBrandButtonIcon" style="width:20px;height: 20px;"
width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round"><g><path
stroke="currentColor" stroke-width=".125em"
d="M9 12 h6"></path></g></svg>
</label>
<label style="display: none;" id="brand-img-zoom-counter" aria-label="Counter" class="brand-counter TheBrandButton TheBrandButtonIconOnly" title="Counter">
</label>
<input style="display: none" id="brand-img-zoom" class="brand-form-field numeric-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="text" style="width: 25px; font-size: 10px" value="100" autocomplete="off" data-min="10" data-max="200" data-step="5">
<label id="brand-img-zoom-in" aria-label="Zoom in" class="counter-plus TheBrandButton TheBrandButtonIconOnly resetElements" title="Zoom in">
<svg class="TheBrandButtonIcon" style="width:20px;height: 20px;" width="24" height="24"
viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round"><g><path
stroke="currentColor" stroke-width=".125em"
d="M8 12 h8 M12 8 v8"></path></g></svg>
</label>
</div>
--> <div class="hero-demo">
<input type="checkbox" value="api" name="api" id="api-toggle">
<input type="radio" value="desktop" name="context" id="context-auto" checked="">
<input type="radio" value="mobile" name="context" id="context-mobile">
<input type="radio" value="night" name="theme" id="theme-night">
<input type="radio" selected value="day" name="theme" id="theme-day">
<script>
/* try {
const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
window['theme-night'].checked = prefersDarkTheme;
window['theme-day'].checked = !prefersDarkTheme;
}
catch (err) {
window['theme-day'].checked = true;
}*/
window['theme-day'].checked = true;
</script>
<div class="radio-sets" id="brand-top-barX">
<div class="radio-set" >
<!--<label style="margin-left:0px; padding-left:12px" >
<a href="https://www.thebrand.ai"> <img style="height:15px;" src="https://www.thebrand.ai/images/images/logoXMini.png" alt="logo"></a>
</label> --> <label for="api-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M4 6a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 4 6Zm0 6a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 4 12Zm0 6a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 4 18Zm16.78-1.47a.75.75 0 0 1-1.061 0l-3.293-3.293a1.75 1.75 0 0 1 0-2.474L19.72 7.47a.75.75 0 0 1 1.06 1.06l-3.292 3.293a.25.25 0 0 0 0 .354l3.293 3.293a.75.75 0 0 1 0 1.06Z"></path></svg>
</label>
</div>
<div class="radio-set">
<a id="brand-menu-file" type="button" autocomplete="off" style="border:0px; color:#ffffff">
<svg class="TheBrandButtonIcon"width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 8h12M6 12h12M6 16h12"></path></svg>
<span>File</span>
</a>
<div id="brand-menu-dropdown" class="brand-dropdown-wrap">
<div class="menu-menu-container">
<ul class="brand-dropdown" id="brand-file-menu">
<li><a id="add_design"><span class="material-icons">add_circle</span> Add Design</a></li>
<li><a id="brand-file-save"><span class="material-icons">save</span> Save Design</a></li>
<li><a id="brand-file-download"><span class="material-icons">download</span> Download</a></li>
<li><a id="brand-file-present"><span class="material-icons">slideshow</span> Present</a></li>
<li class="brand-sep" role="separator"></li>
<li><a class="brand-img-layerMe"><span class="material-icons">layers</span> Show Layers</a></li>
<li><a id="brand-history" class="brand-modal-open" data-target="#modal-history"><span class="material-icons">history</span> Show History</a></li>
<li><a id="brand-file-editor-settings"><span class="material-icons">settings</span> Editor Settings</a></li>
<li class="brand-sep" role="separator"></li>
<li><a id="brand-file-rulers"><span class="material-icons">square_foot</span> Show/Hide Rulers</a></li>
<li><a id="brand-file-clear-guides"><span class="material-icons">clear</span> Clear Guides</a></li>
<li><a id="panIconTitle"><span class="material-icons">pan_tool</span> Pan</a></li>
<li class="brand-sep" role="separator"></li>
<li><a id="brand-file-bg-color"><span class="material-icons">brush</span> Change Background Color</a></li>
<li><a id="brand-file-bg-image"><span class="material-icons">photo_library</span> Change Background Image</a></li>
<li class="brand-sep" role="separator"></li>
<li><a id="brand-file-crop"><span class="material-icons">crop</span> Crop Design</a></li>
<li><a id="brand-file-resize"><span class="material-icons">aspect_ratio</span> Resize Design</a></li>
<li><a id="brand-file-rotate"><span class="material-icons">refresh</span> Rotate Design</a></li>
<li class="brand-sep" role="separator"></li>
<li><a id="brand-file-delete"><span class="material-icons">delete</span> Delete Design</a></li>
</ul>
</div>
</div>
<a id="brand-new" type="button" class="brand-modal-open" autocomplete="off" data-target="#modal-add-new" style="border:0px; color:#ffffff">
<svg class="TheBrandButtonIcon" width="24px" height="24px" viewBox="0 -52 1128 1128" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M473.184 356.632c-23.048-28.336-64.616-32.632-92.816-9.672-28.248 23.048-32.568 64.528-9.616 92.84l473.328 547.152c22.928 28.248 64.376 32.488 92.776 9.552 28.224-22.992 32.512-64.528 9.528-92.752l-473.2-547.12z" fill="#0092D2"></path><path d="M151.4 65.976l-1.056-0.472 54.912 223.104L52.68 460.32l229.128 16.664 116.12 198.2 56.8-139.376 389.6 450.344c22.224 27.4 61.792 31.984 90.072 11.32L151.4 65.976z" fill="#0085BF"></path><path d="M150.104 66.304L360.56 158.4 555.752 37.224l-22.52 228.6L708.8 414.016l-224.416 49.24-86.664 212.728-116.152-198.2-229.12-16.672 152.6-171.712z" fill="#F5B146"></path><path d="M276.192 225.08l95.368 41.712 88.424-54.888-10.2 103.576 79.568 67.144-101.704 22.312-39.28 96.368-52.616-89.816-103.808-7.52 69.144-77.816z" fill="#E5226B"></path><path d="M484.384 463.256l0.528-0.112L152.072 67.152l-1.208-0.528 54.856 222.92-152.48 171.624 228.328 16.616 0.064 0.08 0.648 0.064 115.68 197.464z" fill="#EF962F"></path><path d="M434.56 403.408L289.6 230.928l-13.408-5.848 24.896 101.072-69.144 77.816 103.808 7.52 52.616 89.816 39.28-96.368z" fill="#C9005B"></path></svg>
<span>New</span>
</a>
</div>
<div class="radio-set" >
<label id="layoutStatus" style="border:0px; box-shadow:none;" data-status="disconnected">
<span class="material-icons" style="font-size:14px;width:14px;height:14px;margin-right:1px;color:#9CA3AF">cloud_off</span>
<span>Disconnected</span>
</label>
<span id="userCount" style="margin-left:8px;font-size:12px;"></span>
</div>
<!-- Presence Bar -->
<div class="radio-set" id="brand-presence-bar" style="margin-right: 5px;display:flex; align-items:center; margin-left:10px; padding: 0 5px;">
</div>
<div class="radio-set brand-counter" style="display: none ;"> <label id="brand-img-zoom-out" aria-label="Zoom Out" class="counter-minus TheBrandButton TheBraEndButtonIconOnly resetElements" title="Zoom out">
<svg class="TheBrandButtonIcon" style="width:20px;height: 20px;"
width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round"><g><path
stroke="currentColor" stroke-width=".125em"
d="M9 12 h6"></path></g></svg>
</label>
<label style="display: none;" id="brand-img-zoom-counter" aria-label="Counter" class="brand-counter TheBrandButton TheBrandButtonIconOnly" title="Counter">
</label>
<input style="display: none" id="brand-img-zoom" class="brand-form-field numeric-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="text" style="width: 25px; font-size: 10px" value="50" autocomplete="off" data-min="10" data-max="200" data-step="5">
<label id="brand-img-zoom-in" aria-label="Zoom in" class="counter-plus TheBrandButton TheBrandButtonIconOnly resetElements" title="Zoom in">
<svg class="TheBrandButtonIcon" style="width:20px;height: 20px;" width="24" height="24"
viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round"><g><path
stroke="currentColor" stroke-width=".125em"
d="M8 12 h8 M12 8 v8"></path></g></svg>
</label>
<label class="TheBrandButton TheBrandButtonIconOnly resetElements brand-undo" id="brand-undo"
title="Undo" aria-label="Undo">
<svg class="TheBrandButtonIcon" width="24" height="24"
viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round"><g><g fill="none"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
stroke="currentColor"
stroke-width=".125em"><path
d="M10 8h4c2.485 0 5 2 5 5s-2.515 5-5 5h-4"></path><path
fill="currentColor" d="M5 8l4-3v6z"></path></g></g></svg>
</label>
<label class="TheBrandButton TheBrandButtonIconOnly resetElements brand-redo" id="brand-redo"
title="Redo" aria-label="Redo" >
<svg class="TheBrandButtonIcon" width="24" height="24"
viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round"><g><g fill="none"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
stroke="currentColor"
stroke-width=".125em"><path
d="M14 8h-4c-2.485 0-5 2-5 5s2.515 5 5 5h4"></path><path
fill="currentColor" d="M19 8l-4-3v6z"></path></g></g></svg>
</label>
<!--<label class="TheBrandButton TheBrandButtonIconOnly brand-modal-open tooltip" id="brand-history"
data-title="History" autocomplete="off" data-target="#modal-history" >
<span class="material-icons" style="font-size: 15px; width: 15px; height: 15px; line-height: 15px;display: inline-block;">history</span
</label>-->
</div>
<!-- <div class="radio-set">
<label for="theme-night" aria-label="Dark theme">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</label>
<label for="theme-day" aria-label="Bright theme">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</label>
</div>-->
</div>
<style>
#brand-menu-dropdown {
display: none;
position: fixed;
left: 20px!important;
top: 55px!important;
z-index: 99999;
pointer-events: auto;
animation: fadeIn 0.18s ease-out;
height: auto !important;
overflow: visible !important;
}
#brand-menu-dropdown .menu-menu-container {
position: relative;
min-width: 260px;
max-width: min(380px, calc(100vw - 40px));
max-height: none !important;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
padding: 8px;
overflow: visible !important;
backdrop-filter: blur(10px);
}
/* removed pointer for a cleaner look */
#brand-file-menu {
position: static;
display: block;
margin: 0;
padding: 4px;
list-style: none;
}
#brand-file-menu li {
padding: 0;
}
#brand-file-menu li a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
color: #111827;
text-decoration: none;
border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease;
}
#brand-file-menu li a:hover {
background: rgba(122, 69, 255, 0.08);
color: #0f172a;
}
#brand-file-menu li a:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(122, 69, 255, 0.25);
}
#brand-file-menu .material-icons {
font-size: 18px;
width: 20px;
color: #6b7280;
}
/* separators for hierarchy */
.brand-sep { height: 1px; margin: 6px 8px; background: rgba(17, 24, 39, 0.08); }
/* danger style for delete */
#brand-file-menu a#brand-file-delete { color: #b91c1c; }
#brand-file-menu a#brand-file-delete:hover { background: rgba(185, 28, 28, 0.10); color: #7f1d1d; }
#brand-top-barX .radio-set {
}
#brand-top-barX #userCount {
align-self: center;
line-height: 1;
}
/* === Animation === */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.presence-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: -8px;
border: 2px solid #fff;
position: relative;
background-color: #ccc;
color: #fff;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-weight: bold;
cursor: title;
transition: transform 0.2s;
}
.presence-avatar:hover {
z-index: 10;
transform: translateY(-2px);
}
.presence-avatar.owner::after {
content: "👑";
position: absolute;
top: -8px;
right: -4px;
font-size: 10px;
background: #fff;
border-radius: 50%;
}
</style>
<script>
(function(){
if (typeof window !== 'undefined' && window.jQuery) {
jQuery(function($){
var $toggle = $('#brand-menu-file');
var $drop = $('#brand-menu-dropdown');
var $menu = $('#brand-file-menu');
var isOpen = false;
function position(){
if (!$toggle.length) return;
var rect = $toggle[0].getBoundingClientRect();
var top = Math.round(rect.bottom + 6);
$drop.css({ position:'fixed', zIndex:999999999, top: top, left: 0 });
}
function open(){
if (!$drop.data('appended')) { $('body').append($drop); $drop.data('appended', true); }
position();
$drop.css('z-index', 99999).stop(true,true).fadeIn(140);
$menu.stop(true,true).fadeIn(140);
isOpen = true;
// Reflect current ruler visibility in the File menu label using RG menu behavior
try {
var rulersVisible = $('#ruler-h').is(':visible') && $('#ruler-v').is(':visible');
var labelTxt = rulersVisible ? 'Hide Rulers' : 'Show Rulers';
var $rItem = $('#brand-file-rulers');
if ($rItem.length) {
$rItem.html('<span class="material-icons">square_foot</span> ' + labelTxt);
}
} catch (err) { /* noop */ }
}
function close(){
$menu.stop(true,true).fadeOut(120);
$drop.stop(true,true).fadeOut(120);
isOpen = false;
}
$toggle.on('click', function(e){
e.preventDefault();
e.stopPropagation();
if (isOpen) { close(); } else { open(); }
});
$drop.on('click', function(e){ e.stopPropagation(); });
$(document).on('click', function(e){
if (!$(e.target).closest('#brand-menu-file, #brand-menu-dropdown').length) { close(); }
});
$(window).on('resize scroll', function(){ if (isOpen) { position(); } });
$(document).on('keydown', function(e){ if (e.key === 'Escape' && isOpen) { close(); } });
$('#add_design').on('click', function(){
$('#brand-new').trigger('click');
$drop.hide();
});
$('#brand-file-save').on('click', function(){
$('#brand-save').trigger('click');
setTimeout(function(){ $('#brand-json-save').trigger('click'); }, 100);
$drop.hide();
});
$('#brand-file-download').on('click', function(){
$('#brand-save').trigger('click');
setTimeout(function(){ $('#modal-save .brand-tabs-menu li[data-target="#modal-tab-download"]').trigger('click'); }, 100);
$drop.hide();
});
$('#brand-file-present').on('click', function(){
try { if (window.BrandPresentation && typeof window.BrandPresentation.enter === 'function') { window.BrandPresentation.enter(); } } catch(e) {}
$drop.hide();
});
$('#brand-file-editor-settings').on('click', function(){
$('#brand-btn-settings').trigger('click');
$drop.hide();
});
$('.brand-img-layerMe').on('click', function(){
$('#brand-btn-layers-modal').trigger('click');
setTimeout(function(){ $('#brand-json-save').trigger('click'); }, 100);
$drop.hide();
});
$('#brand-history').on('click', function(){
var $btn = $(this);
var target = $btn.data('target') || '#modal-history';
$('.brand-modal-open[data-target="'+target+'"]').first().trigger('click');
$drop.hide();
});
$('#panIconTitle').on('click', function(){
$('#brand-img-drag').trigger('click');
$drop.hide();
});
$('#brand-file-rulers').on('click', function(){
var $menuBtn = $('#brand-ruler-icon .menu-btn');
if ($menuBtn.length) {
$menuBtn.trigger('mousedown');
setTimeout(function(){
var $items = $('#brand-ruler-icon .rg-menu a');
var $hide = $items.filter(function(){ return ($(this).find('.desc').text().toLowerCase().indexOf('hide rulers') > -1); });
var $show = $items.filter(function(){ return ($(this).find('.desc').text().toLowerCase().indexOf('show rulers') > -1); });
var $target = $hide.length ? $hide.first() : $show.first();
if ($target.length) { $target.trigger('mousedown'); }
}, 80);
}
$drop.hide();
});
$('#brand-file-clear-guides').on('click', function(){
var $menuBtn = $('#brand-ruler-icon .menu-btn');
if ($menuBtn.length) {
$menuBtn.trigger('mousedown');
setTimeout(function(){
var $items = $('#brand-ruler-icon .rg-menu a');
var $clear = $items.filter(function(){ return ($(this).find('.desc').text().toLowerCase().indexOf('clear guides') > -1); });
if ($clear.length) { $clear.first().trigger('mousedown'); }
}, 80);
}
$drop.hide();
});
$('#brand-file-bg-color').on('click', function(){
$('#Card-Design').trigger('click');
setTimeout(function(){
var $item = $('li.opened > a.brand-title:contains("Background Color")');
if (!$item.length) {
$item = $('#brand-adjust .brand-accordion a.brand-title:contains("Background Color")');
}
if ($item.length) { $item.first().trigger('click'); }
}, 120);
setTimeout(function(){ $('#custom-image-background').trigger('focus').trigger('click'); }, 220);
$drop.hide();
});
$('#brand-file-bg-image').on('click', function(){
$('#Card-Design').trigger('click');
setTimeout(function(){
var $item = $('li.opened > a.brand-title:contains("Background Image")');
if (!$item.length) { $item = $('#brand-adjust .brand-accordion a.brand-title:contains("Background Image")'); }
if ($item.length) { $item.first().trigger('click'); }
}, 120);
setTimeout(function(){ $('#brand-bg-media-library').trigger('click'); }, 220);
$drop.hide();
});
$('#brand-file-crop').on('click', function(){
$('#Card-Design').trigger('click');
setTimeout(function(){ $('#proxy-crop-style').trigger('focus'); }, 120);
$drop.hide();
});
$('#brand-file-resize').on('click', function(){
$('#Card-Design').trigger('click');
setTimeout(function(){ $('#proxy-resize-width').trigger('focus'); }, 120);
$drop.hide();
});
$('#brand-file-rotate').on('click', function(){
$('#Card-Design').trigger('click');
setTimeout(function(){ $('#brand-tool-rotate-right').trigger('focus'); }, 120);
$drop.hide();
});
});
}
})();
</script>
<div class="demo" style="">
<div data-module="EditorOptions" data-context="@media (min-width:32em)" style="min-width: 300px!important;">
<div id="preset-sidebar">
<style>
#preset-sidebar { display:block; }
#preset-sidebar :root{ --bg-start:#f6f7fb; --bg-end:#f0f6fb; --sidebar-width:110px; --collapsed-width:110px; --accent:#7a45ff; --muted:#6b6b7a; --card-bg:rgba(121,84,255,0.08); --soft-lav:linear-gradient(180deg,#f7f6fb 0%, #f0f6fb 100%); --light-border:rgba(99,99,120,0.06); --radius:12px; }
#preset-sidebar *{ box-sizing:border-box }
#preset-sidebar .app{ display:flex; min-height:100%; }
#preset-sidebar .sidebar{ width:var(--sidebar-width); min-width:var(--sidebar-width); background:var(--soft-lav); border-right:1px solid var(--light-border); padding:20px 0px; display:flex; flex-direction:column; gap:18px; position:relative; }
#preset-sidebar .left-col{ width:75px; min-width:75px; display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:10px; }
#preset-sidebar .btn-create{ display:flex; align-items:center; gap:10px; background:linear-gradient(180deg, #03a9f4 0%, #0288d1 100%); color:white; padding:10px 12px; border-radius:999px; box-shadow:0 6px 18px rgba(3,169,244,0.16), inset 0 -1px 0 rgba(255,255,255,0.06); cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease; font-weight:600; width:fit-content; }
#preset-sidebar .btn-create:active{ transform:translateY(1px) }
#preset-sidebar .btn-create svg{ width:18px; height:18px }
#preset-sidebar .nav-item{ width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; padding:10px 0; border-radius:10px; color:var(--muted); cursor:pointer; transition:background .14s ease, color .14s ease; text-align:center; }
#preset-sidebar .nav-item:hover{ background: rgba(122,69,255,0.06); color:#2b2b3a }
#preset-sidebar .nav-item svg{ width:22px; height:22px }
#preset-sidebar .label{ font-size:11px; font-weight:600; color:#555; line-height:1.1 }
#preset-sidebar .ps-content{ flex:0 300px; max-width:300px; width:300px; padding:22px }
#preset-sidebar .project-card {
width: 100%;
/* background: linear-gradient(180deg, rgba(250,250,255,1) 0%, rgba(248,250,255,1) 100%); */
/* border-radius: 12px; */
padding: 14px;
/* box-shadow: 0 8px 30px rgba(20,32,64,0.03); */
border: 1px solid rgba(99,99,120,0.04);
max-width: 300px;
}
#preset-sidebar .section-title{ font-size:13px; color:#4b4b5d; margin:8px 0; display:flex; align-items:center; gap:8px }
#preset-sidebar .project-card{ width:100%; background: linear-gradient(180deg, rgba(250,250,255,1) 0%, rgba(248,250,255,1) 100%); border-radius:12px; padding:14px; box-shadow:0 8px 30px rgba(20,32,64,0.03); border:1px solid rgba(99,99,120,0.04); max-width:520px }
#preset-sidebar .project-list{ margin-top:8px; display:flex; flex-direction:column; gap:8px; width:420px }
#preset-sidebar .project-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:#3b3b4a; background:transparent; transition:all .12s ease }
#preset-sidebar .project-list a.project-item{ color:#3b3b4a; text-decoration:none }
#preset-sidebar .project-list .project-item .project-name{ color:#3b3b4a }
#preset-sidebar .nav-item .label{ color:#3b3b4a }
#preset-sidebar .project-item:hover{ background:rgba(122,69,255,0.04); transform:translateY(-1px) }
#preset-sidebar .project-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px }
#preset-sidebar .muted{ color:#7b7b8b; font-size:13px }
#preset-sidebar .icon-muted{ opacity:0.9 }
#preset-sidebar .divider{ height:1px; background:var(--light-border); margin:6px 0; border-radius:2px }
@media (max-width:980px){ #preset-sidebar .project-list{ width:320px } }
/* vertical variant */
#preset-sidebar .btn-create{ width:100%; flex-direction:column; justify-content:center; gap:6px; padding:12px 0; border-radius:12px }
#preset-sidebar .btn-create svg{ width:22px; height:22px }
</style>
<div class="app">
<aside class="sidebar">
<div class="left-col">
<button class="btn-create" id="add_design">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="white" stroke-width="2" stroke-linecap="round" /></svg>
<span class="label" style="color:white;">Create</span>
</button>
<div class="nav-item">
<svg viewBox="0 0 24 24" fill="none">
<path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="1.5"/>
</svg>
<span class="label" id="home_label">Home</span>
</div>
<div class="nav-item" id="projects_nav">
<svg viewBox="0 0 24 24" fill="none">
<path d="M3 7h18v12H3z" stroke="currentColor" stroke-width="1.5"/>
</svg>
<span class="label">Projects</span>
</div>
<div class="nav-item" id="brand_nav">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 2l3 6 6 .9-4.5 3.9L19 20l-7-4-7 4 1.5-7.2L2 8.9 8 8 12 2z" stroke="currentColor" stroke-width="1.1"/>
</svg>
<span class="label">Brand</span>
</div>
<div class="nav-item" id="manage_nav">
<span class="material-icons">dashboard</span>
<span class="label">Workspace</span>
</div>
</div>
</aside>
<div class="ps-content" role="region">
<div class="projects-column">
<div class="section-title">
<strong style="font-size:18px;">All projects</strong>
</div>
<fieldset style="margin-bottom: 10px;margin-top:0px;" class="control radio-set">
<div class="control">
<label class="brand-img-layerMe" aria-label="Browse">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z" fill="#1C274C"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 8C2 8.49355 2.99294 8.89073 4.97883 9.68508L7.7873 10.8085C9.77318 11.6028 10.7661 12 12 12C13.2339 12 14.2268 11.6028 16.2127 10.8085L19.0212 9.68508C21.0071 8.89073 22 8.49355 22 8C22 7.50645 21.0071 7.10927 19.0212 6.31492L16.2127 5.19153C14.2268 4.39718 13.2339 4 12 4C10.7661 4 9.77318 4.39718 7.7873 5.19153L4.97883 6.31492C2.99294 7.10927 2 7.50645 2 8Z" fill="#1C274C"></path> <path opacity="0.7" d="M5.76613 10L4.97883 10.3149C2.99294 11.1093 2 11.5065 2 12C2 12.4935 2.99294 12.8907 4.97883 13.6851L7.7873 14.8085C9.77318 15.6028 10.7661 16 12 16C13.2339 16 14.2268 15.6028 16.2127 14.8085L19.0212 13.6851C21.0071 12.8907 22 12.4935 22 12C22 11.5065 21.0071 11.1093 19.0212 10.3149L18.2339 10L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L5.76613 10Z" fill="#1C274C"></path> <path opacity="0.4" d="M5.76613 14L4.97883 14.3149C2.99294 15.1093 2 15.5065 2 16C2 16.4935 2.99294 16.8907 4.97883 17.6851L7.7873 18.8085C9.77318 19.6028 10.7661 20 12 20C13.2339 20 14.2268 19.6028 16.2127 18.8085L19.0212 17.6851C21.0071 16.8907 22 16.4935 22 16C22 15.5065 21.0071 15.1093 19.0212 14.3149L18.2339 14L16.2127 14.8085C14.2268 15.6028 13.2339 16 12 16C10.7661 16 9.77318 15.6028 7.7873 14.8085L5.76613 14Z" fill="#1C274C"></path> </g></svg>
</label>
</div>
<div class="control">
<label class="brand-modal-open" id="brand-history"
data-title="History" autocomplete="off" data-target="#modal-history">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.07868 5.06891C8.87402 1.27893 15.0437 1.31923 18.8622 5.13778C22.6824 8.95797 22.7211 15.1313 18.9262 18.9262C15.1312 22.7211 8.95793 22.6824 5.13774 18.8622C2.87389 16.5984 1.93904 13.5099 2.34047 10.5812C2.39672 10.1708 2.775 9.88377 3.18537 9.94002C3.59575 9.99627 3.88282 10.3745 3.82658 10.7849C3.4866 13.2652 4.27782 15.881 6.1984 17.8016C9.44288 21.0461 14.6664 21.0646 17.8655 17.8655C21.0646 14.6664 21.046 9.44292 17.8015 6.19844C14.5587 2.95561 9.33889 2.93539 6.13935 6.12957L6.88705 6.13333C7.30126 6.13541 7.63535 6.47288 7.63327 6.88709C7.63119 7.3013 7.29372 7.63539 6.87951 7.63331L4.33396 7.62052C3.92269 7.61845 3.58981 7.28556 3.58774 6.8743L3.57495 4.32874C3.57286 3.91454 3.90696 3.57707 4.32117 3.57498C4.73538 3.5729 5.07285 3.907 5.07493 4.32121L5.07868 5.06891Z" fill="#1C274C"></path> <path opacity="0.5" d="M12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V11.6893L15.0303 13.9697C15.3232 14.2626 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2626 15.3232 13.9697 15.0303L11.5429 12.6036C11.3554 12.416 11.25 12.1617 11.25 11.8964V8C11.25 7.58579 11.5858 7.25 12 7.25Z" fill="#1C274C"></path> </g></svg>
</label>
</div> <div class="control">
<label id="brand-img-drag" aria-label="Browse">
<svg width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg" aria-labelledby="panIconTitle" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" color="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title id="panIconTitle">Pan</title> <path d="M20,14 L20,17 C20,19.209139 18.209139,21 16,21 L10.0216594,21 C8.75045497,21 7.55493392,20.3957659 6.80103128,19.3722467 L3.34541668,14.6808081 C2.81508416,13.9608139 2.94777982,12.950548 3.64605479,12.391928 C4.35756041,11.8227235 5.38335813,11.8798792 6.02722571,12.5246028 L8,14.5 L8,13 L8.00393081,13 L8,11 L8.0174523,6.5 C8.0174523,5.67157288 8.68902517,5 9.5174523,5 C10.3458794,5 11.0174523,5.67157288 11.0174523,6.5 L11.0174523,11 L11.0174523,4.5 C11.0174523,3.67157288 11.6890252,3 12.5174523,3 C13.3458794,3 14.0174523,3.67157288 14.0174523,4.5 L14.0174523,11 L14.0174523,5.5 C14.0174523,4.67157288 14.6890252,4 15.5174523,4 C16.3458794,4 17.0174523,4.67157288 17.0174523,5.5 L17.0174523,11 L17.0174523,7.5 C17.0174523,6.67157288 17.6890252,6 18.5174523,6 C19.3458794,6 20.0174523,6.67157288 20.0174523,7.5 L20.0058962,14 L20,14 Z"></path> </g></svg>
</label>
</div> <div class="control">
<label id="brand-ruler-icon" class="closed" aria-label="Browse" style="padding-top: 5px;padding-right: 3px">
</label>
</div>
</fieldset>
<div id="ajax-panel"></div>
</div>
</div>
</div>
<script>
(function(){
var content = document.querySelector('#preset-sidebar #ajax-panel');
var createBtn = document.querySelector('#preset-sidebar #add_design');
function closeIconPanel(){
try {
var $toggle = window.jQuery ? window.jQuery('#brand-toggle-left') : null;
if ($toggle && $toggle.length) {
if (!$toggle.hasClass('closed')) { $toggle.trigger('click'); }
} else {
var panel = document.getElementById('brand-icon-panel');
if (panel && panel.style) { panel.style.display = 'none'; }
}
} catch(e) { /* no-op */ }
}
function clear(){ if(content){ content.innerHTML = ''; } }
function loading(){ if(content){ content.innerHTML = '<div class="project-card"><div class="muted">Loading...</div></div>'; } }
function attachProjectHandlers(){
var recents = document.querySelector('#preset-sidebar #recents_button');
var templates = document.querySelector('#preset-sidebar #templates_button');
if(recents){ recents.addEventListener('click', function(){
closeIconPanel();
var add = document.querySelector('#add_design');
if(add){ add.click(); }
var mytab = document.querySelector('#mydesignstab');
if(mytab){ mytab.click(); }
}); }
if(templates){ templates.addEventListener('click', function(){
closeIconPanel();
var add = document.querySelector('#add_design');
if(add){ add.click(); }
var ttab = document.querySelector('#templatestab');
if(ttab){ ttab.click(); }
}); }
}
if(createBtn){ createBtn.addEventListener('click', function(){
closeIconPanel();
var openNew = document.getElementById('brand-new');
if(openNew){ openNew.click(); return; }
var modalTrigger = document.querySelector('.brand-modal-open[data-target="#modal-add-new"]');
if(modalTrigger){ modalTrigger.click(); }
}); }
function renderProjects(){ if(content){ content.innerHTML = '';
var html = ''+
'<div class="project-card" role="region" aria-label="Projects">'+
'<div style="display:flex;align-items:center;justify-content:space-between;">'+
'<div><div class="muted">Projects</div><div style="font-size:14px;color:#2b2b3a;font-weight:600;margin-top:6px;">Browse</div></div>'+
'</div>'+
'<div class="divider" style="margin-top:12px"></div>'+
'<div class="project-list" style="margin-top:12px;">'+
'<div id="recents_button" class="project-item" role="button" tabindex="0">'+
'<span class="material-icons icon-muted">history</span>'+
'<div class="project-name">Recent projects</div>'+
'</div>'+
'<div id="templates_button" class="project-item" role="button" tabindex="0">'+
'<span class="material-icons icon-muted">grid_view</span>'+
'<div class="project-name">Templates</div>'+
'</div>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=brand_folders" target="_blank">'+
'<span class="material-icons icon-muted">folder</span>'+
'<div class="project-name">Folders</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=share" target="_blank">'+
'<span class="material-icons icon-muted">share</span>'+
'<div class="project-name">Manage designs</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=templates" target="_blank">'+
'<span class="material-icons icon-muted">dashboard_customize</span>'+
'<div class="project-name">More templates</div>'+
'</a>'+
'</div>'+
'</div>';
content.innerHTML = html;
attachProjectHandlers();
} }
function renderBrand(){ if(content){ content.innerHTML = '';
var html = ''+
'<div class="project-card" role="region" aria-label="Brand">'+
'<div style="display:flex;align-items:center;justify-content:space-between;">'+
'<div><div class="muted">Brand</div><div style="font-size:14px;color:#2b2b3a;font-weight:600;margin-top:6px;">Manage</div></div>'+
'</div>'+
'<div class="divider" style="margin-top:12px"></div>'+
'<div class="project-list" style="margin-top:12px;">'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=brandkit&type=logo" target="_blank">'+
'<span class="material-icons icon-muted">branding_watermark</span>'+
'<div class="project-name">Upload Logos</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/brandcreator/dashboard/auth-signin" target="_blank">'+
'<span class="material-icons icon-muted">auto_fix_high</span>'+
'<div class="project-name">Create Logo</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=brandkit&type=colors" target="_blank">'+
'<span class="material-icons icon-muted">palette</span>'+
'<div class="project-name">Add Brand Colors</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=brandkit&type=brand_voice" target="_blank">'+
'<span class="material-icons icon-muted">record_voice_over</span>'+
'<div class="project-name">Brand Voice</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=brandkit&type=assets" target="_blank">'+
'<span class="material-icons icon-muted">perm_media</span>'+
'<div class="project-name">Upload Assets</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=brandkit&type=fonts" target="_blank">'+
'<span class="material-icons icon-muted">text_fields</span>'+
'<div class="project-name">Upload Brand Fonts</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=brandkit&type=inspiration" target="_blank">'+
'<span class="material-icons icon-muted">lightbulb</span>'+
'<div class="project-name">Brand Inspiration</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=brand360" target="_blank">'+
'<span class="material-icons icon-muted">donut_large</span>'+
'<div class="project-name">Brand 360</div>'+
'</a>'+
'</div>'+
'</div>';
content.innerHTML = html;
} }
function renderManage(){ if(content){ content.innerHTML = '';
var html = ''+
'<div class="project-card" role="region" aria-label="Manage">'+
'<div style="display:flex;align-items:center;justify-content:space-between;">'+
'<div><div class="muted">Workspace</div><div style="font-size:14px;color:#2b2b3a;font-weight:600;margin-top:6px;">Shortcuts</div></div>'+
'</div>'+
'<div class="divider" style="margin-top:12px"></div>'+
'<div class="project-list" style="margin-top:12px;">'+
'<a class="project-item" href="'+ window.BASE_URL +'/i/account/designs" target="_blank">'+
'<span class="material-icons icon-muted">folder_open</span>'+
'<div class="project-name">Manage all designs</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/i/account/" target="_blank">'+
'<span class="material-icons icon-muted">dashboard</span>'+
'<div class="project-name">Dashboard</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=home" target="_blank">'+
'<span class="material-icons icon-muted">home</span>'+
'<div class="project-name">Teams Home</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=brandkit" target="_blank">'+
'<span class="material-icons icon-muted">auto_awesome</span>'+
'<div class="project-name">Brand Kit</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=templates" target="_blank">'+
'<span class="material-icons icon-muted">dashboard_customize</span>'+
'<div class="project-name">Templates</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=media" target="_blank">'+
'<span class="material-icons icon-muted">perm_media</span>'+
'<div class="project-name">Curated Media</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=brand_folders" target="_blank">'+
'<span class="material-icons icon-muted">folder</span>'+
'<div class="project-name">Folders</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=share" target="_blank">'+
'<span class="material-icons icon-muted">share</span>'+
'<div class="project-name">Share Center</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=teams" target="_blank">'+
'<span class="material-icons icon-muted">groups</span>'+
'<div class="project-name">Teams</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=approvals" target="_blank">'+
'<span class="material-icons icon-muted">task_alt</span>'+
'<div class="project-name">Approvals</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=sharedteam" target="_blank">'+
'<span class="material-icons icon-muted">collections</span>'+
'<div class="project-name">Shared Library</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/dashboard/index.php?tab=governance" target="_blank">'+
'<span class="material-icons icon-muted">policy</span>'+
'<div class="project-name">Governance</div>'+
'</a>'+
'<a class="project-item" href="'+ window.BASE_URL +'/i/settings/update-profile" target="_blank">'+
'<span class="material-icons icon-muted">person</span>'+
'<div class="project-name">Update Profile</div>'+
'</a>'+
'<a class="project-item" href="https://www.thebrand.ai/" target="_blank">'+
'<span class="material-icons icon-muted">home</span>'+
'<div class="project-name">Homepage</div>'+
'</a>'+
'</div>'+
'</div>';
content.innerHTML = html;
} }
var projectsNav = document.querySelector('#preset-sidebar #projects_nav');
var brandNav = document.querySelector('#preset-sidebar #brand_nav');
var manageNav = document.querySelector('#preset-sidebar #manage_nav');
var homeLabel = document.querySelector('#preset-sidebar #home_label');
if(projectsNav){ projectsNav.addEventListener('click', function(){ closeIconPanel(); loading(); setTimeout(renderProjects, 150); }); }
if(brandNav){ brandNav.addEventListener('click', function(){ closeIconPanel(); loading(); setTimeout(renderBrand, 150); }); }
if(manageNav){ manageNav.addEventListener('click', function(){ closeIconPanel(); loading(); setTimeout(renderManage, 150); }); }
if(homeLabel){ homeLabel.addEventListener('click', function(){ closeIconPanel(); window.open('https://www.thebrand.ai/wowX/dashboard/index.php?tab=home', '_blank'); }); }
renderProjects();
})();
</script>
</div>
</div>
<div class="hero-demo-editor-wrapper" data-module="HeroDemo" data-context="@media (min-width:32em)" style=" width: 100vw; height: 95vh; ">
<div class="hero-demo-editor">
<div class="TheBrandRoot TheBrandRootComponent brand-editor"
data-env="landscape has-navigation-preference-bottom has-navigation-preference-bottom has-controlgroups-preference-bottom has-controltabs-preference-bottom has-toolbar-preference-top is-animated pointer-coarse pointer-no-hover has-toolbar has-navigation chrome-118">
<div class="TheBrandNav TheBrandNavTools" >
<div class="TheBrandNavGroup topclear" id="brand-top-icons-zoom-tools">
<div class="TheBrandNavSet">
<button type="button" id="proxy-zoom-out" class="TheBrandButton TheBrandButtonIconOnly" data-tooltip="Zoom Out">
<span class="TheBrandButtonInner">
<svg class="TheBrandButtonIcon" style="width:20px;height: 20px;" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><path stroke="currentColor" stroke-width=".125em" d="M9 12 h6"></path></g></svg>
</span>
</button>
<button type="button" id="proxy-zoom-in" class="TheBrandButton TheBrandButtonIconOnly" data-tooltip="Zoom In">
<span class="TheBrandButtonInner">
<svg class="TheBrandButtonIcon" style="width:20px;height: 20px;" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><path stroke="currentColor" stroke-width=".125em" d="M8 12 h8 M12 8 v8"></path></g></svg>
</span>
</button>
<button type="button" id="proxy-undo" class="TheBrandButton TheBrandButtonIconOnly" data-tooltip="Undo">
<span class="TheBrandButtonInner">
<svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width=".125em"><path d="M10 8h4c2.485 0 5 2 5 5s-2.515 5-5 5h-4"></path><path fill="currentColor" d="M5 8l4-3v6z"></path></g></g></svg>
</span>
</button>
<button type="button" id="proxy-redo" class="TheBrandButton TheBrandButtonIconOnly" data-tooltip="Redo">
<span class="TheBrandButtonInner">
<svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width=".125em"><path d="M14 8h-4c-2.485 0-5 2-5 5s2.515 5 5 5h4"></path><path fill="currentColor" d="M19 8l-4-3v6z"></path></g></g></svg>
</span>
</button>
<script>
(function(){
if (typeof window !== 'undefined' && window.jQuery) {
jQuery(function($){
// Proxy clicks to original elements in top.php
$('#proxy-zoom-out').on('click', function(e){
e.preventDefault();
$('#brand-img-zoom-out').click();
});
$('#proxy-zoom-in').on('click', function(e){
e.preventDefault();
$('#brand-img-zoom-in').click();
});
$('#proxy-undo').on('click', function(e){
e.preventDefault();
$('#brand-undo').click();
});
$('#proxy-redo').on('click', function(e){
e.preventDefault();
$('#brand-redo').click();
});
});
}
})();
</script>
<button type="button" id="brand-chat-toggle"
class="TheBrandButton resetElements TheBrandButtonIconOnly"
data-tooltip="Team Chat" title="Team Chat" data-tooltip-placement="bottom"><span class="TheBrandButtonInner" style="position: relative;"><span class="material-icons" style="font-size: 14px;width: 14px;
height: 14px; margin-right:5px">chat</span><span id="brand-chat-badge" style="
position: absolute;
top: -4px;
right: -4px;
background: #f44336;
color: white;
font-size: 10px;
padding: 0 4px;
border-radius: 10px;
min-width: 16px;
height: 16px;
line-height: 16px;
display: none;
align-items: center;
justify-content: center;
border: 1px solid white;
">0</span></span>
</button>
</div>
</div>
<div class="TheBrandNavGroup TheBrandNavGroupFloat topclear TheBrandScrollable" id="brand-top-text-optionsX" style="display:none ;--scrollable-feather-start-opacity: 0.5;--scrollable-feather-end-opacity: 0; overflow-x: auto" data-direction="x" data-state="idle overflows" >
<div class="TheBrandNavSet" id="brand-text-format-btns">
<button id="format-uppercase" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements"><span
class="TheBrandButtonInner"><span style=""
class="material-icons TheBrandButtonIcon paddingMaterial">text_fields</span></span></button>
<button id="format-bold" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements"><span
class="TheBrandButtonInner"><span
class="material-icons TheBrandButtonIcon paddingMaterial"> format_bold</span></span></button>
<button id="format-italic" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements"><span
class="TheBrandButtonInner"><span
class="material-icons TheBrandButtonIcon paddingMaterial"> format_italic</span></span></button>
<button id="format-underlined" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements"><span
class="TheBrandButtonInner"><span
class="material-icons TheBrandButtonIcon paddingMaterial"> format_underlined</span></span></button>
<button id="format-align-left" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements format-align"><span
class="TheBrandButtonInner"><span
class="material-icons TheBrandButtonIcon paddingMaterial"> format_align_left</span></span></button>
<button id="format-align-center" type="button"
class="TheBrandButton TheBrandButtonIconOnly resetElements format-align"><span
class="TheBrandButtonInner"><span
class="material-icons TheBrandButtonIcon paddingMaterial"> format_align_center</span></span></button>
<button id="format-align-right" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements format-align"><span
class="TheBrandButtonInner"><span
class="material-icons TheBrandButtonIcon paddingMaterial"> format_align_right</span></span></button>
<button id="format-align-justify" type="button"
class="TheBrandButton TheBrandButtonIconOnly resetElements format-align"><span
class="TheBrandButtonInner"><span
class="material-icons TheBrandButtonIcon paddingMaterial"> format_align_justify</span></span></button>
</div>
</div>
<div class="TheBrandNavGroup TheBrandNavGroupFloat topclear" id="brand-top-shape-optionsX" style="display: none">
<div class="TheBrandNavSet">
<button type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements brand-horizontal-center"><span
class="TheBrandButtonInner"><span
class="material-icons TheBrandButtonIcon paddingMaterial"> align_horizontal_center</span></span></button>
<button type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements brand-vertical-center"><span
class="TheBrandButtonInner"><span
class="material-icons TheBrandButtonIcon paddingMaterial"> vertical_align_center</span></span></button>
</div>
</div>
<div class="TheBrandNavGroup TheBrandNavGroupFloat topclear" id="brand-top-image-optionsX" style="display: none">
<div class="TheBrandNavSet">
<button type="button" id="brand-img-media-library" class="TheBrandButton resetElements brand-modal-open " title="New" data-target="#modal-media-library" ><span
class="TheBrandButtonInner">
<span style="font-style: 14px!important;" class="material-icons TheBrandButtonLabel TheBrandFixedWidthCharacters"> images</span>
<!--<span class="TheBrandButtonLabel TheBrandFixedWidthCharacters">Media </span>--></span>
</button>
<button id="crop-image-replace-proxy" type="button" class="TheBrandButton resetElements" title="Crop"><span
class="TheBrandButtonInner">
<span class="material-icons TheBrandButtonLabel TheBrandFixedWidthCharacters"> <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M20,37.5c0-0.8-0.7-1.5-1.5-1.5h-15C2.7,36,2,36.7,2,37.5v11C2,49.3,2.7,50,3.5,50h15c0.8,0,1.5-0.7,1.5-1.5 V37.5z"></path> <path d="M8.1,22H3.2c-1,0-1.5,0.9-0.9,1.4l8,8.3c0.4,0.3,1,0.3,1.4,0l8-8.3c0.6-0.6,0.1-1.4-0.9-1.4h-4.7 c0-5,4.9-10,9.9-10V6C15,6,8.1,13,8.1,22z"></path> <path d="M41.8,20.3c-0.4-0.3-1-0.3-1.4,0l-8,8.3c-0.6,0.6-0.1,1.4,0.9,1.4h4.8c0,6-4.1,10-10.1,10v6 c9,0,16.1-7,16.1-16H49c1,0,1.5-0.9,0.9-1.4L41.8,20.3z"></path> <path d="M50,3.5C50,2.7,49.3,2,48.5,2h-15C32.7,2,32,2.7,32,3.5v11c0,0.8,0.7,1.5,1.5,1.5h15c0.8,0,1.5-0.7,1.5-1.5 V3.5z"></path> </g></svg></span>
<!-- <span class="TheBrandButtonLabel TheBrandFixedWidthCharacters">Replace</span>-->
</button>
<button id="crop-image-object-selection-proxy" type="button" class="TheBrandButton resetElements" title="Crop"><span
class="TheBrandButtonInner">
<span class="material-icons TheBrandButtonLabel TheBrandFixedWidthCharacters"> <svg fill="#000000" width="24px" height="24px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>crop</title> <path d="M0 28v4h4v-1.984h-1.984v-2.016h-2.016zM0 4h2.016v-1.984h1.984v-2.016h-4v4zM4 28h24v-24h-24v24zM8 24v-16h16v16h-16zM10.016 22.016h2.656q-0.352-0.16-0.768-0.608t-1.056-1.28-0.832-1.12v3.008zM10.016 12q0 0.832 0.576 1.44t1.408 0.576 1.408-0.576 0.608-1.44-0.608-1.408-1.408-0.576-1.408 0.576-0.576 1.408zM13.216 22.016h8.8v-7.328q-0.48-0.512-0.96-0.608t-0.992 0.16-0.96 0.8-1.024 1.184-0.992 1.408-1.024 1.472-0.96 1.344-0.96 1.024-0.928 0.544zM28 30.016v1.984h4v-4h-1.984v2.016h-2.016zM28 2.016h2.016v1.984h1.984v-4h-4v2.016z"></path> </g></svg></span>
<span class="TheBrandButtonLabel TheBrandFixedWidthCharacters">Crop </span>
</button>
<button id="crop-image-object-proxy" type="button" class="TheBrandButton resetElements crop-image-object-selection " title="Crop" style="display: none"><span
class="TheBrandButtonInner">
<span class="material-icons TheBrandButtonLabel TheBrandFixedWidthCharacters" style="font-style: 12px!important;"> crop</span>
<span class="TheBrandButtonLabel TheBrandFixedWidthCharacters">Crop Selection </span>
</button>
<button id="crop-ai" type="button" class="TheBrandButton resetElements crop-image-object-selection" title="Crop" ><span
class="TheBrandButtonInner">
<span class="material-icons TheBrandButtonLabel TheBrandFixedWidthCharacters"> brush</span>
<span class="TheBrandButtonLabel TheBrandFixedWidthCharacters">Remove BG </span>
</button>
<input type="file" name="brand-file" id="brand-img-upload" class="brand-hidden-file"
accept="image/png, image/jpeg, image/webp" style="display: none" />
<label id="clickUpload" style="display: none; visibility: hidden" for="brand-img-upload" ></label>
<button id="brand-img-upload-proxy" type="button" class="TheBrandButton resetElements " title="New"><span
class="TheBrandButtonInner">
<span style="font-style: 14px!important;" class="material-icons TheBrandButtonLabel TheBrandFixedWidthCharacters"> <svg fill="#000000" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M19,13a1,1,0,0,0-1,1v.38L16.52,12.9a2.79,2.79,0,0,0-3.93,0l-.7.7L9.41,11.12a2.85,2.85,0,0,0-3.93,0L4,12.6V7A1,1,0,0,1,5,6h7a1,1,0,0,0,0-2H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V14A1,1,0,0,0,19,13ZM5,20a1,1,0,0,1-1-1V15.43l2.9-2.9a.79.79,0,0,1,1.09,0l3.17,3.17,0,0L15.46,20Zm13-1a.89.89,0,0,1-.18.53L13.31,15l.7-.7a.77.77,0,0,1,1.1,0L18,17.21ZM22.71,4.29l-3-3a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-3,3a1,1,0,0,0,1.42,1.42L18,4.41V10a1,1,0,0,0,2,0V4.41l1.29,1.3a1,1,0,0,0,1.42,0A1,1,0,0,0,22.71,4.29Z"></path></g></svg></span>
<!--<span class="TheBrandButtonLabel TheBrandFixedWidthCharacters">Upload </span>--></span>
</button>
</div>
<!--
<div class="TheBrandNavSet" id="brand-image-flip-btns">
<button id="img-flip-horizontal" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements"><span class="TheBrandButtonInner"><span style="" class="material-icons TheBrandButtonIcon paddingMaterial">flip</span></span></button>
<button id="img-flip-vertical" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements"><span class="TheBrandButtonInner"><span class="material-icons TheBrandButtonIcon paddingMaterial"> flip</span></span></button>
<button type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements brand-horizontal-center"><span class="TheBrandButtonInner"><span class="material-icons TheBrandButtonIcon paddingMaterial"> align_horizontal_center</span></span></button>
<button type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements brand-vertical-center"><span class="TheBrandButtonInner"><span class="material-icons TheBrandButtonIcon paddingMaterial"> vertical_align_center</span></span></button>
</div>
-->
<div class="TheBrandNavSet" id="brand-image-ai-btns">
<button id="img-ai" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements button-cta"><span class="TheBrandButtonInner"><span style="" class="material-icons TheBrandButtonIcon paddingMaterial">
<svg width="24px" height="24px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" stroke-width="3" stroke="#000000" fill="none"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><circle cx="34.52" cy="11.43" r="5.82"></circle><circle cx="53.63" cy="31.6" r="5.82"></circle><circle cx="34.52" cy="50.57" r="5.82"></circle><circle cx="15.16" cy="42.03" r="5.82"></circle><circle cx="15.16" cy="19.27" r="5.82"></circle><circle cx="34.51" cy="29.27" r="4.7"></circle><line x1="20.17" y1="16.3" x2="28.9" y2="12.93"></line><line x1="38.6" y1="15.59" x2="49.48" y2="27.52"></line><line x1="50.07" y1="36.2" x2="38.67" y2="46.49"></line><line x1="18.36" y1="24.13" x2="30.91" y2="46.01"></line><line x1="20.31" y1="44.74" x2="28.7" y2="48.63"></line><line x1="17.34" y1="36.63" x2="31.37" y2="16.32"></line><line x1="20.52" y1="21.55" x2="30.34" y2="27.1"></line><line x1="39.22" y1="29.8" x2="47.81" y2="30.45"></line><line x1="34.51" y1="33.98" x2="34.52" y2="44.74"></line></g></svg>
</span></span></button>
</div>
</div>
<div class="TheBrandNavGroup TheBrandNavGroupFloat topclear" id="brand-top-icons-optionsX" style="display: none">
<div class="TheBrandNavSet">
<button type="button" id="brand-icons-edit" class="TheBrandButton resetElements" title="New" ><span
class="TheBrandButtonInner">
<span class="material-icons TheBrandButtonLabel TheBrandFixedWidthCharacters"> emoji_emotions</span>
<span class="TheBrandButtonLabel TheBrandFixedWidthCharacters">Icons </span></span>
</button>
<!--<button type="button" id="brand-elements-edit" class="TheBrandButton resetElements" title="New" ><span
class="TheBrandButtonInner">
<span class="material-icons TheBrandButtonLabel TheBrandFixedWidthCharacters"> star</span>
<span class="TheBrandButtonLabel TheBrandFixedWidthCharacters">Elements </span></span>
</button>-->
<button type="button" class="TheBrandButton resetElements brand-frames-edit" title="New" ><span
class="TheBrandButtonInner">
<span class="material-icons TheBrandButtonLabel TheBrandFixedWidthCharacters"> wallpaper</span>
<span class="TheBrandButtonLabel TheBrandFixedWidthCharacters">Frames </span></span>
</button>
</div>
</div>
<!-- <div class="TheBrandNavGroup TheBrandNavGroupFloat topclear" id="brand-top-shape-optionsX" style="display: none">
</div>-->
<div class="TheBrandNavGroup" >
<a href="https://www.thebrand.ai/wowX/dashboard/index.php?tab=home"><button type="button"
class="TheBrandButton resetElements "
title="Share" data-tooltip="Teams & Share Center" data-tooltip-placement="bottom"><span class="TheBrandButtonInner"><span class="material-icons" style="font-size: 14px;width: 14px;
height: 14px; margin-right:5px">dashboard</span> <span class="TheBrandButtonLabel">Workspace</span></span></button></a>
<button id="brand-json-save" type="button" class="TheBrandButton TheBrandButtonIconOnly resetElements" title="New" data-tooltip="Save design" data-tooltip-placement="bottom"><span class="TheBrandButtonInner"><span class="material-icons" style="font-size: 14px;width: 14px; height: 14px;">save</span></span></button>
<button type="button" id="brand-save"
class=" brand-modal-open TheBrandButton resetElements TheBrandButtonExport"
data-target="#modal-save" disabled
title="Share" data-tooltip="Share and export" data-tooltip-placement="bottom"><span class="TheBrandButtonInner"><span class="material-icons" style="font-size: 14px;width: 14px;
height: 14px; margin-right:5px">share</span> <span class="TheBrandButtonLabel">Share</span></span></button>
</div>
</div>
<button style="display:none" id="brand-elementsZ" type="button" class="TheBrandButton brand-modal-open" title="New" data-target="#modal-add-elements"></button>
<button style="display:none" id="brand-frames" type="button" class="TheBrandButton brand-modal-open" title="New" data-target="#modal-frames"></button>
<button id="settingsMe" style="display:none" type="button" class="TheBrandButton brand-modal-open" title="New" data-target="#modal-settings"></button>
<button style="display:none" id="appsMe" type="button" class="TheBrandButton brand-modal-compact-open" title="New" data-target="#modal-app-compact"></button>
<button style="display:none" id="textMe" type="button" class="TheBrandButton brand-modal-compact-open" title="New" data-target="#modal-text-compact"></button>
<button style="display:none" id="iconsMe" type="button" class="TheBrandButton brand-modal-open" title="New" data-target="#modal-icons"></button>
<button style="display:none" id="framesMe" type="button" class="TheBrandButton brand-modal-open" title="New" data-target="#modal-frames"></button>
<div class="TheBrandNav TheBrandNavMain">
<div class="TheBrandScrollable"
style="--scrollable-feather-start-opacity: 1;--scrollable-feather-end-opacity: 0; "
data-direction="x">
<div style="transform: translateX(0px)">
<ul class="TheBrandTabList" role="tablist">
<li role="tab" class="brand-icon-menu-btn" aria-controls="panel-brand-tab-templates" id="Card-Templates" data-target="#brand-templates">
<button type="button" class="resetElements" data-tooltip="Browse templates" data-tooltip-placement="bottom">
<svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><g fill="none" stroke="currentColor" stroke-width="0.0625em"><path d="M8 21 L15 11 L19 15"></path><path d="M15 2 v5 h5"></path><path d="M8 2 h8 l4 4 v12 q0 4 -4 4 h-8 q-4 0 -4 -4 v-12 q0 -4 4 -4z"></path></g><circle fill="currentColor" cx="10" cy="8" r="1.5"></circle></g></svg>
<span>Design</span></button>
</li>
<li role="tab" class="brand-icon-menu-btn" aria-controls="brand-brand" id="Card-Brand" data-target="#brand-brand">
<button type="button" class="resetElements" data-tooltip="Brand" data-tooltip-placement="bottom" data-target="#brand-brand">
<svg width="24px" height="24px" viewBox="-0.5 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M6 3H18L22 9L12 22L2 9L6 3Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M2 9H22" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 22L8 9" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 22L16 9" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
<span>Brand</span></button>
</li>
<li role="tab" class="brand-icon-menu-btn" aria-controls="panel-brand-tab-annotate" id="Card-Text" data-target="#brand-text">
<button type="button" class="resetElements" data-tooltip="Add and style text" data-tooltip-placement="bottom">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke="none" fill="currentColor" transform="translate(6,0)">
<path d="M8.14 20.085c.459 0 .901-.034 1.329-.102a8.597 8.597 0 001.015-.21v1.984c-.281.135-.695.247-1.242.336a9.328 9.328 0 01-1.477.133c-3.312 0-4.968-1.745-4.968-5.235V6.804H.344v-1.25l2.453-1.078L3.89.819h1.5v3.97h4.97v2.015H5.39v10.078c0 1.031.245 1.823.735 2.375s1.161.828 2.015.828z"></path>
</g>
</g>
</svg>
<span> Text</span></button>
</li>
<li role="tab" class="brand-icon-menu-btn" aria-controls="panel-brand-tab-elements" id="Card-Elements" data-target="#brand-elements">
<button type="button" class="resetElements" data-tooltip="Add elements" data-tooltip-placement="bottom">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width=".125em">
<path d="M 4 5 l 1 -1"></path>
<path d="M 4 10 l 6 -6"></path>
<path d="M 4 15 l 11 -11"></path>
<path d="M 4 20 l 16 -16"></path>
<path d="M 9 20 l 11 -11"></path>
<path d="M 14 20 l 6 -6"></path>
<path d="M 19 20 l 1 -1"></path>
</g>
</g>
</svg>
<span>Elements</span></button>
</li>
<li role="tab" class="brand-icon-menu-btn" aria-controls="panel-brand-tab-shapes" id="Card-Shapes" data-target="#brand-shapes" style="display:none">
<button type="button" class="resetElements" data-tooltip="Add shapes" data-tooltip-placement="bottom">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width=".125em">
<path d="M12 22c2.773 0 1.189-5.177 3-7 1.796-1.808 7-.25 7-3 0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10z"></path>
<path d="M20 17c-3 3-5 5-8 5"></path>
</g>
</g>
</svg>
<span>Shapes</span></button>
</li>
<li role="tab" class="brand-icon-menu-btn" aria-controls="panel-brand-tab-crop" id="Card-Upload" data-target="#brand-image">
<button type="button" class="resetElements" data-tooltip="Upload images" data-tooltip-placement="bottom">
<svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><g fill="none" stroke="currentColor" stroke-width="0.0625em"><path d="M8 21 L15 11 L19 15"></path><path d="M15 2 v5 h5"></path><path d="M8 2 h8 l4 4 v12 q0 4 -4 4 h-8 q-4 0 -4 -4 v-12 q0 -4 4 -4z"></path></g><circle fill="currentColor" cx="10" cy="8" r="1.5"></circle></g></svg>
<span>Upload</span></button>
</li>
<li role="tab" class="brand-icon-menu-btn" aria-controls="panel-brand-tab-Apps" id="Card-Apps" data-target="#brand-apps">
<button type="button" class="resetElements" data-tooltip="Browse apps" data-tooltip-placement="bottom">
<svg width="24px" height="24px" viewBox="-0.5 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M19 3.32001H16C14.8954 3.32001 14 4.21544 14 5.32001V8.32001C14 9.42458 14.8954 10.32 16 10.32H19C20.1046 10.32 21 9.42458 21 8.32001V5.32001C21 4.21544 20.1046 3.32001 19 3.32001Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8 3.32001H5C3.89543 3.32001 3 4.21544 3 5.32001V8.32001C3 9.42458 3.89543 10.32 5 10.32H8C9.10457 10.32 10 9.42458 10 8.32001V5.32001C10 4.21544 9.10457 3.32001 8 3.32001Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M19 14.32H16C14.8954 14.32 14 15.2154 14 16.32V19.32C14 20.4246 14.8954 21.32 16 21.32H19C20.1046 21.32 21 20.4246 21 19.32V16.32C21 15.2154 20.1046 14.32 19 14.32Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M8 14.32H5C3.89543 14.32 3 15.2154 3 16.32V19.32C3 20.4246 3.89543 21.32 5 21.32H8C9.10457 21.32 10 20.4246 10 19.32V16.32C10 15.2154 9.10457 14.32 8 14.32Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
<span>Apps</span></button>
</li>
<!--
<li role="tab" class="brand-icon-menu-btn" aria-controls="panel-brand-tab-motion" id="Card-Motion" data-target="#brand-motion">
<button type="button" class="resetElements" data-tooltip="Motion effects" data-tooltip-placement="bottom">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.02 6L5.78 2h2.52l-2.02 4h3.9l2.02-4h2.52l-2.02 4h3.9l2.02-4h2.52l-2.02 4h1.5c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6h2.02z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>Motion</span></button>
</li>
-->
<li role="tab" class="brand-icon-menu-btn hide-on-canvas-mode" aria-controls="panel-brand-tab-filterz" id="Card-Filterz" style="display:none" aria-selected="false">
<button type="button" class="resetElements" data-tooltip="Apply effects" data-tooltip-placement="bottom">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<path d="M18.347 9.907a6.5 6.5 0 1 0-1.872 3.306M3.26 11.574a6.5 6.5 0 1 0 2.815-1.417 M10.15 17.897A6.503 6.503 0 0 0 16.5 23a6.5 6.5 0 1 0-6.183-8.51"></path>
</g>
</g>
</svg>
<span>Effects</span></button>
</li>
<li role="tab" class="brand-icon-menu-btn" aria-controls="panel-brand-tab-adjust" id="Card-Design" data-target="#brand-adjust">
<button type="button" class="resetElements" data-tooltip="Adjust design" data-tooltip-placement="bottom">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<rect x="2" y="12" width="10" height="10" rx="2"></rect>
<path d="M4 11.5V4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5.5"></path>
<path d="M14 10l3.365-3.365M14 6h4v4"></path>
</g>
</g>
</svg>
<span>Adjust</span></button>
</li>
<!-- <li role="tab" aria-controls="panel-brand-tab-filter" id="tab-brand-tab-filter"
aria-selected="false">
<button type="button" class="resetElements">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<path d="M18.347 9.907a6.5 6.5 0 1 0-1.872 3.306M3.26 11.574a6.5 6.5 0 1 0 2.815-1.417 M10.15 17.897A6.503 6.503 0 0 0 16.5 23a6.5 6.5 0 1 0-6.183-8.51"></path>
</g>
</g>
</svg>
<span>Filter</span></button>
</li>
<li role="tab" aria-controls="panel-brand-tab-sticker" id="tab-brand-tab-sticker"
aria-selected="false">
<button type="button" class="resetElements">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke="currentColor" stroke-width=".125em">
<path d="M12 22c2.773 0 1.189-5.177 3-7 1.796-1.808 7-.25 7-3 0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10z"></path>
<path d="M20 17c-3 3-5 5-8 5"></path>
</g>
</g>
</svg>
<span>Sticker</span></button>
</li>
<li role="tab" aria-controls="panel-brand-tab-fill" id="tab-brand-tab-fill"
aria-selected="false">
<button type="button" class="resetElements">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke="currentColor" stroke-width=".125em">
<g transform="rotate(60, 12, 12)">
<rect x="4" y="4" width="14" height="16" rx="3"></rect>
</g>
<path d="M21 13 L21 21"></path>
<path d="M4.5 12.5 L19 12.5"></path>
</g>
</g>
</svg>
<span>Fill</span></button>
</li>
<li role="tab" aria-controls="panel-brand-tab-redact" id="tab-brand-tab-redact"
aria-selected="false">
<button type="button" class="resetElements">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke="currentColor" stroke-width=".125em">
<path d="M 4 5 l 1 -1"></path>
<path d="M 4 10 l 6 -6"></path>
<path d="M 4 15 l 11 -11"></path>
<path d="M 4 20 l 16 -16"></path>
<path d="M 9 20 l 11 -11"></path>
<path d="M 14 20 l 6 -6"></path>
<path d="M 19 20 l 1 -1"></path>
</g>
</g>
</svg>
<span>Redact</span></button>
</li>
<li role="tab" aria-controls="panel-brand-tab-frame" id="tab-brand-tab-frame"
aria-selected="false">
<button type="button" class="resetElements">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke="currentColor" stroke-width=".125em">
<rect x="2" y="2" width="20" height="20" rx="4"></rect>
<rect x="6" y="6" width="12" height="12" rx="1"></rect>
</g>
</g>
</svg>
<span>Frame</span></button>
</li>
<li role="tab" aria-controls="panel-brand-tab-resize" id="tab-brand-tab-resize"
aria-selected="false">
<button type="button" class="resetElements">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<rect x="2" y="12" width="10" height="10" rx="2"></rect>
<path d="M4 11.5V4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5.5"></path>
<path d="M14 10l3.365-3.365M14 6h4v4"></path>
</g>
</g>
</svg>
<span>Resize</span></button>
</li>-->
</ul>
</div>
</div>
</div>
<div class="TheBrandTabPanels TheBrandMain ">
<div class="TheBrandTabPanel ">
<div class="TheBrandUtilPanel">
<!-- Top Bar START -->
<!-- Top Bar END -->
<!-- Icon Menu START -->
<div id="brand-icon-menu" style="display: none">
<button id="brand-btn-adjust" type="button" class="brand-icon-menu-btn active"
data-target="#brand-adjust">
<span class="material-icons">tune</span><span class="brand-icon-menu-title">Adjust</span>
</button>
<button id="brand-btn-framesZ" type="button" class="brand-icon-menu-btn" data-target="#brand-framesZ">
<span class="material-icons">wallpaper</span><span class="brand-icon-menu-title">Frames</span>
</button>
<button id="brand-btn-text" type="button" class="brand-icon-menu-btn" data-target="#brand-text">
<span class="material-icons">title</span><span class="brand-icon-menu-title">Text</span>
</button>
<button id="brand-btn-image" type="button" class="brand-icon-menu-btn" data-target="#brand-image">
<span class="material-icons">add_photo_alternate</span><span class="brand-icon-menu-title">Image</span>
</button>
<button id="brand-btn-shapes" type="button" class="brand-icon-menu-btn" data-target="#brand-shapes">
<span class="material-icons">category</span><span class="brand-icon-menu-title">Shapes</span>
</button>
<button id="brand-btn-elements" type="button" class="brand-icon-menu-btn" data-target="#brand-elements">
<span class="material-icons">star</span><span class="brand-icon-menu-title">Elements</span>
</button>
<button id="brand-btn-icons" type="button" class="brand-icon-menu-btn" data-target="#brand-icons">
<span class="material-icons">emoji_emotions</span><span class="brand-icon-menu-title">Icons</span>
</button>
<button id="brand-btn-apps" type="button" class="brand-icon-menu-btn" data-target="#brand-apps">
<span class="material-icons">apps</span>
<span class="brand-icon-menu-title">Apps</span>
</button>
<button id="brand-btn-motion" type="button" class="brand-icon-menu-btn" data-target="#brand-motion">
<span class="material-icons">movie_filter</span><span class="brand-icon-menu-title">Motion</span>
</button>
<button id="brand-btn-tools" type="button" class="brand-icon-menu-btn" data-target="#brand-tools">
<span class="material-icons">image</span>
<span class="brand-icon-menu-title">Image Edit</span>
</button>
<button id="brand-btn-draw" type="button" class="brand-icon-menu-btn" data-target="#brand-draw">
<span class="material-icons">brush</span><span class="brand-icon-menu-title">Brushes</span>
</button>
<button id="brand-btn-effects" type="button" class="brand-icon-menu-btn" data-target="#brand-effects">
<span class="material-icons">brush</span><span class="brand-icon-menu-title">Effects</span>
</button>
<button id="brand-btn-settings" type="button" class="brand-icon-menu-btn stick-to-bottom"
data-target="#brand-settings">
<span class="material-icons">settings</span><span class="brand-icon-menu-title">Settings</span>
</button> <button id="brand-btn-layers-modal" type="button" class="brand-icon-menu-btn stick-to-bottom"
data-target="#brand-layers-modal">
<span class="material-icons">layers</span><span class="brand-icon-menu-title">Layers</span>
</button>
</div><!-- Icon Menu END -->
<!-- Icon Panel START -->
<div id="brand-icon-panel">
<div id="brand-icon-panel-inner">
<!-- Adjust START -->
<script>
$(document).ready(function() {
let isResizingAdjust = false;
let initialHeightAdjust;
let initialYAdjust;
function startResizingAdjust(event) {
isResizingAdjust = true;
const $button = $(this);
const $div = $('#brand-adjust');
initialHeightAdjust = $div.height(); // Store the initial height
initialYAdjust = event.clientY; // Store the initial Y position
/* $button.adjust("...");*/ // Change button adjust while resizing
event.preventDefault(); // Prevent default behavior
}
function resizeDivAdjust(event) {
if (isResizingAdjust) {
const $div = $('#brand-adjust');
const newHeight = initialHeightAdjust - (event.clientY - initialYAdjust); // Calculate new height
if (newHeight > 50) { // Minimum height limit
$div.height(newHeight); // Set new height
}
}
}
function stopResizingAdjust() {
isResizingAdjust = false;
/* $('#btn-resize-image').adjust("Resize");*/ // Reset button adjust
}
// Mouse events
$('#btn-resize-adjust').on('mousedown', startResizingAdjust);
$(document).on('mousemove', resizeDivAdjust);
$(document).on('mouseup', stopResizingAdjust);
// Touch events for mobile
$('#btn-resize-adjust').on('touchstart', startResizingAdjust);
$(document).on('touchmove', resizeDivAdjust);
$(document).on('touchend', stopResizingAdjust);
function updateEffectsCardActive(){
if ($('#Card-Filterz').attr('aria-selected') === 'true') {
$('#brand-adjust-effects-card').addClass('active');
} else {
$('#brand-adjust-effects-card').removeClass('active');
}
}
updateEffectsCardActive();
$(document).on('click', '.TheBrandTabList li button', function(){
setTimeout(updateEffectsCardActive, 0);
});
$('#brand-adjust-effects-card').on('click', function(){
$('#Card-Filterz button').trigger('click');
});
});
</script>
<div id="brand-adjust" class="brand-icon-panel-content panel-hide">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Adjust Design</a>
<div id="brand-adjust-effects-card" class="brand-elements-menu-item" style="margin-bottom:10px;cursor:pointer">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/effects/filters.png" />
</div>
<div class="brand-apps-menu-item-desc">Effects</div>
</div>
<ul class="brand-accordion">
<!-- Backgroud COlor -->
<li>
<a class="brand-title"><span class="material-icons accordion-icon">brush</span>Background Color<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block">
<div class="brand-control">
<label class="brand-control-label">Background Color</label>
</div><div class="brand-control">
<input id="custom-image-background" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="" />
</div>
</div>
</div>
</li> <li>
<a class="brand-title"><span class="material-icons accordion-icon">brush</span>Background Image<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block">
<div class="brand-control">
<label class="brand-control-label">Change Background Image</label>
</div><div class="brand-control">
<button id="brand-bg-media-library" type="button" class="brand-btn primary brand-lg-btn btn-full brand-modal-open" data-target="#modal-bg-library"><span class="material-icons">photo_library</span>Select
Image</button>
</div>
</div>
</div>
</li> <!-- Crop -->
<li class="accordion-crop hide-on-canvas-mode">
<a class="brand-title"><span class="material-icons accordion-icon">crop</span>Crop<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block">
<div class="brand-control">
<select id="brand-crop-style" class="brand-select brand-select2 tinyform"
autocomplete="off">
<option value="">Please select</option>
<option value="freeform" data-icon="crop_free">Freeform</option>
<option value="custom" data-icon="crop">Custom</option>
<option value="square" data-icon="crop_square">Square</option>
<option value="original" data-icon="crop_original">Original Ratio</option>
</select>
</div>
</div>
<div class="brand-control-wrap brand-resize-wrap crop-custom">
<input id="brand-crop-width" class="brand-form-field tinyform" type="number" value=""
data-max="" autocomplete="off">
<span class="material-icons">clear</span>
<input id="brand-crop-height" class="brand-form-field tinyform" type="number" value=""
data-max="" autocomplete="off">
<button id="brand-crop-lock" type="button"
class="brand-btn brand-lock-unlock hide-on-canvas-mode active"><span
class="material-icons">lock</span></button>
</div>
<div id="brand-crop-btns" class="brand-control-wrap brand-submit-btns disabled">
<button id="brand-crop-apply" type="button" class="brand-btn primary">Apply</button>
<button id="brand-crop-cancel" type="button" class="brand-btn">Cancel</button>
</div>
</div>
</li>
<!-- Rotate -->
<li>
<a class="brand-title"><span class="material-icons accordion-icon">refresh</span>Rotate<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block">
<div class="brand-control">
<div class="brand-btn-group icon-group">
<button id="brand-rotate-right" type="button" class="brand-btn tooltip"
data-title="Rotate Right"><span
class="material-icons">rotate_right</span></button>
<button id="brand-rotate-left" type="button" class="brand-btn tooltip"
data-title="Rotate Left"><span
class="material-icons">rotate_left</span></button>
<button id="brand-flip-horizontal" type="button" class="brand-btn tooltip"
data-title="Flip X"><span class="material-icons">flip</span></button>
<button id="brand-flip-vertical" type="button" class="brand-btn tooltip"
data-title="Flip Y"><span class="material-icons">flip</span></button>
</div>
</div>
</div>
</div>
</li>
<!-- Resize -->
<li>
<a class="brand-title"><span class="material-icons accordion-icon">aspect_ratio</span>Resize<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-resize-wrap">
<input id="brand-resize-width" class="brand-form-field tinyform" type="number" value=""
data-size="" autocomplete="off">
<span class="material-icons">clear</span>
<input id="brand-resize-height" class="brand-form-field tinyform" type="number" value=""
data-size="" autocomplete="off">
<button id="brand-resize-lock" type="button"
class="brand-btn brand-lock-unlock active"><span
class="material-icons">lock</span></button>
</div>
<button id="brand-resize-apply" type="button"
class="brand-btn btn-full primary">Apply</button>
</div>
</li>
</ul>
</div>
<!-- Adjust END -->
<!-- Frames START -->
<script>
$(document).ready(function() {
let isResizingFrames = false;
let initialHeightFrames;
let initialYFrames;
function startResizingFrames(event) {
isResizingFrames = true;
const $button = $(this);
const $div = $('#brand-frames');
initialHeightFrames = $div.height(); // Store the initial height
initialYFrames = event.clientY; // Store the initial Y position
/* $button.frames("...");*/ // Change button frames while resizing
event.preventDefault(); // Prevent default behavior
}
function resizeDivFrames(event) {
if (isResizingFrames) {
const $div = $('#brand-frames');
const newHeight = initialHeightFrames - (event.clientY - initialYFrames); // Calculate new height
if (newHeight > 50) { // Minimum height limit
$div.height(newHeight); // Set new height
}
}
}
function stopResizingFrames() {
isResizingFrames = false;
/* $('#btn-resize-image').frames("Resize");*/ // Reset button frames
}
// Mouse events
$('#btn-resize-frames').on('mousedown', startResizingFrames);
$(document).on('mousemove', resizeDivFrames);
$(document).on('mouseup', stopResizingFrames);
// Touch events for mobile
$('#btn-resize-frames').on('touchstart', startResizingFrames);
$(document).on('touchmove', resizeDivFrames);
$(document).on('touchend', stopResizingFrames);
});
</script>
<div id="brand-framesZ" class="brand-icon-panel-content panel-hide" style="padding-bottom: 20px">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div class="brand-tabs">
<!-- Frames Menu -->
<ul class="brand-tabs-menu">
<li class="active" data-target="#brand-all-frames">Frames</li>
<li data-target="#brand-frame-options">Settings</li>
</ul>
<!-- All Frames -->
<div id="brand-all-frames" class="brand-tab active">
<!-- <div class="brand-search-wrap">
<input id="brand-frame-search" type="search" class="brand-form-field tinyform"
placeholder="Search Category..." autocomplete="off" />
<span id="brand-frame-search-icon" class="material-icons">search</span>
</div>-->
<div id="brand-frames-wrap" class="brand-accordion">
<!-- <ul class="brand-accordion" >
<li>
<a><span class="material-icons my-favorites-star">star</span>My Favorites<span
id="frames-favorites-count" class="data-count">0</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div id="brand-frames-favorites" class="brand-frames-grid"></div>
</li>
</ul>
-->
<div id="brand-frames-menu" >
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Frames</a>
<div id="brand-frames-grid-grunge" class="brand-frames-menu-item" data-id="#brand-frames-grid-grunge-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/grunge/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">grunge</div>
</div>
<div id="brand-frames-grid-grunge-square" class="brand-frames-menu-item" data-id="#brand-frames-grid-grunge-square-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/grunge-square/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">grunge-square</div>
</div>
<div id="brand-frames-grid-business" class="brand-frames-menu-item" data-id="#brand-frames-grid-business-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/business/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Business</div>
</div>
<div id="brand-frames-grid-bohemian" class="brand-frames-menu-item" data-id="#brand-frames-grid-bohemian-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/bohemian/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Bohemian</div>
</div>
<div id="brand-frames-grid-abstract" class="brand-frames-menu-item" data-id="#brand-frames-grid-abstract-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/abstract/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Abstract</div>
</div>
<div id="brand-frames-grid-floral" class="brand-frames-menu-item" data-id="#brand-frames-grid-floral-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/floral/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Floral</div>
</div>
<div id="brand-frames-grid-neon" class="brand-frames-menu-item" data-id="#brand-frames-grid-neon-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/neon/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Neon</div>
</div>
<div id="brand-frames-grid-winter" class="brand-frames-menu-item" data-id="#brand-frames-grid-winter-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/winter/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Winter</div>
</div>
<div id="brand-frames-grid-halloween" class="brand-frames-menu-item" data-id="#brand-frames-grid-halloween-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/halloween/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Halloween</div>
</div>
<div id="brand-frames-grid-cute" class="brand-frames-menu-item" data-id="#brand-frames-grid-cute-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/cute/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Cute</div>
</div>
<div id="brand-frames-grid-watercolor" class="brand-frames-menu-item" data-id="#brand-frames-grid-watercolor-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/watercolor/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Watercolor</div>
</div>
<div id="brand-frames-grid-love" class="brand-frames-menu-item" data-id="#brand-frames-grid-love-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/love/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Love</div>
</div>
<div id="brand-frames-grid-others" class="brand-frames-menu-item" data-id="#brand-frames-grid-others-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/brandwow/files/frames/others/1.jpg">
</div>
<div class="brand-apps-menu-item-desc">Others</div>
</div>
</div>
<script>
(function(){
if (typeof jQuery === 'undefined') return;
jQuery(function($){
$('#brand-frames-menu').on('click', '.brand-frames-menu-item', function(){
var target = $(this).data('id');
if (!target) return;
$('#brand-frames-content > div').addClass('d-none');
$(target).removeClass('d-none');
});
$('#brand-frames-content').on('click', '.brand-close-frames', function(){
$('#brand-frames-content > div').addClass('d-none');
});
});
})();
</script>
</div>
<!--<ul id="brand-frames-wrap" class="brand-accordion">
<li>
<a><span class="material-icons my-favorites-star">star</span>My Favorites<span
id="frames-favorites-count" class="data-count">0</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div id="brand-frames-favorites" class="brand-frames-grid"></div>
</li>
</ul>
-->
<div id="brand-frames-content" class="">
<div id="brand-frames-grid-grunge-frames" class="d-none"
class="d-none" data-keyword="grunge">
<div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>Grunge<span class="data-count">12</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-grunge" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star"
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/4.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/4.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/5.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/5.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/6.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/6.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/7.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/7.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/8.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/8.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/9.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/9.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/10.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/10.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/11.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/11.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge/12.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge/12.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-grunge-square-frames" class="d-none"
class="d-none" data-keyword="grunge-square"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Grunge - Square<span
class="data-count">6</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-grunge-square" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge-square/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge-square/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge-square/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge-square/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge-square/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge-square/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge-square/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge-square/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge-square/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge-square/4.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge-square/4.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge-square/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge-square/5.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge-square/5.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge-square/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/grunge-square/6.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/grunge-square/6.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/grunge-square/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-business-frames" class="d-none"
class="d-none" data-keyword="business">
<div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div class="brand-title2">Business<span class="data-count">8</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-business" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/business/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/business/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/business/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/business/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/business/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/business/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/business/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/business/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/business/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/business/4.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/business/4.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/business/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/business/5.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/business/5.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/business/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/business/6.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/business/6.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/business/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/business/7.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/business/7.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/business/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/business/8.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/business/8.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/business/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-bohemian-frames" class="d-none"
class="d-none" data-keyword="bohemian"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Bohemian<span class="data-count">10</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-bohemian" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star"
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/4.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/4.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/5.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/5.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/6.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/6.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/7.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/7.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/8.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/8.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/9.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/9.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/bohemian/10.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/10.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/bohemian/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-abstract-frames" class="d-none"
class="d-none" data-keyword="abstract"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Abstract<span class="data-count">6</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-abstract" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/abstract/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/abstract/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star"
data-frameid="https://www.thebrand.ai/wowX/files/frames/abstract/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/abstract/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/abstract/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/abstract/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/abstract/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/abstract/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/abstract/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/abstract/4.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/abstract/4.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/abstract/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/abstract/5.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/abstract/5.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/abstract/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/abstract/6.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/abstract/6.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/abstract/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-floral-frames" class="d-none"
class="d-none" data-keyword="floral"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Floral<span class="data-count">5</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-floral" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/floral/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/floral/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/floral/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/floral/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/floral/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/floral/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/floral/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/floral/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/floral/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/floral/4.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/floral/4.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/floral/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/floral/5.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/floral/5.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/floral/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-neon-frames" class="d-none"
class="d-none" data-keyword="neon"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Neon<span class="data-count">4</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-neon" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/neon/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/neon/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/neon/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/neon/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/neon/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/neon/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/neon/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/neon/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/neon/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/neon/4.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/neon/4.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/neon/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-winter-frames" class="d-none"
class="d-none" data-keyword="winter"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Winter<span class="data-count">3</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-winter" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/winter/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/winter/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/winter/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/winter/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/winter/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/winter/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/winter/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/winter/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/winter/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-halloween-frames" class="d-none"
class="d-none" data-keyword="halloween"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Halloween<span class="data-count">2</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-halloween" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/halloween/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/halloween/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/halloween/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/halloween/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/halloween/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/halloween/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-cute-frames" class="d-none"
class="d-none" data-keyword="cute"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Cute<span class="data-count">7</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-cute" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/cute/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/cute/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/cute/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/cute/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/cute/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/cute/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/cute/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/cute/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/cute/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/cute/4.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/cute/4.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/cute/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/cute/5.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/cute/5.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/cute/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/cute/6.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/cute/6.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/cute/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/cute/7.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/cute/7.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/cute/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-watercolor-frames" class="d-none"
class="d-none" data-keyword="watercolor"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Watercolor<span class="data-count">3</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-watercolor" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/watercolor/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/watercolor/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/watercolor/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/watercolor/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/watercolor/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/watercolor/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/watercolor/3.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/watercolor/3.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/watercolor/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-love-frames" class="d-none"
class="d-none" data-keyword="love"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Love<span class="data-count">2</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-love" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/love/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/love/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/love/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/love/2.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/love/2.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/love/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<div id="brand-frames-grid-others-frames" class="d-none"
class="d-none" data-keyword="others"><div class="brand-close-frames brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div> <div class="brand-title2">Others<span class="data-count">1</span><span
class="material-icons arrow">keyboard_arrow_down</span></div>
<div>
<div id="brand-frames-grid-others" class="brand-frames-grid paginated"
data-perpage="4">
<div class="brand-frame" data-elsource="https://www.thebrand.ai/wowX/files/frames/others/1.svg">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/frames/others/1.jpg" />
</div>
<div class="frame-favorite">
<button type="button" class="brand-btn-simple star "
data-frameid="https://www.thebrand.ai/wowX/files/frames/others/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</li>
</div>
</div>
<!-- Frames Options -->
<div id="brand-frame-options" class="brand-tab">
<div class="brand-control-wrap label-block">
<div class="brand-control">
<div class="brand-btn-group icon-group">
<button id="brand-rotate-right-frame" type="button" class="brand-btn tooltip"
data-title="Rotate Right"><span
class="material-icons">rotate_right</span></button>
<button id="brand-rotate-left-frame" type="button" class="brand-btn tooltip"
data-title="Rotate Left"><span
class="material-icons">rotate_left</span></button>
<button id="brand-flip-horizontal-frame" type="button" class="brand-btn tooltip"
data-title="Flip X"><span class="material-icons">flip</span></button>
<button id="brand-flip-vertical-frame" type="button" class="brand-btn tooltip"
data-title="Flip Y"><span class="material-icons">flip</span></button>
</div>
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label">Fill Color</label>
<div class="brand-control">
<input id="brand-frame-color" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="" />
<div class="brand-control-desc">May not work properly on multi-color frames.</div>
</div>
</div>
</div>
</div>
<div id="brand-noframes" class="notice notice-warning">Nothing found.</div>
</div>
<!-- Frames END -->
<!-- Text START -->
<style>
</style>
<script>
$(document).ready(function() {
let isResizingText = false;
let initialHeightText;
let initialYText;
function startResizingText(event) {
isResizingText = true;
const $button = $(this);
const $div = $('#brand-text');
initialHeightText = $div.height(); // Store the initial height
initialYText = event.clientY; // Store the initial Y position
/* $button.text("...");*/ // Change button text while resizing
event.preventDefault(); // Prevent default behavior
}
function resizeDivText(event) {
if (isResizingText) {
const $div = $('#brand-text');
const newHeight = initialHeightText - (event.clientY - initialYText); // Calculate new height
if (newHeight > 50) { // Minimum height limit
$div.height(newHeight); // Set new height
}
}
}
function stopResizingText() {
isResizingText = false;
/* $('#btn-resize-image').text("Resize");*/ // Reset button text
}
// Mouse events
$('#btn-resize-text').on('mousedown', startResizingText);
$(document).on('mousemove', resizeDivText);
$(document).on('mouseup', stopResizingText);
// Touch events for mobile
$('#btn-resize-text').on('touchstart', startResizingText);
$(document).on('touchmove', resizeDivText);
$(document).on('touchend', stopResizingText);
$('#btn-close-text').on('click', function() {
$('#brand-toggle-left').trigger('click');
});
});
</script>
<div id="brand-text" class="brand-icon-panel-content panel-hide">
<!-- Add Text Button -->
<div class="brand-tabs">
<ul class="brand-tabs-menu">
<li id="brand-texts-open" class="active" data-target="#brand-all-texts">Text</li>
<li id="brand-texts-styles-open" data-target="#brand-texts-styles">Styles</li>
</ul>
<div id="brand-all-texts" class="brand-tab active">
<button id="brand-add-text" type="button" class="brand-btn primary brand-lg-btn btn-full"><span
class="material-icons">add_circle</span>Add Text</button>
<!-- Text Settings -->
<div id="brand-text-settings" class="brand-sub-settings">
<div class="brand-text-wrap " style="display: flex;flex-wrap: wrap;width: 100%; align-items: flex-start;">
<div class="brand-control-wrap label-block" style="padding-top: 0px; margin-top: 0px">
<label class="brand-control-label" > Text</label>
<div class="brand-control">
<textarea id="brand-text-input" class="brand-form-field rounded-textarea" style="max-width:90%!important; overflow: hidden;" rows="2"
autocomplete="off">Add Your Text Here</textarea>
</div>
</div>
<div class="brand-control-wrap" style="display: block;">
<!-- Used Fonts Section -->
<div id="brand-used-fonts-wrapper" style="display:none; margin-bottom: 15px;">
<label class="brand-control-label" style="width:100%!important;margin-top:0px!important;margin-bottom:5px!important; padding-top:0px!important;padding-bottom:0px!important;">Document Fonts</label>
<div id="brand-used-fonts-list" class="brand-font-list-container" style="max-height: auto; overflow-y: visible; border: none; padding: 0;">
<!-- Used Fonts go here -->
</div>
</div>
<!-- Categories as Scrolling Cards -->
<div style="margin-bottom: 10px;">
<label class="brand-control-label" style="width:100%!important;margin-top:0px!important;margin-bottom:5px!important; padding-top:0px!important;padding-bottom:0px!important;">Categories</label>
<div class="brand-font-categories-scroll">
<div class="brand-font-category-card active" data-category="all">All</div>
<div class="brand-font-category-card" data-category="sans-serif">Sans Serif</div>
<div class="brand-font-category-card" data-category="serif">Serif</div>
<div class="brand-font-category-card" data-category="display">Display</div>
<div class="brand-font-category-card" data-category="monospace">Monospace</div>
<div class="brand-font-category-card" data-category="handwriting">Handwriting</div>
</div>
</div>
<!-- Hidden Select to maintain compatibility -->
<div style="display:none;">
<select id="brand-font-category" class="brand-select brand-select2 tinyform" autocomplete="off">
<option value="all">All Categories</option>
<option value="sans-serif">Sans-serif</option>
<option value="serif">Serif</option>
<option value="display">Display</option>
<option value="monospace">Monospace</option>
<option value="handwriting">Handwriting</option>
</select>
</div>
<label class="brand-control-label" style="width:100%!important;margin-top:0px!important;margin-bottom:0px!important; padding-top:0px!important;padding-bottom:0px!important;">Font</label>
<div class="brand-control" style="flex-direction:column; align-items:stretch;">
<div class="brand-search-wrapper">
<span class="material-icons brand-search-icon">search</span>
<input type="text" id="brand-font-search" class="brand-form-field tinyform" placeholder="Search fonts..." autocomplete="off">
</div>
<div id="brand-font-list" class="brand-font-list-container">
<!-- Items go here -->
</div>
<!-- Hidden input to maintain compatibility with existing JS logic where possible -->
<input type="hidden" id="brand-font-family" data-loadFont="yes">
</div>
<style>
/* Font Panel Styling */
.brand-search-wrapper {
position: relative;
margin-bottom: 10px;
}
.brand-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 20px;
pointer-events: none;
}
#brand-font-search {
padding-left: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid #e2e8f0;
width: 80% !important;
font-size: 14px;
background: #fff;
transition: all 0.2s ease;
margin-bottom: 0 !important;
}
#brand-font-search:focus {
border-color: #6366f1;
outline: none;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
/* Font List Styling */
#brand-font-list {
max-height: 150px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #e2e8f0;
background: #fff;
border-radius: 8px;
}
/* Scrollbar for font list */
#brand-font-list::-webkit-scrollbar {
width: 6px;
}
#brand-font-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
#brand-font-list::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
#brand-font-list::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Select2 Customization for Font Panel */
/* Target the container that follows the specific select element */
#brand-font-category + .select2-container .select2-selection--single,
#brand-font-weight + .select2-container .select2-selection--single,
#brand-font-style + .select2-container .select2-selection--single {
height: 40px !important;
border-radius: 8px !important;
border: 1px solid #e2e8f0 !important;
display: flex !important;
align-items: center !important;
background-color: #fff !important;
}
#brand-font-category + .select2-container .select2-selection__rendered,
#brand-font-weight + .select2-container .select2-selection__rendered,
#brand-font-style + .select2-container .select2-selection__rendered {
padding-left: 12px !important;
line-height: normal !important;
color: #334155 !important;
font-size: 14px !important;
}
#brand-font-category + .select2-container .select2-selection__arrow,
#brand-font-weight + .select2-container .select2-selection__arrow,
#brand-font-style + .select2-container .select2-selection__arrow {
height: 38px !important;
right: 8px !important;
}
/* Active/Focus State */
#brand-font-category + .select2-container.select2-container--open .select2-selection--single {
border-color: #6366f1 !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
/* Category Cards Styling */
.brand-font-categories-scroll {
display: flex;
overflow-x: auto;
gap: 8px;
padding-bottom: 8px;
margin-bottom: 5px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.brand-font-categories-scroll::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.brand-font-category-card {
flex: 0 0 auto;
padding: 6px 12px;
border-radius: 20px; /* Rounded pill shape */
background: #f1f5f9;
color: #475569;
font-size: 12px;
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.2s;
white-space: nowrap;
user-select: none;
}
.brand-font-category-card:hover {
background: #e2e8f0;
}
.brand-font-category-card.active {
background: #6366f1;
color: #fff;
border-color: #6366f1;
}
</style>
<div style="display:flex; gap:10px; margin-top:10px;">
<div style="flex:1;">
<label class="brand-control-label" style="width:100%!important;margin-top:0px!important;margin-bottom:5px!important; padding-top:0px!important;padding-bottom:0px!important;">Weight</label>
<select id="brand-font-weight" class="brand-select brand-select2 tinyform" autocomplete="off" disabled>
<option value="400">Regular (400)</option>
</select>
</div>
<div style="flex:1;">
<label class="brand-control-label" style="width:100%!important;margin-top:0px!important;margin-bottom:5px!important; padding-top:0px!important;padding-bottom:0px!important;">Style</label>
<select id="brand-font-style" class="brand-select brand-select2 tinyform" autocomplete="off" disabled>
<option value="normal">Normal</option>
</select>
</div>
</div>
</div>
<div class="brand-control-wrap label-block" style="display:none">
<label class="brand-control-label" style="width:100%!important; max-width:50px!important;margin-top:10px!important;"> Align</label>
<div class="brand-control">
<div class="brand-btn-group icon-group" id="brand-text-flip-btns">
<button id="text-flip-x" type="button" class="brand-btn tooltip tooltip-top" data-title="Flip X"><span class="material-icons">flip</span></button>
<button id="text-flip-y" type="button" class="brand-btn tooltip tooltip-top" data-title="Flip Y"><span class="material-icons">flip</span></button>
<button type="button" class="brand-horizontal-center brand-btn tooltip tooltip-top" data-title="H-Align Center"><span class="material-icons">align_horizontal_center</span></button>
<button type="button" class="brand-vertical-center brand-btn tooltip tooltip-top" data-title="V-Align Center"><span class="material-icons">vertical_align_center</span></button>
</div>
</div>
</div>
<div class="brand-text-wrap " style="display: flex;flex-wrap: wrap;width: 100%; align-items: flex-start;">
<div class="brand-control-wrap-half" id="text-size-tab" style="display: none;">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Font Size</label>
<div class="brand-control"> <input id="brand-font-size" class="brand-form-field tinyform" type="number" value="60"
data-min="1" data-max="1000" autocomplete="off"></div>
</div>
</div>
<div class="brand-sub-settings" style="display: none;">
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Curved Radius <span id="brand-curved-radius-value" style="float:right;">150</span></label>
<div class="brand-control">
<input id="brand-curved-radius" class="brand-form-field tinyform" type="range" min="10" max="1000" step="1" value="150" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Arc (degrees) <span id="brand-curved-arc-value" style="float:right;">180</span></label>
<div class="brand-control">
<input id="brand-curved-arc" class="brand-form-field tinyform" type="range" min="10" max="360" step="1" value="180" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Invert</label>
<div class="brand-control">
<input id="brand-curved-invert" type="checkbox" class="brand-checkbox">
</div>
</div>
<div class="brand-text-wrap" style="display:flex;flex-wrap:wrap;width:100%;align-items:center;gap:.5em;">
<ul class="brand-grid menu-grid thebrand-layout-text-grid" style="width:100%">
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-arch-top" style="min-height:auto;">
<span class="material-icons">arch</span>
<span>Template Top</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-arch-bottom" style="min-height:auto;">
<span class="material-icons">arch</span>
<span>Template Bottom</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-circle" style="min-height:auto;">
<span class="material-icons">circle</span>
<span>Template Circle</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-wave" style="min-height:auto;">
<span class="material-icons">waves</span>
<span>Wave</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-spiral" style="min-height:auto;">
<span class="material-icons">sync</span>
<span>Spiral</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-vertical-arc" style="min-height:auto;">
<span class="material-icons">vertical_align_center</span>
<span>Vertical Arc</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-inward-curve" style="min-height:auto;">
<span class="material-icons">u_turn_left</span>
<span>Inward Curve</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-outward-curve" style="min-height:auto;">
<span class="material-icons">u_turn_right</span>
<span>Outward Curve</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-perspective-curve" style="min-height:auto;">
<span class="material-icons">light_mode</span>
<span>Perspective Curve</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-stretch-curve" style="min-height:auto;">
<span class="material-icons">open_in_full</span>
<span>Stretch Curve</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-badge" style="min-height:auto;">
<span class="material-icons">workspace_premium</span>
<span>Badge (Top+Bottom)</span>
</label>
</li>
</ul>
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;"><svg class="resizeSVG" width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M9 13H15M7 17L11.2717 7.60224C11.5031 7.09323 11.6188 6.83872 11.7791 6.75976C11.9184 6.69115 12.0816 6.69115 12.2209 6.75976C12.3812 6.83872 12.4969 7.09323 12.7283 7.60224L17 17M21 21H3M21 3H3" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> Line Height</label>
<div class="brand-control">
<input id="brand-line-height" class="brand-form-field tinyform" type="number" value="1.2"
data-min="0.1" data-max="10" step="0.1" autocomplete="off" >
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
<svg class="resizeSVG" width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M9 13L15 13M7 17L11.2717 7.60225C11.5031 7.09323 11.6188 6.83872 11.7791 6.75976C11.9184 6.69115 12.0816 6.69115 12.2209 6.75976C12.3812 6.83872 12.4969 7.09323 12.7283 7.60225L17 17M21 3V21M3 3L3 21" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
Letter Spacing</label>
<div class="brand-control">
<input id="brand-letter-spacing" class="brand-form-field tinyform" type="number" value="0"
data-max="1000" step="100" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;"><svg class="resizeSVG" fill="#000000" width="64px" height="64px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></g></svg> Fill Style</label>
<div class="brand-control">
<select id="brand-text-gradient" class="brand-select tinyform" autocomplete="off">
<option value="none" selected>Solid Color</option>
<option value="vertical">Vertical Gradient</option>
<option value="horizontal">Horizontal Gradient</option>
<option value="diagonal">Diagonal Gradient</option>
</select>
</div>
</div>
<div class="brand-control-wrap-half" id="text-fill-color" style="display: block!important;">
<label class="brand-control-label" style="margin-top:10px!important;">Color</label>
<div class="brand-control"> <input id="brand-text-color" type="text" class="brand-colorpicker disallow-empty " autocomplete="off" value="#000" /></div>
</div>
<div id="text-gradient-settings">
<div class="brand-control-wrap-
half control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Color 1</label>
<div class="brand-control">
<input id="text-gradient-color-1" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off" value="#9C27B0" />
</div>
</div>
<div class="brand-control-wrap-
half control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Color 2</label>
<div class="brand-control">
<input id="text-gradient-color-2" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off" value="#000000" />
</div>
</div>
<div class="brand-control-wrap-
half control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Color 3</label>
<div class="brand-control">
<input id="text-gradient-color-3" type="text"
class="brand-colorpicker allow-empty" autocomplete="off" value="" />
</div>
</div>
<div class="brand-control-wrap-
half control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Color 4</label>
<div class="brand-control">
<input id="text-gradient-color-4" type="text"
class="brand-colorpicker allow-empty" autocomplete="off" value="" />
</div>
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label"><svg class="resizeSVG" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" width="64px" height="64px" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st1{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .st2{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6,6;} .st3{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4,4;} .st4{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;} .st5{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-dasharray:3.1081,3.1081;} .st6{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:4,3;} </style> <circle class="st0" cx="13" cy="13" r="10"></circle> <path class="st0" d="M22.4,9.6c1.3,0.5,2.6,1.3,3.7,2.3c3.9,3.9,3.9,10.2,0,14.1s-10.2,3.9-14.1,0"></path> <path class="st6" d="M9.6,22.4c-1.3-3.5-0.5-7.6,2.3-10.5c2.8-2.8,6.9-3.6,10.5-2.3"></path> </g></svg> Opacity <span>1</span></label>
<div class="brand-control">
<input id="text-opacity" type="range" min="0" max="1" value="1" step="0.1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label"> <svg class="resizeSVG" width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M19.7141 6.9999L18.2856 16.9999M6.14286 7L4.35714 17M18 5L8 5M16 19L6 19M5.6 7H6.4C6.96005 7 7.24008 7 7.45399 6.89101C7.64215 6.79513 7.79513 6.64215 7.89101 6.45399C8 6.24008 8 5.96005 8 5.4V4.6C8 4.03995 8 3.75992 7.89101 3.54601C7.79513 3.35785 7.64215 3.20487 7.45399 3.10899C7.24008 3 6.96005 3 6.4 3H5.6C5.03995 3 4.75992 3 4.54601 3.10899C4.35785 3.20487 4.20487 3.35785 4.10899 3.54601C4 3.75992 4 4.03995 4 4.6V5.4C4 5.96005 4 6.24008 4.10899 6.45399C4.20487 6.64215 4.35785 6.79513 4.54601 6.89101C4.75992 7 5.03995 7 5.6 7ZM3.6 21H4.4C4.96005 21 5.24008 21 5.45399 20.891C5.64215 20.7951 5.79513 20.6422 5.89101 20.454C6 20.2401 6 19.9601 6 19.4V18.6C6 18.0399 6 17.7599 5.89101 17.546C5.79513 17.3578 5.64215 17.2049 5.45399 17.109C5.24008 17 4.96005 17 4.4 17H3.6C3.03995 17 2.75992 17 2.54601 17.109C2.35785 17.2049 2.20487 17.3578 2.10899 17.546C2 17.7599 2 18.0399 2 18.6V19.4C2 19.9601 2 20.2401 2.10899 20.454C2.20487 20.6422 2.35785 20.7951 2.54601 20.891C2.75992 21 3.03995 21 3.6 21ZM19.6 7H20.4C20.9601 7 21.2401 7 21.454 6.89101C21.6422 6.79513 21.7951 6.64215 21.891 6.45399C22 6.24008 22 5.96005 22 5.4V4.6C22 4.03995 22 3.75992 21.891 3.54601C21.7951 3.35785 21.6422 3.20487 21.454 3.10899C21.2401 3 20.9601 3 20.4 3H19.6C19.0399 3 18.7599 3 18.546 3.10899C18.3578 3.20487 18.2049 3.35785 18.109 3.54601C18 3.75992 18 4.03995 18 4.6V5.4C18 5.96005 18 6.24008 18.109 6.45399C18.2049 6.64215 18.3578 6.79513 18.546 6.89101C18.7599 7 19.0399 7 19.6 7ZM17.6 21H18.4C18.9601 21 19.2401 21 19.454 20.891C19.6422 20.7951 19.7951 20.6422 19.891 20.454C20 20.2401 20 19.9601 20 19.4V18.6C20 18.0399 20 17.7599 19.891 17.546C19.7951 17.3578 19.6422 17.2049 19.454 17.109C19.2401 17 18.9601 17 18.4 17H17.6C17.0399 17 16.7599 17 16.546 17.109C16.3578 17.2049 16.2049 17.3578 16.109 17.546C16 17.7599 16 18.0399 16 18.6V19.4C16 19.9601 16 20.2401 16.109 20.454C16.2049 20.6422 16.3578 20.7951 16.546 20.891C16.7599 21 17.0399 21 17.6 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> Skew X<span>0</span></label>
<div class="brand-control">
<input id="text-skew-x" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label"><svg class="resizeSVG" fill="#000000" width="64px" height="64px" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M 5.4648 42.5781 C 7.5272 42.5781 9.3085 41.3594 10.1757 39.6016 L 45.4724 49.9609 C 46.0820 52.2109 48.1211 53.875 50.5585 53.875 C 53.4179 53.875 55.7852 51.5313 55.7852 48.6484 C 55.7852 46.4687 54.4489 44.5937 52.5505 43.7969 L 51.5665 20.2422 C 53.5820 19.5156 55.0350 17.5703 55.0350 15.2969 C 55.0350 12.4140 52.6681 10.0703 49.8083 10.0703 C 47.9099 10.0703 46.2227 11.1016 45.3083 12.625 L 25.7851 7.2578 C 25.7851 4.4922 23.4179 2.1250 20.5585 2.1250 C 17.6757 2.1250 15.3085 4.4922 15.3085 7.3750 C 15.3085 8.9219 15.9882 10.3281 17.0897 11.2891 L 6.2148 32.1484 C 5.9804 32.1016 5.7226 32.1016 5.4648 32.1016 C 2.5819 32.1016 .2148 34.4453 .2148 37.3281 C .2148 40.2109 2.5819 42.5781 5.4648 42.5781 Z M 20.5585 12.625 C 22.2694 12.625 23.8163 11.7578 24.7772 10.4453 L 44.5820 15.9062 C 44.8398 17.9922 46.3163 19.7266 48.2852 20.3125 L 49.1056 43.5859 C 47.5585 44.0547 46.2928 45.2031 45.6836 46.6797 L 10.5976 36.3672 C 10.4101 35.3828 9.9413 34.4687 9.2851 33.7656 L 20.1601 12.6016 C 20.2772 12.6016 20.4179 12.625 20.5585 12.625 Z"></path></g></svg> Skew Y<span>0</span></label>
<div class="brand-control">
<input id="text-skew-y" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label"><svg class="resizeSVG" width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.5 20.5C6.80558 20.5 3 16.6944 3 12C3 7.30558 6.80558 3.5 11.5 3.5C16.1944 3.5 20 7.30558 20 12C20 13.5433 19.5887 14.9905 18.8698 16.238M22.5 15L18.8698 16.238M17.1747 12.3832L18.5289 16.3542L18.8698 16.238" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> Rotate<span>0</span></label>
<div class="brand-control">
<input id="text-rotate" type="range" min="0" max="360" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;"><svg class="resizeSVG" fill="#000000" width="64px" height="64px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="outline" enable-background="new 0 0 32 32" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect x="13" y="5" width="2" height="2"></rect> <rect x="5" y="13" width="2" height="2"></rect> <rect x="5" y="17" width="2" height="2"></rect> <rect x="25" y="13" width="2" height="2"></rect> <rect x="25" y="17" width="2" height="2"></rect> <rect x="17" y="5" width="2" height="2"></rect> <rect x="13" y="25" width="2" height="2"></rect> <rect x="17" y="25" width="2" height="2"></rect> <polygon points="7,21 5,21 5,27 11,27 11,25 7,25 "></polygon> <polygon points="5,11 7,11 7,7 11,7 11,5 5,5 "></polygon> <polygon points="25,25 21,25 21,27 27,27 27,21 25,21 "></polygon> <polygon points="21,5 21,7 25,7 25,11 27,11 27,5 "></polygon> </g></svg> Outline Size</label>
<div class="brand-control">
<input id="brand-outline-size" class="brand-form-field tinyform" type="number" value="0"
data-min="0" data-max="100" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;"><svg class="resizeSVG" width="64px" height="64px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><linearGradient id="a" x1="814.98" x2="881.02" y1="235.19" y2="235.19" gradientTransform="matrix(1.3745 0 0 1.3633 -317.33 -85.443)" gradientUnits="userSpaceOnUse"><stop stop-color="#8a8a8a" offset="0"></stop><stop stop-color="#f9f9f9" offset="1"></stop></linearGradient></defs><path d="M878.98 235.19c.012 17.094-13.851 30.957-30.957 30.957s-30.969-13.863-30.957-30.957c-.012-17.094 13.851-30.957 30.957-30.957s30.969 13.863 30.957 30.957z" color="#000000" fill="url(#a)" stroke="#373737" stroke-width="5.6502" transform="matrix(.17626 0 0 .17771 -141.52 -33.795)"></path></g></svg> Outline Color</label>
<div class="brand-control">
<input id="brand-outline-color" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="#fff" />
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;"><svg class="resizeSVG" width="64px" height="64px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="48" height="48" fill="white" fill-opacity="0.01"></rect> <path fill-rule="evenodd" clip-rule="evenodd" d="M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z" fill="#000000"></path> <path d="M20.8535 5.50439L24.389 9.03993" stroke="#000000" stroke-width="4" stroke-linecap="round"></path> <path d="M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z" stroke="#000000" stroke-width="4" stroke-linejoin="round"></path> <path d="M12 20.0732L28.961 25.6496" stroke="#000000" stroke-width="4" stroke-linecap="round"></path> <path d="M4 43H44" stroke="#000000" stroke-width="4" stroke-linecap="round"></path> </g></svg> Background</label>
<div class="brand-control">
<input id="brand-text-background" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="" style="" />
</div>
</div>
<div class="brand-control-wrap- conditional">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;"> <svg class="resizeSVG" width="64px" height="64px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#444" d="M14 2v-2h-14v14h2v2h14v-14h-2zM13 13h-12v-12h12v12z"></path> </g></svg>
Text Shadow</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-text-shadow" class="brand-toggle-checkbox"
data-conditional="#text-shadow-settings" type="checkbox" autocomplete="off" />
<div class="brand-toggle-switch " ></div>
</label>
</div>
</div>
<div id="text-shadow-settings" class="d-none conditional-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Shadow Color</label>
<div class="brand-control">
<input id="text-shadow-color" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="#000" />
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Shadow Blur</label>
<div class="brand-control">
<input id="text-shadow-blur" class="brand-form-field tinyform" type="number" value="5"
data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Offset X</label>
<div class="brand-control">
<input id="text-shadow-offset-x" class="brand-form-field tinyform" type="number" value="5"
data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Offset Y</label>
<div class="brand-control">
<input id="text-shadow-offset-y" class="brand-form-field tinyform" type="number" value="5"
data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="brand-texts-styles" class="brand-tab">
<div class="brand-sub-settings" style="display: block;">
<div>
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Text Layouts</a>
<div id="brand-text-layouts" >
<div class="TheBrandScrollable TheBrandShapeStyles" style="--scrollable-feather-start-opacity: 0.5;--scrollable-feather-end-opacity: 0;" data-direction="y" data-state="idle overflows">
<ul class="brand-grid thebrand-layout-text-grid" id="brand-lyts">
<!--
<li class="brand-layout-text light" data-elsource="0" data-loader="no" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/0.png">
</li>-->
<li class="brand-layout-text light" data-elsource="1" data-loader="no" style="min-height: auto;">
<label for="style1" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/1.png"><span style="font-size: 8px; display:none;">Style 1</span></label>
</li>
<li class="brand-layout-text light" data-elsource="2" data-loader="no" style="min-height: auto;">
<label for="style2" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/2.png"><span style="font-size: 8px; display:none;">Style 2</span></label>
</li>
<li class="brand-layout-text light" data-elsource="3" data-loader="no" style="min-height: auto;">
<label for="style3" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/3.png"><span style="font-size: 8px; display:none;">Style 3</span></label>
</li>
<li class="brand-layout-text light" data-elsource="4" data-loader="no" style="min-height: auto;">
<label for="style4" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/4.png"><span style="font-size: 8px; display:none;">Style 4</span></label>
</li>
<li class="brand-layout-text light" data-elsource="5" data-loader="no" style="min-height: auto;">
<label for="style5" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/5.png"><span style="font-size: 8px; display:none;">Style 5</span></label>
</li>
<li class="brand-layout-text light" data-elsource="6" data-loader="no" style="min-height: auto;">
<label for="style6" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/6.png"><span style="font-size: 8px; display:none;">Style 6</span></label>
</li>
<li class="brand-layout-text light" data-elsource="7" data-loader="no" style="min-height: auto;">
<label for="style7" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/7.png"><span style="font-size: 8px; display:none;">Style 7</span></label>
</li>
<li class="brand-layout-text light" data-elsource="8" data-loader="no" style="min-height: auto;">
<label for="style8" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/8.png"><span style="font-size: 8px; display:none;">Style 8</span></label>
</li>
<li class="brand-layout-text light" data-elsource="9" data-loader="no" style="min-height: auto;">
<label for="style9" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/9.png"><span style="font-size: 8px; display:none;">Style 9</span></label>
</li>
<li class="brand-layout-text light" data-elsource="10" data-loader="no" style="min-height: auto;">
<label for="style10" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/10.png"><span style="font-size: 8px; display:none;">Style 10</span></label>
</li>
<li class="brand-layout-text light" data-elsource="11" data-loader="no" style="min-height: auto;">
<label for="style11" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/11.png"><span style="font-size: 8px; display:none;">Style 11</span></label>
</li>
<li class="brand-layout-text light" data-elsource="12" data-loader="no" style="min-height: auto;">
<label for="style12" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/12.png"><span style="font-size: 8px; display:none;">Style 12</span></label>
</li>
<li class="brand-layout-text light" data-elsource="13" data-loader="no" style="min-height: auto;">
<label for="style13" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/13.png"><span style="font-size: 8px; display:none;">Style 13</span></label>
</li>
<li class="brand-layout-text light" data-elsource="14" data-loader="no" style="min-height: auto;">
<label for="style14" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/14.png"><span style="font-size: 8px; display:none;">Style 14</span></label>
</li>
<li class="brand-layout-text light" data-elsource="15" data-loader="no" style="min-height: auto;">
<label for="style15" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/15.png"><span style="font-size: 8px; display:none;">Style 15</span></label>
</li>
<li class="brand-layout-text light" data-elsource="16" data-loader="no" style="min-height: auto;">
<label for="style16" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/16.png"><span style="font-size: 8px; display:none;">Style 16</span></label>
</li>
<li class="brand-layout-text light" data-elsource="17" data-loader="no" style="min-height: auto;">
<label for="style17" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/17.png"><span style="font-size: 8px; display:none;">Style 17</span></label>
</li>
<li class="brand-layout-text light" data-elsource="18" data-loader="no" style="min-height: auto;">
<label for="style18" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/18.png"><span style="font-size: 8px; display:none;">Style 18</span></label>
</li>
<li class="brand-layout-text light" data-elsource="19" data-loader="no" style="min-height: auto;">
<label for="style19" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/19.png"><span style="font-size: 8px; display:none;">Style 19</span></label>
</li>
<li class="brand-layout-text light" data-elsource="20" data-loader="no" style="min-height: auto;">
<label for="style20" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/20.png"><span style="font-size: 8px; display:none;">Style 20</span></label>
</li>
<li class="brand-layout-text light" data-elsource="21" data-loader="no" style="min-height: auto;">
<label for="style21" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/21.png"><span style="font-size: 8px; display:none;">Style 21</span></label>
</li>
<li class="brand-layout-text light" data-elsource="22" data-loader="no" style="min-height: auto;">
<label for="style22" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/22.png"><span style="font-size: 8px; display:none;">Style 22</span></label>
</li>
<li class="brand-layout-text light" data-elsource="23" data-loader="no" style="min-height: auto;">
<label for="style23" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/23.png"><span style="font-size: 8px; display:none;">Style 23</span></label>
</li>
<li class="brand-layout-text light" data-elsource="24" data-loader="no" style="min-height: auto;">
<label for="style24" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/24.png"><span style="font-size: 8px; display:none;">Style 24</span></label>
</li>
<li class="brand-layout-text light" data-elsource="25" data-loader="no" style="min-height: auto;">
<label for="style25" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/25.png"><span style="font-size: 8px; display:none;">Style 25</span></label>
</li>
<li class="brand-layout-text light" data-elsource="26" data-loader="no" style="min-height: auto;">
<label for="style26" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/26.png"><span style="font-size: 8px; display:none;">Style 26</span></label>
</li>
<li class="brand-layout-text light" data-elsource="27" data-loader="no" style="min-height: auto;">
<label for="style27" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/27.png"><span style="font-size: 8px; display:none;">Style 27</span></label>
</li>
<li class="brand-layout-text light" data-elsource="28" data-loader="no" style="min-height: auto;">
<label for="style28" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/28.png"><span style="font-size: 8px; display:none;">Style 28</span></label>
</li>
<li class="brand-layout-text light" data-elsource="29" data-loader="no" style="min-height: auto;">
<label for="style29" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/29.png"><span style="font-size: 8px; display:none;">Style 29</span></label>
</li>
<li class="brand-layout-text light" data-elsource="30" data-loader="no" style="min-height: auto;">
<label for="style30" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/30.png"><span style="font-size: 8px; display:none;">Style 30</span></label>
</li>
<li class="brand-layout-text light" data-elsource="31" data-loader="no" style="min-height: auto;">
<label for="style31" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/31.png"><span style="font-size: 8px; display:none;">Style 31</span></label>
</li>
<li class="brand-layout-text light" data-elsource="32" data-loader="no" style="min-height: auto;">
<label for="style32" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/32.png"><span style="font-size: 8px; display:none;">Style 32</span></label>
</li>
<li class="brand-layout-text light" data-elsource="33" data-loader="no" style="min-height: auto;">
<label for="style33" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/33.png"><span style="font-size: 8px; display:none;">Style 33</span></label>
</li>
<li class="brand-layout-text light" data-elsource="34" data-loader="no" style="min-height: auto;">
<label for="style34" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/34.png"><span style="font-size: 8px; display:none;">Style 34</span></label>
</li>
<li class="brand-layout-text light" data-elsource="35" data-loader="no" style="min-height: auto;">
<label for="style35" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/35.png"><span style="font-size: 8px; display:none;">Style 35</span></label>
</li>
<li class="brand-layout-text light" data-elsource="36" data-loader="no" style="min-height: auto;">
<label for="style36" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/36.png"><span style="font-size: 8px; display:none;">Style 36</span></label>
</li>
<li class="brand-layout-text light" data-elsource="37" data-loader="no" style="min-height: auto;">
<label for="style37" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/37.png"><span style="font-size: 8px; display:none;">Style 37</span></label>
</li>
<li class="brand-layout-text light" data-elsource="38" data-loader="no" style="min-height: auto;">
<label for="style38" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/38.png"><span style="font-size: 8px; display:none;">Style 38</span></label>
</li>
<li class="brand-layout-text light" data-elsource="39" data-loader="no" style="min-height: auto;">
<label for="style39" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/39.png"><span style="font-size: 8px; display:none;">Style 39</span></label>
</li>
<li class="brand-layout-text light" data-elsource="40" data-loader="no" style="min-height: auto;">
<label for="style40" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/40.png"><span style="font-size: 8px; display:none;">Style 40</span></label>
</li>
<li class="brand-layout-text light" data-elsource="41" data-loader="no" style="min-height: auto;">
<label for="style41" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/41.png"><span style="font-size: 8px; display:none;">Style 41</span></label>
</li>
<li class="brand-layout-text light" data-elsource="42" data-loader="no" style="min-height: auto;">
<label for="style42" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/42.png"><span style="font-size: 8px; display:none;">Style 42</span></label>
</li>
<li class="brand-layout-text light" data-elsource="43" data-loader="no" style="min-height: auto;">
<label for="style43" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/43.png"><span style="font-size: 8px; display:none;">Style 43</span></label>
</li>
<li class="brand-layout-text light" data-elsource="44" data-loader="no" style="min-height: auto;">
<label for="style44" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/44.png"><span style="font-size: 8px; display:none;">Style 44</span></label>
</li>
<li class="brand-layout-text light" data-elsource="45" data-loader="no" style="min-height: auto;">
<label for="style45" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/45.png"><span style="font-size: 8px; display:none;">Style 45</span></label>
</li>
<li class="brand-layout-text light" data-elsource="46" data-loader="no" style="min-height: auto;">
<label for="style46" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/46.png"><span style="font-size: 8px; display:none;">Style 46</span></label>
</li>
<li class="brand-layout-text light" data-elsource="47" data-loader="no" style="min-height: auto;">
<label for="style47" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/47.png"><span style="font-size: 8px; display:none;">Style 47</span></label>
</li>
<li class="brand-layout-text light" data-elsource="48" data-loader="no" style="min-height: auto;">
<label for="style48" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/48.png"><span style="font-size: 8px; display:none;">Style 48</span></label>
</li>
<li class="brand-layout-text light" data-elsource="49" data-loader="no" style="min-height: auto;">
<label for="style49" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/49.png"><span style="font-size: 8px; display:none;">Style 49</span></label>
</li>
<li class="brand-layout-text light" data-elsource="50" data-loader="no" style="min-height: auto;">
<label for="style50" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/50.png"><span style="font-size: 8px; display:none;">Style 50</span></label>
</li>
<li class="brand-layout-text light" data-elsource="51" data-loader="no" style="min-height: auto;">
<label for="style51" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/51.png"><span style="font-size: 8px; display:none;">Style 51</span></label>
</li>
<li class="brand-layout-text light" data-elsource="52" data-loader="no" style="min-height: auto;">
<label for="style52" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/52.png"><span style="font-size: 8px; display:none;">Style 52</span></label>
</li>
<li class="brand-layout-text light" data-elsource="53" data-loader="no" style="min-height: auto;">
<label for="style53" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/53.png"><span style="font-size: 8px; display:none;">Style 53</span></label>
</li>
<li class="brand-layout-text light" data-elsource="54" data-loader="no" style="min-height: auto;">
<label for="style54" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/54.png"><span style="font-size: 8px; display:none;">Style 54</span></label>
</li>
<li class="brand-layout-text light" data-elsource="55" data-loader="no" style="min-height: auto;">
<label for="style55" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/55.png"><span style="font-size: 8px; display:none;">Style 55</span></label>
</li>
<li class="brand-layout-text light" data-elsource="56" data-loader="no" style="min-height: auto;">
<label for="style56" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/56.png"><span style="font-size: 8px; display:none;">Style 56</span></label>
</li>
<li class="brand-layout-text light" data-elsource="57" data-loader="no" style="min-height: auto;">
<label for="style57" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/57.png"><span style="font-size: 8px; display:none;">Style 57</span></label>
</li>
<li class="brand-layout-text light" data-elsource="58" data-loader="no" style="min-height: auto;">
<label for="style58" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/58.png"><span style="font-size: 8px; display:none;">Style 58</span></label>
</li>
<li class="brand-layout-text light" data-elsource="59" data-loader="no" style="min-height: auto;">
<label for="style59" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/59.png"><span style="font-size: 8px; display:none;">Style 59</span></label>
</li>
<li class="brand-layout-text light" data-elsource="60" data-loader="no" style="min-height: auto;">
<label for="style60" style="min-height: auto;"><img class="lazy-fabric" style="border-radius:10px;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://www.thebrand.ai/v/uploads/textLayouts/images/60.png"><span style="font-size: 8px; display:none;">Style 60</span></label>
</li>
</ul>
</div>
</div>
</div>
<div class="brand-text-wrap brand-sub-settings" style="display:flex;flex-wrap:wrap;width:100%;align-items:center;gap:.5em;">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Curved Text</a>
<ul class="brand-grid menu-grid thebrand-layout-text-grid" style="width:100%">
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-arch-top" style="min-height:auto;">
<span class="material-icons">arch</span>
<span>Template Top</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-arch-bottom" style="min-height:auto;">
<span class="material-icons">arch</span>
<span>Template Bottom</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-circle" style="min-height:auto;">
<span class="material-icons">circle</span>
<span>Template Circle</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-wave" style="min-height:auto;">
<span class="material-icons">waves</span>
<span>Wave</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-spiral" style="min-height:auto;">
<span class="material-icons">sync</span>
<span>Spiral</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-vertical-arc" style="min-height:auto;">
<span class="material-icons">vertical_align_center</span>
<span>Vertical Arc</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-inward-curve" style="min-height:auto;">
<span class="material-icons">u_turn_left</span>
<span>Inward Curve</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-outward-curve" style="min-height:auto;">
<span class="material-icons">u_turn_right</span>
<span>Outward Curve</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-perspective-curve" style="min-height:auto;">
<span class="material-icons">light_mode</span>
<span>Perspective Curve</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-stretch-curve" style="min-height:auto;">
<span class="material-icons">open_in_full</span>
<span>Stretch Curve</span>
</label>
</li>
<li class="brand-layout-text light" style="min-height:auto;">
<label id="brand-text-templates-badge" style="min-height:auto;">
<span class="material-icons">workspace_premium</span>
<span>Badge (Top+Bottom)</span>
</label>
</li>
</ul>
</div>
<div class="brand-sub-settings" style="display:block;">
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Curved Radius <span id="brand-curved-radius-value" style="float:right;">150</span></label>
<div class="brand-control">
<input id="brand-curved-radius" class="brand-form-field tinyform" type="range" min="10" max="1000" step="1" value="150" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Arc (degrees) <span id="brand-curved-arc-value" style="float:right;">180</span></label>
<div class="brand-control">
<input id="brand-curved-arc" class="brand-form-field tinyform" type="range" min="10" max="360" step="1" value="180" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Invert</label>
<div class="brand-control">
<input id="brand-curved-invert" type="checkbox" class="brand-checkbox">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Wave Amplitude <span id="brand-wave-amplitude-value" style="float:right;">40</span></label>
<div class="brand-control">
<input id="brand-wave-amplitude" class="brand-form-field tinyform" type="range" min="0" max="200" step="1" value="40" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Wave Wavelength (px) <span id="brand-wave-wavelength-value" style="float:right;">100</span></label>
<div class="brand-control">
<input id="brand-wave-wavelength" class="brand-form-field tinyform" type="range" min="20" max="400" step="1" value="100" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Spiral Start Radius (r0) <span id="brand-spiral-r0-value" style="float:right;">80</span></label>
<div class="brand-control">
<input id="brand-spiral-r0" class="brand-form-field tinyform" type="range" min="10" max="300" step="1" value="80" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Spiral Growth (k) <span id="brand-spiral-k-value" style="float:right;">6</span></label>
<div class="brand-control">
<input id="brand-spiral-k" class="brand-form-field tinyform" type="range" min="1" max="20" step="1" value="6" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Perspective Strength <span id="brand-perspective-strength-value" style="float:right;">0.3</span></label>
<div class="brand-control">
<input id="brand-perspective-strength" class="brand-form-field tinyform" type="range" min="0" max="1" step="0.05" value="0.3" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Stretch Factor <span id="brand-stretch-factor-value" style="float:right;">0.5</span></label>
<div class="brand-control">
<input id="brand-stretch-factor" class="brand-form-field tinyform" type="range" min="0" max="2" step="0.05" value="0.5" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Text END -->
<!-- Image START -->
<script>
$(document).ready(function() {
let isResizing = false;
let initialHeight;
let initialY;
function startResizing(event) {
isResizing = true;
const $button = $(this);
const $div = $('#brand-image');
initialHeight = $div.height(); // Store the initial height
initialY = event.clientY; // Store the initial Y position
/* $button.text("...");*/ // Change button text while resizing
event.preventDefault(); // Prevent default behavior
}
function resizeDiv(event) {
if (isResizing) {
const $div = $('#brand-image');
const newHeight = initialHeight - (event.clientY - initialY); // Calculate new height
if (newHeight > 50) { // Minimum height limit
$div.height(newHeight); // Set new height
}
}
}
function stopResizing() {
isResizing = false;
/* $('#btn-resize-image').text("Resize");*/ // Reset button text
}
// Mouse events
$('#btn-resize-image').on('mousedown', startResizing);
$(document).on('mousemove', resizeDiv);
$(document).on('mouseup', stopResizing);
// Touch events for mobile
$('#btn-resize-image').on('touchstart', startResizing);
$(document).on('touchmove', resizeDiv);
$(document).on('touchend', stopResizing);
});
</script>
<div id="brand-image" class="brand-icon-panel-content panel-hide">
<div class="brand-tabs">
<ul class="brand-tabs-menu">
<li id="brand-img-mode" class="active" data-target="#brand-image-mode">Image</li>
<li id="brand-image-ai-context" data-target="#brand-ai-image-mode">Edit with AI </li>
</ul>
<div id="brand-image-mode" class="brand-tab active">
<div class="brand-sub-settings" style="display: block;">
<ul class="brand-grid menu-grid thebrand-layout-text-grid">
<li class="brand-layout-text light" id="pop-ai">
<span class="material-icons">image</span>
<label for="style1">AI Tools</label>
</li>
<li class="brand-layout-text light" id="pop-upload">
<span class="material-icons">upload</span>
<label for="style1">Upload</label>
</li>
<li class="brand-layout-text light" id="pop-media">
<span class="material-icons">photo_library</span>
<label for="style1">Media</label>
</li>
</ul>
</div>
<span id="brand-image-main" style="">
<!-- Media Library Button -->
<button id="img-ai2" style="margin-bottom: 10px; display: none; " type="button"
class="brand-btn brand-lg-btn btn-full"><span class="material-icons">edit</span>
Ai Image Tools
</button>
<!-- Upload Image Button -->
<div class="brand-file-field" style="display: none;" >
<input type="file" name="brand-file" id="brand-img-upload-i" class="brand-hidden-file"
accept="image/png, image/jpeg, image/webp" />
<label for="brand-img-upload-i" style="margin-bottom: 10px" class="brand-btn brand-lg-btn btn-full"><span
class="material-icons">upload</span><span>Upload from computer</span></label>
</div>
<!-- Media Library Button -->
<button style="display: none;" id="brand-img-media-library-i" type="button"
class="brand-btn brand-lg-btn btn-full brand-modal-open"
data-target="#modal-media-library" style="margin-bottom: 10px"><span class="material-icons">photo_library</span>Select
From Media Library</button>
</span>
<!-- Image Settings -->
<div id="brand-image-settings" class="brand-sub-settings" style="display: flex;flex-wrap: wrap;width: 100%; align-items: flex-start;">
<button style="visibility: hidden; display:none;" id="crop-image-object" type="button" class="brand-btn brand-lg-btn btn-full"><span class="material-icons">crop</span>Crop Image</button>
<button style="visibility: hidden; display:none;" id="crop-image-object-selection" type="button" class="brand-btn danger brand-lg-btn btn-full d-none"><span class="material-icons">crop</span>Crop Selection</button>
<div class="brand-control-wrap label-block" style="display: none;">
<label class="brand-control-label" style="width:100%!important; max-width:50px!important;margin-top:10px!important;"> Align</label>
<div class="brand-control">
<div class="brand-btn-group icon-group" id="brand-image-flip-btns">
<button id="img-flip-horizontal" type="button" class="brand-btn tooltip tooltip-top" data-title="Flip X"><span class="material-icons">flip</span></button>
<button id="img-flip-vertical" type="button" class="brand-btn tooltip tooltip-top" data-title="Flip Y"><span class="material-icons">flip</span></button>
<button type="button" class="brand-horizontal-center brand-btn tooltip tooltip-top" data-title="H-Align Center"><span class="material-icons">align_horizontal_center</span></button>
<button type="button" class="brand-vertical-center brand-btn tooltip tooltip-top" data-title="V-Align Center"><span class="material-icons">vertical_align_center</span></button>
</div>
</div>
</div>
<div class="brand-control-wrap-half" style="display: none;">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Image Filter</label>
<div class="brand-control">
<select id="image-filter" class="brand-select tinyform" autocomplete="off">
<option value="none" selected>None</option>
<option value="grayscale">Grayscale</option>
<option value="sepia">Sepia</option>
<option value="blackwhite">Black & White</option>
<option value="brownie">Brownie</option>
<option value="vintage">Vintage</option>
<option value="kodachrome">Kodachrome</option>
<option value="technicolor">Technicolor</option>
<option value="polaroid">Polaroid</option>
<option value="shift">Shift</option>
<option value="invert">Invert</option>
</select>
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Border Width</label>
<div class="brand-control">
<input id="img-border-width" class="brand-form-field tinyform" type="number" value="0"
data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Border Color</label>
<div class="brand-control">
<input id="img-border-color" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="#ffffff" />
</div>
</div>
<div class="brand-control-wrap-half conditional" style="display: none;">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Mask</label>
<div class="brand-control">
<select id="brand-img-mask" class="brand-select tinyform" autocomplete="off">
<option value="none" selected>None</option>
<option value="circle">Circle</option>
<option value="triangle">Triangle Up</option>
<option value="triangleDown">Triangle Down</option>
<option value="triangleLeft">Triangle Left</option>
<option value="triangleRight">Triangle Right</option>
<option value="pentagon">Pentagon Up</option>
<option value="pentagonDown">Pentagon Down</option>
<option value="pentagonLeft">Pentagon Left</option>
<option value="pentagonRight">Pentagon Right</option>
<option value="octagon">Octagon</option>
<option value="star">Star</option>
<option value="starReverse">Star Reverse</option>
<option value="custom">Rounded Corners</option>
</select>
</div>
</div>
<div id="brand-img-radius-settings" class="d-none">
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Rounded
Corners<span>0</span></label>
<div class="brand-control">
<input id="img-border-radius" type="range" min="0" max="1000" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Shadow</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-image-shadow" class="brand-toggle-checkbox"
data-conditional="#image-shadow-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="image-shadow-settings" class="d-none conditional-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Shadow Color</label>
<div class="brand-control">
<input id="image-shadow-color" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off"
value="#000" />
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Shadow Blur</label>
<div class="brand-control">
<input id="image-shadow-blur" class="brand-form-field tinyform" type="number" value="5"
step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Offset X</label>
<div class="brand-control">
<input id="image-shadow-offset-x" class="brand-form-field tinyform" type="number"
value="5" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Offset Y</label>
<div class="brand-control">
<input id="image-shadow-offset-y" class="brand-form-field tinyform" type="number"
value="5" step="1" autocomplete="off">
</div>
</div>
</div>
<div class="brand-sub-settings" style="display: block;display: flex;flex-wrap: wrap;width: 100%; align-items: flex-start;"></div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Opacity<span>1</span></label>
<div class="brand-control">
<input id="img-opacity" type="range" min="0" max="1" value="1" step="0.1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Skew X<span>0</span></label>
<div class="brand-control">
<input id="img-skew-x" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Skew Y<span>0</span></label>
<div class="brand-control">
<input id="img-skew-y" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Rotate<span>0</span></label>
<div class="brand-control">
<input id="img-rotate" type="range" min="0" max="360" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<button style="visibility: hidden; display: none" id="brand-img-replace-media-library" type="button"
class="brand-btn brand-lg-btn btn-full brand-modal-open"
data-target="#modal-media-library"><span
class="material-icons">photo_library</span>Replace Image
</button>
</div>
</div>
<div id="brand-ai-image-mode" class="brand-tab">
<div id="brand-image-tools" class="">
<div id="brand-tools-menu">
<span id="ai-state-info" class="notice notice-info">
<h6> No Image is selected </h6>
Select an image layer to use ai features.
</span>
<span id="ai-state">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>AI Image Tools</a>
<div id="brand-ai-tools-menu-removebg" class="brand-tools-menu-item" data-id="#brand-removebg-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/removebg.png">
</div>
<div class="brand-tools-menu-item-desc">Background Remover</div>
</div>
<div id="brand-ai-tools-menu-replacebg" class="brand-tools-menu-item" data-id="#brand-replacebg-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/replacebg.png">
</div>
<div class="brand-tools-menu-item-desc">Background Replacer</div>
</div>
<div id="brand-ai-tools-menu-resizer" class="brand-tools-menu-item" data-id="#brand-resizer-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/resizer.png">
</div>
<div class="brand-tools-menu-item-desc">Image Upscaler</div>
</div>
<div id="brand-ai-tools-menu-removetext" class="brand-tools-menu-item" data-id="#brand-removetext-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/removetext.png">
</div>
<div class="brand-tools-menu-item-desc">Remove Text</div>
</div>
<div id="brand-ai-tools-menu-uncrop" class="brand-tools-menu-item" data-id="#brand-uncrop-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/uncrop.png">
</div>
<div class="brand-tools-menu-item-desc">Uncrop</div>
</div>
<div id="brand-ai-tools-menu-reimagine" class="brand-tools-menu-item" data-id="#brand-reimagine-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/reimagine.png">
</div>
<div class="brand-tools-menu-item-desc">Reimagine</div>
</div>
<!--<div id="brand-ai-tools-menu-clean" class="brand-tools-menu-item" data-id="#brand-clean-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/clean.png">
</div>
<div class="brand-tools-menu-item-desc">Clean Image</div>
</div>
<div id="brand-ai-tools-menu-drawing" class="brand-tools-menu-item" data-id="#brand-drawing-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/drawing.png">
</div>
<div class="brand-tools-menu-item-desc">Drawing</div>
</div>-->
<div id="brand-ai-tools-menu-variation" class="brand-tools-menu-item" data-id="#brand-variation-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/variation.png">
</div>
<div class="brand-tools-menu-item-desc">Image Variations</div>
</div>
<div id="brand-ai-tools-menu-imageedit" class="brand-tools-menu-item" data-id="#brand-imageedit-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/imageedit.png">
</div>
<div class="brand-tools-menu-item-desc">AI Edit</div>
</div>
<!--
<div id="brand-ai-tools-menu-recreate" class="brand-tools-menu-item" data-id="#brand-recreate-image-tools">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/regenerator.png">
</div>
<div class="brand-tools-menu-item-desc">Recreate Image</div>
</div>
-->
</span>
</div>
<div id="brand-tools-content" class="aibrand-adjust-panel">
<!-- App START -->
<div id="brand-removebg-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-removebg-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Remove BG<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc">Only this selected image layer will be edited with the AI.
</div>
<button id="ai-clipdrop-remove-background" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"><span
class="material-icons arrow">landscape</span>Remove Background
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-variation-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-variation-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Image Variation<span
class="data-count"> AI Style 1</span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc"> Creates a variation of the selected image.
</div>
<button id="ai-oai-variation" type="button" class="brand-btn primary brand-lg-btn btn-full"
autocomplete="off"><span class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-replacebg-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-replacebg-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Replace BG<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc">Only this selected image layer will be edited with the AI.
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Prompt
(Required)</label>
<div class="brand-control"><textarea id="ai-clipdrop-replace-bg-prompt"
class="brand-form-field" rows="2"
autocomplete="off" maxlength="2000"></textarea>
</div>
</div>
<div class="brand-control-desc aibrand-desc"> Describe the scene you want to teleport your
item to.
</div>
<button id="ai-clipdrop-replace-background" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off" disabled><span
class="material-icons arrow">landscape</span>Replace Background
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-resizer-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-resizer-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Upscaler<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap-half"><label class="brand-control-label">Width</label>
<div class="brand-control"><input id="ai-clipdrop-upscale-width" class="brand-form-field"
type="number" value="" autocomplete="off"
data-size=""></div>
</div>
<div class="brand-control-wrap-half"><label class="brand-control-label">Height</label>
<div class="brand-control"><input id="ai-clipdrop-upscale-height" class="brand-form-field"
type="number" value="" autocomplete="off"
data-size=""></div>
</div>
<button id="ai-clipdrop-upscale" type="button" class="brand-btn primary brand-lg-btn btn-full"
autocomplete="off"><span class="material-icons arrow">landscape</span>Upscale Image
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-removetext-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-removetext-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Remove Text<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc">Only this selected image layer will be edited with the AI.
</div>
<button id="ai-clipdrop-remove-text" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"><span
class="material-icons arrow">landscape</span>Remove Text
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-uncrop-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-uncrop-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Uncrop<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Extend
Top (px)<span>400</span></label>
<div class="brand-control"><input id="ai-clipdrop-extend-top" type="range" min="0"
max="2000" value="400" step="10" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Extend
Bottom (px)<span>400</span></label>
<div class="brand-control"><input id="ai-clipdrop-extend-bottom" type="range" min="0"
max="2000" value="400" step="10" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Extend
Left (px)<span>400</span></label>
<div class="brand-control"><input id="ai-clipdrop-extend-left" type="range" min="0"
max="2000" value="400" step="10" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Extend
Right (px)<span>400</span></label>
<div class="brand-control"><input id="ai-clipdrop-extend-right" type="range" min="0"
max="2000" value="400" step="10" class="brand-slider"
autocomplete="off"></div>
</div>
<button id="ai-clipdrop-uncrop" type="button" class="brand-btn primary brand-lg-btn btn-full"
autocomplete="off"><span class="material-icons arrow">landscape</span>Uncrop
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-reimagine-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-reimagine-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Reimagine<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<button id="ai-clipdrop-clipdrop-reimagine" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"><span
class="material-icons arrow">landscape</span>Reimagine
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-clean-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-clean-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Cleanup<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc"> Mark unwanted objects or defects using the "pencil brush"
and click the button to remove them from the image. You can use any brush color.
</div>
<button id="ai-clipdrop-inpainting" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"><span
class="material-icons arrow">landscape</span>Cleanup
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-recreate-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-recreate-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Regenerator<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Prompt
(Required)</label>
<div class="brand-control"><textarea id="sai-imgtoimg-prompt" class="brand-form-field"
rows="2" autocomplete="off"
placeholder="Golden hour New York City skyline, iconic, dramatic"
maxlength="2000"></textarea></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Negative
Prompt</label>
<div class="brand-control"><textarea id="sai-imgtoimg-negative-prompt"
class="brand-form-field" rows="2"
autocomplete="off"
placeholder="black and white, monochrome"></textarea>
</div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Style
Preset</label>
<div class="brand-control"><select id="sai-imgtoimg-style-presets" class="brand-select"
autocomplete="off">
<option value="" selected>Auto</option>
<option value="3d-model">3d Model</option>
<option value="analog-film">Analog Film</option>
<option value="anime">Anime</option>
<option value="cinematic">Cinematic</option>
<option value="comic-book">Comic Book</option>
<option value="digital-art">Digital Art</option>
<option value="enhance">Enhance</option>
<option value="fantasy-art">Fantasy Art</option>
<option value="isometric">Isometric</option>
<option value="line-art">Line Art</option>
<option value="low-poly">Low Poly</option>
<option value="modeling-compound">Modeling Compound</option>
<option value="neon-punk">Neon Punk</option>
<option value="origami">Origami</option>
<option value="photographic">Photographic</option>
<option value="pixel-art">Pixel Art</option>
<option value="tile-texture">Tile Texture</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Seed
(Optional)</label>
<div class="brand-control"><input id="sai-imgtoimg-seed" class="brand-form-field"
type="number" value="" autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Image
Strength<span>0.35</span></label>
<div class="brand-control"><input id="sai-imgtoimg-strength" type="range" min="0"
max="1" value="0.35" step="0.05" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc aibrand-desc"> How much influence the original image has on
the diffusion process. Values close to 1 will yield images very similar to the original
image while values close to 0 will yield images wildly different than the original
image.
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">CFG
Scale<span>7</span></label>
<div class="brand-control"><input id="sai-imgtoimg-cfg" type="range" min="0" max="35"
value="7" step="1" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc aibrand-desc"> How strictly the diffusion process adheres to
the prompt text (higher values keep your image closer to your prompt).
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Steps<span>50</span></label>
<div class="brand-control"><input id="sai-imgtoimg-steps" type="range" min="10"
max="150" value="50" step="1" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc aibrand-desc"> Number of diffusion steps to run.</div>
<div class="brand-control-wrap-half"><label class="brand-control-label">Alpha Mask</label>
<div class="brand-control brand-toggle-control"><label class="brand-toggle"> <input
id="sai-imgtoimg-mask" class="brand-toggle-checkbox" type="checkbox"
autocomplete="off"/>
<div class="brand-toggle-switch"></div>
</label></div>
</div>
<div class="brand-control-desc aibrand-desc"> If alpha mask is enabled, fully transparent
pixels are replaced and fully opaque pixels are unchanged. You can use "Erase BG Image"
brush to remove the pixels on the background image.
</div>
<button id="ai-sai-imgtoimg-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off" disabled><span
class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-imageedit-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-imageedit-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>AI Edit<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Image
Size</label>
<div class="brand-control"><select id="ai-oai-edit-size" class="brand-select"
autocomplete="off">
<option value="1024x1024" selected>1024x1024 px</option>
<option value="512x512">512x512 px</option>
<option value="256x256">56x256 px</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Prompt
(Required)</label>
<div class="brand-control"><textarea id="ai-oai-edit-prompt" class="brand-form-field"
rows="2" autocomplete="off"
placeholder="Golden hour New York City skyline, iconic, dramatic"
maxlength="1000"></textarea></div>
</div>
<div class="brand-control-desc"> The transparent areas of the image indicate where the image
should be edited, and the prompt should describe the full new image, not just the
transparent areas. You can use "Erase BG Image" brush to remove the pixels on the
background image.
</div>
<button id="ai-oai-edit" type="button" class="brand-btn primary brand-lg-btn btn-full"
autocomplete="off" disabled><span class="material-icons arrow">landscape</span>Edit
Image
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- Drawing App START -->
<div id="brand-drawing-image-tools" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-drawing-settings">
<!-- Start Drawing Button -->
<div class="brand-btn-set">
<button id="ai-brand-draw-btn" type="button" class="brand-btn primary brand-lg-btn"><span
class="material-icons">edit</span>Start Drawing</button>
<button id="ai-brand-draw-undo" type="button" class="brand-btn brand-lg-btn" autocomplete="off"
title="Undo" disabled><span class="material-icons">undo</span></button>
</div>
<!-- Drawing Setings -->
<div id="brand-draw-settings" class="brand-sub-settings">
<div id="brand-brush-tip" class="notice notice-info">
You can draw a straight line by pressing the shift key.
</div>
<div id="brand-eraser-tip" class="notice notice-info">
You can click undo button to activate invert erasing mode.
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Brush Type</label>
<div class="brand-control">
<select id="brand-brush-select" class="brand-select" autocomplete="off">
<option value="pencil" selected>Pencil</option>
<option value="circle">Circle</option>
<option value="spray">Spray</option>
<option value="hline">H-line Pattern</option>
<option value="vline">V-line Pattern</option>
<option value="square">Square Pattern</option>
<option value="erase">Erase BG Image</option>
</select>
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Brush Width</label>
<div class="brand-control">
<input id="brush-width" class="brand-form-field numeric-field" type="number" value="50"
autocomplete="off" data-min="1" data-max="1000" data-step="1">
</div>
</div>
<div id="brand-brush-pattern-width" class="brand-control-wrap">
<label class="brand-control-label">Pattern Width</label>
<div class="brand-control">
<input id="brush-pattern-width" class="brand-form-field numeric-field" type="number"
value="10" autocomplete="off" data-min="1" data-max="1000" data-step="1">
</div>
</div>
<div id="brand-brush-pattern-distance" class="brand-control-wrap">
<label class="brand-control-label">Pattern Distance</label>
<div class="brand-control">
<input id="brush-pattern-distance" class="brand-form-field numeric-field" type="number"
value="5" autocomplete="off" data-min="1" data-max="1000" data-step="1">
</div>
</div>
<div id="not-erase-brush">
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Brush Color</label>
<div class="brand-control">
<input id="brush-color" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="#ffffff" />
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Brush Shadow</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-brush-shadow" class="brand-toggle-checkbox"
data-conditional="#line-shadow-settings" type="checkbox" autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="line-shadow-settings" class="d-none conditional-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label">Blur</label>
<div class="brand-control">
<input id="brush-shadow-width" class="brand-form-field" type="number" value="5"
data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Offset X</label>
<div class="brand-control">
<input id="brush-shadow-shadow-offset-x" class="brand-form-field" type="number"
value="5" data-min="0" data-max="100" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Offset Y</label>
<div class="brand-control">
<input id="brush-shadow-shadow-offset-y" class="brand-form-field" type="number"
value="5" data-min="0" data-max="100" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Color</label>
<div class="brand-control">
<input id="brush-shadow-color" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="#000000" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DrawingApp END -->
</div>
</div>
</div>
</div>
</div>
<!-- Image END -->
<!-- Shapes START -->
<script>
$(document).ready(function() {
let isResizingShapes = false;
let initialHeightShapes;
let initialYShapes;
function startResizingShapes(event) {
isResizingShapes = true;
const $button = $(this);
const $div = $('#brand-shapes');
initialHeightShapes = $div.height(); // Store the initial height
initialYShapes = event.clientY; // Store the initial Y position
/* $button.text("...");*/ // Change button text while resizing
event.preventDefault(); // Prevent default behavior
}
function resizeDivShapes(event) {
if (isResizingShapes) {
const $div = $('#brand-shapes');
const newHeight = initialHeightShapes - (event.clientY - initialYShapes); // Calculate new height
if (newHeight > 50) { // Minimum height limit
$div.height(newHeight); // Set new height
}
}
}
function stopResizingShapes() {
isResizingShapes = false;
/* $('#btn-resize-image').text("Resize");*/ // Reset button text
}
// Mouse events
$('#btn-resize-shapes').on('mousedown', startResizingShapes);
$(document).on('mousemove', resizeDivShapes);
$(document).on('mouseup', stopResizingShapes);
// Touch events for mobile
$('#btn-resize-shapes').on('touchstart', startResizingShapes);
$(document).on('touchmove', resizeDivShapes);
$(document).on('touchend', stopResizingShapes);
$('#brand-shapes .brand-close-element').on('click', function(){
$('#Card-Elements button').trigger('click');
});
});
</script>
<div id="brand-shapes" class="brand-icon-panel-content panel-hide">
<a class="brand-title">
<span class="material-icons">landscape</span>Shapes </a>
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div class="brand-tabs">
<ul class="brand-tabs-menu">
<li id="brand-shapes-open" class="active" data-target="#brand-all-shapes">All</li>
<li id="brand-shape-setting-open" data-target="#brand-shape-setting">Shape</li>
</ul>
<div id="brand-all-shapes" class="brand-tab active">
<div id="brand-shapes-grid" class="brand-grid brand-shapes-grid four-column">
<div class="brand-shape" data-id="circle" title="Circle"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(1.97 0 0 1.97 100 100)" id="1703336786828">
<circle style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" cx="0" cy="0" r="50"></circle>
</g>
</svg>
</div>
<div class="brand-shape" data-id="ellipse" title="Ellipse"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(1.28 0 0 1.28 100 100)" id="1703336889308">
<ellipse style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" cx="0" cy="0" rx="75" ry="50"></ellipse>
</g>
</svg>
</div>
<div class="brand-shape" data-id="square" title="Square"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(1.92 0 0 1.92 100 100)" id="1703336967063">
<rect style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-50" y="-50" rx="0" ry="0" width="100" height="100"></rect>
</g>
</svg>
</div>
<div class="brand-shape" data-id="rectangle" title="Rectangle"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(0.96 0 0 0.96 100 100)" id="1703336994136">
<rect style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-100" y="-75" rx="0" ry="0" width="200" height="150"></rect>
</g>
</svg>
</div>
<div class="brand-shape" data-id="triangle" title="Triangle"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(1.9 0 0 1.9 100 100)" id="1703337022890">
<polygon style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" points="-50 50,0 -50,50 50"></polygon>
</g>
</svg>
</div>
<div class="brand-shape" data-id="trapezoid" title="Trapezoid"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(0.64 0 0 0.64 100 100)" id="1703337057514">
<polygon style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" points="-100,-50 100,-50 150,50 -150,50 "></polygon>
</g>
</svg>
</div>
<div class="brand-shape" data-id="pentagon" title="Pentagon"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(2.49 0 0 2.49 100 100)" id="1703337099944">
<polygon style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" points="-24,36.9 -38.8,-8.7 0,-36.9 38.8,-8.7 24,36.9 "></polygon>
</g>
</svg>
</div>
<div class="brand-shape" data-id="octagon" title="Octagon"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(2.55 0 0 2.55 100 100)" id="1703337143397">
<polygon style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" points="-15.5,37.4 -37.4,15.5 -37.4,-15.5 -15.5,-37.4 15.5,-37.4 37.4,-15.5 37.4,15.5 15.5,37.4 "></polygon>
</g>
</svg>
</div>
<div class="brand-shape" data-id="emerald" title="Emerald"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(0.77 0 0 0.77 100 100)" id="1703337170338">
<polygon style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" points="0,-125 108,-62.5 108,62.5 0,125 -108,62.5 -108,-62.5 "></polygon>
</g>
</svg>
</div>
<div class="brand-shape" data-id="star" title="Star"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(0.81 0 0 0.81 100 100)" id="1703337202278">
<polygon style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" points="-0.5,-113 29.5,-28 119.5,-28 49.5,27 72.5,113 -0.5,62 -73.5,113 -47.5,27 -119.5,-27 -29.5,-27 "></polygon>
</g>
</svg>
</div>
<div class="brand-shape" data-id="diamond" title="Diamond"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(1.01 0 0 1.01 100 100)" id="1703344442320">
<polygon style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" points="-55.56,0 0,-96.23 55.56,0 0,96.23 "></polygon>
</g>
</svg>
</div>
<div class="brand-shape" data-id="parallelogram" title="Parallelogram"> <svg
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
<g transform="matrix(3.91 0 0 3.91 100 100)" id="1703343656588">
<polygon style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" points="-15,-5 25,-5 15,5 -25,5 "></polygon>
</g>
</svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="635.423 319.15 189.923 253.893" width="189.923pt" height="253.893pt"><path d=" M 741.11 569.194 C 734.865 574.335 725.888 574.321 719.643 569.18 C 694.723 548.667 659.883 523.204 643.966 511.714 C 638.598 507.84 635.423 501.619 635.423 494.999 C 635.423 469.203 635.423 402.088 635.423 359.49 C 635.423 353.881 638.236 348.645 642.908 345.541 C 695.868 310.353 764.9 310.353 817.86 345.541 C 822.524 348.641 825.346 353.89 825.346 359.49 C 825.346 402.089 825.346 469.203 825.346 494.999 C 825.346 501.609 822.163 507.846 816.803 511.714 C 800.882 523.207 766.031 548.678 741.11 569.194 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="941.157 641.992 203.993 233.988" width="203.993pt" height="233.988pt"><path d=" M 1145.15 781.054 C 1145.15 797.549 1140.58 813.779 1131.93 827.82 C 1092.33 892.033 993.974 892.033 954.379 827.819 C 945.676 813.704 941.157 797.637 941.157 781.054 C 941.157 737.044 941.157 693.035 941.157 649.025 C 941.157 645.14 944.307 641.992 948.191 641.992 C 1011.5 641.992 1074.81 641.992 1138.11 641.992 C 1142 641.992 1145.15 645.14 1145.15 649.025 C 1145.15 693.035 1145.15 737.045 1145.15 781.054 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="627.216 639.608 205.164 238.755" width="205.164pt" height="238.755pt"><path d=" M 741.947 874.295 C 734.756 879.719 724.84 879.719 717.648 874.295 L 635.242 812.137 C 630.188 808.325 627.216 802.361 627.216 796.03 L 627.216 646.642 C 627.216 642.757 630.365 639.608 634.25 639.608 L 825.346 639.608 C 829.231 639.608 832.38 642.757 832.38 646.642 L 832.38 796.03 C 832.38 802.361 829.408 808.325 824.354 812.137 L 741.947 874.295 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="939.984 316.01 206.336 260.174" width="206.336pt" height="260.174pt"><path d=" M 1146.32 526.205 C 1146.32 530.99 1144.29 535.55 1140.73 538.753 C 1085.35 588.66 1000.95 588.66 945.571 538.753 C 942.019 535.552 939.984 530.987 939.984 526.205 C 939.984 474.355 939.984 422.503 939.984 370.652 C 939.984 365.934 941.961 361.423 945.431 358.227 C 971.76 333.974 1007.46 315.38 1043.15 316.026 C 1078.85 315.38 1114.55 333.974 1140.88 358.227 C 1144.35 361.425 1146.32 365.932 1146.32 370.652 C 1146.32 422.503 1146.32 474.354 1146.32 526.205 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 321.583 249.027 249.028" width="249.027pt" height="249.028pt"><path d=" M 249.027 446.096 C 249.027 456.826 238.398 466.013 235.753 475.909 C 233.017 486.146 237.548 499.403 232.362 508.366 C 227.102 517.458 213.306 520.132 205.927 527.511 C 198.547 534.89 195.875 548.685 186.782 553.945 C 177.818 559.131 164.562 554.601 154.324 557.337 C 144.43 559.982 135.241 570.611 124.514 570.611 C 113.785 570.611 104.597 559.981 94.702 557.336 C 84.464 554.6 71.208 559.131 62.243 553.945 C 53.151 548.684 50.48 534.888 43.101 527.509 C 35.722 520.13 21.925 517.458 16.665 508.365 C 11.479 499.402 16.01 486.145 13.274 475.908 C 10.629 466.012 0 456.826 0 446.096 C 0 435.368 10.629 426.179 13.274 416.285 C 16.01 406.047 11.48 392.79 16.665 383.827 C 21.927 374.735 35.723 372.063 43.102 364.684 C 50.481 357.305 53.153 343.509 62.245 338.248 C 71.209 333.062 84.465 337.594 94.703 334.857 C 104.597 332.213 113.786 321.583 124.514 321.583 C 135.242 321.583 144.43 332.213 154.325 334.857 C 164.563 337.594 177.82 333.062 186.784 338.249 C 195.876 343.509 198.548 357.306 205.927 364.685 C 213.306 372.063 227.103 374.736 232.362 383.828 C 237.548 392.791 233.017 406.048 235.753 416.286 C 238.398 426.18 249.027 435.368 249.027 446.096 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="300.954 334.979 258.61 222.236" width="258.61pt" height="222.236pt"><path d=" M 430.259 557.215 C 545.598 491.998 555.144 426.95 557.695 417.685 C 565.904 387.874 547.731 334.979 489.864 334.979 C 434.763 334.979 430.259 362.602 430.259 362.602 C 430.259 362.602 425.754 334.979 370.653 334.979 C 312.786 334.979 294.613 387.874 302.822 417.685 C 305.373 426.95 314.919 491.998 430.259 557.215 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="928.152 0 229.998 260.574" width="229.998pt" height="260.574pt"><path d=" M 1043.15 260.574 C 1120.73 234.103 1135.99 185.903 1140.36 165.647 C 1146.74 135.989 1158.15 36.962 1158.15 36.962 C 1078.29 35.593 1043.15 0 1043.15 0 C 1043.15 0 1008.01 35.593 928.152 36.962 C 928.152 36.962 939.561 135.989 945.949 165.647 C 950.311 185.903 965.576 234.103 1043.15 260.574 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="29.027 627.129 220 253.712" width="220pt" height="253.712pt"><path d=" M 139.027 880.841 C 139.027 880.841 139.027 865.904 180.426 848.314 C 237.744 823.955 244.887 808.689 246.662 792.721 C 248.435 776.754 236.608 761.97 234.833 739.495 C 233.061 717.022 249.027 684.495 249.027 684.495 L 220.642 635.411 C 165.048 648.42 139.027 627.129 139.027 627.129 C 139.027 627.129 113.007 648.42 57.413 635.411 L 29.027 684.495 C 29.027 684.495 44.994 717.022 43.221 739.495 C 41.446 761.97 29.619 776.754 31.393 792.721 C 33.166 808.689 40.311 823.955 97.629 848.314 C 139.027 865.904 139.027 880.841 139.027 880.841 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="305.954 2.451 220 255.673" width="220pt" height="255.673pt"><path d=" M 415.013 258.124 C 434.751 230.865 481.753 215.825 493.029 214.885 C 498.67 210.186 526.87 197.966 525.931 169.766 C 524.99 141.566 524.051 28.77 524.051 28.77 C 518.412 26.891 468.592 2.451 468.592 2.451 C 456.372 10.912 415.013 9.972 415.013 9.972 L 416.894 9.972 C 416.894 9.972 375.535 10.912 363.315 2.451 C 363.315 2.451 313.496 26.891 307.857 28.77 C 307.857 28.77 306.917 141.566 305.977 169.766 C 305.038 197.966 333.237 210.186 338.878 214.885 C 350.157 215.825 397.156 230.865 416.894 258.124 L 415.013 258.124 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="75.02 150.749 59.587 53.184" width="59.587pt" height="53.184pt"><path d=" M 116.76 150.749 L 92.867 150.749 C 90.759 150.749 88.811 151.873 87.757 153.699 L 75.811 174.39 C 74.757 176.216 74.757 178.465 75.811 180.292 L 87.757 200.983 C 88.811 202.808 90.759 203.933 92.867 203.933 L 116.76 203.933 C 118.868 203.933 120.816 202.808 121.87 200.983 L 133.817 180.292 C 134.87 178.465 134.87 176.216 133.817 174.39 L 121.87 153.699 C 120.816 151.873 118.868 150.749 116.76 150.749 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="83.617 228.021 50.92 45.107" width="50.92pt" height="45.107pt"><path d=" M 105.781 229.924 L 84.132 267.419 C 82.667 269.958 84.499 273.128 87.429 273.128 L 130.724 273.128 C 133.655 273.128 135.486 269.958 134.021 267.419 L 112.373 229.924 C 110.908 227.387 107.245 227.387 105.781 229.924 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="83.616 291.396 54.918 52.378" width="54.918pt" height="52.378pt"><path d=" M 112.492 292.426 L 117.953 309.231 C 118.152 309.845 118.725 310.261 119.371 310.261 L 137.04 310.261 C 138.484 310.261 139.085 312.11 137.916 312.959 L 123.621 323.344 C 123.099 323.724 122.88 324.397 123.08 325.011 L 128.54 341.816 C 128.986 343.189 127.414 344.332 126.246 343.483 L 111.951 333.097 C 111.428 332.717 110.721 332.717 110.199 333.097 L 95.904 343.483 C 94.735 344.332 93.163 343.189 93.609 341.816 L 99.07 325.011 C 99.269 324.397 99.051 323.724 98.528 323.344 L 84.233 312.959 C 83.065 312.11 83.665 310.261 85.109 310.261 L 102.779 310.261 C 103.425 310.261 103.997 309.845 104.197 309.231 L 109.657 292.426 C 110.103 291.053 112.046 291.053 112.492 292.426 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="2089.97 2671.9 859.56 751.55" width="859.56pt" height="751.55pt"><path d=" M 2923.99 2893.58 L 2923.99 3352.5 C 2923.99 3377.58 2903.66 3397.91 2878.58 3397.91 L 2160.92 3397.91 C 2135.84 3397.91 2115.51 3377.58 2115.51 3352.5 L 2115.51 2893.58 C 2115.51 2868.5 2135.84 2848.17 2160.92 2848.17 L 2271.6 2848.17 C 2318.19 2758.61 2411.82 2697.44 2519.75 2697.44 C 2627.68 2697.44 2721.31 2758.61 2767.9 2848.17 L 2878.58 2848.17 C 2903.66 2848.17 2923.99 2868.5 2923.99 2893.58 Z M 2932.5 3352.5 C 2932.5 3382.24 2908.31 3406.43 2878.58 3406.43 L 2160.92 3406.43 C 2131.19 3406.43 2107 3382.24 2107 3352.5 L 2107 2893.58 C 2107 2863.85 2131.19 2839.66 2160.92 2839.66 L 2266.48 2839.66 C 2317.03 2746.54 2413.59 2688.93 2519.75 2688.93 C 2625.91 2688.93 2722.47 2746.54 2773.02 2839.66 L 2878.58 2839.66 C 2908.31 2839.66 2932.5 2863.85 2932.5 2893.58 L 2932.5 3352.5 Z M 2878.58 2822.63 L 2782.96 2822.63 C 2728.25 2729.4 2628.33 2671.9 2519.75 2671.9 C 2411.17 2671.9 2311.25 2729.4 2256.54 2822.63 L 2160.92 2822.63 C 2121.8 2822.63 2089.97 2854.46 2089.97 2893.58 L 2089.97 3352.5 C 2089.97 3391.63 2121.8 3423.45 2160.92 3423.45 L 2878.58 3423.45 C 2917.7 3423.45 2949.53 3391.63 2949.53 3352.5 L 2949.53 2893.58 C 2949.53 2854.46 2917.7 2822.63 2878.58 2822.63 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="3607.116 1550.73 741.193 803.32" width="741.193pt" height="803.32pt"><path d=" M 4158.58 1594.99 C 4228.32 1611.26 4274.32 1633.47 4298.46 1647.41 C 4311.55 1654.96 4320.05 1668.47 4321.14 1683.55 C 4325.91 1749.64 4326.86 1947.66 4194.99 2140.01 C 4127.75 2238.09 4041.22 2299.69 3999.79 2322.69 C 3986.05 2330.31 3969.38 2330.31 3955.64 2322.69 C 3914.21 2299.69 3827.68 2238.09 3760.44 2140.01 C 3628.57 1947.66 3629.52 1749.64 3634.29 1683.55 C 3635.38 1668.47 3643.87 1654.96 3656.96 1647.41 C 3681.11 1633.47 3727.11 1611.26 3796.85 1594.99 C 3903.23 1570.17 4052.2 1570.17 4158.58 1594.99 Z M 4202.04 2144.84 C 4122.66 2260.64 4023.09 2319.53 4003.94 2330.16 C 3995.93 2334.61 3986.86 2336.96 3977.72 2336.96 C 3968.57 2336.96 3959.5 2334.61 3951.49 2330.16 C 3932.34 2319.53 3832.77 2260.64 3753.39 2144.84 C 3621.94 1953.11 3620.35 1757.94 3625.76 1682.93 C 3627.06 1665.04 3637.12 1648.99 3652.69 1640 C 3679.44 1624.57 3725.82 1602.79 3794.91 1586.67 C 3846.98 1574.52 3911.9 1567.82 3977.71 1567.82 C 4043.53 1567.82 4108.45 1574.52 4160.52 1586.67 C 4229.61 1602.79 4275.99 1624.57 4302.74 1640 C 4318.3 1648.99 4328.37 1665.03 4329.66 1682.93 C 4335.08 1757.94 4333.49 1953.11 4202.04 2144.84 Z M 4346.71 1681.7 C 4345.01 1658.14 4331.76 1637.02 4311.28 1625.2 C 4283.54 1609.18 4235.53 1586.61 4164.4 1570.02 C 4111.1 1557.58 4044.8 1550.73 3977.71 1550.73 C 3910.63 1550.73 3844.32 1557.58 3791.02 1570.02 C 3719.89 1586.61 3671.89 1609.18 3644.15 1625.2 C 3623.66 1637.02 3610.41 1658.14 3608.71 1681.7 C 3603.17 1758.51 3604.79 1958.33 3739.28 2154.51 C 3820.84 2273.46 3923.45 2334.15 3943.2 2345.11 C 3953.74 2350.96 3965.68 2354.05 3977.72 2354.05 C 3989.76 2354.05 4001.69 2350.96 4012.23 2345.11 C 4031.97 2334.15 4134.59 2273.46 4216.14 2154.51 C 4350.64 1958.33 4352.26 1758.51 4346.71 1681.7 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="1981.99 1546.35 1086.15 812.08" width="1086.15pt" height="812.08pt"><path d=" M 3012.97 2155.13 L 2540.84 2330.06 C 2530.66 2333.83 2519.47 2333.83 2509.29 2330.06 L 2037.16 2155.13 C 2019.35 2148.53 2007.53 2131.54 2007.53 2112.55 L 2007.53 1792.23 C 2007.53 1773.24 2019.35 1756.25 2037.16 1749.65 L 2509.29 1574.72 C 2519.47 1570.95 2530.66 1570.95 2540.84 1574.72 L 3012.97 1749.65 C 3030.78 1756.25 3042.6 1773.24 3042.6 1792.23 L 3042.6 2112.55 C 3042.6 2131.54 3030.78 2148.53 3012.97 2155.13 Z M 3051.12 2112.55 C 3051.12 2134.99 3036.97 2155.31 3015.93 2163.11 L 2543.8 2338.05 C 2537.78 2340.27 2531.48 2341.4 2525.07 2341.4 C 2518.65 2341.4 2512.35 2340.27 2506.33 2338.05 L 2034.2 2163.11 C 2013.16 2155.31 1999.02 2134.99 1999.02 2112.55 L 1999.02 1792.23 C 1999.02 1769.79 2013.16 1749.47 2034.2 1741.67 L 2506.33 1566.74 C 2512.35 1564.51 2518.65 1563.38 2525.07 1563.38 C 2531.48 1563.38 2537.78 1564.51 2543.8 1566.74 L 3015.93 1741.67 C 3036.97 1749.47 3051.12 1769.79 3051.12 1792.23 L 3051.12 2112.55 Z M 3021.84 1725.7 L 2549.72 1550.77 C 2541.8 1547.84 2533.51 1546.35 2525.07 1546.35 C 2516.62 1546.35 2508.33 1547.84 2500.42 1550.77 L 2028.29 1725.7 C 2000.59 1735.96 1981.99 1762.7 1981.99 1792.23 L 1981.99 2112.55 C 1981.99 2142.08 2000.59 2168.82 2028.29 2179.08 L 2500.42 2354.01 C 2508.33 2356.94 2516.62 2358.43 2525.07 2358.43 C 2533.51 2358.43 2541.8 2356.94 2549.72 2354.01 L 3021.84 2179.08 C 3049.54 2168.82 3068.14 2142.08 3068.14 2112.55 L 3068.14 1792.23 C 3068.14 1762.7 3049.54 1735.96 3021.84 1725.7 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="658.854 1575.67 812.196 812.23" width="812.196pt" height="812.23pt"><path d=" M 1032.83 2349.06 L 697.67 2013.89 C 679.938 1996.16 679.938 1967.41 697.67 1949.68 L 1032.83 1614.52 C 1050.56 1596.78 1079.32 1596.78 1097.05 1614.52 L 1432.21 1949.68 C 1449.94 1967.41 1449.94 1996.16 1432.21 2013.89 L 1097.05 2349.06 C 1079.32 2366.79 1050.56 2366.79 1032.83 2349.06 Z M 1438.23 2019.91 L 1103.07 2355.08 C 1092.88 2365.26 1079.34 2370.87 1064.94 2370.87 C 1050.54 2370.87 1037 2365.26 1026.81 2355.08 L 691.65 2019.91 C 670.626 1998.89 670.626 1964.68 691.65 1943.66 L 1026.81 1608.5 C 1037 1598.31 1050.54 1592.7 1064.94 1592.7 C 1079.34 1592.7 1092.88 1598.31 1103.07 1608.5 L 1438.23 1943.66 C 1448.41 1953.84 1454.02 1967.38 1454.02 1981.79 C 1454.02 1996.19 1448.41 2009.73 1438.23 2019.91 Z M 1450.27 1931.62 L 1115.11 1596.46 C 1101.71 1583.05 1083.89 1575.67 1064.94 1575.67 C 1045.99 1575.67 1028.17 1583.05 1014.77 1596.46 L 679.61 1931.62 C 666.225 1945 658.854 1962.82 658.854 1981.79 C 658.854 2000.75 666.225 2018.57 679.61 2031.95 L 1014.77 2367.11 C 1028.17 2380.51 1045.99 2387.9 1064.94 2387.9 C 1083.89 2387.9 1101.71 2380.51 1115.11 2367.11 L 1450.27 2031.95 C 1463.67 2018.55 1471.05 2000.74 1471.05 1981.79 C 1471.05 1962.83 1463.67 1945.02 1450.27 1931.62 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="3578.84 479.893 797.75 803.327" width="797.75pt" height="803.327pt"><path d=" M 4305.03 505.652 C 4330.33 505.652 4350.83 526.155 4350.83 551.447 L 4350.83 728.33 C 4350.83 938.268 4218.73 1134.15 3999.1 1252.09 C 3985.77 1259.25 3969.66 1259.25 3956.33 1252.09 C 3736.7 1134.15 3604.6 938.268 3604.6 728.33 L 3604.6 551.447 C 3604.6 526.155 3625.1 505.652 3650.4 505.652 L 4305.03 505.652 Z M 4359.41 728.329 C 4359.41 941.241 4226.24 1139.87 4003.16 1259.65 C 3995.38 1263.83 3986.58 1266.04 3977.72 1266.04 C 3968.85 1266.04 3960.05 1263.83 3952.27 1259.65 C 3729.19 1139.86 3596.01 941.24 3596.01 728.329 L 3596.01 551.447 C 3596.01 521.461 3620.41 497.066 3650.4 497.066 L 4305.03 497.066 C 4335.02 497.066 4359.41 521.461 4359.41 551.447 L 4359.41 728.329 Z M 4305.03 479.893 L 3650.4 479.893 C 3610.94 479.893 3578.84 511.992 3578.84 551.447 L 3578.84 728.329 C 3578.84 947.671 3715.4 1151.95 3944.14 1274.78 C 3954.42 1280.3 3966.03 1283.22 3977.72 1283.22 C 3989.4 1283.22 4001.02 1280.3 4011.29 1274.78 C 4240.03 1151.95 4376.59 947.673 4376.59 728.329 L 4376.59 551.447 C 4376.59 511.992 4344.49 479.893 4305.03 479.893 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="2163.8 454.352 722.53 812.348" width="722.53pt" height="812.348pt"><path d=" M 2838.08 1067.46 L 2547.77 1235.07 C 2533.72 1243.19 2516.41 1243.19 2502.36 1235.07 L 2212.05 1067.46 C 2198 1059.35 2189.35 1044.36 2189.35 1028.14 L 2189.35 692.913 C 2189.35 676.69 2198 661.7 2212.05 653.589 L 2502.36 485.977 C 2516.41 477.865 2533.72 477.865 2547.77 485.977 L 2838.08 653.589 C 2852.13 661.7 2860.79 676.69 2860.79 692.913 L 2860.79 1028.14 C 2860.79 1044.36 2852.13 1059.35 2838.08 1067.46 Z M 2869.3 1028.14 C 2869.3 1047.34 2858.97 1065.23 2842.34 1074.84 L 2552.03 1242.45 C 2543.84 1247.17 2534.52 1249.67 2525.07 1249.67 C 2515.61 1249.67 2506.29 1247.17 2498.1 1242.45 L 2207.79 1074.84 C 2191.16 1065.23 2180.83 1047.34 2180.83 1028.14 L 2180.83 692.914 C 2180.83 673.71 2191.16 655.817 2207.79 646.216 L 2498.1 478.604 C 2506.29 473.877 2515.61 471.38 2525.07 471.38 C 2534.52 471.38 2543.84 473.877 2552.03 478.604 L 2842.34 646.216 C 2858.97 655.816 2869.3 673.71 2869.3 692.914 L 2869.3 1028.14 Z M 2850.85 631.469 L 2560.54 463.858 C 2549.77 457.639 2537.5 454.352 2525.07 454.352 C 2512.63 454.352 2500.36 457.639 2489.59 463.857 L 2199.28 631.469 C 2177.4 644.103 2163.8 667.647 2163.8 692.914 L 2163.8 1028.14 C 2163.8 1053.4 2177.4 1076.95 2199.28 1089.58 L 2489.59 1257.2 C 2500.37 1263.42 2512.63 1266.7 2525.07 1266.7 C 2537.5 1266.7 2549.76 1263.41 2560.54 1257.19 L 2850.85 1089.58 C 2872.73 1076.95 2886.33 1053.4 2886.33 1028.14 L 2886.33 692.914 C 2886.33 667.645 2872.73 644.101 2850.85 631.469 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="623.413 512.608 883.081 695.832" width="883.081pt" height="695.832pt"><path d=" M 1027.21 1162.73 L 656.787 608.799 C 636.611 578.627 658.237 538.15 694.533 538.15 L 1435.37 538.15 C 1471.67 538.15 1493.29 578.627 1473.12 608.799 L 1102.7 1162.73 C 1084.72 1189.62 1045.19 1189.62 1027.21 1162.73 Z M 1480.19 613.53 L 1109.77 1167.47 C 1099.75 1182.46 1082.99 1191.42 1064.95 1191.42 C 1046.91 1191.42 1030.16 1182.46 1020.13 1167.47 L 649.71 613.53 C 638.458 596.705 637.436 576.002 646.974 558.148 C 656.512 540.295 674.292 529.636 694.533 529.636 L 1435.37 529.636 C 1455.61 529.636 1473.39 540.295 1482.93 558.148 C 1492.47 576 1491.45 596.705 1480.19 613.53 Z M 1497.95 550.125 C 1485.4 526.633 1462.01 512.608 1435.37 512.608 L 694.533 512.608 C 667.899 512.608 644.505 526.633 631.955 550.125 C 619.404 573.616 620.751 600.858 635.555 622.996 L 1005.97 1176.93 C 1019.17 1196.66 1041.22 1208.44 1064.95 1208.44 C 1088.69 1208.44 1110.74 1196.66 1123.93 1176.93 L 1494.35 622.996 C 1509.16 600.856 1510.5 573.614 1497.95 550.125 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="3672.96 3730.79 609.51 810.66" width="609.51pt" height="810.66pt"><path d=" M 4211.52 3756.33 C 4236.6 3756.33 4256.93 3776.66 4256.93 3801.74 L 4256.93 4236.69 C 4256.93 4390.89 4131.92 4515.9 3977.71 4515.9 L 3977.71 4515.9 C 3823.51 4515.9 3698.5 4390.89 3698.5 4236.69 L 3698.5 3801.74 C 3698.5 3776.66 3718.83 3756.33 3743.91 3756.33 L 4211.52 3756.33 Z M 4265.44 4236.69 C 4265.44 4395.34 4136.37 4524.42 3977.71 4524.42 C 3819.06 4524.42 3689.99 4395.34 3689.99 4236.69 L 3689.99 3801.74 C 3689.99 3772.01 3714.17 3747.82 3743.91 3747.82 L 4211.52 3747.82 C 4241.25 3747.82 4265.44 3772.01 4265.44 3801.74 L 4265.44 4236.69 Z M 4211.52 3730.79 L 3743.91 3730.79 C 3704.79 3730.79 3672.96 3762.62 3672.96 3801.74 L 3672.96 4236.69 C 3672.96 4404.73 3809.67 4541.45 3977.71 4541.45 C 4145.76 4541.45 4282.47 4404.73 4282.47 4236.69 L 4282.47 3801.74 C 4282.47 3762.62 4250.64 3730.79 4211.52 3730.79 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="354.535 287.679 761.38 760.095" width="761.38pt" height="760.095pt"><path d=" M 1115.915 354.746 C 1115.915 342.399 1105.907 332.39 1093.56 332.39 C 1105.907 332.39 1115.915 322.381 1115.915 310.034 C 1115.915 297.688 1105.907 287.679 1093.56 287.679 C 1093.343 287.679 1093.132 287.705 1092.917 287.711 C 1092.702 287.705 1092.491 287.679 1092.274 287.679 C 1080.863 287.679 1071.469 296.233 1070.106 307.274 L 1069.73 307.274 C 1068.367 296.233 1058.972 287.679 1047.562 287.679 C 1036.153 287.679 1026.757 296.233 1025.394 307.274 L 1025.019 307.274 C 1023.656 296.233 1014.261 287.679 1002.851 287.679 C 991.441 287.679 982.046 296.233 980.683 307.274 L 980.307 307.274 C 978.945 296.233 969.549 287.679 958.139 287.679 C 946.73 287.679 937.334 296.233 935.971 307.274 L 935.596 307.274 C 934.233 296.233 924.838 287.679 913.428 287.679 C 902.017 287.679 892.623 296.233 891.261 307.274 L 890.884 307.274 C 889.522 296.233 880.127 287.679 868.716 287.679 C 857.306 287.679 847.911 296.233 846.548 307.274 L 846.173 307.274 C 844.81 296.233 835.415 287.679 824.005 287.679 C 812.595 287.679 803.2 296.233 801.837 307.274 L 801.461 307.274 C 800.099 296.233 790.704 287.679 779.293 287.679 C 767.883 287.679 758.488 296.233 757.125 307.274 L 756.75 307.274 C 755.387 296.233 745.992 287.679 734.582 287.679 C 723.172 287.679 713.777 296.233 712.414 307.274 L 712.038 307.274 C 710.676 296.233 701.281 287.679 689.87 287.679 C 678.461 287.679 669.065 296.233 667.702 307.274 L 667.327 307.274 C 665.964 296.233 656.569 287.679 645.159 287.679 C 633.749 287.679 624.354 296.233 622.991 307.274 L 622.616 307.274 C 621.253 296.233 611.858 287.679 600.448 287.679 C 589.038 287.679 579.643 296.233 578.28 307.274 L 577.904 307.274 C 576.541 296.233 567.146 287.679 555.736 287.679 C 544.326 287.679 534.931 296.233 533.569 307.274 L 533.193 307.274 C 531.83 296.233 522.435 287.679 511.025 287.679 C 499.615 287.679 490.22 296.233 488.857 307.274 L 488.482 307.274 C 487.119 296.233 477.723 287.679 466.314 287.679 C 454.903 287.679 445.509 296.233 444.146 307.274 L 443.77 307.274 C 442.407 296.233 433.012 287.679 421.602 287.679 C 410.192 287.679 400.797 296.233 399.434 307.274 L 399.059 307.274 C 397.696 296.233 388.301 287.679 376.891 287.679 C 364.544 287.679 354.535 297.688 354.535 310.034 C 354.535 321.947 363.86 331.655 375.604 332.325 L 375.604 332.455 C 363.86 333.125 354.535 342.833 354.535 354.746 C 354.535 366.659 363.86 376.367 375.604 377.037 L 375.604 377.167 C 363.86 377.837 354.535 387.545 354.535 399.457 C 354.535 411.37 363.86 421.078 375.604 421.748 L 375.604 421.878 C 363.86 422.548 354.535 432.257 354.535 444.169 C 354.535 456.081 363.86 465.79 375.604 466.46 L 375.604 466.589 C 363.86 467.26 354.535 476.968 354.535 488.88 C 354.535 500.793 363.86 510.501 375.604 511.171 L 375.604 511.301 C 363.86 511.971 354.535 521.68 354.535 533.592 C 354.535 545.504 363.86 555.213 375.604 555.883 L 375.604 556.012 C 363.86 556.682 354.535 566.391 354.535 578.303 C 354.535 590.215 363.86 599.924 375.604 600.594 L 375.604 600.724 C 363.86 601.394 354.535 611.103 354.535 623.015 C 354.535 634.927 363.86 644.636 375.604 645.305 L 375.604 645.435 C 363.86 646.105 354.535 655.814 354.535 667.726 C 354.535 679.638 363.86 689.347 375.604 690.017 L 375.604 690.147 C 363.86 690.816 354.535 700.525 354.535 712.437 C 354.535 724.35 363.86 734.059 375.604 734.729 L 375.604 734.859 C 363.86 735.529 354.535 745.237 354.535 757.149 C 354.535 769.062 363.86 778.77 375.604 779.44 L 375.604 779.57 C 363.86 780.239 354.535 789.948 354.535 801.861 C 354.535 813.773 363.86 823.481 375.604 824.151 L 375.604 824.281 C 363.86 824.952 354.535 834.659 354.535 846.571 C 354.535 858.485 363.86 868.192 375.604 868.863 L 375.604 868.993 C 363.86 869.662 354.535 879.371 354.535 891.284 C 354.535 903.196 363.86 912.905 375.604 913.574 L 375.604 913.704 C 363.86 914.374 354.535 924.082 354.535 935.994 C 354.535 947.907 363.86 957.615 375.604 958.285 L 375.604 958.415 C 363.86 959.086 354.535 968.793 354.535 980.707 C 354.535 992.619 363.86 1002.328 375.604 1002.997 L 375.604 1003.127 C 363.86 1003.797 354.535 1013.505 354.535 1025.417 C 354.535 1037.764 364.544 1047.774 376.891 1047.774 C 389.237 1047.774 399.246 1037.764 399.246 1025.417 L 399.237 1025.229 L 399.256 1025.229 L 399.246 1025.417 C 399.246 1037.764 409.255 1047.774 421.602 1047.774 C 433.949 1047.774 443.957 1037.764 443.957 1025.417 L 443.948 1025.229 L 443.967 1025.229 L 443.957 1025.417 C 443.957 1037.764 453.967 1047.774 466.314 1047.774 C 478.66 1047.774 488.67 1037.764 488.67 1025.417 L 488.66 1025.229 L 488.679 1025.229 L 488.67 1025.417 C 488.67 1037.764 498.678 1047.774 511.025 1047.774 C 523.371 1047.774 533.38 1037.764 533.38 1025.417 L 533.371 1025.229 L 533.39 1025.229 L 533.38 1025.417 C 533.38 1037.764 543.39 1047.774 555.736 1047.774 C 568.083 1047.774 578.092 1037.764 578.092 1025.417 L 578.083 1025.229 L 578.102 1025.229 L 578.092 1025.417 C 578.092 1037.764 588.101 1047.774 600.448 1047.774 C 612.794 1047.774 622.803 1037.764 622.803 1025.417 L 622.794 1025.229 L 622.813 1025.229 L 622.803 1025.417 C 622.803 1037.764 632.813 1047.774 645.159 1047.774 C 657.506 1047.774 667.515 1037.764 667.515 1025.417 L 667.506 1025.229 L 667.525 1025.229 L 667.515 1025.417 C 667.515 1037.764 677.524 1047.774 689.87 1047.774 C 702.217 1047.774 712.227 1037.764 712.227 1025.417 L 712.217 1025.229 L 712.236 1025.229 L 712.227 1025.417 C 712.227 1037.764 722.236 1047.774 734.582 1047.774 C 746.929 1047.774 756.938 1037.764 756.938 1025.417 L 756.928 1025.229 L 756.947 1025.229 L 756.938 1025.417 C 756.938 1037.764 766.947 1047.774 779.293 1047.774 C 791.64 1047.774 801.649 1037.764 801.649 1025.417 L 801.64 1025.229 L 801.659 1025.229 L 801.649 1025.417 C 801.649 1037.764 811.658 1047.774 824.005 1047.774 C 836.352 1047.774 846.361 1037.764 846.361 1025.417 L 846.351 1025.229 L 846.37 1025.229 L 846.361 1025.417 C 846.361 1037.764 856.369 1047.774 868.716 1047.774 C 881.063 1047.774 891.072 1037.764 891.072 1025.417 L 891.062 1025.229 L 891.081 1025.229 L 891.072 1025.417 C 891.072 1037.764 901.081 1047.774 913.428 1047.774 C 925.775 1047.774 935.784 1037.764 935.784 1025.417 L 935.774 1025.229 L 935.793 1025.229 L 935.784 1025.417 C 935.784 1037.764 945.792 1047.774 958.139 1047.774 C 970.486 1047.774 980.495 1037.764 980.495 1025.417 L 980.485 1025.229 L 980.504 1025.229 L 980.495 1025.417 C 980.495 1037.764 990.504 1047.774 1002.851 1047.774 C 1015.198 1047.774 1025.207 1037.764 1025.207 1025.417 L 1025.197 1025.229 L 1025.216 1025.229 L 1025.207 1025.417 C 1025.207 1037.764 1035.215 1047.774 1047.562 1047.774 C 1059.908 1047.774 1069.918 1037.764 1069.918 1025.417 L 1069.908 1025.229 L 1069.927 1025.229 L 1069.918 1025.417 C 1069.918 1037.764 1079.927 1047.774 1092.274 1047.774 C 1092.491 1047.774 1092.702 1047.748 1092.917 1047.741 C 1093.132 1047.748 1093.343 1047.774 1093.56 1047.774 C 1105.907 1047.774 1115.915 1037.764 1115.915 1025.417 C 1115.915 1013.07 1105.907 1003.061 1093.56 1003.061 C 1105.907 1003.061 1115.915 993.053 1115.915 980.707 C 1115.915 968.36 1105.907 958.351 1093.56 958.351 C 1105.907 958.351 1115.915 948.341 1115.915 935.994 C 1115.915 923.648 1105.907 913.639 1093.56 913.639 C 1105.907 913.639 1115.915 903.63 1115.915 891.284 C 1115.915 878.937 1105.907 868.928 1093.56 868.928 C 1105.907 868.928 1115.915 858.918 1115.915 846.571 C 1115.915 834.225 1105.907 824.216 1093.56 824.216 C 1105.907 824.216 1115.915 814.208 1115.915 801.861 C 1115.915 789.514 1105.907 779.505 1093.56 779.505 C 1105.907 779.505 1115.915 769.495 1115.915 757.149 C 1115.915 744.802 1105.907 734.793 1093.56 734.793 C 1105.907 734.793 1115.915 724.784 1115.915 712.437 C 1115.915 700.091 1105.907 690.082 1093.56 690.082 C 1105.907 690.082 1115.915 680.073 1115.915 667.726 C 1115.915 655.379 1105.907 645.37 1093.56 645.37 C 1105.907 645.37 1115.915 635.362 1115.915 623.015 C 1115.915 610.668 1105.907 600.659 1093.56 600.659 C 1105.907 600.659 1115.915 590.65 1115.915 578.303 C 1115.915 565.956 1105.907 555.947 1093.56 555.947 C 1105.907 555.947 1115.915 545.938 1115.915 533.592 C 1115.915 521.245 1105.907 511.236 1093.56 511.236 C 1105.907 511.236 1115.915 501.227 1115.915 488.88 C 1115.915 476.533 1105.907 466.524 1093.56 466.524 C 1105.907 466.524 1115.915 456.516 1115.915 444.169 C 1115.915 431.822 1105.907 421.813 1093.56 421.813 C 1105.907 421.813 1115.915 411.804 1115.915 399.457 C 1115.915 387.11 1105.907 377.102 1093.56 377.102 C 1105.907 377.102 1115.915 367.093 1115.915 354.746 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="1854.64 74.774 335.54 335.528" width="335.54pt" height="335.528pt"><path d=" M 2178.07 254.976 C 2177.91 254.951 2177.76 254.945 2177.6 254.926 C 2177.61 254.816 2177.62 254.706 2177.63 254.596 C 2177.79 254.602 2177.94 254.62 2178.09 254.62 C 2184.77 254.62 2190.18 249.209 2190.18 242.537 C 2190.18 236.223 2185.33 231.044 2179.17 230.497 C 2185.19 229.027 2189.19 223.175 2188.23 216.933 C 2187.22 210.336 2181.06 205.807 2174.46 206.828 C 2174.3 206.852 2174.15 206.893 2173.99 206.923 C 2173.97 206.817 2173.94 206.712 2173.92 206.607 C 2174.07 206.565 2174.22 206.529 2174.37 206.48 C 2180.73 204.441 2184.23 197.634 2182.19 191.289 L 2182.19 191.277 C 2180.16 184.931 2173.35 181.423 2167 183.461 C 2166.85 183.511 2166.7 183.576 2166.55 183.631 C 2166.51 183.529 2166.47 183.427 2166.42 183.325 C 2166.57 183.259 2166.72 183.208 2166.86 183.135 C 2172.82 180.12 2175.2 172.849 2172.19 166.893 C 2169.19 160.946 2161.91 158.561 2155.96 161.566 C 2155.81 161.638 2155.69 161.724 2155.55 161.801 C 2155.49 161.71 2155.43 161.621 2155.38 161.531 C 2155.51 161.444 2155.64 161.364 2155.77 161.272 C 2161.18 157.364 2162.4 149.809 2158.49 144.41 C 2154.58 138.988 2147.04 137.779 2141.63 141.689 C 2141.5 141.782 2141.38 141.888 2141.25 141.987 L 2141.04 141.734 C 2141.16 141.626 2141.28 141.528 2141.4 141.415 C 2146.12 136.708 2146.15 129.059 2141.45 124.322 C 2136.75 119.594 2129.1 119.562 2124.36 124.269 C 2124.25 124.38 2124.16 124.5 2124.05 124.614 L 2123.79 124.393 C 2123.89 124.268 2124 124.156 2124.09 124.027 C 2128.04 118.648 2126.88 111.083 2121.49 107.143 C 2116.11 103.203 2108.55 104.36 2104.6 109.749 C 2104.51 109.878 2104.43 110.013 2104.34 110.145 C 2104.24 110.084 2104.15 110.022 2104.05 109.961 C 2104.13 109.82 2104.22 109.694 2104.3 109.549 C 2107.34 103.624 2105.01 96.332 2099.08 93.286 L 2099.08 93.276 C 2093.15 90.228 2085.86 92.56 2082.81 98.497 C 2082.74 98.639 2082.68 98.785 2082.62 98.928 C 2082.51 98.884 2082.4 98.842 2082.3 98.798 C 2082.35 98.649 2082.42 98.504 2082.47 98.35 C 2084.55 92.004 2081.09 85.176 2074.75 83.105 C 2068.42 81.025 2061.59 84.471 2059.51 90.816 C 2059.46 90.971 2059.43 91.127 2059.38 91.282 C 2059.28 91.257 2059.17 91.23 2059.06 91.205 C 2059.1 91.047 2059.14 90.894 2059.16 90.733 C 2060.21 84.145 2055.73 77.946 2049.14 76.896 C 2042.55 75.835 2036.35 80.321 2035.29 86.909 C 2035.27 87.067 2035.26 87.224 2035.24 87.382 C 2035.14 87.373 2035.03 87.363 2034.92 87.354 C 2034.93 87.198 2034.95 87.045 2034.95 86.888 C 2034.97 80.216 2029.57 74.784 2022.9 74.774 C 2016.22 74.753 2010.8 80.143 2010.78 86.814 C 2010.78 86.972 2010.8 87.125 2010.8 87.283 C 2010.69 87.29 2010.58 87.295 2010.47 87.303 C 2010.46 87.147 2010.45 86.991 2010.43 86.834 C 2009.41 80.237 2003.24 75.719 1996.64 76.738 C 1990.05 77.757 1985.52 83.924 1986.54 90.523 C 1986.57 90.68 1986.61 90.832 1986.64 90.987 C 1986.53 91.013 1986.43 91.04 1986.32 91.065 C 1986.28 90.913 1986.25 90.759 1986.2 90.607 C 1984.16 84.25 1977.35 80.752 1970.99 82.8 C 1964.64 84.839 1961.15 91.647 1963.19 98.003 C 1963.24 98.158 1963.3 98.304 1963.35 98.455 C 1963.26 98.495 1963.16 98.535 1963.06 98.576 C 1962.99 98.431 1962.94 98.283 1962.86 98.14 C 1959.85 92.183 1952.58 89.808 1946.62 92.823 C 1940.66 95.849 1938.29 103.119 1941.3 109.066 C 1941.38 109.209 1941.47 109.333 1941.55 109.473 C 1941.45 109.53 1941.36 109.591 1941.27 109.648 C 1941.18 109.519 1941.1 109.384 1941.01 109.255 C 1937.1 103.845 1929.55 102.636 1924.15 106.545 L 1924.14 106.545 C 1918.74 110.453 1917.53 118.018 1921.44 123.418 C 1921.53 123.548 1921.64 123.661 1921.74 123.787 L 1921.48 124.004 C 1921.38 123.887 1921.28 123.763 1921.16 123.648 C 1916.46 118.92 1908.81 118.9 1904.08 123.606 C 1899.35 128.314 1899.33 135.962 1904.04 140.69 C 1904.15 140.803 1904.27 140.9 1904.39 141.007 L 1904.17 141.265 C 1904.04 141.166 1903.93 141.058 1903.8 140.963 C 1898.42 137.024 1890.85 138.2 1886.91 143.59 C 1882.97 148.969 1884.15 156.534 1889.54 160.462 C 1889.67 160.557 1889.8 160.64 1889.94 160.729 C 1889.88 160.825 1889.81 160.921 1889.75 161.018 C 1889.62 160.939 1889.48 160.852 1889.34 160.778 C 1883.4 157.731 1876.12 160.074 1873.08 166.01 C 1870.03 171.946 1872.37 179.227 1878.31 182.274 C 1878.45 182.348 1878.6 182.398 1878.74 182.465 C 1878.7 182.573 1878.65 182.683 1878.61 182.792 C 1878.46 182.736 1878.31 182.671 1878.16 182.621 C 1871.82 180.54 1865 184.007 1862.92 190.343 C 1860.85 196.688 1864.3 203.507 1870.65 205.587 C 1870.8 205.638 1870.96 205.675 1871.11 205.719 C 1871.09 205.823 1871.06 205.928 1871.04 206.033 C 1870.88 206.002 1870.73 205.96 1870.57 205.933 C 1863.98 204.883 1857.78 209.37 1856.73 215.967 C 1855.69 222.555 1860.17 228.742 1866.76 229.793 C 1866.92 229.819 1867.08 229.833 1867.24 229.852 C 1867.23 229.959 1867.22 230.066 1867.21 230.174 C 1867.06 230.169 1866.91 230.151 1866.75 230.15 C 1860.07 230.14 1854.65 235.529 1854.64 242.212 C 1854.63 248.883 1860.03 254.294 1866.7 254.315 L 1866.72 254.315 C 1866.87 254.315 1867.01 254.298 1867.16 254.292 C 1867.17 254.402 1867.18 254.513 1867.19 254.623 C 1867.03 254.642 1866.88 254.647 1866.72 254.672 C 1860.12 255.692 1855.6 261.869 1856.63 268.467 C 1857.56 274.424 1862.71 278.689 1868.56 278.689 C 1869.18 278.689 1869.8 278.647 1870.42 278.553 C 1870.58 278.528 1870.73 278.486 1870.89 278.455 C 1870.92 278.561 1870.95 278.667 1870.97 278.773 C 1870.81 278.817 1870.66 278.849 1870.5 278.9 C 1864.16 280.949 1860.67 287.756 1862.72 294.102 C 1864.37 299.219 1869.12 302.475 1874.21 302.475 C 1875.44 302.475 1876.69 302.287 1877.93 301.897 C 1878.08 301.848 1878.23 301.781 1878.38 301.726 C 1878.42 301.827 1878.46 301.928 1878.5 302.028 C 1878.36 302.095 1878.21 302.15 1878.07 302.224 C 1872.12 305.249 1869.75 312.52 1872.77 318.467 C 1874.91 322.659 1879.15 325.075 1883.55 325.075 C 1885.39 325.075 1887.26 324.654 1889.01 323.762 C 1889.16 323.689 1889.29 323.603 1889.42 323.527 C 1889.48 323.621 1889.54 323.714 1889.6 323.808 C 1889.47 323.896 1889.33 323.973 1889.2 324.066 C 1883.8 327.974 1882.6 335.528 1886.51 340.939 C 1888.88 344.196 1892.57 345.919 1896.31 345.919 C 1898.76 345.919 1901.24 345.173 1903.39 343.618 C 1903.52 343.524 1903.63 343.419 1903.76 343.321 L 1903.97 343.575 C 1903.85 343.683 1903.73 343.779 1903.62 343.892 C 1898.89 348.598 1898.88 356.257 1903.59 360.985 C 1905.95 363.349 1909.05 364.536 1912.15 364.536 C 1915.24 364.536 1918.32 363.36 1920.68 361.006 C 1920.79 360.894 1920.89 360.774 1921 360.658 L 1921.25 360.872 C 1921.15 360.995 1921.05 361.109 1920.95 361.237 C 1917.01 366.627 1918.19 374.192 1923.59 378.12 C 1925.73 379.696 1928.23 380.443 1930.7 380.443 C 1934.42 380.453 1938.1 378.73 1940.46 375.493 C 1940.56 375.362 1940.64 375.224 1940.73 375.089 C 1940.83 375.149 1940.92 375.211 1941.02 375.27 C 1940.94 375.409 1940.85 375.541 1940.78 375.684 C 1937.73 381.619 1940.09 388.9 1946.02 391.947 C 1947.79 392.85 1949.67 393.272 1951.53 393.272 C 1955.91 393.272 1960.15 390.876 1962.29 386.693 C 1962.36 386.551 1962.41 386.405 1962.48 386.262 C 1962.59 386.307 1962.69 386.349 1962.8 386.394 C 1962.75 386.544 1962.68 386.688 1962.63 386.841 C 1960.56 393.187 1964.03 400.005 1970.37 402.075 C 1971.61 402.474 1972.88 402.673 1974.12 402.673 C 1979.2 402.673 1983.94 399.427 1985.61 394.332 C 1985.66 394.177 1985.69 394.021 1985.73 393.866 C 1985.84 393.892 1985.95 393.918 1986.05 393.944 C 1986.02 394.102 1985.98 394.256 1985.96 394.416 C 1984.91 401.003 1989.4 407.191 1996 408.231 C 1996.63 408.337 1997.27 408.389 1997.89 408.389 C 2003.73 408.389 2008.88 404.145 2009.82 398.188 C 2009.84 398.03 2009.85 397.875 2009.87 397.718 C 2009.98 397.727 2010.09 397.739 2010.2 397.747 C 2010.19 397.901 2010.17 398.053 2010.17 398.208 C 2010.16 404.88 2015.57 410.302 2022.24 410.302 L 2022.25 410.302 C 2028.93 410.302 2034.33 404.901 2034.34 398.23 C 2034.34 398.075 2034.32 397.926 2034.31 397.772 C 2034.42 397.764 2034.53 397.753 2034.65 397.745 C 2034.66 397.899 2034.67 398.053 2034.69 398.208 C 2035.62 404.177 2040.77 408.432 2046.62 408.432 C 2047.24 408.432 2047.86 408.389 2048.5 408.285 C 2055.09 407.255 2059.59 401.077 2058.56 394.479 C 2058.54 394.321 2058.5 394.17 2058.47 394.015 C 2058.57 393.99 2058.68 393.963 2058.79 393.937 C 2058.83 394.093 2058.86 394.249 2058.91 394.405 C 2060.57 399.511 2065.31 402.769 2070.41 402.769 C 2071.64 402.769 2072.89 402.579 2074.12 402.18 C 2080.48 400.121 2083.96 393.302 2081.9 386.956 C 2081.85 386.803 2081.78 386.659 2081.73 386.509 C 2081.83 386.467 2081.94 386.425 2082.04 386.383 C 2082.11 386.527 2082.16 386.676 2082.23 386.82 C 2084.37 391.012 2088.61 393.418 2093.01 393.418 C 2094.85 393.418 2096.73 392.997 2098.49 392.104 C 2104.42 389.069 2106.8 381.797 2103.76 375.852 C 2103.69 375.709 2103.6 375.577 2103.53 375.439 C 2103.62 375.381 2103.71 375.321 2103.81 375.263 C 2103.9 375.396 2103.97 375.532 2104.07 375.662 C 2106.43 378.919 2110.11 380.642 2113.85 380.642 C 2116.31 380.642 2118.8 379.896 2120.94 378.33 C 2126.33 374.413 2127.53 366.858 2123.61 361.458 C 2123.51 361.328 2123.41 361.212 2123.31 361.087 L 2123.56 360.873 C 2123.67 360.99 2123.77 361.113 2123.88 361.227 C 2126.24 363.591 2129.33 364.767 2132.42 364.767 C 2135.51 364.767 2138.6 363.591 2140.97 361.237 C 2145.68 356.52 2145.69 348.871 2140.97 344.155 C 2140.86 344.041 2140.74 343.943 2140.62 343.835 L 2140.84 343.575 C 2140.97 343.673 2141.08 343.777 2141.21 343.87 C 2143.36 345.436 2145.85 346.192 2148.32 346.192 C 2152.05 346.192 2155.73 344.47 2158.09 341.223 C 2162.02 335.832 2160.83 328.279 2155.44 324.339 C 2155.31 324.245 2155.18 324.168 2155.04 324.08 C 2155.1 323.985 2155.16 323.892 2155.22 323.797 C 2155.36 323.875 2155.49 323.962 2155.63 324.035 C 2157.39 324.938 2159.27 325.358 2161.12 325.358 C 2165.52 325.358 2169.75 322.952 2171.88 318.771 C 2174.92 312.835 2172.57 305.554 2166.63 302.518 C 2166.49 302.443 2166.34 302.387 2166.19 302.32 C 2166.23 302.214 2166.28 302.107 2166.32 302.001 C 2166.47 302.057 2166.61 302.122 2166.77 302.172 C 2168.01 302.581 2169.27 302.77 2170.51 302.77 C 2175.59 302.77 2180.33 299.523 2181.99 294.417 C 2184.05 288.071 2180.58 281.253 2174.24 279.194 C 2174.08 279.143 2173.93 279.112 2173.77 279.068 C 2173.8 278.961 2173.82 278.855 2173.85 278.748 C 2174.01 278.78 2174.16 278.822 2174.32 278.848 C 2174.95 278.941 2175.58 278.994 2176.21 278.994 C 2182.06 278.994 2187.19 274.739 2188.13 268.782 C 2189.17 262.194 2184.66 256.006 2178.07 254.976 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="2062.98 3726.59 913.54 819.06" width="913.54pt" height="819.06pt"><path d=" M 2950.98 3906.67 L 2950.98 4365.56 C 2950.98 4390.64 2930.65 4410.97 2905.57 4410.97 L 2740.72 4410.97 C 2689.86 4477.32 2609.81 4520.11 2519.75 4520.11 C 2429.69 4520.11 2349.64 4477.32 2298.77 4410.97 L 2133.93 4415.95 C 2108.85 4415.95 2088.52 4395.62 2088.52 4370.55 L 2088.52 3911.66 C 2088.52 3886.58 2108.85 3866.25 2133.93 3866.25 L 2298.77 3861.26 C 2349.64 3794.92 2429.69 3752.13 2519.75 3752.13 C 2609.81 3752.13 2689.86 3794.92 2740.72 3861.26 L 2905.57 3861.26 C 2930.65 3861.26 2950.98 3881.59 2950.98 3906.67 Z M 2959.49 4365.56 C 2959.49 4395.3 2935.3 4419.48 2905.57 4419.48 L 2744.89 4419.48 C 2690.08 4488.9 2608.27 4528.62 2519.75 4528.62 C 2431.22 4528.62 2349.41 4488.9 2294.61 4419.48 L 2133.93 4424.47 C 2104.2 4424.47 2080.01 4400.28 2080.01 4370.55 L 2080.01 3911.66 C 2080.01 3881.92 2104.2 3857.73 2133.93 3857.73 L 2294.61 3852.75 C 2349.41 3783.33 2431.22 3743.62 2519.75 3743.62 C 2608.27 3743.62 2690.08 3783.33 2744.89 3852.75 L 2905.57 3852.75 C 2935.3 3852.75 2959.49 3876.94 2959.49 3906.67 L 2959.49 4365.56 Z M 2905.57 3835.72 L 2753 3835.72 C 2695.07 3766.26 2610.53 3726.59 2519.75 3726.59 C 2428.97 3726.59 2344.43 3766.26 2286.5 3835.72 L 2133.93 3840.71 C 2094.81 3840.71 2062.98 3872.53 2062.98 3911.66 L 2062.98 4370.55 C 2062.98 4409.67 2094.81 4441.5 2133.93 4441.5 L 2286.5 4436.51 C 2344.43 4505.98 2428.97 4545.65 2519.75 4545.65 C 2610.53 4545.65 2695.07 4505.98 2753 4436.51 L 2905.57 4436.51 C 2944.69 4436.51 2976.52 4404.69 2976.52 4365.56 L 2976.52 3906.67 C 2976.52 3867.55 2944.69 3835.72 2905.57 3835.72 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="659.218 3730.38 811.472 811.47" width="811.472pt" height="811.47pt"><path d=" M 1445.14 4136.12 C 1445.14 4168.35 1401.33 4194.4 1393.38 4224.13 C 1385.16 4254.9 1409.84 4299.32 1394.25 4326.25 C 1378.45 4353.58 1327.49 4354.31 1305.32 4376.48 C 1283.14 4398.65 1282.41 4449.61 1255.09 4465.42 C 1228.15 4481 1183.73 4456.32 1152.97 4464.54 C 1123.24 4472.49 1097.19 4516.31 1064.95 4516.31 C 1032.72 4516.31 1006.67 4472.49 976.935 4464.54 C 946.172 4456.32 901.75 4481 874.816 4465.42 C 847.494 4449.61 846.761 4398.65 824.588 4376.48 C 802.415 4354.31 751.458 4353.57 735.65 4326.25 C 720.067 4299.32 744.749 4254.9 736.527 4224.13 C 728.58 4194.4 684.76 4168.35 684.76 4136.12 C 684.76 4103.88 728.58 4077.83 736.526 4048.1 C 744.749 4017.34 720.067 3972.91 735.651 3945.98 C 751.458 3918.66 802.416 3917.92 824.589 3895.75 C 846.762 3873.58 847.496 3822.62 874.817 3806.81 C 901.751 3791.23 946.172 3815.91 976.935 3807.69 C 1006.67 3799.74 1032.72 3755.92 1064.95 3755.92 C 1097.19 3755.92 1123.24 3799.74 1152.97 3807.69 C 1183.73 3815.91 1228.15 3791.23 1255.09 3806.81 C 1282.41 3822.62 1283.14 3873.58 1305.32 3895.75 C 1327.49 3917.93 1378.45 3918.66 1394.25 3945.98 C 1409.84 3972.92 1385.16 4017.34 1393.38 4048.1 C 1401.33 4077.83 1445.14 4103.88 1445.14 4136.12 Z M 1401.6 4226.33 C 1398.39 4238.36 1401.24 4254.29 1403.99 4269.69 C 1407.8 4290.99 1411.74 4313.02 1401.62 4330.52 C 1391.33 4348.31 1370.08 4355.93 1349.54 4363.3 C 1334.3 4368.76 1319.91 4373.92 1311.34 4382.5 C 1302.76 4391.08 1297.6 4405.47 1292.13 4420.7 C 1284.76 4441.25 1277.14 4462.5 1259.35 4472.79 C 1251.88 4477.11 1242.94 4479.21 1232.04 4479.21 C 1221.2 4479.21 1209.68 4477.15 1198.53 4475.16 C 1188.01 4473.28 1177.14 4471.33 1167.62 4471.33 C 1162.86 4471.33 1158.79 4471.8 1155.17 4472.77 C 1143.85 4475.79 1132.41 4485.5 1120.29 4495.78 C 1103.45 4510.06 1086.04 4524.82 1064.95 4524.82 C 1043.87 4524.82 1026.45 4510.06 1009.61 4495.78 C 997.497 4485.5 986.052 4475.79 974.736 4472.77 C 971.12 4471.8 967.045 4471.33 962.284 4471.33 C 952.769 4471.33 941.893 4473.27 931.377 4475.16 C 920.23 4477.15 908.705 4479.21 897.867 4479.21 C 886.961 4479.21 878.027 4477.11 870.553 4472.79 C 852.763 4462.5 845.141 4441.25 837.77 4420.7 C 832.305 4405.46 827.143 4391.08 818.568 4382.5 C 809.99 4373.92 795.601 4368.76 780.366 4363.3 C 759.82 4355.93 738.572 4348.31 728.28 4330.52 C 718.159 4313.02 722.1 4290.99 725.912 4269.69 C 728.667 4254.29 731.518 4238.36 728.301 4226.33 C 725.276 4215.02 715.57 4203.57 705.294 4191.45 C 691.012 4174.62 676.246 4157.2 676.246 4136.12 C 676.246 4115.03 691.012 4097.62 705.294 4080.78 C 715.57 4068.66 725.276 4057.22 728.301 4045.9 C 731.518 4033.87 728.667 4017.94 725.912 4002.54 C 722.102 3981.24 718.16 3959.21 728.282 3941.72 C 738.574 3923.93 759.821 3916.3 780.367 3908.94 C 795.602 3903.47 809.992 3898.31 818.568 3889.73 C 827.145 3881.15 832.306 3866.77 837.77 3851.53 C 845.142 3830.99 852.764 3809.74 870.554 3799.45 C 878.027 3795.12 886.961 3793.02 897.865 3793.02 C 908.705 3793.02 920.23 3795.08 931.377 3797.08 C 941.892 3798.96 952.764 3800.9 962.28 3800.9 C 967.043 3800.9 971.117 3800.43 974.735 3799.46 C 986.054 3796.44 997.499 3786.73 1009.62 3776.46 C 1026.46 3762.18 1043.87 3747.41 1064.95 3747.41 C 1086.04 3747.41 1103.45 3762.18 1120.29 3776.46 C 1132.41 3786.74 1143.85 3796.44 1155.17 3799.46 C 1158.79 3800.43 1162.86 3800.9 1167.63 3800.9 C 1177.14 3800.9 1188.01 3798.96 1198.53 3797.08 C 1209.68 3795.08 1221.2 3793.02 1232.04 3793.02 C 1242.95 3793.02 1251.88 3795.12 1259.35 3799.45 C 1277.14 3809.74 1284.76 3830.99 1292.14 3851.53 C 1297.6 3866.77 1302.76 3881.16 1311.34 3889.73 C 1319.91 3898.31 1334.3 3903.47 1349.54 3908.94 C 1370.09 3916.31 1391.33 3923.93 1401.63 3941.72 C 1411.75 3959.21 1407.81 3981.24 1403.99 4002.54 C 1401.24 4017.94 1398.39 4033.87 1401.6 4045.9 C 1404.63 4057.21 1414.33 4068.66 1424.61 4080.78 C 1438.89 4097.62 1453.66 4115.03 1453.66 4136.12 C 1453.66 4157.2 1438.89 4174.62 1424.61 4191.45 C 1414.33 4203.57 1404.63 4215.02 1401.6 4226.33 Z M 1437.6 4202.46 C 1453.11 4184.18 1470.69 4163.45 1470.69 4136.12 C 1470.69 4108.78 1453.11 4088.05 1437.59 4069.76 C 1428.99 4059.61 1420.09 4049.12 1418.05 4041.51 C 1415.82 4033.14 1418.44 4018.48 1420.75 4005.54 C 1424.9 3982.36 1429.61 3956.08 1416.36 3933.19 C 1402.95 3910.01 1377.63 3900.92 1355.27 3892.9 C 1342.48 3888.31 1329.25 3883.57 1323.38 3877.69 C 1317.5 3871.82 1312.76 3858.59 1308.16 3845.78 C 1300.15 3823.44 1291.06 3798.12 1267.88 3784.71 C 1257.74 3778.84 1246.02 3775.99 1232.04 3775.99 C 1219.68 3775.99 1207.4 3778.19 1195.53 3780.31 C 1185.75 3782.07 1175.63 3783.88 1167.63 3783.88 C 1164.37 3783.88 1161.73 3783.59 1159.56 3783.01 C 1151.94 3780.98 1141.45 3772.08 1131.3 3763.47 C 1113.02 3747.96 1092.29 3730.38 1064.95 3730.38 C 1037.62 3730.38 1016.89 3747.96 998.586 3763.48 C 988.443 3772.09 977.956 3780.98 970.337 3783.01 C 968.171 3783.59 965.535 3783.88 962.28 3783.88 C 954.274 3783.88 944.159 3782.07 934.377 3780.31 C 922.502 3778.19 910.224 3775.99 897.865 3775.99 C 883.888 3775.99 872.164 3778.84 862.027 3784.71 C 838.844 3798.12 829.761 3823.44 821.741 3845.79 C 817.153 3858.58 812.407 3871.81 806.526 3877.69 C 800.652 3883.57 787.424 3888.31 774.618 3892.91 C 752.278 3900.92 726.957 3910 713.543 3933.19 C 700.302 3956.08 705.003 3982.35 709.152 4005.55 C 711.466 4018.48 714.087 4033.14 711.851 4041.5 C 709.813 4049.13 700.914 4059.62 692.308 4069.77 C 676.797 4088.05 659.218 4108.78 659.218 4136.12 C 659.218 4163.45 676.797 4184.18 692.308 4202.47 C 700.914 4212.61 709.813 4223.11 711.851 4230.73 C 714.086 4239.1 711.466 4253.75 709.15 4266.69 C 705.001 4289.88 700.299 4316.16 713.542 4339.04 C 726.956 4362.23 752.277 4371.31 774.629 4379.33 C 787.422 4383.92 800.65 4388.66 806.527 4394.54 C 812.403 4400.42 817.15 4413.65 821.744 4426.45 C 829.758 4448.79 838.84 4474.11 862.022 4487.53 C 872.157 4493.39 883.882 4496.24 897.867 4496.24 C 910.224 4496.24 922.502 4494.04 934.377 4491.92 C 944.152 4490.17 954.261 4488.36 962.284 4488.36 C 965.546 4488.36 968.179 4488.64 970.341 4489.22 C 977.956 4491.25 988.445 4500.15 998.6 4508.76 C 1016.89 4524.27 1037.62 4541.85 1064.95 4541.85 C 1092.29 4541.85 1113.02 4524.27 1131.32 4508.75 C 1141.46 4500.15 1151.95 4491.25 1159.57 4489.22 C 1161.73 4488.64 1164.36 4488.36 1167.62 4488.36 C 1175.61 4488.36 1185.72 4490.17 1195.53 4491.92 C 1207.4 4494.04 1219.69 4496.24 1232.04 4496.24 C 1246.02 4496.24 1257.74 4493.39 1267.88 4487.53 C 1291.07 4474.11 1300.15 4448.79 1308.17 4426.44 C 1312.75 4413.65 1317.5 4400.42 1323.38 4394.54 C 1329.25 4388.67 1342.48 4383.92 1355.29 4379.32 C 1377.63 4371.31 1402.95 4362.23 1416.36 4339.05 C 1429.6 4316.16 1424.9 4289.88 1420.75 4266.69 C 1418.44 4253.75 1415.82 4239.1 1418.05 4230.73 C 1420.09 4223.11 1428.99 4212.62 1437.6 4202.46 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="3658.1 2643.15 639.23 802.21" width="639.23pt" height="802.21pt"><path d=" M 3729.05 2668.69 L 4226.38 2668.69 C 4251.46 2668.69 4271.79 2689.02 4271.79 2714.1 L 4271.79 3215.85 C 4271.79 3231.37 4263.87 3245.8 4250.79 3254.14 L 4002.13 3412.7 C 3987.24 3422.19 3968.19 3422.19 3953.3 3412.7 L 3704.64 3254.14 C 3691.56 3245.8 3683.64 3231.37 3683.64 3215.85 L 3683.64 2714.1 C 3683.64 2689.02 3703.97 2668.69 3729.05 2668.69 Z M 4280.3 3215.85 C 4280.3 3234.37 4270.98 3251.37 4255.37 3261.32 L 4006.7 3419.88 C 3998.03 3425.41 3988 3428.33 3977.71 3428.33 C 3967.42 3428.33 3957.4 3425.41 3948.72 3419.88 L 3700.06 3261.32 C 3684.45 3251.37 3675.13 3234.37 3675.13 3215.85 L 3675.13 2714.1 C 3675.13 2684.37 3699.32 2660.18 3729.05 2660.18 L 4226.38 2660.18 C 4256.11 2660.18 4280.3 2684.37 4280.3 2714.1 L 4280.3 3215.85 Z M 4226.38 2643.15 L 3729.05 2643.15 C 3689.93 2643.15 3658.1 2674.98 3658.1 2714.1 L 3658.1 3215.85 C 3658.1 3240.22 3670.36 3262.58 3690.9 3275.68 L 3939.57 3434.23 C 3950.99 3441.51 3964.18 3445.36 3977.71 3445.36 C 3991.25 3445.36 4004.44 3441.51 4015.86 3434.23 L 4264.53 3275.68 C 4285.07 3262.58 4297.33 3240.22 4297.33 3215.85 L 4297.33 2714.1 C 4297.33 2674.98 4265.5 2643.15 4226.38 2643.15 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="658.898 2638.21 812.082 812.09" width="812.082pt" height="812.09pt"><path d=" M 1445.44 3044.25 C 1445.44 3254.4 1275.08 3424.75 1064.94 3424.75 C 854.795 3424.75 684.44 3254.4 684.44 3044.25 C 684.44 2834.11 854.795 2663.75 1064.94 2663.75 C 1275.08 2663.75 1445.44 2834.11 1445.44 3044.25 Z M 1064.94 3433.27 C 850.438 3433.27 675.926 3258.76 675.926 3044.25 C 675.926 2829.75 850.438 2655.24 1064.94 2655.24 C 1279.44 2655.24 1453.95 2829.75 1453.95 3044.25 C 1453.95 3258.76 1279.44 3433.27 1064.94 3433.27 Z M 1064.94 2638.21 C 841.048 2638.21 658.898 2820.36 658.898 3044.25 C 658.898 3268.15 841.048 3450.3 1064.94 3450.3 C 1288.83 3450.3 1470.98 3268.15 1470.98 3044.25 C 1470.98 2820.36 1288.83 2638.21 1064.94 2638.21 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="2637.31 2554.24 2372.7 506.56" width="2372.7pt" height="506.56pt"><path d=" M 2905.76 2965.55 L 2905.76 2554.24 L 4741.57 2554.24 L 4741.57 2965.55 L 2905.76 2965.55 Z M 2990.36 2985.55 L 3331.96 3058.44 L 3331.96 2985.55 L 2990.36 2985.55 Z M 3331.92 3058.43 C 3331.65 3042.14 3331.22 3012.59 3331.15 2985.55 L 2990.36 2985.55 L 3331.92 3058.43 Z M 2885.63 2974.5 C 2885.66 2974.23 2885.7 2973.96 2885.75 2973.7 L 2885.75 2686.96 L 2637.31 2686.96 L 2810.59 2866.46 C 2814.24 2870.24 2814.34 2876.2 2810.82 2880.1 L 2647.74 3060.8 L 3247.18 3060.8 L 2893.49 2985.33 C 2888.48 2984.26 2885.09 2979.59 2885.63 2974.5 Z M 4399.96 3060.8 L 4999.58 3060.8 L 4836.5 2880.1 C 4832.98 2876.2 4833.08 2870.24 4836.73 2866.46 L 5010.01 2686.96 L 4761.57 2686.96 L 4761.57 2975.45 C 4761.57 2975.45 4761.57 2975.46 4761.57 2975.46 L 4761.57 2975.55 C 4761.57 2975.63 4761.56 2975.7 4761.56 2975.78 C 4761.55 2975.88 4761.54 2975.99 4761.54 2976.1 C 4761.52 2976.54 4761.47 2976.98 4761.39 2977.41 C 4761.39 2977.42 4761.38 2977.43 4761.38 2977.44 L 4761.38 2977.44 C 4761.35 2977.6 4761.32 2977.75 4761.28 2977.9 C 4761.24 2978.05 4761.21 2978.2 4761.16 2978.35 C 4761.16 2978.36 4761.16 2978.36 4761.16 2978.36 C 4761 2978.92 4760.78 2979.46 4760.53 2979.97 C 4760.51 2980.01 4760.49 2980.05 4760.47 2980.09 C 4760.47 2980.09 4760.47 2980.09 4760.47 2980.09 C 4760.26 2980.5 4760.02 2980.9 4759.75 2981.28 C 4759.75 2981.29 4759.75 2981.29 4759.75 2981.29 C 4759.66 2981.42 4759.56 2981.55 4759.46 2981.68 C 4759.46 2981.68 4759.46 2981.68 4759.46 2981.68 C 4759.37 2981.79 4759.29 2981.91 4759.19 2982.01 C 4759.19 2982.01 4759.19 2982.01 4759.19 2982.01 C 4759.09 2982.14 4758.97 2982.26 4758.86 2982.38 C 4758.76 2982.48 4758.67 2982.59 4758.57 2982.69 L 4758.57 2982.69 C 4758.56 2982.69 4758.56 2982.69 4758.56 2982.69 C 4758.12 2983.13 4757.64 2983.52 4757.12 2983.87 L 4757.12 2983.87 C 4757.06 2983.91 4756.99 2983.95 4756.93 2983.98 C 4756.72 2984.11 4756.52 2984.24 4756.31 2984.36 C 4756.31 2984.36 4756.31 2984.36 4756.31 2984.36 C 4756.18 2984.43 4756.04 2984.49 4755.91 2984.55 C 4755.57 2984.71 4755.22 2984.86 4754.86 2984.98 C 4754.86 2984.99 4754.85 2984.99 4754.85 2984.99 C 4754.5 2985.11 4754.16 2985.21 4753.8 2985.29 C 4753.75 2985.31 4753.7 2985.32 4753.65 2985.33 L 4753.63 2985.34 L 4753.63 2985.34 C 4753.6 2985.34 4753.58 2985.35 4753.55 2985.36 C 4753.55 2985.36 4753.55 2985.36 4753.55 2985.36 L 4399.96 3060.8 Z M 4316.17 2985.55 L 4656.78 2985.55 L 4315.41 3058.4 C 4315.67 3042.09 4316.1 3012.57 4316.17 2985.55 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="2633.89 1311.775 2379.54 600.086" width="2379.54pt" height="600.086pt"><path d=" M 4661.22 1369.08 C 4562.6 1332.71 4377.18 1302.26 4053.92 1363.73 C 3994.38 1375.05 3933.53 1388.59 3873.06 1403.96 C 3872.94 1403.99 3872.81 1404.02 3872.68 1404.05 C 3828.92 1413.33 3784.34 1423.83 3740.16 1435.26 C 3739.61 1435.51 3739.03 1435.71 3738.43 1435.86 C 3678.68 1450.73 3621.14 1462.15 3567.41 1469.78 C 3403.91 1492.99 3265.25 1494.96 3155.27 1475.63 C 3112.62 1468.14 3075.65 1457.59 3045.37 1444.28 C 3021.21 1433.66 3002.11 1421.55 2989.94 1409.18 C 2967.44 1512.63 2918.1 1736.67 2917.43 1739.68 C 2906.74 1788.47 2934.98 1835.7 2986.1 1854.56 C 3084.72 1890.92 3270.14 1921.37 3593.4 1859.9 C 3652.93 1848.58 3713.78 1835.05 3774.26 1819.68 C 3774.38 1819.64 3774.51 1819.61 3774.64 1819.59 C 3818.39 1810.31 3862.97 1799.81 3907.16 1788.38 C 3907.71 1788.13 3908.29 1787.93 3908.89 1787.78 C 3968.64 1772.9 4026.18 1761.49 4079.91 1753.86 C 4243.41 1730.64 4382.07 1728.67 4492.05 1748 C 4534.7 1755.5 4571.68 1766.05 4601.96 1779.36 C 4626.11 1789.98 4645.21 1802.08 4657.38 1814.46 C 4679.91 1710.87 4729.34 1486.42 4729.89 1483.94 C 4740.58 1435.17 4712.35 1387.93 4661.22 1369.08 Z M 3400.9 1466.47 C 3402.4 1452.73 3403.54 1438.97 3404.37 1427.24 C 3396.65 1430.59 3387.17 1432.08 3376.23 1432.08 C 3337.77 1432.09 3281.08 1413.74 3218.09 1393.36 C 3136.12 1366.84 3043.22 1336.78 3009.08 1358.52 C 3001.56 1363.31 2997.26 1370.76 2995.94 1381.31 C 2995.91 1381.59 2995.86 1381.87 2995.8 1382.14 C 2995.73 1383.04 2996.66 1386.5 3001.26 1391.94 C 3001.3 1391.99 3001.34 1392.03 3001.38 1392.07 C 3001.62 1392.36 3001.89 1392.66 3002.16 1392.96 C 3002.28 1393.1 3002.39 1393.23 3002.52 1393.37 C 3002.76 1393.63 3003.01 1393.9 3003.27 1394.17 C 3003.5 1394.42 3003.72 1394.66 3003.97 1394.91 C 3004.06 1395.01 3004.16 1395.1 3004.26 1395.2 C 3004.6 1395.55 3004.95 1395.9 3005.32 1396.26 C 3005.93 1396.85 3006.6 1397.47 3007.33 1398.13 C 3017.41 1407.19 3046.62 1428.63 3111 1445.58 C 3111.53 1445.72 3112.07 1445.86 3112.61 1446 C 3113.18 1446.15 3113.75 1446.3 3114.32 1446.44 C 3116.65 1447.04 3119.01 1447.62 3121.42 1448.21 C 3126.13 1449.34 3130.91 1450.43 3135.77 1451.47 C 3135.77 1451.47 3135.77 1451.47 3135.78 1451.47 C 3137.86 1451.92 3139.96 1452.35 3142.06 1452.78 C 3142.92 1452.96 3143.79 1453.13 3144.66 1453.3 C 3145.55 1453.48 3146.46 1453.66 3147.37 1453.83 C 3153.1 1454.94 3159.03 1456.02 3165.19 1457.04 C 3187.07 1460.67 3210.11 1463.46 3234.26 1465.41 C 3234.66 1465.44 3235.06 1465.47 3235.46 1465.5 C 3237.29 1465.65 3239.13 1465.79 3240.97 1465.92 C 3243.35 1466.1 3245.74 1466.27 3248.14 1466.42 C 3248.14 1466.42 3248.14 1466.42 3248.14 1466.42 C 3294.82 1469.48 3345.85 1469.5 3400.9 1466.47 Z M 4246.42 1757.16 C 4244.92 1770.9 4243.79 1784.66 4242.95 1796.39 C 4250.67 1793.04 4260.15 1791.55 4271.09 1791.55 C 4309.55 1791.55 4366.25 1809.89 4429.23 1830.27 C 4491.46 1850.4 4559.99 1872.58 4604.33 1872.58 C 4618.39 1872.58 4630.01 1870.35 4638.24 1865.12 C 4645.76 1860.32 4650.06 1852.87 4651.38 1842.32 C 4651.41 1842.05 4651.46 1841.77 4651.52 1841.49 C 4651.59 1840.59 4650.66 1837.15 4646.08 1831.72 C 4646.03 1831.67 4645.99 1831.61 4645.94 1831.55 C 4645.7 1831.27 4645.45 1830.98 4645.19 1830.7 C 4645.06 1830.55 4644.93 1830.4 4644.79 1830.25 C 4644.56 1830 4644.32 1829.74 4644.08 1829.48 C 4643.83 1829.22 4643.59 1828.96 4643.33 1828.7 C 4643.25 1828.62 4643.17 1828.54 4643.09 1828.45 C 4642.74 1828.1 4642.37 1827.73 4641.99 1827.36 C 4641.38 1826.78 4640.72 1826.16 4640 1825.51 C 4629.93 1816.46 4600.71 1795 4536.28 1778.04 C 4536.16 1778.01 4536.03 1777.98 4535.91 1777.94 C 4534.93 1777.69 4533.95 1777.43 4532.95 1777.18 C 4530.64 1776.59 4528.29 1776.01 4525.9 1775.43 C 4521.21 1774.3 4516.46 1773.22 4511.63 1772.18 C 4511.59 1772.17 4511.54 1772.16 4511.5 1772.15 C 4509.44 1771.71 4507.36 1771.28 4505.28 1770.86 C 4504.4 1770.68 4503.52 1770.5 4502.63 1770.32 C 4501.76 1770.15 4500.89 1769.98 4500.03 1769.82 C 4494.27 1768.7 4488.32 1767.62 4482.13 1766.6 C 4460.28 1762.97 4437.29 1760.18 4413.18 1758.24 C 4412.66 1758.19 4412.13 1758.15 4411.6 1758.11 C 4409.89 1757.98 4408.17 1757.84 4406.45 1757.72 C 4357.8 1754.17 4304.34 1753.98 4246.42 1757.16 Z M 3383.1 1355.22 C 3352.07 1336.97 3294.79 1324.24 3212.85 1317.36 C 3143.31 1311.53 3057.11 1310.23 2963.57 1313.62 C 2882.28 1316.56 2800.5 1322.83 2733.29 1331.26 C 2679.12 1338.05 2648.87 1344.49 2633.89 1349.1 C 2731.19 1383.59 2877.46 1456.56 2905.35 1526.59 C 2906.33 1529.06 2906.29 1531.82 2905.24 1534.26 C 2904.18 1536.7 2902.2 1538.62 2899.73 1539.59 C 2854.79 1557.31 2802.04 1588.89 2755.01 1626.22 C 2715.7 1657.42 2696.26 1679.82 2689.65 1690.44 C 2691.41 1690.02 2693.61 1689.38 2696.33 1688.45 C 2766.54 1664.39 2883.05 1661.05 2914.36 1660.59 C 2920.09 1634.52 2926.85 1603.8 2933.82 1572.03 C 2934.05 1570.97 2934.29 1569.91 2934.52 1568.85 C 2934.58 1568.56 2934.65 1568.26 2934.71 1567.97 C 2934.86 1567.32 2935 1566.67 2935.14 1566.02 C 2935.36 1565.01 2935.58 1564.01 2935.8 1563 C 2951.45 1491.75 2968 1416.15 2976.16 1378.35 C 2978.32 1361.99 2985.78 1349.65 2998.34 1341.65 C 3017.97 1329.15 3048.99 1327.82 3095.95 1337.46 C 3135.17 1345.51 3180.45 1360.16 3224.24 1374.33 C 3295.04 1397.24 3375.29 1423.21 3399.44 1407.28 C 3402.03 1405.57 3405.57 1402.37 3406.3 1394.44 C 3406.31 1394.38 3406.32 1394.32 3406.33 1394.26 C 3406.35 1394.07 3406.37 1393.89 3406.41 1393.7 C 3406.43 1393.57 3406.45 1393.44 3406.47 1393.31 C 3406.48 1393.27 3406.49 1393.23 3406.5 1393.19 C 3408.54 1383.99 3408.33 1370.06 3383.1 1355.22 Z M 3376.23 1432.08 C 3337.77 1432.09 3281.08 1413.74 3218.09 1393.36 C 3136.12 1366.84 3043.22 1336.78 3009.08 1358.52 C 3001.56 1363.31 2997.26 1370.76 2995.94 1381.31 C 2995.91 1381.59 2995.86 1381.87 2995.8 1382.14 C 2995.75 1382.76 2996.17 1384.58 2997.92 1387.41 C 2997.93 1387.43 2997.95 1387.44 2997.96 1387.46 C 2998.1 1387.69 2998.25 1387.92 2998.41 1388.16 C 2998.45 1388.22 2998.49 1388.28 2998.53 1388.34 C 2998.68 1388.56 2998.83 1388.79 2999 1389.02 C 2999.05 1389.1 2999.11 1389.19 2999.17 1389.27 C 2999.33 1389.5 2999.5 1389.72 2999.68 1389.96 C 2999.74 1390.04 2999.81 1390.12 2999.87 1390.2 C 3000.29 1390.76 3000.75 1391.34 3001.26 1391.94 C 3001.3 1391.98 3001.33 1392.02 3001.36 1392.06 C 3001.59 1392.33 3001.84 1392.61 3002.09 1392.89 C 3002.11 1392.91 3002.13 1392.94 3002.16 1392.96 C 3002.28 1393.1 3002.39 1393.23 3002.52 1393.37 C 3002.73 1393.61 3002.97 1393.85 3003.2 1394.1 C 3003.22 1394.12 3003.24 1394.15 3003.27 1394.17 C 3003.5 1394.42 3003.72 1394.66 3003.97 1394.91 C 3004.06 1395.01 3004.16 1395.1 3004.26 1395.2 C 3004.6 1395.55 3004.95 1395.9 3005.32 1396.26 C 3005.32 1396.26 3005.32 1396.26 3005.32 1396.26 C 3005.93 1396.85 3006.6 1397.47 3007.33 1398.13 C 3017.41 1407.18 3046.61 1428.62 3110.97 1445.57 C 3111.92 1445.82 3112.88 1446.07 3113.85 1446.32 C 3113.99 1446.36 3114.13 1446.39 3114.27 1446.43 C 3116.61 1447.03 3118.99 1447.62 3121.42 1448.2 C 3128.15 1449.83 3135.04 1451.35 3142.07 1452.78 C 3142.92 1452.95 3143.77 1453.13 3144.63 1453.3 C 3145.55 1453.48 3146.47 1453.66 3147.39 1453.84 C 3153.12 1454.95 3159.04 1456.02 3165.19 1457.04 C 3187.05 1460.67 3210.05 1463.45 3234.17 1465.4 C 3234.67 1465.44 3235.17 1465.48 3235.66 1465.52 C 3237.39 1465.65 3239.13 1465.79 3240.86 1465.92 C 3241.02 1465.93 3241.17 1465.94 3241.32 1465.95 C 3244.15 1466.15 3247 1466.35 3249.86 1466.53 C 3250.25 1466.55 3250.63 1466.57 3251.02 1466.6 C 3253.65 1466.76 3256.28 1466.92 3258.94 1467.06 C 3259.5 1467.09 3260.07 1467.12 3260.63 1467.15 C 3263.11 1467.28 3265.61 1467.41 3268.12 1467.52 C 3268.82 1467.56 3269.52 1467.59 3270.22 1467.62 C 3272.6 1467.72 3274.98 1467.82 3277.38 1467.91 C 3278.2 1467.94 3279.04 1467.97 3279.87 1468 C 3282.15 1468.08 3284.43 1468.15 3286.73 1468.22 C 3287.67 1468.25 3288.61 1468.27 3289.54 1468.3 C 3291.75 1468.36 3293.97 1468.41 3296.19 1468.46 C 3297.22 1468.48 3298.25 1468.5 3299.29 1468.52 C 3301.43 1468.55 3303.57 1468.59 3305.72 1468.62 C 3306.85 1468.63 3307.98 1468.64 3309.11 1468.66 C 3311.18 1468.68 3313.27 1468.69 3315.36 1468.7 C 3316.57 1468.71 3317.78 1468.71 3318.99 1468.72 C 3321.02 1468.72 3323.05 1468.72 3325.09 1468.71 C 3326.38 1468.71 3327.67 1468.71 3328.96 1468.7 C 3330.93 1468.69 3332.91 1468.67 3334.89 1468.65 C 3336.27 1468.64 3337.63 1468.63 3339.01 1468.61 C 3340.94 1468.58 3342.88 1468.55 3344.81 1468.52 C 3346.25 1468.49 3347.69 1468.47 3349.13 1468.44 C 3351.03 1468.4 3352.95 1468.35 3354.86 1468.31 C 3356.35 1468.27 3357.83 1468.24 3359.33 1468.2 C 3361.21 1468.14 3363.1 1468.08 3364.99 1468.02 C 3366.54 1467.98 3368.07 1467.93 3369.62 1467.88 C 3371.49 1467.81 3373.38 1467.74 3375.26 1467.67 C 3376.83 1467.6 3378.4 1467.55 3379.99 1467.48 C 3381.93 1467.4 3383.9 1467.31 3385.85 1467.22 C 3387.38 1467.15 3388.9 1467.09 3390.43 1467.01 C 3393.11 1466.88 3395.8 1466.74 3398.5 1466.6 C 3399.3 1466.56 3400.08 1466.52 3400.88 1466.48 C 3401.69 1459.06 3402.41 1451.49 3403.08 1443.8 C 3403.57 1438.01 3404 1432.42 3404.37 1427.24 C 3396.65 1430.59 3387.17 1432.08 3376.23 1432.08 Z M 4264.22 1868.41 C 4295.25 1886.66 4352.53 1899.4 4434.47 1906.27 C 4504.01 1912.11 4590.21 1913.4 4683.75 1910.02 C 4765.04 1907.07 4846.82 1900.81 4914.03 1892.38 C 4968.2 1885.58 4998.45 1879.14 5013.43 1874.54 C 4916.13 1840.04 4769.85 1767.07 4741.97 1697.04 C 4740.99 1694.57 4741.03 1691.82 4742.08 1689.38 C 4743.14 1686.94 4745.12 1685.02 4747.59 1684.04 C 4792.53 1666.32 4845.28 1634.75 4892.31 1597.42 C 4931.62 1566.21 4951.06 1543.81 4957.67 1533.19 C 4955.91 1533.62 4953.71 1534.25 4950.99 1535.18 C 4880.77 1559.24 4764.26 1562.58 4732.96 1563.05 C 4722.38 1611.15 4708.33 1675.1 4695.82 1732.18 C 4685.72 1778.29 4676.59 1820.1 4671.15 1845.3 C 4669 1861.65 4661.54 1873.99 4648.98 1881.99 C 4637.94 1889.01 4623.3 1892.51 4604.25 1892.51 C 4589.42 1892.51 4571.92 1890.39 4551.37 1886.17 C 4512.16 1878.12 4466.87 1863.47 4423.08 1849.3 C 4352.28 1826.39 4272.03 1800.43 4247.88 1816.36 C 4245.29 1818.07 4241.75 1821.26 4241.02 1829.2 C 4241.01 1829.25 4241 1829.31 4240.99 1829.37 C 4240.97 1829.56 4240.95 1829.75 4240.91 1829.94 C 4240.89 1830.07 4240.87 1830.19 4240.85 1830.32 C 4240.84 1830.36 4240.83 1830.4 4240.82 1830.45 C 4238.78 1839.64 4238.99 1853.58 4264.22 1868.41 Z M 4271.09 1791.55 C 4309.55 1791.55 4366.25 1809.89 4429.23 1830.27 C 4491.46 1850.4 4559.99 1872.58 4604.33 1872.58 C 4618.39 1872.58 4630.01 1870.35 4638.24 1865.12 C 4645.76 1860.32 4650.06 1852.87 4651.38 1842.32 C 4651.41 1842.05 4651.46 1841.77 4651.52 1841.49 C 4651.57 1840.82 4651.07 1838.73 4648.9 1835.45 C 4648.88 1835.42 4648.86 1835.38 4648.83 1835.35 C 4648.67 1835.11 4648.5 1834.86 4648.32 1834.6 C 4648.28 1834.55 4648.25 1834.5 4648.21 1834.45 C 4648.03 1834.2 4647.84 1833.93 4647.64 1833.67 C 4647.63 1833.66 4647.63 1833.65 4647.62 1833.65 C 4647.16 1833.04 4646.65 1832.4 4646.08 1831.72 C 4646.04 1831.67 4645.99 1831.61 4645.94 1831.56 C 4645.82 1831.41 4645.67 1831.25 4645.54 1831.09 C 4645.42 1830.96 4645.31 1830.83 4645.19 1830.7 C 4645.06 1830.55 4644.93 1830.41 4644.8 1830.26 C 4644.57 1830.01 4644.32 1829.75 4644.07 1829.48 C 4643.83 1829.22 4643.59 1828.96 4643.33 1828.7 C 4643.26 1828.63 4643.19 1828.56 4643.12 1828.49 C 4643.11 1828.47 4643.09 1828.46 4643.08 1828.44 C 4642.73 1828.09 4642.37 1827.73 4641.99 1827.37 C 4641.99 1827.36 4641.98 1827.36 4641.97 1827.35 C 4641.38 1826.77 4640.72 1826.16 4640 1825.51 C 4640 1825.51 4640 1825.51 4640 1825.51 C 4629.92 1816.46 4600.71 1795.01 4536.29 1778.04 C 4536.16 1778.01 4536.02 1777.97 4535.89 1777.94 C 4534.92 1777.69 4533.95 1777.43 4532.97 1777.18 C 4532.69 1777.11 4532.41 1777.04 4532.14 1776.97 C 4531.25 1776.75 4530.37 1776.53 4529.48 1776.3 C 4528.29 1776.01 4527.1 1775.72 4525.9 1775.43 C 4523.56 1774.86 4521.19 1774.31 4518.81 1773.77 C 4516.52 1773.25 4514.21 1772.74 4511.88 1772.24 C 4511.8 1772.22 4511.71 1772.2 4511.63 1772.18 C 4511.59 1772.17 4511.54 1772.16 4511.5 1772.15 C 4511.4 1772.13 4511.29 1772.11 4511.18 1772.09 C 4509.23 1771.67 4507.26 1771.26 4505.28 1770.86 C 4504.4 1770.68 4503.52 1770.5 4502.63 1770.32 C 4501.76 1770.15 4500.89 1769.98 4500.03 1769.82 C 4494.27 1768.7 4488.32 1767.62 4482.13 1766.6 C 4460.29 1762.97 4437.29 1760.18 4413.19 1758.24 C 4412.66 1758.19 4412.13 1758.15 4411.59 1758.11 C 4409.89 1757.98 4408.17 1757.84 4406.46 1757.72 C 4400.42 1757.28 4394.31 1756.89 4388.13 1756.55 C 4387.96 1756.55 4387.79 1756.54 4387.63 1756.53 C 4384.73 1756.37 4381.83 1756.23 4378.91 1756.09 C 4378.58 1756.08 4378.25 1756.07 4377.92 1756.05 C 4375.16 1755.93 4372.39 1755.81 4369.6 1755.71 C 4369.13 1755.69 4368.66 1755.68 4368.19 1755.66 C 4365.54 1755.57 4362.87 1755.48 4360.19 1755.4 C 4359.61 1755.38 4359.03 1755.37 4358.45 1755.35 C 4355.86 1755.28 4353.27 1755.22 4350.66 1755.17 C 4350 1755.15 4349.33 1755.14 4348.66 1755.13 C 4346.13 1755.08 4343.59 1755.04 4341.05 1755.01 C 4340.29 1755 4339.54 1754.99 4338.79 1754.98 C 4336.32 1754.96 4333.84 1754.94 4331.35 1754.93 C 4330.51 1754.92 4329.68 1754.92 4328.84 1754.92 C 4326.41 1754.91 4323.97 1754.91 4321.52 1754.92 C 4320.63 1754.92 4319.73 1754.92 4318.83 1754.93 C 4316.44 1754.94 4314.03 1754.96 4311.62 1754.99 C 4310.66 1755 4309.7 1755.01 4308.74 1755.02 C 4306.36 1755.05 4303.97 1755.09 4301.58 1755.13 C 4300.57 1755.15 4299.57 1755.16 4298.56 1755.19 C 4296.19 1755.23 4293.81 1755.29 4291.43 1755.35 C 4290.39 1755.38 4289.35 1755.4 4288.3 1755.43 C 4285.92 1755.49 4283.51 1755.57 4281.11 1755.65 C 4280.06 1755.68 4279.02 1755.71 4277.97 1755.75 C 4275.51 1755.83 4273.04 1755.93 4270.56 1756.03 C 4269.55 1756.07 4268.55 1756.1 4267.54 1756.14 C 4264.88 1756.25 4262.2 1756.38 4259.52 1756.5 C 4258.69 1756.54 4257.87 1756.57 4257.03 1756.61 C 4253.52 1756.78 4249.99 1756.96 4246.44 1757.16 C 4245.64 1764.53 4244.92 1772.05 4244.25 1779.7 C 4243.76 1785.54 4243.32 1791.17 4242.95 1796.39 C 4250.67 1793.04 4260.15 1791.55 4271.09 1791.55 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="2632.28 3551.555 2382.76 903.351" width="2382.76pt" height="903.351pt"><path d=" M 3162.79 3929.04 C 3269.36 3944.53 3390.11 3985.97 3521.69 4052.22 C 3565.67 4074.36 3611.12 4100.9 3656.77 4131.09 C 3657.29 4131.44 3657.78 4131.83 3658.23 4132.27 C 3691.62 4154.86 3725.82 4176.75 3759.91 4197.36 C 3760.05 4197.44 3760.18 4197.53 3760.3 4197.61 C 3806.22 4228.36 3853.41 4257.62 3900.57 4284.58 C 4156.58 4430.99 4336.93 4457.88 4443.15 4454.66 C 4470.32 4453.83 4497.45 4445.17 4519.56 4430.26 C 4541.4 4415.54 4557.52 4395.25 4564.95 4373.14 C 4565.72 4370.87 4633.94 4167.39 4667.17 4069.09 C 4647.13 4077.07 4590.91 4092.88 4484.53 4077.41 C 4377.96 4061.92 4257.21 4020.48 4125.63 3954.23 C 4081.65 3932.09 4036.2 3905.55 3990.55 3875.36 C 3990.03 3875.01 3989.54 3874.62 3989.1 3874.19 C 3955.7 3851.6 3921.5 3829.7 3887.41 3809.09 C 3887.27 3809.01 3887.14 3808.93 3887.02 3808.84 C 3841.09 3778.09 3793.9 3748.83 3746.75 3721.87 C 3490.74 3575.46 3310.4 3548.59 3204.17 3551.8 C 3177 3552.62 3149.87 3561.28 3127.76 3576.19 C 3105.93 3590.92 3089.8 3611.2 3082.37 3633.31 C 3081.6 3635.58 3013.38 3839.06 2980.15 3937.37 C 3000.19 3929.38 3056.41 3913.57 3162.79 3929.04 Z M 3040.68 4013.15 C 3078.67 4017.38 3126.05 4017.67 3171.86 4017.96 C 3270.32 4018.58 3333.92 4020.2 3355.99 4043.01 C 3361.2 4032.66 3367.27 4020.25 3373.07 4007.67 C 3235.01 3954.2 3137.55 3942.55 3078.87 3942.55 C 3077.78 3942.55 3076.7 3942.55 3075.64 3942.56 C 3060.98 3942.67 3048.25 3943.5 3037.3 3944.72 C 3037.29 3944.72 3037.29 3944.72 3037.28 3944.72 C 3036.88 3944.77 3036.5 3944.82 3036.11 3944.86 C 3016.53 3947.16 3002.81 3950.7 2994.31 3953.5 C 2994.07 3953.58 2993.82 3953.66 2993.58 3953.74 C 2993.41 3953.8 2993.25 3953.85 2993.09 3953.91 C 2992.62 3954.07 2992.16 3954.22 2991.71 3954.38 C 2991.65 3954.41 2991.58 3954.43 2991.51 3954.46 C 2991.18 3954.57 2990.86 3954.69 2990.53 3954.81 C 2990.3 3954.9 2990.06 3954.98 2989.83 3955.07 C 2989.64 3955.14 2989.46 3955.21 2989.27 3955.28 C 2988.96 3955.4 2988.66 3955.51 2988.36 3955.63 C 2988.33 3955.64 2988.3 3955.65 2988.27 3955.67 C 2975.79 3960.55 2971.09 3965.13 2970.25 3966.65 C 2970.23 3966.71 2970.2 3966.76 2970.18 3966.8 C 2970.09 3967.08 2970 3967.29 2969.89 3967.55 C 2964.69 3979.39 2967.09 3985.39 2969.35 3988.88 C 2976.93 4000.57 3000.93 4008.73 3040.68 4013.15 Z M 4677.14 4039.65 C 4677.14 4039.64 4677.15 4039.63 4677.15 4039.62 C 4677.24 4039.36 4677.32 4039.15 4677.43 4038.9 C 4682.64 4027.06 4680.23 4021.06 4677.97 4017.57 C 4670.39 4005.89 4646.39 3997.72 4606.64 3993.3 C 4568.65 3989.08 4521.27 3988.78 4475.46 3988.49 C 4377 3987.87 4313.4 3986.25 4291.33 3963.44 C 4286.13 3973.8 4280.05 3986.2 4274.25 3998.79 C 4412.31 4052.25 4509.77 4063.9 4568.45 4063.9 C 4569.54 4063.9 4570.62 4063.9 4571.68 4063.89 C 4586.9 4063.78 4600.03 4062.89 4611.25 4061.59 C 4630.69 4059.31 4644.33 4055.8 4652.84 4053.01 C 4653.18 4052.9 4653.53 4052.78 4653.86 4052.67 C 4653.97 4052.64 4654.07 4052.6 4654.17 4052.57 C 4654.68 4052.39 4655.17 4052.22 4655.65 4052.05 C 4655.68 4052.04 4655.71 4052.03 4655.74 4052.02 C 4656.12 4051.89 4656.49 4051.75 4656.85 4051.62 C 4657.05 4051.54 4657.26 4051.47 4657.46 4051.4 C 4657.68 4051.31 4657.89 4051.23 4658.11 4051.15 C 4658.39 4051.04 4658.67 4050.93 4658.95 4050.83 C 4659 4050.81 4659.06 4050.78 4659.12 4050.76 C 4672 4045.71 4676.56 4040.99 4677.14 4039.65 Z M 3366.78 4005.25 C 3366.73 4005.23 3366.68 4005.21 3366.62 4005.19 C 3365.32 4004.69 3364.03 4004.21 3362.73 4003.72 C 3361.87 4003.39 3361.01 4003.06 3360.15 4002.74 C 3359.16 4002.37 3358.17 4002 3357.19 4001.64 C 3356.03 4001.21 3354.88 4000.77 3353.73 4000.35 C 3352.92 4000.05 3352.12 3999.76 3351.31 3999.46 C 3349.99 3998.98 3348.67 3998.49 3347.36 3998.02 C 3346.67 3997.77 3345.98 3997.52 3345.29 3997.27 C 3343.88 3996.76 3342.46 3996.25 3341.06 3995.75 C 3340.46 3995.53 3339.87 3995.33 3339.27 3995.11 C 3337.78 3994.58 3336.28 3994.05 3334.8 3993.53 C 3334.31 3993.36 3333.83 3993.19 3333.35 3993.02 C 3331.76 3992.47 3330.17 3991.91 3328.59 3991.37 C 3328.2 3991.23 3327.81 3991.1 3327.41 3990.96 C 3325.75 3990.39 3324.09 3989.82 3322.44 3989.26 C 3322.13 3989.16 3321.82 3989.05 3321.51 3988.95 C 3319.78 3988.36 3318.05 3987.78 3316.34 3987.21 C 3316.12 3987.14 3315.9 3987.07 3315.69 3987 C 3313.88 3986.4 3312.08 3985.8 3310.29 3985.22 C 3310.16 3985.17 3310.02 3985.13 3309.88 3985.08 C 3308.01 3984.47 3306.15 3983.87 3304.3 3983.28 C 3304.24 3983.26 3304.18 3983.24 3304.11 3983.22 C 3201.76 3950.41 3126.9 3942.53 3078.56 3942.55 C 3077.58 3942.55 3076.6 3942.56 3075.64 3942.56 C 3074 3942.57 3072.39 3942.6 3070.8 3942.63 C 3070.42 3942.64 3070.04 3942.64 3069.66 3942.65 C 3066.5 3942.72 3063.44 3942.82 3060.48 3942.95 C 3060.13 3942.96 3059.78 3942.98 3059.43 3943 C 3056.48 3943.14 3053.63 3943.3 3050.87 3943.5 C 3050.54 3943.52 3050.21 3943.54 3049.89 3943.57 C 3047.14 3943.77 3044.49 3943.99 3041.93 3944.24 C 3041.63 3944.27 3041.34 3944.3 3041.05 3944.33 C 3039.78 3944.46 3038.53 3944.59 3037.3 3944.72 C 3037.29 3944.72 3037.29 3944.72 3037.28 3944.72 C 3036.88 3944.77 3036.5 3944.82 3036.11 3944.86 C 3016.53 3947.16 3002.81 3950.7 2994.31 3953.5 C 2994.07 3953.58 2993.82 3953.66 2993.58 3953.74 C 2993.41 3953.8 2993.25 3953.85 2993.09 3953.91 C 2992.62 3954.07 2992.16 3954.22 2991.71 3954.38 C 2991.65 3954.41 2991.58 3954.43 2991.51 3954.46 C 2991.18 3954.57 2990.86 3954.69 2990.53 3954.81 C 2990.3 3954.9 2990.06 3954.98 2989.83 3955.07 C 2989.64 3955.14 2989.46 3955.21 2989.27 3955.28 C 2988.96 3955.4 2988.66 3955.51 2988.36 3955.63 C 2988.33 3955.64 2988.3 3955.65 2988.27 3955.67 C 2975.79 3960.55 2971.09 3965.13 2970.25 3966.65 C 2970.23 3966.71 2970.2 3966.76 2970.18 3966.8 C 2970.09 3967.08 2970 3967.29 2969.89 3967.55 C 2964.69 3979.39 2967.09 3985.39 2969.35 3988.88 C 2976.93 4000.57 3000.93 4008.73 3040.68 4013.15 C 3078.67 4017.38 3126.05 4017.67 3171.86 4017.96 C 3270.32 4018.58 3333.92 4020.2 3355.99 4043.01 C 3358.52 4037.97 3361.27 4032.44 3364.08 4026.65 C 3364.43 4025.92 3364.79 4025.19 3365.14 4024.46 C 3365.46 4023.79 3365.79 4023.11 3366.11 4022.44 C 3368.49 4017.46 3370.81 4012.53 3373.05 4007.66 C 3370.95 4006.85 3368.86 4006.04 3366.78 4005.25 Z M 3343.07 4058.74 C 3340.22 4054.2 3329.08 4045.93 3286.5 4041.68 C 3254.47 4038.48 3214.28 4038.23 3171.74 4037.96 C 3071.36 4037.33 2976.54 4036.74 2952.57 3999.76 C 2945.25 3988.48 2944.86 3975.08 2951.39 3959.94 C 2952.66 3956.21 2954.06 3952.09 2955.57 3947.63 C 2955.76 3947.05 2955.96 3946.47 2956.16 3945.87 C 2956.16 3945.87 2956.16 3945.87 2956.17 3945.86 C 2956.51 3944.85 2956.86 3943.82 2957.21 3942.78 C 2957.22 3942.74 2957.23 3942.71 2957.24 3942.68 C 2977.26 3883.56 3014.61 3772.35 3039.25 3698.94 C 3008.46 3688.33 2910.42 3652.64 2861.3 3612.39 C 2858.39 3610.01 2856.23 3608.6 2854.72 3607.78 C 2854.29 3617.34 2860.32 3644 2879.79 3683.29 C 2902.48 3729.06 2933.13 3771.46 2963.88 3799.63 C 2965.98 3801.55 2967.16 3804.27 2967.13 3807.11 C 2967.1 3809.96 2965.86 3812.65 2963.72 3814.53 C 2944.98 3830.92 2903.45 3854.12 2811.95 3871.6 C 2756.56 3882.18 2690.05 3888.94 2632.28 3889.93 C 2642.43 3897.34 2663.77 3910.52 2708.28 3931.98 C 2761.17 3957.46 2827.69 3985.38 2895.59 4010.58 C 3068.71 4074.84 3210.81 4107.65 3285.44 4100.56 C 3317.22 4097.55 3336.15 4087.6 3341.69 4070.97 C 3341.71 4070.94 3341.72 4070.9 3341.73 4070.87 C 3341.77 4070.76 3341.81 4070.66 3341.85 4070.55 C 3341.93 4070.36 3342 4070.17 3342.09 4069.99 C 3342.11 4069.94 3342.13 4069.88 3342.15 4069.83 C 3345.55 4062.7 3343.75 4059.82 3343.07 4058.74 Z M 4683.6 4191.93 C 4702.34 4175.54 4743.88 4152.33 4835.37 4134.85 C 4890.76 4124.27 4957.27 4117.51 5015.04 4116.52 C 5004.89 4109.11 4983.55 4095.93 4939.04 4074.48 C 4886.15 4048.99 4819.63 4021.08 4751.73 3995.87 C 4578.61 3931.62 4436.51 3898.81 4361.88 3905.89 C 4330.1 3908.9 4311.17 3918.86 4305.63 3935.48 C 4305.62 3935.51 4305.6 3935.55 4305.59 3935.58 C 4305.55 3935.69 4305.51 3935.8 4305.46 3935.91 C 4305.39 3936.09 4305.32 3936.28 4305.23 3936.46 C 4305.21 3936.52 4305.19 3936.57 4305.17 3936.62 C 4301.77 3943.75 4303.57 3946.63 4304.25 3947.71 C 4307.1 3952.26 4318.24 3960.52 4360.82 3964.77 C 4392.85 3967.97 4433.04 3968.22 4475.58 3968.49 C 4575.96 3969.12 4670.78 3969.72 4694.75 4006.69 C 4702.07 4017.98 4702.46 4031.37 4695.93 4046.51 C 4694.38 4051.09 4692.62 4056.26 4690.7 4061.93 C 4670.86 4120.54 4632.97 4233.33 4608.07 4307.51 C 4638.86 4318.12 4736.9 4353.81 4786.02 4394.06 C 4788.93 4396.44 4791.09 4397.85 4792.6 4398.68 C 4793.03 4389.11 4787 4362.46 4767.53 4323.16 C 4744.84 4277.4 4714.19 4234.99 4683.44 4206.83 C 4681.34 4204.91 4680.16 4202.18 4680.19 4199.34 C 4680.22 4196.5 4681.46 4193.8 4683.6 4191.93 Z M 4571.68 4063.89 C 4573.39 4063.88 4575.05 4063.85 4576.71 4063.82 C 4577.07 4063.81 4577.44 4063.81 4577.8 4063.8 C 4579.42 4063.76 4581.03 4063.72 4582.6 4063.67 C 4582.74 4063.67 4582.87 4063.66 4583.01 4063.65 C 4584.52 4063.6 4586.01 4063.54 4587.48 4063.47 C 4587.72 4063.46 4587.97 4063.45 4588.21 4063.44 C 4589.78 4063.37 4591.33 4063.28 4592.85 4063.19 C 4592.96 4063.18 4593.08 4063.18 4593.2 4063.17 C 4594.73 4063.08 4596.23 4062.97 4597.7 4062.87 C 4597.75 4062.86 4597.81 4062.86 4597.86 4062.86 C 4599.41 4062.74 4600.92 4062.62 4602.41 4062.49 C 4602.46 4062.48 4602.51 4062.48 4602.56 4062.47 C 4605.58 4062.21 4608.47 4061.91 4611.25 4061.59 C 4630.69 4059.31 4644.33 4055.8 4652.84 4053.01 C 4653.18 4052.9 4653.53 4052.78 4653.86 4052.67 C 4653.97 4052.64 4654.07 4052.6 4654.17 4052.57 C 4654.68 4052.39 4655.17 4052.22 4655.65 4052.05 C 4655.68 4052.04 4655.71 4052.03 4655.74 4052.02 C 4656.12 4051.89 4656.49 4051.75 4656.85 4051.62 C 4657.05 4051.54 4657.26 4051.47 4657.46 4051.4 C 4657.68 4051.31 4657.89 4051.23 4658.11 4051.15 C 4658.39 4051.04 4658.67 4050.93 4658.95 4050.83 C 4659 4050.81 4659.06 4050.78 4659.12 4050.76 C 4672 4045.71 4676.56 4040.99 4677.14 4039.65 C 4677.14 4039.64 4677.15 4039.63 4677.15 4039.62 C 4677.24 4039.36 4677.32 4039.15 4677.43 4038.9 C 4682.64 4027.06 4680.23 4021.06 4677.97 4017.57 C 4670.39 4005.89 4646.39 3997.72 4606.64 3993.3 C 4568.65 3989.08 4521.27 3988.78 4475.46 3988.49 C 4377 3987.87 4313.4 3986.25 4291.33 3963.44 C 4288.79 3968.51 4286.03 3974.06 4283.21 3979.88 C 4282.9 3980.51 4282.6 3981.14 4282.29 3981.77 C 4281.93 3982.52 4281.57 3983.28 4281.2 3984.04 C 4278.82 3989.01 4276.51 3993.93 4274.27 3998.79 C 4276.17 3999.53 4278.05 4000.25 4279.92 4000.97 C 4280.18 4001.06 4280.45 4001.17 4280.71 4001.27 C 4281.9 4001.72 4283.08 4002.17 4284.27 4002.61 C 4285.24 4002.98 4286.21 4003.35 4287.18 4003.72 C 4288.09 4004.06 4288.98 4004.39 4289.88 4004.72 C 4291.13 4005.19 4292.37 4005.65 4293.61 4006.11 C 4294.34 4006.38 4295.07 4006.64 4295.8 4006.91 C 4297.19 4007.42 4298.59 4007.94 4299.97 4008.44 C 4300.61 4008.67 4301.23 4008.89 4301.87 4009.12 C 4303.34 4009.66 4304.81 4010.19 4306.28 4010.71 C 4306.82 4010.91 4307.37 4011.1 4307.91 4011.29 C 4309.46 4011.84 4311.01 4012.39 4312.54 4012.93 C 4312.98 4013.08 4313.41 4013.23 4313.85 4013.39 C 4315.48 4013.96 4317.12 4014.53 4318.74 4015.09 C 4319.11 4015.22 4319.47 4015.34 4319.84 4015.47 C 4321.53 4016.05 4323.21 4016.62 4324.88 4017.19 C 4325.19 4017.29 4325.49 4017.39 4325.8 4017.5 C 4327.53 4018.09 4329.26 4018.67 4330.99 4019.24 C 4331.2 4019.31 4331.4 4019.38 4331.62 4019.45 C 4333.42 4020.05 4335.23 4020.65 4337.02 4021.23 C 4337.17 4021.28 4337.31 4021.33 4337.45 4021.37 C 4339.31 4021.98 4341.17 4022.58 4343.01 4023.17 C 4343.08 4023.2 4343.15 4023.22 4343.22 4023.24 C 4445.59 4056.06 4520.45 4063.92 4568.81 4063.9 C 4569.78 4063.9 4570.74 4063.9 4571.68 4063.89 Z " fill="rgb(255,255,255)"/></svg>
</div>
<div class="brand-shape" data-id="customShape" title="Custom Shape">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="2626.64 10 2394.04 812.239" width="2394.04pt" height="812.239pt"><path d=" M 4809.57 361.51 C 4829.51 312.867 4811.39 258.149 4765.5 228.455 C 4747.31 216.684 4646.93 155.091 4456.71 98.402 C 4367.85 71.921 4273.84 51.031 4177.3 36.316 C 4062.74 18.854 3943.76 10 3823.66 10 C 3703.56 10 3584.58 18.854 3470.02 36.316 C 3373.48 51.031 3279.47 71.921 3190.61 98.402 C 3000.39 155.092 2900.01 216.684 2881.82 228.455 C 2835.93 258.149 2817.81 312.866 2837.76 361.519 C 2838.77 363.98 2931.16 588.726 2972.58 690.214 C 2973.29 689.076 2974.05 687.916 2974.84 686.732 C 3004.06 643.33 3081.61 577.346 3211.66 522.314 C 3286.84 490.502 3372.09 465.438 3465.04 447.817 C 3574.32 427.103 3694.98 416.6 3823.66 416.6 C 3952.34 416.6 4073 427.103 4182.28 447.817 C 4275.23 465.438 4360.48 490.502 4435.66 522.314 C 4565.71 577.346 4643.26 643.33 4672.48 686.732 C 4673.27 687.916 4674.03 689.076 4674.75 690.214 C 4716.16 588.726 4808.55 363.979 4809.57 361.51 Z M 3102.89 574.809 C 3080.34 588.29 3062.02 602.016 3047.2 615.047 C 3077.87 591.674 3116.95 567.13 3164.73 543.705 C 3142.65 553.012 3122.02 563.381 3102.89 574.809 Z M 3103.06 600.755 C 3056.7 629.937 3028.08 655.94 3012.22 672.614 C 2988.06 698.029 2983.02 712.498 2982.87 715.555 C 2982.88 715.576 2982.88 715.598 2982.89 715.619 C 2982.9 715.638 2982.9 715.657 2982.91 715.676 C 2986.39 726.827 2992.3 733.877 3000.99 737.228 C 3005.54 738.982 3010.77 739.797 3016.58 739.797 C 3058.41 739.803 3130.22 697.49 3194.51 659.614 C 3267.07 616.869 3330.3 579.622 3367.24 587.493 C 3359.96 560.389 3349.63 522.451 3342.27 497.466 C 3315 505.377 3288.58 514.04 3263.05 523.48 C 3203.16 545.626 3149.33 571.625 3103.06 600.755 Z M 4290.79 586.434 C 4328.6 586.434 4386.85 620.755 4452.81 659.614 C 4526.02 702.745 4608.99 751.625 4646.33 737.228 C 4655.02 733.877 4660.93 726.827 4664.41 715.676 C 4664.42 715.657 4664.42 715.638 4664.43 715.619 C 4664.44 715.598 4664.44 715.576 4664.45 715.555 C 4664.3 712.498 4659.26 698.029 4635.1 672.614 C 4619.25 655.94 4590.62 629.937 4544.26 600.755 C 4497.99 571.625 4444.16 545.626 4384.27 523.48 C 4358.74 514.04 4332.32 505.377 4305.06 497.466 C 4297.69 522.451 4287.36 560.389 4280.08 587.493 C 4283.44 586.777 4287.01 586.434 4290.79 586.434 Z M 2626.64 456.516 C 2634.28 465.818 2657.12 485.351 2702.38 510.555 C 2755.17 539.95 2812.41 562.219 2859.41 571.651 C 2864.72 572.717 2868.21 577.813 2867.3 583.148 C 2863.11 607.552 2844.32 649.778 2778.58 712.357 C 2738.92 750.121 2686.98 790.164 2638.37 820.569 C 2651.3 822.278 2678.92 823.594 2736.56 819.697 C 2801.43 815.312 2880.04 805.925 2957.9 793.265 C 3157.26 760.85 3302.51 716.123 3356.41 670.551 C 3386.23 645.342 3378.84 627.451 3376.41 621.572 C 3376.4 621.544 3376.39 621.515 3376.38 621.487 C 3376.34 621.392 3376.31 621.294 3376.28 621.197 C 3376.2 620.994 3376.13 620.789 3376.07 620.581 C 3376.06 620.533 3376.04 620.488 3376.02 620.44 C 3373.63 611.864 3369.31 609.241 3366.27 608.013 C 3339.69 597.297 3267.95 639.558 3204.66 676.846 C 3165.5 699.922 3124.99 723.783 3088.93 739.855 C 3058.99 753.202 3035.28 759.752 3016.35 759.753 C 3007.93 759.753 3000.46 758.457 2993.79 755.888 C 2979.37 750.324 2969.33 738.946 2963.96 722.07 C 2941.39 666.547 2884.94 529.01 2849.59 442.934 C 2818.75 448.736 2706.11 468.17 2633.84 457.266 C 2630.81 456.809 2628.46 456.594 2626.64 456.516 Z M 3012.22 672.614 C 2988.06 698.029 2983.02 712.498 2982.87 715.555 C 2982.88 715.576 2982.88 715.598 2982.89 715.619 C 2982.9 715.638 2982.9 715.657 2982.91 715.676 C 2986.39 726.827 2992.3 733.877 3000.99 737.228 C 3005.54 738.982 3010.77 739.797 3016.58 739.797 C 3058.41 739.803 3130.22 697.49 3194.51 659.614 C 3267.07 616.869 3330.3 579.622 3367.24 587.493 C 3364.01 575.446 3360.17 561.259 3356.26 547.019 C 3248.71 562.641 3159.19 587.676 3090.08 621.476 C 3056.68 637.809 3033.57 653.631 3017.79 666.917 C 3015.78 668.919 3013.93 670.821 3012.22 672.614 Z M 4653.53 755.888 C 4646.87 758.457 4639.39 759.753 4630.97 759.753 C 4612.04 759.753 4588.34 753.203 4558.39 739.855 C 4522.33 723.783 4481.83 699.922 4442.66 676.846 C 4379.37 639.558 4307.62 597.298 4281.05 608.013 C 4278.01 609.241 4273.69 611.864 4271.3 620.44 C 4271.28 620.488 4271.26 620.533 4271.25 620.581 C 4271.19 620.789 4271.12 620.994 4271.04 621.198 C 4271.01 621.294 4270.98 621.392 4270.94 621.487 C 4270.93 621.515 4270.92 621.544 4270.91 621.572 C 4268.48 627.451 4261.09 645.342 4290.91 670.551 C 4344.81 716.123 4490.06 760.85 4689.42 793.265 C 4767.28 805.925 4845.89 815.312 4910.76 819.697 C 4968.39 823.593 4996.02 822.277 5008.95 820.569 C 4960.34 790.165 4908.4 750.121 4868.74 712.357 C 4832.46 677.816 4787.61 627.362 4780.02 583.148 C 4779.11 577.813 4782.6 572.717 4787.91 571.651 C 4834.91 562.219 4892.15 539.95 4944.94 510.555 C 4990.2 485.351 5013.04 465.818 5020.68 456.516 C 5018.86 456.594 5016.51 456.809 5013.48 457.266 C 4998.13 459.582 4980.95 460.529 4963.13 460.53 C 4897.04 460.531 4822.02 447.504 4797.73 442.934 C 4795.26 448.956 4792.66 455.276 4789.97 461.829 C 4754.59 547.977 4704.33 670.477 4683.36 722.083 C 4677.98 738.951 4667.95 750.326 4653.53 755.888 Z " fill="rgb(255,255,255)"/></svg>
</div>
</div>
<button id="brand-shape-loadmore" type="button" class="brand-btn primary brand-lg-btn btn-full">Load more</button>
</div>
<div id="brand-shape-setting" class="brand-tab">
<div id="brand-shape-settings-info" class="notice notice-info">
<h6> No shape is selected </h6>
Select a shape to adjust the settings.
</div>
<div id="brand-shape-settings">
<div class="brand-text-wrap " style="display: flex;flex-wrap: wrap;width: 100%; align-items: flex-start;">
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Fill Style
</label>
<div class="brand-control">
<select id="brand-shape-gradient" class="brand-select tinyform"
autocomplete="off">
<option value="none" selected>
Solid Color
</option>
<option value="vertical">
Vertical Gradient
</option>
<option value="horizontal">
Horizontal Gradient
</option>
<option value="diagonal">
Diagonal Gradient
</option>
</select>
</div>
</div>
<div id="shape-gradient-settings">
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Color 1
</label>
<div class="brand-control">
<input id="shape-gradient-color-1" type="text"
class="brand-colorpicker disallow-empty " autocomplete="off" value="#9C27B0" />
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Color 2
</label>
<div class="brand-control">
<input id="shape-gradient-color-2" type="text"
class="brand-colorpicker disallow-empty " autocomplete="off" value="#000000" />
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Color 3
</label>
<div class="brand-control">
<input id="shape-gradient-color-3" type="text"
class="brand-colorpicker allow-empty " autocomplete="off" value="" />
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Color 4
</label>
<div class="brand-control">
<input id="shape-gradient-color-4" type="text"
class="brand-colorpicker allow-empty " autocomplete="off" value="" />
</div>
</div>
</div>
<div id="shape-fill-color" class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Fill Color
</label>
<div class="brand-control">
<input id="brand-shape-color" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="#fff" />
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Outline Size
</label>
<div class="brand-control">
<input id="shape-outline-width" class="brand-form-field tinyform"
type="number" value="0"
data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Outline Color
</label>
<div class="brand-control">
<input id="shape-outline-color" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="#000000" />
</div>
</div>
<div id="brand-shape-rounded-corners">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">
Rounded Corners<span>0</span>
</label>
<div class="brand-control">
<input id="shape-rounded-corners" type="range" min="0" max="100" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Shadow
</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-shape-shadow" class="brand-toggle-checkbox"
data-conditional="#shape-shadow-settings" type="checkbox" autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="shape-shadow-settings" class="d-none conditional-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Shadow Color
</label>
<div class="brand-control">
<input id="shape-shadow-color" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off" value="#000" />
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Shadow Blur
</label>
<div class="brand-control">
<input id="shape-shadow-blur" class="brand-form-field tinyform"
type="number" value="5"
step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Offset X
</label>
<div class="brand-control">
<input id="shape-shadow-offset-x" class="brand-form-field tinyform"
type="number" value="5"
step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Offset Y
</label>
<div class="brand-control">
<input id="shape-shadow-offset-y" class="brand-form-field tinyform"
type="number" value="5"
step="1" autocomplete="off">
</div>
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<!--<div class="brand-control-wrap-
half label-block">
<div class="brand-control">
<div class="brand-btn-group icon-group">
<button type="button"
class="brand-horizontal-center brand-btn tooltip tooltip-top"
data-title="Horizontal Align Center"><span
class="material-icons">align_horizontal_center</span></button>
<button type="button"
class="brand-vertical-center brand-btn tooltip tooltip-top"
data-title="Vertical Align Center"><span
class="material-icons">vertical_align_center</span></button>
</div>
</div>
</div>-->
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">
Opacity<span>1</span>
</label>
<div class="brand-control">
<input id="shape-opacity" type="range" min="0" max="1" value="1" step="0.1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">
Skew X<span>0</span>
</label>
<div class="brand-control">
<input id="shape-skew-x" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">
Skew Y<span>0</span>
</label>
<div class="brand-control">
<input id="shape-skew-y" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">
Rotate<span>0</span>
</label>
<div class="brand-control">
<input id="shape-rotate" type="range" min="0" max="360" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div id="shape-custom-width-wrap">
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Custom Width
</label>
<div class="brand-control">
<input id="shape-custom-width" class="brand-form-field tinyform"
type="number" value=""
data-min="0" data-max="10000" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Custom Height
</label>
<div class="brand-control">
<input id="shape-custom-height" class="brand-form-field tinyform"
type="number" value=""
data-min="0" data-max="10000" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">
Aspect Ratio
</label>
<div class="brand-control">
<div class="brand-aspect-ratio">
<input id="brand-shape-ratio-w" class="brand-form-field tinyform"
type="number"
value="12" autocomplete="off">
<span class="material-icons">clear</span>
<input id="brand-shape-ratio-h" class="brand-form-field tinyform"
type="number"
value="16" autocomplete="off">
<button id="brand-shape-ratio-lock" type="button"
class="brand-btn brand-lock-unlock"><span
class="material-icons">lock_open</span></button>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
</div>
<!-- Shapes END -->
<!-- Elements START -->
<!-- Elements START -->
<script>
$(document).ready(function() {
let isResizingElements = false;
let initialHeightElements;
let initialYElements;
function startResizingElements(event) {
isResizingElements = true;
const $button = $(this);
const $div = $('#brand-elements');
initialHeightElements = $div.height(); // Store the initial height
initialYElements = event.clientY; // Store the initial Y position
/* $button.text("...");*/ // Change button text while resizing
event.preventDefault(); // Prevent default behavior
}
function resizeDivElements(event) {
if (isResizingElements) {
const $div = $('#brand-elements');
const newHeight = initialHeightElements - (event.clientY - initialYElements); // Calculate new height
if (newHeight > 50) { // Minimum height limit
$div.height(newHeight); // Set new height
}
}
}
function stopResizingElements() {
isResizingElements = false;
/* $('#btn-resize-image').text("Resize");*/ // Reset button text
}
// Mouse events
$('#btn-resize-elements').on('mousedown', startResizingElements);
$(document).on('mousemove', resizeDivElements);
$(document).on('mouseup', stopResizingElements);
// Touch events for mobile
$('#btn-resize-elements').on('touchstart', startResizingElements);
$(document).on('touchmove', resizeDivElements);
$(document).on('touchend', stopResizingElements);
});
</script>
<div id="brand-elements" class="brand-icon-panel-content panel-hide">
<div class="brand-tabs">
<!-- Elements Menu -->
<ul class="brand-tabs-menu">
<li id="brand-all-elements-open" class="active" data-target="#brand-all-elements">Elements</li>
<li id="brand-custom-svg-open" data-target="#brand-customsvg-upload">Icons </li>
<li id="brand-custom-element-open" data-target="#brand-custom-element">Edit</li>
</ul>
<!-- All Elements -->
<div id="brand-all-elements" class="brand-tab active">
<div class="brand-search-wrap" style="display: none">
<input id="brand-element-search" type="search" class="brand-form-field tinyform"
placeholder="Search Category..." autocomplete="off" />
<span id="brand-element-search-icon" class="material-icons">search</span>
</div>
<div id="brand-elements-wrap" class="brand-accordion">
<div class="brand-sub-settings" style="display: block;">
<ul class="brand-grid menu-grid thebrand-layout-text-grid">
<li class="brand-layout-text light" id="pop-shapes-card">
<span class="material-icons">circle</span>
<label for="style1">Shapes</label>
</li>
<li class="brand-layout-text light" id="pop-frames-card">
<span class="material-icons">image</span>
<label for="style1">Frames</label>
</li>
<li class="brand-layout-text light" id="pop-icons-card">
<span class="material-icons">photo_library</span>
<label for="style1">Icons</label>
</li>
</ul>
</div>
<div class="brand-elements-menu-item" id="brand-elements-menu-shapes-card" style="display:none; margin-bottom:10px;cursor:pointer">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/elements/Geometric%20Shapes.png" />
</div>
<div class="brand-apps-menu-item-desc">Shapes</div>
</div>
<div class="brand-elements-menu-item" id="brand-elements-menu-frames-card" style="display:none;margin-bottom:10px;cursor:pointer">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="http://localhost/thebrand/brandwow/files/frames/grunge/1.jpg" />
</div>
<div class="brand-apps-menu-item-desc">Frames</div>
</div>
<div class="brand-elements-menu-item" id="brand-elements-menu-icons-card" style="display:none;margin-bottom:10px;cursor:pointer">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/elements/clouds.png" />
</div>
<div class="brand-apps-menu-item-desc">Icons</div>
</div>
<script>
(function(){
if (typeof window !== 'undefined' && window.jQuery) {
jQuery(function($){
$('#brand-elements-menu-shapes-card').on('click', function(){
$('#Card-Shapes button').trigger('click');
});
$('#brand-elements-menu-frames-card').on('click', function(){
$('.brand-frames-edit').trigger('click');
});
$('#brand-elements-menu-icons-card').on('click', function(){
$('#brand-icons-edit').trigger('click');
});
$('#pop-icons-card').on('click', function(){
$('#brand-custom-svg-open').trigger('click');
});
});
}
})();
</script>
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Elements</a>
<div id="brand-elements-menu" >
<div id="brand-elements-menu-ink-brush-strokes" class="brand-elements-menu-item" data-id="#brand-ink-brush-strokes-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/ink brush strokes.png">
</div>
<div class="brand-apps-menu-item-desc">Ink Brush Strokes</div>
</div>
<div id="brand-elements-menu-abstract-shapes" class="brand-elements-menu-item" data-id="#brand-abstract-shapes-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/Abstract Shapes.png">
</div>
<div class="brand-apps-menu-item-desc">Abstract Shapes</div>
</div>
<div id="brand-elements-menu-geometric-shapes" class="brand-elements-menu-item" data-id="#brand-geometric-shapes-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/Geometric Shapes.png">
</div>
<div class="brand-apps-menu-item-desc">Geometric Shapes</div>
</div>
<div id="brand-elements-menu-moon-shapes" class="brand-elements-menu-item" data-id="#brand-moon-shapes-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/Moon Shapes.png">
</div>
<div class="brand-apps-menu-item-desc">Moon Shapes</div>
</div>
<div id="brand-elements-menu-thunderbolts" class="brand-elements-menu-item" data-id="#brand-thunderbolts-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/Thunderbolts.png">
</div>
<div class="brand-apps-menu-item-desc">Thunderbolts</div>
</div>
<div id="brand-elements-menu-hand-drawn-dividers" class="brand-elements-menu-item" data-id="#brand-hand-drawn-dividers-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/Hand Drawn Dividers.png">
</div>
<div class="brand-apps-menu-item-desc">Hand Drawn Dividers</div>
</div>
<div id="brand-elements-menu-arrows" class="brand-elements-menu-item" data-id="#brand-arrows-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/19.svg">
</div>
<div class="brand-apps-menu-item-desc">Arrows</div>
</div>
<div id="brand-elements-menu-speech-bubbles" class="brand-elements-menu-item" data-id="#brand-speech-bubbles-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/removebg.png">
</div>
<div class="brand-apps-menu-item-desc">Speech Bubbles</div>
</div>
<div id="brand-elements-menu-clouds" class="brand-elements-menu-item" data-id="#brand-clouds-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/elements/clouds.png">
</div>
<div class="brand-apps-menu-item-desc">Clouds</div>
</div>
<div id="brand-elements-menu-social-media" class="brand-elements-menu-item" data-id="#brand-social-media-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/Social media.png">
</div>
<div class="brand-apps-menu-item-desc">Social Media</div>
</div>
<div id="brand-elements-menu-payment" class="brand-elements-menu-item" data-id="#brand-payment-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/Payment.png">
</div>
<div class="brand-apps-menu-item-desc">Payment</div>
</div>
<div id="brand-elements-menu-crypto" class="brand-elements-menu-item" data-id="#brand-crypto-element">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="
https://www.thebrand.ai/wowX/assets/elements/Crypto Currency.png">
</div>
<div class="brand-apps-menu-item-desc">Crypto Currency</div>
</div>
<div id="brand-icons-1" class="brand-elements-menu-item" data-id="#brand-icons-1">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/elements/icons.png">
</div>
<div class="brand-apps-menu-item-desc">Icons</div>
</div>
</div>
<ul class="brand-accordion" ><li>
<a><span class="material-icons my-favorites-star">star</span>My Favorites<span
id="elements-favorites-count" class="data-count">0</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-favorites"
class="brand-grid brand-elements-grid four-column">
<div class="notice notice-info">
<h6>No favorites yet</h6>Click the star icon on any element, and you will
see it here next time you visit.
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="brand-elements-content" class="">
<!-- App START -->
<div id="brand-ink-brush-strokes-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Ink Brush Strokes <span class="data-count">21</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-ink-brush-strokes"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/1.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/2.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/3.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/4.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/5.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/6.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/7.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/8.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/9.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/10.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/11.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/12.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/13.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/14.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/15.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/16.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/17.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/18.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/19.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/20.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/21.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/ink-brush-strokes/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<div id="brand-abstract-shapes-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-abstract-shapes-settings">
<div class="brand-title2">Abstract Shapes <span class="data-count">52</span></div>
<div>
<div id="brand-elements-grid-abstract-shapes"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/1.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/2.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/3.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/4.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/5.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/6.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/7.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/8.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/9.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/10.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/11.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/12.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/13.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/14.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/15.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/16.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/17.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/18.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/19.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/20.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/21.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/22.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/22.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/22"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/23.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/23.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/23"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/24.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/24.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/24"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/25.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/25.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/25"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/26.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/26.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/26"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/27.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/27.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/27"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/28.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/28.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/28"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/29.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/29.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/29"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/30.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/30.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/30"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/31.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/31.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/31"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/32.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/32.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/32"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/33.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/33.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/33"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/34.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/34.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/34"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/35.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/35.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/35"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/36.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/36.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/36"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/37.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/37.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/37"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/38.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/38.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/38"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/39.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/39.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/39"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/40.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/40.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/40"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/41.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/41.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/41"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/42.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/42.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/42"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/43.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/43.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/43"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/44.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/44.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/44"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/45.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/45.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/45"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/46.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/46.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/46"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/47.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/47.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/47"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/48.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/48.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/48"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/49.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/49.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/49"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/50.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/50.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/50"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/51.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/51.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/51"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/52.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/52.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/abstract-shapes/52"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<!-- App START -->
<div id="brand-geometric-shapes-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Geometric Shapes <span class="data-count">21</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-geometric-shapes"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/1.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/2.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/3.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/4.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/5.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/6.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/7.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/8.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/9.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/10.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/11.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/12.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/13.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/14.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/15.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/16.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/17.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/18.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/19.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/20.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/21.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/geometric-shapes/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<!-- App START -->
<div id="brand-moon-shapes-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Moon Shapes <span class="data-count">15</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-moon-shapes"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/1.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/1.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/1"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/2.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/2.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/2"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/3.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/3.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/3"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/4.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/4.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/4"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/5.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/5.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/5"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/6.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/6.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/6"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/7.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/7.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/7"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/8.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/8.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/8"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/9.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/9.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/9"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/10.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/10.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/10"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/11.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/11.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/11"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/12.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/12.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/12"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/13.svg"
data-loader="no" style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/13.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/13"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/14.svg"
data-loader="no" style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/14.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/14"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/moon-shapes/15.svg"
data-loader="no" style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/moon-shapes/15.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/moon-shapes/15"><span
class="material-icons">star_border</span></button></div>
</div>
</div>
</div>
</div>
<!-- -->
<!-- App START -->
<div id="brand-thunderbolts-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Thunderbolts <span class="data-count">22</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-thunderbolts"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/1.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/1.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/1"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/2.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/2.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/2"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/3.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/3.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/3"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/4.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/4.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/4"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/5.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/5.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/5"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/6.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/6.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/6"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/7.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/7.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/7"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/8.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/8.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/8"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/9.svg"
data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/9.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/9"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/10.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/10.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/10"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/11.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/11.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/11"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/12.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/12.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/12"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/13.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/13.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/13"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/14.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/14.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/14"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/15.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/15.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/15"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/16.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/16.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/16"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/17.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/17.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/17"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/18.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/18.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/18"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/19.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/19.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/19"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/20.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/20.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/20"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/21.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/21.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/21"><span
class="material-icons">star_border</span></button></div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/thunderbolts/22.svg" data-loader="no"
style="display: none;"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/thunderbolts/22.svg">
<div class="element-favorite"><button type="button"
class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/thunderbolts/22"><span
class="material-icons">star_border</span></button></div>
</div>
</div>
</div> </div>
<!-- -->
<!-- App START -->
<div id="brand-hand-drawn-dividers-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Hand Drawn Dividers<span
class="data-count">30</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-hand-drawn-dividers"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/1.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/2.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/3.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/4.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/5.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/6.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/7.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/8.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/9.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/10.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/11.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/12.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/13.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/14.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/15.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/16.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/17.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/18.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/19.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/20.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/21.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/22.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/22.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/22"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/23.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/23.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/23"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/24.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/24.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/24"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/25.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/25.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/25"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/26.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/26.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/26"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/27.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/27.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/27"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/28.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/28.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/28"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/29.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/29.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/29"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/30.svg" data-loader="no">
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/30.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/hand-drawn-dividers/30"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div> </div>
<!-- -->
<!-- App START -->
<div id="brand-arrows-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Arrows <span class="data-count">31</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-arrows"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/1.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/2.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/3.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/4.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/5.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/6.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/7.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/8.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/9.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/10.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/11.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/12.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/13.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/14.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/15.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/16.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/17.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/18.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/19.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/20.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/21.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/22.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/22.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/22"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/23.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/23.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/23"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/24.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/24.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/24"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/25.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/25.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/25"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/26.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/26.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/26"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/27.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/27.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/27"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/28.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/28.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/28"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/29.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/29.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/29"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/30.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/30.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/30"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/arrows/31.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/arrows/31.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/arrows/31"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div> </div>
<!-- -->
<!-- App START -->
<div id="brand-speech-bubbles-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Speech Bubbles <span class="data-count">41</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-speech-bubbles"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/1.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/2.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/3.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/4.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/5.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/6.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/7.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/8.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/9.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/10.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/11.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/12.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/13.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/14.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/15.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/16.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/17.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/18.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/19.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/20.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/21.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/22.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/22.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/22"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/23.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/23.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/23"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/24.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/24.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/24"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/25.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/25.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/25"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/26.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/26.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/26"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/27.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/27.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/27"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/28.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/28.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/28"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/29.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/29.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/29"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/30.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/30.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/30"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/31.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/31.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/31"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/32.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/32.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/32"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/33.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/33.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/33"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/34.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/34.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/34"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/35.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/35.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/35"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/36.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/36.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/36"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/37.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/37.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/37"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/38.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/38.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/38"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/39.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/39.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/39"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/40.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/40.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/40"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark"
data-elsource="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/41.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/41.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/speech-bubbles/41"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<!-- --> <!-- App START -->
<div id="brand-clouds-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Clouds <span class="data-count">41</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-clouds"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/1.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/2.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/3.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/4.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/5.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/6.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/7.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/8.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/9.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/10.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/11.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/12.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/13.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/14.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/15.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/16.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/17.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/18.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/19.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/20.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/21.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/22.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/22.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/22"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/23.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/23.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/23"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/24.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/24.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/24"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/25.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/25.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/25"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/26.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/26.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/26"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/27.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/27.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/27"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/28.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/28.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/28"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/29.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/29.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/29"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/30.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/30.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/30"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/31.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/31.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/31"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/32.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/32.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/32"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/33.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/33.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/33"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/34.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/34.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/34"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/35.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/35.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/35"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/36.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/36.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/36"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/37.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/37.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/37"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/38.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/38.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/38"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/39.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/39.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/39"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/40.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/40.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/40"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element dark" data-elsource="https://www.thebrand.ai/wowX/files/elements/clouds/41.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/clouds/41.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/clouds/41"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div> </div>
<!-- -->
<!-- App START -->
<div id="brand-social-media-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Social Media <span class="data-count">55</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-social-media"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/1.svg"
data-loader="no"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/social-media/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/2.svg"
data-loader="no"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/social-media/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/3.svg"
data-loader="no"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/social-media/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/4.svg"
data-loader="no"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/social-media/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/5.svg"
data-loader="no"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/social-media/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/6.svg"
data-loader="no"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/social-media/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/7.svg"
data-loader="no"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/social-media/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/8.svg"
data-loader="no"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/social-media/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/9.svg"
data-loader="no"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/files/elements/social-media/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/10.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/11.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/12.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/13.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/14.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/15.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/16.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/17.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/18.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/19.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/20.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/21.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/22.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/22.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/22"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/23.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/23.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/23"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/24.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/24.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/24"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/25.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/25.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/25"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/26.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/26.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/26"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/27.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/27.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/27"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/28.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/28.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/28"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/29.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/29.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/29"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/30.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/30.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/30"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/31.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/31.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/31"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/32.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/32.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/32"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/33.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/33.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/33"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/34.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/34.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/34"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/35.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/35.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/35"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/36.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/36.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/36"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/37.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/37.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/37"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/38.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/38.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/38"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/39.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/39.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/39"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/40.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/40.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/40"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/41.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/41.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/41"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/42.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/42.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/42"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/43.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/43.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/43"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/44.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/44.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/44"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/45.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/45.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/45"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/46.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/46.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/46"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/47.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/47.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/47"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/48.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/48.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/48"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/49.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/49.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/49"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/50.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/50.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/50"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/51.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/51.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/51"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/52.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/52.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/52"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/53.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/53.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/53"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/54.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/54.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/54"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light"
data-elsource="https://www.thebrand.ai/wowX/files/elements/social-media/55.svg" data-loader="no"><img
class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/social-media/55.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/social-media/55"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div> </div>
<div id="brand-crypto-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Crypto Currency <span class="data-count">56</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-crypto"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/1.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/2.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/3.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/4.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/5.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/6.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/7.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/8.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/9.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/10.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/11.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/12.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/13.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/14.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/15.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/16.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/17.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/18.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/19.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/20.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/21.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/22.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/22.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/22"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/23.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/23.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/23"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/24.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/24.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/24"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/25.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/25.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/25"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/26.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/26.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/26"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/27.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/27.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/27"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/28.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/28.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/28"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/29.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/29.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/29"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/30.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/30.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/30"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/31.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/31.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/31"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/32.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/32.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/32"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/33.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/33.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/33"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/34.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/34.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/34"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/35.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/35.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/35"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/36.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/36.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/36"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/37.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/37.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/37"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/38.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/38.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/38"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/39.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/39.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/39"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/40.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/40.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/40"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/41.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/41.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/41"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/42.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/42.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/42"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/43.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/43.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/43"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/44.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/44.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/44"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/45.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/45.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/45"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/46.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/46.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/46"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/47.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/47.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/47"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/48.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/48.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/48"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/49.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/49.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/49"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/50.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/50.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/50"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/51.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/51.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/51"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/52.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/52.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/52"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/53.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/53.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/53"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/54.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/54.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/54"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/55.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/55.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/55"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/crypto/56.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/crypto/56.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/crypto/56"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<!-- App START -->
<div id="brand-payment-element" class="d-none">
<div class="brand-close-element brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<a class="brand-title2">Payment <span class="data-count">80</span><span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-elements-grid-payment"
class="brand-grid brand-elements-grid four-column paginated" data-perpage="12">
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/1.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/1.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/1"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/2.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/2.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/2"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/3.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/3.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/3"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/4.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/4.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/4"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/5.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/5.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/5"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/6.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/6.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/6"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/7.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/7.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/7"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/8.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/8.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/8"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/9.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/9.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/9"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/10.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/10.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/10"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/11.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/11.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/11"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/12.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/12.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/12"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/13.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/13.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/13"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/14.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/14.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/14"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/15.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/15.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/15"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/16.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/16.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/16"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/17.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/17.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/17"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/18.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/18.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/18"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/19.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/19.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/19"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/20.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/20.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/20"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/21.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/21.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/21"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/22.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/22.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/22"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/23.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/23.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/23"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/24.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/24.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/24"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/25.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/25.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/25"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/26.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/26.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/26"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/27.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/27.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/27"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/28.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/28.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/28"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/29.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/29.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/29"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/30.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/30.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/30"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/31.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/31.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/31"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/32.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/32.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/32"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/33.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/33.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/33"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/34.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/34.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/34"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/35.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/35.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/35"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/36.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/36.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/36"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/37.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/37.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/37"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/38.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/38.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/38"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/39.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/39.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/39"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/40.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/40.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/40"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/41.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/41.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/41"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/42.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/42.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/42"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/43.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/43.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/43"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/44.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/44.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/44"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/45.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/45.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/45"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/46.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/46.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/46"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/47.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/47.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/47"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/48.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/48.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/48"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/49.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/49.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/49"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/50.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/50.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/50"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/51.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/51.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/51"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/52.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/52.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/52"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/53.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/53.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/53"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/54.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/54.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/54"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/55.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/55.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/55"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/56.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/56.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/56"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/57.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/57.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/57"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/58.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/58.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/58"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/59.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/59.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/59"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/60.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/60.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/60"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/61.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/61.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/61"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/62.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/62.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/62"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/63.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/63.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/63"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/64.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/64.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/64"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/65.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/65.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/65"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/66.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/66.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/66"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/67.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/67.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/67"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/68.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/68.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/68"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/69.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/69.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/69"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/70.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/70.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/70"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/71.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/71.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/71"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/72.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/72.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/72"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/73.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/73.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/73"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/74.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/74.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/74"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/75.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/75.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/75"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/76.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/76.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/76"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/77.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/77.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/77"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/78.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/78.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/78"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/79.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/79.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/79"><span
class="material-icons">star_border</span></button>
</div>
</div>
<div class="brand-element light" data-elsource="https://www.thebrand.ai/wowX/files/elements/payment/80.svg"
data-loader="no"><img class="lazy" data-src="https://www.thebrand.ai/wowX/files/elements/payment/80.svg" />
<div class="element-favorite">
<button type="button" class="brand-btn-simple star "
data-elementid="https://www.thebrand.ai/wowX/files/elements/payment/80"><span
class="material-icons">star_border</span></button>
</div>
</div>
</div>
</div
</div>
<!-- -->
</div>
</div>
</div>
<!-- Custom SVG -->
<div id="brand-customsvg-upload" class="brand-tab">
<script type="application/javascript">
(function(){
if (typeof window.triggerLoadDataIcons === 'function' && typeof window.load_data_svgs === 'function') return;
window.triggerLoadDataIcons = function() {
var input = document.getElementById('searchIconsWow');
var searchValue = input ? input.value : '';
window.load_data_svgs(searchValue, 1);
};
window.load_data_svgs = function(query, page_number) {
if (query === undefined) query = '';
if (page_number === undefined) page_number = 1;
if (query === '' && page_number === 1) {
if (window.svgsWowLoadedInternal) return;
window.svgsWowLoadedInternal = true;
}
var form_data = new FormData();
form_data.append('query2', query);
form_data.append('page', page_number);
var ajax_request = new XMLHttpRequest();
var searchButton = document.getElementById('brand-svg-library-all-search-wow');
var searchButtonIconHtml = '<span class="material-icons">search</span>';
if (searchButton) {
searchButton.disabled = true;
searchButton.setAttribute('aria-busy', 'true');
searchButton.innerHTML = searchButtonIconHtml;
}
ajax_request.open('POST', 'https://www.thebrand.ai/wowX/files/connect/svgswow');
ajax_request.send(form_data);
ajax_request.onreadystatechange = function() {
if (ajax_request.readyState === 4) {
if (searchButton) {
searchButton.disabled = false;
searchButton.removeAttribute('aria-busy');
searchButton.innerHTML = searchButtonIconHtml;
}
}
if (ajax_request.readyState === 4 && ajax_request.status === 200) {
var response = JSON.parse(ajax_request.responseText);
var html = '';
if (response.data && response.data.length > 0) {
for (var count = 0; count < response.data.length; count++) {
html += '<div class="brand-elements-menu-item" data-keyword="'+response.data[count].post_title+'">';
html += '<div class="brand-img-wrap">';
html += '<img class="lazy" data-src="'+response.data[count].post_id+'" src="'+response.data[count].post_id+'"';
html += ' data-full="'+response.data[count].post_id+'"';
html += ' data-filename="abstract-shape" title="'+response.data[count].post_title+'" />';
html += '</div>';
html += '<div class="brand-apps-menu-item-desc">'+response.data[count].post_title+'</div>';
html += '</div>';
}
} else {
html += '<span>No Data Found</span>';
}
var grid = document.getElementById('brand-svg-library-all');
if (grid) grid.innerHTML = html;
var pagination = document.getElementById('pagination_link_icon');
if (pagination) pagination.innerHTML = response.pagination || '';
}
};
};
if (typeof window.jQuery !== 'undefined') {
jQuery(function(){
setTimeout(function() {
if (typeof window.svgsWowLoaded === 'undefined') {
window.svgsWowLoaded = true;
window.load_data_svgs('', 1);
}
}, 15000);
});
} else {
setTimeout(function() {
if (typeof window.svgsWowLoaded === 'undefined') {
window.svgsWowLoaded = true;
window.load_data_svgs('', 1);
}
}, 15000);
}
})();
</script>
<div id="brand-svg-library-all-menu" style="margin-top: 20px;">
<div class="brand-search-box">
<input type="search" class="brand-form-field tinyform" placeholder="Search by title..." autocomplete="off" id="searchIconsWow"/>
<button id="brand-svg-library-all-search-wow" onclick="triggerLoadDataIcons()" type="button" class="brand-btn brand-minimal-btn" aria-label="Search"><span class="material-icons">search</span></button>
</div>
</div>
<div id="brand-svg-library-all" data-perpage="18"></div>
<div id="pagination_link_icon" class="brand-pagination light-theme simple-pagination" style="margin-bottom: 10px; margin-top: 10px">Loading icons...</div>
<div id="brand-svg-library-all-noimg" class="notice notice-warning d-none"><strong>Nothing found.</strong></div>
</div>
<!-- Custom Element Settings -->
<div id="brand-custom-element" class="brand-tab">
<div id="brand-custom-element-options-info" class="notice notice-info">
<h6>No element is selected</h6> Select an element to adjust the settings.
</div>
<!-- Custom SVG Options -->
<div id="brand-custom-svg-options">
<div id="customsvg-colors" class="brand-text-wrap " style="display: flex;flex-wrap: wrap;width: 100%; align-items: flex-start;"></div>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-control-wrap-half label-block">
<div class="brand-control">
<div class="brand-btn-group icon-group">
<button id="customsvg-flip-horizontal" type="button"
class="brand-btn tooltip tooltip-top" data-title="Flip X"><span
class="material-icons">flip</span></button>
<button id="customsvg-flip-vertical" type="button"
class="brand-btn tooltip tooltip-top" data-title="Flip Y"><span
class="material-icons">flip</span></button>
<button type="button"
class="brand-horizontal-center brand-btn tooltip tooltip-top"
data-title="H-Align Center"><span
class="material-icons">align_horizontal_center</span></button>
<button type="button"
class="brand-vertical-center brand-btn tooltip tooltip-top"
data-title="V-Align Center"><span
class="material-icons">vertical_align_center</span></button>
</div>
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Opacity<span>1</span></label>
<div class="brand-control">
<input id="customsvg-opacity" type="range" min="0" max="1" value="1" step="0.1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Skew X<span>0</span></label>
<div class="brand-control">
<input id="customsvg-skew-x" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Skew Y<span>0</span></label>
<div class="brand-control">
<input id="customsvg-skew-y" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Rotate<span>0</span></label>
<div class="brand-control">
<input id="customsvg-rotate" type="range" min="0" max="360" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
<div id="brand-custom-element-options" style="display: flex;flex-wrap: wrap;width: 100%; align-items: flex-start;">
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Fill Style</label>
<div class="brand-control">
<select id="brand-element-gradient" class="brand-select tinyform" autocomplete="off">
<option value="none" selected>Solid Color</option>
<option value="vertical">Vertical Gradient</option>
<option value="horizontal">Horizontal Gradient</option>
<option value="diagonal">Diagonal Gradient</option>
</select>
</div>
</div>
<div id="element-gradient-settings">
<div class="brand-control-wrap-half control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Color 1</label>
<div class="brand-control">
<input id="element-gradient-color-1" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off" value="#9C27B0" />
</div>
</div>
<div class="brand-control-wrap-half control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Color 2</label>
<div class="brand-control">
<input id="element-gradient-color-2" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off" value="#000000" />
</div>
</div>
<div class="brand-control-wrap-half control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Color 3</label>
<div class="brand-control">
<input id="element-gradient-color-3" type="text"
class="brand-colorpicker allow-empty tinyform" autocomplete="off" value="" />
</div>
</div>
<div class="brand-control-wrap-half control-text-color">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Color 4</label>
<div class="brand-control">
<input id="element-gradient-color-4" type="text"
class="brand-colorpicker allow-empty tinyform" autocomplete="off" value="" />
</div>
</div>
</div>
<div id="element-fill-color" class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Fill Color</label>
<div class="brand-control">
<input id="brand-element-color" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="" />
</div>
</div>
<div class="brand-control-wrap-half conditional">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Shadow</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-element-shadow" class="brand-toggle-checkbox tinyform"
data-conditional="#element-shadow-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="element-shadow-settings" class="d-none conditional-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Shadow Color</label>
<div class="brand-control">
<input id="element-shadow-color" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off" value="#000" />
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Shadow Blur</label>
<div class="brand-control">
<input id="element-shadow-blur" class="brand-form-field tinyform" type="number" value="5"
step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Offset X</label>
<div class="brand-control">
<input id="element-shadow-offset-x" class="brand-form-field tinyform" type="number"
value="5" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label" style="width:100%!important;margin-top:10px!important;">Offset Y</label>
<div class="brand-control">
<input id="element-shadow-offset-y" class="brand-form-field tinyform" type="number"
value="5" step="1" autocomplete="off">
</div>
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-control-wrap-half label-block" style="display:none">
<div class="brand-control">
<div class="brand-btn-group icon-group">
<button id="element-flip-horizontal" type="button"
class="brand-btn tooltip tooltip-top" data-title="Flip X"><span
class="material-icons">flip</span></button>
<button id="element-flip-vertical" type="button"
class="brand-btn tooltip tooltip-top" data-title="Flip Y"><span
class="material-icons">flip</span></button>
<button type="button"
class="brand-horizontal-center brand-btn tooltip tooltip-top"
data-title="H-Align Center"><span
class="material-icons">align_horizontal_center</span></button>
<button type="button"
class="brand-vertical-center brand-btn tooltip tooltip-top"
data-title="V-Align Center"><span
class="material-icons">vertical_align_center</span></button>
</div>
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Opacity<span>1</span></label>
<div class="brand-control">
<input id="element-opacity" type="range" min="0" max="1" value="1" step="0.1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Skew X<span>0</span></label>
<div class="brand-control">
<input id="element-skew-x" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Skew Y<span>0</span></label>
<div class="brand-control">
<input id="element-skew-y" type="range" min="0" max="180" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half label-block">
<label class="brand-control-label slider-label">Rotate<span>0</span></label>
<div class="brand-control">
<input id="element-rotate" type="range" min="0" max="360" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
</div>
<div id="brand-noelements" class="notice notice-warning">Nothing found.</div>
</div>
<!-- Elements END -->
</div>
<!-- Elements END -->
<!-- Icons START -->
<script>
$(document).ready(function() {
$('#btn-close-icons').on('click', function() {
$('#brand-toggle-left').trigger('click');
});
});
</script>
<div id="brand-icons" class="brand-icon-panel-content panel-hide"> <!-- All Icons -->
<div id="brand-all-icons" class="brand-tab active">
<div class="brand-control-wrap" style="margin:0px;">
<label class="brand-control-label">Icon Style</label>
<div class="brand-control">
<select id="brand-icon-style" class="brand-select tinyform" autocomplete="off">
<option selected value="materialicons">Filled</option>
<option value="materialiconsoutlined">Outlined</option>
<option value="materialiconsround">Round</option>
</select>
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-search-wrap">
<input id="brand-icon-search" type="search" class="brand-form-field tinyform"
placeholder="Enter a keyword..." autocomplete="off" />
<span id="brand-icon-search-icon" class="material-icons">search</span>
</div>
<div id="brand-icons-grid" class="brand-grid brand-elements-grid four-column">
</div>
<div id="brand-noicons" class="notice notice-warning">Nothing found.</div>
</div>
</div>
<!-- Icons END -->
<!-- Apps START -->
<script>
$(document).ready(function() {
let isResizingApps = false;
let initialHeightApps;
let initialYApps;
function startResizingApps(event) {
isResizingApps = true;
const $button = $(this);
const $div = $('#brand-apps');
initialHeightApps = $div.height(); // Store the initial height
initialYApps = event.clientY; // Store the initial Y position
/* $button.apps("...");*/ // Change button apps while resizing
event.preventDefault(); // Prevent default behavior
}
function resizeDivApps(event) {
if (isResizingApps) {
const $div = $('#brand-apps');
const newHeight = initialHeightApps - (event.clientY - initialYApps); // Calculate new height
if (newHeight > 50) { // Minimum height limit
$div.height(newHeight); // Set new height
}
}
}
function stopResizingApps() {
isResizingApps = false;
/* $('#btn-resize-image').apps("Resize");*/ // Reset button apps
}
// Mouse events
$('#btn-resize-apps').on('mousedown', startResizingApps);
$(document).on('mousemove', resizeDivApps);
$(document).on('mouseup', stopResizingApps);
// Touch events for mobile
$('#btn-resize-apps').on('touchstart', startResizingApps);
$(document).on('touchmove', resizeDivApps);
$(document).on('touchend', stopResizingApps);
});
</script>
<div id="brand-apps" class=" brand-icon-panel-content panel-hide">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Brand Apps</a>
<div id="brand-apps-menu">
<div id="brand-apps-menu-removebg" class="brand-apps-menu-item" data-id="#brand-removebg-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/removebg.png">
</div>
<div class="brand-apps-menu-item-desc">Background Remover</div>
</div>
<div id="brand-apps-menu-replacebg" class="brand-apps-menu-item" data-id="#brand-replacebg-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/replacebg.png">
</div>
<div class="brand-apps-menu-item-desc">Background Replacer</div>
</div>
<div id="brand-apps-menu-resizer" class="brand-apps-menu-item" data-id="#brand-resizer-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/resizer.png">
</div>
<div class="brand-apps-menu-item-desc">Image Upscaler</div>
</div>
<div id="brand-apps-menu-removetext" class="brand-apps-menu-item" data-id="#brand-removetext-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/removetext.png">
</div>
<div class="brand-apps-menu-item-desc">Remove Text</div>
</div>
<div id="brand-apps-menu-uncrop" class="brand-apps-menu-item" data-id="#brand-uncrop-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/uncrop.png">
</div>
<div class="brand-apps-menu-item-desc">Uncrop</div>
</div>
<div id="brand-apps-menu-reimagine" class="brand-apps-menu-item" data-id="#brand-reimagine-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/reimagine.png">
</div>
<div class="brand-apps-menu-item-desc">Reimagine</div>
</div>
<div id="brand-apps-menu-clean" class="brand-apps-menu-item" data-id="#brand-clean-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/clean.png">
</div>
<div class="brand-apps-menu-item-desc">Clean Image</div>
</div>
<div id="brand-apps-menu-drawing" class="brand-apps-menu-item" data-id="#brand-drawing-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/drawing.png">
</div>
<div class="brand-apps-menu-item-desc">Drawing</div>
</div>
<div id="brand-apps-menu-variation" class="brand-apps-menu-item" data-id="#brand-variation-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/variation.png">
</div>
<div class="brand-apps-menu-item-desc">Image Variations</div>
</div>
<div id="brand-apps-menu-imageedit" class="brand-apps-menu-item" data-id="#brand-imageedit-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/imageedit.png">
</div>
<div class="brand-apps-menu-item-desc">Image Edit</div>
</div>
<div id="brand-apps-menu-recreate" class="brand-apps-menu-item" data-id="#brand-recreate-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/regenerator.png">
</div>
<div class="brand-apps-menu-item-desc">Recreate Image</div>
</div>
<div id="brand-apps-menu-qrcode" class="brand-apps-menu-item" data-id="#brand-qrcode-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/qrcode.jpg">
</div>
<div class="brand-apps-menu-item-desc">QR Code</div>
</div>
<div id="brand-apps-menu-barcode" class="brand-apps-menu-item" data-id="#brand-barcode-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/barcode.jpg">
</div>
<div class="brand-apps-menu-item-desc">Barcode</div>
</div>
<div id="brand-apps-menu-trianglify" class="brand-apps-menu-item" data-id="#brand-trianglify-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/trianglify.png">
</div>
<div class="brand-apps-menu-item-desc">Triangle Art</div>
</div>
<div id="brand-apps-menu-brands" class="brand-apps-menu-item" data-id="#brand-brands-app">
<div class="brand-img-wrap">
<div class="img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/brands.jpg">
</div>
<div class="brand-apps-menu-item-desc">Brands</div>
</div>
<div id="brand-apps-menu-flags" class="brand-apps-menu-item" data-id="#brand-flags-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/flags.jpg">
</div>
<div class="brand-apps-menu-item-desc">Country Flags</div>
</div>
<div id="brand-apps-menu-crypto" class="brand-apps-menu-item" data-id="#brand-crypto-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/crypto.jpg">
</div>
<div class="brand-apps-menu-item-desc">Cryptocurrency</div>
</div>
<div id="brand-apps-menu-multiavatar" class="brand-apps-menu-item"
data-id="#brand-multiavatar-app">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/assets/apps/multiavatar.png">
</div>
<div class="brand-apps-menu-item-desc">Multiavatar</div>
</div>
</div>
<div id="brand-apps-content" class="aibrand-adjust-panel">
<!-- App START -->
<div id="brand-test-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-test-settings">
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-variation-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-variation-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Image Variation<span
class="data-count">AI Style 1</span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc"> Creates a variation of the background image. Layers will
not be pushed to the API. Only the background image will be affected.
</div>
<button id="oai-variation" type="button" class="brand-btn primary brand-lg-btn btn-full"
autocomplete="off"><span class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-removebg-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-removebg-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Remove BG<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc"> Only the background image will be edited with the AI.
</div>
<button id="clipdrop-remove-background" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"><span
class="material-icons arrow">landscape</span>Remove Background
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-replacebg-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-replacebg-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Replace BG<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc"> Only the background image will be edited with the AI.
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Prompt
(Required)</label>
<div class="brand-control"><textarea id="clipdrop-replace-bg-prompt"
class="brand-form-field" rows="2"
autocomplete="off" maxlength="2000"></textarea>
</div>
</div>
<div class="brand-control-desc aibrand-desc"> Describe the scene you want to teleport your
item to.
</div>
<button id="clipdrop-replace-background" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off" disabled><span
class="material-icons arrow">landscape</span>Replace Background
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-resizer-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-resizer-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Upscaler<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap-half"><label class="brand-control-label">Width</label>
<div class="brand-control"><input id="clipdrop-upscale-width" class="brand-form-field tinyform"
type="number" value="" autocomplete="off"
data-size=""></div>
</div>
<div class="brand-control-wrap-half"><label class="brand-control-label">Height</label>
<div class="brand-control"><input id="clipdrop-upscale-height" class="brand-form-field tinyform"
type="number" value="" autocomplete="off"
data-size=""></div>
</div>
<button id="clipdrop-upscale" type="button" class="brand-btn primary brand-lg-btn btn-full"
autocomplete="off"><span class="material-icons arrow">landscape</span>Upscale Image
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-removetext-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-removetext-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Remove Text<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc"> Only the background image will be edited with the AI.
</div>
<button id="clipdrop-remove-text" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"><span
class="material-icons arrow">landscape</span>Remove Text
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-uncrop-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-uncrop-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Uncrop<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Extend
Top (px)<span>400</span></label>
<div class="brand-control"><input id="clipdrop-extend-top" type="range" min="0"
max="2000" value="400" step="10" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Extend
Bottom (px)<span>400</span></label>
<div class="brand-control"><input id="clipdrop-extend-bottom" type="range" min="0"
max="2000" value="400" step="10" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Extend
Left (px)<span>400</span></label>
<div class="brand-control"><input id="clipdrop-extend-left" type="range" min="0"
max="2000" value="400" step="10" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Extend
Right (px)<span>400</span></label>
<div class="brand-control"><input id="clipdrop-extend-right" type="range" min="0"
max="2000" value="400" step="10" class="brand-slider"
autocomplete="off"></div>
</div>
<button id="clipdrop-uncrop" type="button" class="brand-btn primary brand-lg-btn btn-full"
autocomplete="off"><span class="material-icons arrow">landscape</span>Uncrop
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-reimagine-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-reimagine-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Reimagine<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<button id="clipdrop-clipdrop-reimagine" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"><span
class="material-icons arrow">landscape</span>Reimagine
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-clean-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-clean-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Cleanup<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-desc"> Mark unwanted objects or defects using the "pencil brush"
and click the button to remove them from the image. You can use any brush color.
</div>
<button id="clipdrop-inpainting" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"><span
class="material-icons arrow">landscape</span>Cleanup
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-recreate-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-recreate-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Regenerator<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Prompt
(Required)</label>
<div class="brand-control"><textarea id="sai-imgtoimg-prompt" class="brand-form-field"
rows="2" autocomplete="off"
placeholder="Golden hour New York City skyline, iconic, dramatic"
maxlength="2000"></textarea></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Negative
Prompt</label>
<div class="brand-control"><textarea id="sai-imgtoimg-negative-prompt"
class="brand-form-field" rows="2"
autocomplete="off"
placeholder="black and white, monochrome"></textarea>
</div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Style
Preset</label>
<div class="brand-control"><select id="sai-imgtoimg-style-presets" class="brand-select tinyform"
autocomplete="off">
<option value="" selected>Auto</option>
<option value="3d-model">3d Model</option>
<option value="analog-film">Analog Film</option>
<option value="anime">Anime</option>
<option value="cinematic">Cinematic</option>
<option value="comic-book">Comic Book</option>
<option value="digital-art">Digital Art</option>
<option value="enhance">Enhance</option>
<option value="fantasy-art">Fantasy Art</option>
<option value="isometric">Isometric</option>
<option value="line-art">Line Art</option>
<option value="low-poly">Low Poly</option>
<option value="modeling-compound">Modeling Compound</option>
<option value="neon-punk">Neon Punk</option>
<option value="origami">Origami</option>
<option value="photographic">Photographic</option>
<option value="pixel-art">Pixel Art</option>
<option value="tile-texture">Tile Texture</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Seed
(Optional)</label>
<div class="brand-control"><input id="sai-imgtoimg-seed" class="brand-form-field tinyform"
type="number" value="" autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Image
Strength<span>0.35</span></label>
<div class="brand-control"><input id="sai-imgtoimg-strength" type="range" min="0"
max="1" value="0.35" step="0.05" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc aibrand-desc"> How much influence the original image has on
the diffusion process. Values close to 1 will yield images very similar to the original
image while values close to 0 will yield images wildly different than the original
image.
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">CFG
Scale<span>7</span></label>
<div class="brand-control"><input id="sai-imgtoimg-cfg" type="range" min="0" max="35"
value="7" step="1" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc aibrand-desc"> How strictly the diffusion process adheres to
the prompt text (higher values keep your image closer to your prompt).
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label slider-label">Steps<span>50</span></label>
<div class="brand-control"><input id="sai-imgtoimg-steps" type="range" min="10"
max="150" value="50" step="1" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc aibrand-desc"> Number of diffusion steps to run.</div>
<div class="brand-control-wrap-half"><label class="brand-control-label">Alpha Mask</label>
<div class="brand-control brand-toggle-control"><label class="brand-toggle"> <input
id="sai-imgtoimg-mask" class="brand-toggle-checkbox" type="checkbox"
autocomplete="off"/>
<div class="brand-toggle-switch"></div>
</label></div>
</div>
<div class="brand-control-desc aibrand-desc"> If alpha mask is enabled, fully transparent
pixels are replaced and fully opaque pixels are unchanged. You can use "Erase BG Image"
brush to remove the pixels on the background image.
</div>
<button id="sai-imgtoimg-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off" disabled><span
class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- App START -->
<div id="brand-imageedit-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-imageedit-settings">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Image Edit<span
class="data-count"> </span><span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Image
Size</label>
<div class="brand-control"><select id="oai-edit-size" class="brand-select tinyform"
autocomplete="off">
<option value="1024x1024" selected>1024x1024 px</option>
<option value="512x512">512x512 px</option>
<option value="256x256">56x256 px</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label class="brand-control-label">Prompt
(Required)</label>
<div class="brand-control"><textarea id="oai-edit-prompt" class="brand-form-field"
rows="2" autocomplete="off"
placeholder="Golden hour New York City skyline, iconic, dramatic"
maxlength="1000"></textarea></div>
</div>
<div class="brand-control-desc"> The transparent areas of the image indicate where the image
should be edited, and the prompt should describe the full new image, not just the
transparent areas. You can use "Erase BG Image" brush to remove the pixels on the
background image.
</div>
<button id="oai-edit" type="button" class="brand-btn primary brand-lg-btn btn-full"
autocomplete="off" disabled><span class="material-icons arrow">landscape</span>Edit
Image
</button>
</div>
</div>
</div>
<!-- App END -->
<!-- Drawing App START -->
<div id="brand-drawing-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-drawing-settings">
<!-- Start Drawing Button -->
<div class="brand-btn-set">
<button id="brand-draw-btn" type="button" class="brand-btn primary brand-lg-btn"><span
class="material-icons">edit</span>Start Drawing</button>
<button id="brand-draw-undo" type="button" class="brand-btn brand-lg-btn" autocomplete="off"
title="Undo" disabled><span class="material-icons">undo</span></button>
</div>
<!-- Drawing Setings -->
<div id="brand-draw-settings" class="brand-sub-settings">
<div id="brand-brush-tip" class="notice notice-info">
You can draw a straight line by pressing the shift key.
</div>
<div id="brand-eraser-tip" class="notice notice-info">
You can click undo button to activate invert erasing mode.
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Brush Type</label>
<div class="brand-control">
<select id="brand-brush-select" class="brand-select tinyform" autocomplete="off">
<option value="pencil" selected>Pencil</option>
<option value="circle">Circle</option>
<option value="spray">Spray</option>
<option value="hline">H-line Pattern</option>
<option value="vline">V-line Pattern</option>
<option value="square">Square Pattern</option>
<option value="erase">Erase BG Image</option>
</select>
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Brush Width</label>
<div class="brand-control">
<input id="brush-width" class="brand-form-field tinyform numeric-field" type="number" value="50"
autocomplete="off" data-min="1" data-max="1000" data-step="1">
</div>
</div>
<div id="brand-brush-pattern-width" class="brand-control-wrap">
<label class="brand-control-label">Pattern Width</label>
<div class="brand-control">
<input id="brush-pattern-width" class="brand-form-field tinyform numeric-field" type="number"
value="10" autocomplete="off" data-min="1" data-max="1000" data-step="1">
</div>
</div>
<div id="brand-brush-pattern-distance" class="brand-control-wrap">
<label class="brand-control-label">Pattern Distance</label>
<div class="brand-control">
<input id="brush-pattern-distance" class="brand-form-field tinyform numeric-field" type="number"
value="5" autocomplete="off" data-min="1" data-max="1000" data-step="1">
</div>
</div>
<div id="not-erase-brush">
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Brush Color</label>
<div class="brand-control">
<input id="brush-color" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="#ffffff" />
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Brush Shadow</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-brush-shadow" class="brand-toggle-checkbox"
data-conditional="#line-shadow-settings" type="checkbox" autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="line-shadow-settings" class="d-none conditional-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label">Blur</label>
<div class="brand-control">
<input id="brush-shadow-width" class="brand-form-field tinyform" type="number" value="5"
data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Offset X</label>
<div class="brand-control">
<input id="brush-shadow-shadow-offset-x" class="brand-form-field tinyform" type="number"
value="5" data-min="0" data-max="100" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Offset Y</label>
<div class="brand-control">
<input id="brush-shadow-shadow-offset-y" class="brand-form-field tinyform" type="number"
value="5" data-min="0" data-max="100" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Color</label>
<div class="brand-control">
<input id="brush-shadow-color" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="#000000" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DrawingApp END -->
<!-- QR Code App START -->
<div id="brand-qrcode-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-qrcode-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label">Preview</label>
<div class="brand-control">
<div id="qrcode-preview"></div>
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Text</label>
<div class="brand-control">
<input type="text" id="brand-qrcode-text" class="brand-form-field tinyform"
autocomplete="off" value="https://mysite.com" />
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Fill Color</label>
<div class="brand-control">
<input id="brand-qrcode-fill" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="#333333" />
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Background Color</label>
<div class="brand-control">
<input id="brand-qrcode-back" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="#FFFFFF" />
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Rounded Corners<span>0</span></label>
<div class="brand-control">
<input id="brand-qrcode-rounded" type="range" min="0" max="100" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Label</label>
<div class="brand-control">
<input type="text" id="brand-qrcode-label" class="brand-form-field tinyform"
autocomplete="off" value="" />
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Label Color</label>
<div class="brand-control">
<input id="brand-qrcode-label-color" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off" value="#333333" />
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Label Size<span>30</span></label>
<div class="brand-control">
<input id="brand-qrcode-label-size" type="range" min="0" max="100" value="30" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Label Position X<span>50</span></label>
<div class="brand-control">
<input id="brand-qrcode-label-position-x" type="range" min="0" max="100" value="50"
step="1" class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Label Position Y<span>50</span></label>
<div class="brand-control">
<input id="brand-qrcode-label-position-y" type="range" min="0" max="100" value="50"
step="1" class="brand-slider" autocomplete="off">
</div>
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<button id="brand-generate-qr-code" type="button"
class="brand-btn primary brand-lg-btn btn-full">Generate QR Code</button>
</div>
<!-- QR Code App END -->
<!-- Drawing App START -->
<div id="brand-drawing-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-drawing-settings">
<!-- Start Drawing Button -->
<div class="brand-btn-set">
<button id="brand-draw-btn" type="button" class="brand-btn primary brand-lg-btn"><span
class="material-icons">edit</span>Start Drawing</button>
<button id="brand-draw-undo" type="button" class="brand-btn brand-lg-btn" autocomplete="off"
title="Undo" disabled><span class="material-icons">undo</span></button>
</div>
<!-- Drawing Setings -->
<div id="brand-draw-settings" class="brand-sub-settings">
<div id="brand-brush-tip" class="notice notice-info">
You can draw a straight line by pressing the shift key.
</div>
<div id="brand-eraser-tip" class="notice notice-info">
You can click undo button to activate invert erasing mode.
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Brush Type</label>
<div class="brand-control">
<select id="brand-brush-select" class="brand-select tinyform" autocomplete="off">
<option value="pencil" selected>Pencil</option>
<option value="circle">Circle</option>
<option value="spray">Spray</option>
<option value="hline">H-line Pattern</option>
<option value="vline">V-line Pattern</option>
<option value="square">Square Pattern</option>
<option value="erase">Erase BG Image</option>
</select>
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Brush Width</label>
<div class="brand-control">
<input id="brush-width" class="brand-form-field tinyform numeric-field" type="number" value="50"
autocomplete="off" data-min="1" data-max="1000" data-step="1">
</div>
</div>
<div id="brand-brush-pattern-width" class="brand-control-wrap">
<label class="brand-control-label">Pattern Width</label>
<div class="brand-control">
<input id="brush-pattern-width" class="brand-form-field tinyform numeric-field" type="number"
value="10" autocomplete="off" data-min="1" data-max="1000" data-step="1">
</div>
</div>
<div id="brand-brush-pattern-distance" class="brand-control-wrap">
<label class="brand-control-label">Pattern Distance</label>
<div class="brand-control">
<input id="brush-pattern-distance" class="brand-form-field tinyform numeric-field" type="number"
value="5" autocomplete="off" data-min="1" data-max="1000" data-step="1">
</div>
</div>
<div id="not-erase-brush">
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Brush Color</label>
<div class="brand-control">
<input id="brush-color" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="#ffffff" />
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Brush Shadow</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-brush-shadow" class="brand-toggle-checkbox"
data-conditional="#line-shadow-settings" type="checkbox" autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="line-shadow-settings" class="d-none conditional-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label">Blur</label>
<div class="brand-control">
<input id="brush-shadow-width" class="brand-form-field tinyform" type="number" value="5"
data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Offset X</label>
<div class="brand-control">
<input id="brush-shadow-shadow-offset-x" class="brand-form-field tinyform" type="number"
value="5" data-min="0" data-max="100" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Offset Y</label>
<div class="brand-control">
<input id="brush-shadow-shadow-offset-y" class="brand-form-field tinyform" type="number"
value="5" data-min="0" data-max="100" step="1" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Color</label>
<div class="brand-control">
<input id="brush-shadow-color" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="#000000" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DrawingApp END -->
<!-- Barode App START -->
<div id="brand-barcode-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-barcode-wrap">
<svg id="brand-barcode-preview"></svg>
</div>
<div id="brand-barcode-notice" class="notice notice-danger d-none">Text value is not valid for
this barcode type!</div>
<div class="brand-sub-settings" style="display: block;"></div>
<div id="brand-barcode-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label">Type</label>
<div class="brand-control">
<select id="brand-barcode-format" class="brand-select tinyform" autocomplete="off">
<option value="CODE128">CODE128 auto</option>
<option value="CODE128A">CODE128 A</option>
<option value="CODE128B">CODE128 B</option>
<option value="CODE128C">CODE128 C</option>
<option value="EAN13">EAN13</option>
<option value="EAN8">EAN8</option>
<option value="UPC">UPC</option>
<option value="CODE39">CODE39</option>
<option value="ITF14">ITF14</option>
<option value="ITF">ITF</option>
<option value="MSI">MSI</option>
<option value="MSI10">MSI10</option>
<option value="MSI11">MSI11</option>
<option value="MSI1010">MSI1010</option>
<option value="MSI1110">MSI1110</option>
<option value="pharmacode">Pharmacode</option>
</select>
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Text</label>
<div class="brand-control">
<input type="text" id="brand-barcode-text" class="brand-form-field tinyform"
autocomplete="off" value="Example 1234" />
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Line Color</label>
<div class="brand-control">
<input id="brand-barcode-line" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="#000000" />
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Background Color</label>
<div class="brand-control">
<input id="brand-barcode-back" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="#FFFFFF" />
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Bar Width<span>2</span></label>
<div class="brand-control">
<input id="brand-barcode-bar-width" type="range" min="1" max="5" value="2" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Height<span>100</span></label>
<div class="brand-control">
<input id="brand-barcode-height" type="range" min="10" max="150" value="100" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Margin<span>20</span></label>
<div class="brand-control">
<input id="brand-barcode-margin" type="range" min="0" max="50" value="20" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Show Text</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-barcode-show-text" class="brand-toggle-checkbox"
data-conditional="#brand-barcode-text-settings" type="checkbox"
autocomplete="off" checked />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-barcode-text-settings" class="conditional-settings">
<div class="brand-control-wrap label-block">
<div class="brand-control">
<div id="brand-barcode-text-options" class="brand-btn-group icon-group">
<button id="brand-barcode-text-bold" type="button"
class="brand-btn format-style"><span
class="material-icons">format_bold</span></button>
<button id="brand-barcode-text-italic" type="button"
class="brand-btn format-style"><span
class="material-icons">format_italic</span></button>
<button id="brand-barcode-text-align-left" type="button"
class="brand-btn format-align" data-align="left"><span
class="material-icons">format_align_left</span></button>
<button id="brand-barcode-text-align-center" type="button"
class="brand-btn format-align active" data-align="center"><span
class="material-icons">format_align_center</span></button>
<button id="brand-barcode-text-align-right" type="button"
class="brand-btn format-align" data-align="right"><span
class="material-icons">format_align_right</span></button>
</div>
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Font Family</label>
<div class="brand-control">
<select id="brand-barcode-font-family" class="brand-select tinyform">
<option value="Impact, Charcoal, sans-serif">Impact</option>
<option value="Helvetica Neue, Helvetica, Arial, sans-serif">Helvetica Neue
</option>
<option value="Georgia, serif" selected="">Georgia</option>
<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif">Palatino
Linotype</option>
<option value="Times New Roman, Times, serif">Times New Roman</option>
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="Arial Black, Gadget, sans-serif">Arial Black</option>
<option value="Comic Sans MS, cursive, sans-serif">Comic Sans</option>
<option value="Lucida Sans Unicode, Lucida Grande, sans-serif">Lucida Sans
</option>
<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
<option value="Trebuchet MS, Helvetica, sans-serif">Trebuchet</option>
<option value="Verdana, Geneva, sans-serif">Verdana</option>
<option value="Courier New, Courier, monospace">Courier New</option>
<option value="Lucida Console, Monaco, monospace">Lucida Console</option>
</select>
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Font Size<span>20</span></label>
<div class="brand-control">
<input id="brand-barcode-font-size" type="range" min="8" max="36" value="20"
step="1" class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Text Margin<span>8</span></label>
<div class="brand-control">
<input id="brand-barcode-text-margin" type="range" min="-15" max="30" value="8"
step="1" class="brand-slider" autocomplete="off">
</div>
</div>
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<button id="brand-generate-barcode" type="button"
class="brand-btn primary brand-lg-btn btn-full">Generate Barcode</button>
</div>
<!-- Barcode App END -->
<!-- Triangle Art START -->
<div id="brand-trianglify-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-trianglify-preview" class="brand-app-peview">
<div></div>
</div>
<ul class="brand-accordion">
<li>
<a class="brand-title"><span class="material-icons accordion-icon">palette</span>Color Scheme<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div id="brand-colorbrewer"></div>
</div>
</li>
</ul>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Width<span>1440</span></label>
<div class="brand-control">
<input id="brand-trianglify-width" type="range" min="100" max="4000" value="1440" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Height<span>900</span></label>
<div class="brand-control">
<input id="brand-trianglify-height" type="range" min="100" max="4000" value="900" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Cell Size<span>75</span></label>
<div class="brand-control">
<input id="brand-trianglify-cell-size" type="range" min="10" max="1000" value="75"
step="1" class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Variance<span>0.5</span></label>
<div class="brand-control">
<input id="brand-trianglify-variance" type="range" min="0" max="1" value="0.5" step="0.05"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-app-btns">
<button id="brand-download-trianglify" type="button"
class="brand-btn brand-lg-btn brand-app-download-png" data-id="trianglify"><span
class="material-icons">download</span>Download</button>
<button id="brand-select-trianglify" type="button"
class="brand-btn primary brand-lg-btn brand-app-select-png" data-id="trianglify"><span
class="material-icons">check</span>Select</button>
</div>
</div>
<!-- Triangle Art END -->
<!-- Brands START -->
<div id="brand-brands-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-brands-preview" class="brand-app-peview"><div></div></div>
<select id="brand-brands-list" class="brand-select brand-select2 tinyform" autocomplete="off"></select>
<hr/>
<div class="brand-app-btns">
<button id="brand-download-brands" type="button" class="brand-btn brand-lg-btn brand-app-download" data-id="brands"><span class="material-icons">download</span>Download</button>
<button id="brand-select-brands" type="button" class="brand-btn primary brand-lg-btn brand-app-select element" data-id="brands"><span class="material-icons">check</span>Select</button>
</div>
</div>
<!-- Brands END -->
<!-- Country Flags START -->
<div id="brand-flags-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-flags-preview" class="brand-app-peview">
<div></div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Country</label>
<div class="brand-control">
<select id="brand-flags-list" class="brand-select brand-select2 tinyform"
autocomplete="off"></select>
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Style</label>
<div class="brand-control">
<select id="brand-flags-style" class="brand-select tinyform" autocomplete="off">
<option value="original" selected>Original</option>
<option value="square">Square</option>
</select>
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-app-btns">
<button id="brand-download-flags" type="button"
class="brand-btn brand-lg-btn brand-app-download" data-id="flags"><span
class="material-icons">download</span>Download</button>
<button id="brand-select-flags" type="button"
class="brand-btn primary brand-lg-btn brand-app-select" data-id="flags"><span
class="material-icons">check</span>Select</button>
</div>
</div>
<!-- Country Flags END -->
<!-- Cryptocurrency START -->
<div id="brand-crypto-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-crypto-preview" class="brand-app-peview">
<div></div>
</div>
<select id="brand-crypto-list" class="brand-select brand-select2 tinyform" autocomplete="off"></select>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-app-btns">
<button id="brand-download-crypto" type="button"
class="brand-btn brand-lg-btn brand-app-download" data-id="crypto"><span
class="material-icons">download</span>Download</button>
<button id="brand-select-crypto" type="button"
class="brand-btn primary brand-lg-btn brand-app-select" data-id="crypto"><span
class="material-icons">check</span>Select</button>
</div>
</div>
<!-- Cryptocurrency END -->
<!-- Multiavatar START -->
<div id="brand-multiavatar-app" class="d-none">
<div class="brand-close-app brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-multiavatar-preview" class="brand-app-peview"></div>
<input type="text" id="brand-multiavatar-name" class="brand-form-field tinyform" autocomplete="off"
placeholder="Type something..." value="" />
<button id="brand-generate-multiavatar" type="button"
class="brand-btn primary brand-lg-btn btn-full"><span
class="material-icons">refresh</span>Random</button>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-app-btns">
<button id="brand-download-multiavatar" type="button"
class="brand-btn brand-lg-btn brand-app-download" data-id="multiavatar"><span
class="material-icons">download</span>Download</button>
<button id="brand-select-multiavatar" type="button"
class="brand-btn primary brand-lg-btn brand-app-select" data-id="multiavatar"><span
class="material-icons">check</span>Select</button>
</div>
</div>
<!-- Multiavatar END -->
</div>
</div>
<!-- Apps END -->
<!-- Motion START -->
<style>
/* Motion Panel Styles */
#brand-motion.brand-icon-panel-content {
background: #fdfdfd;
}
.brand-grid.menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 8px;
}
.brand-layout-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 10px;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
text-align: center;
position: relative;
overflow: hidden;
}
.brand-layout-text.light {
background: #ffffff;
color: var(--color-foreground-90, #333);
}
.brand-layout-text:hover {
background: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
border-color: var(--color-primary-50, rgba(239, 71, 101, 0.3));
z-index: 1;
}
.brand-layout-text .material-icons {
font-size: 26px;
margin-bottom: 8px;
color: var(--color-foreground-60, #777);
transition: all 0.2s ease;
}
.brand-layout-text:hover .material-icons {
color: var(--color-primary, #ef4765);
transform: scale(1.1);
}
.brand-layout-text label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
pointer-events: none;
margin: 0;
color: var(--color-foreground-80, #444);
transition: color 0.2s;
}
.brand-layout-text:hover label {
color: var(--color-primary, #ef4765);
}
/* Control wrap adjustments */
.brand-control-wrap.label-block {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.brand-control-wrap label {
font-size: 12px;
font-weight: 600;
color: var(--color-foreground-70, #666);
margin-bottom: 4px;
display: block;
}
/* Accordion tweaks for cleaner look */
.brand-accordion > li {
border-bottom: 1px solid rgba(0,0,0,0.04);
}
.brand-accordion > li:last-child {
border-bottom: none;
}
.brand-accordion > li > a.brand-title {
display: flex;
align-items: center;
padding: 12px 10px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
color: var(--color-foreground-90, #333);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: background 0.2s;
}
.brand-accordion > li > a.brand-title:hover {
background: rgba(0,0,0,0.02);
color: var(--color-primary, #ef4765);
}
.brand-accordion .accordion-icon {
margin-right: 10px;
font-size: 18px;
color: var(--color-foreground-50, #999);
}
.brand-accordion > li > a:hover .accordion-icon {
color: var(--color-primary, #ef4765);
}
.brand-accordion .arrow {
margin-left: auto;
font-size: 18px;
color: var(--color-foreground-40, #aaa);
transition: transform 0.2s;
}
/* Specific button overrides for premium look */
#brand-motion .brand-btn {
border-radius: 6px;
font-weight: 600;
font-size: 12px;
padding: 10px 16px;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#brand-motion .brand-btn-primary {
background: var(--color-primary, #ef4765);
color: #fff;
box-shadow: 0 4px 10px rgba(239, 71, 101, 0.3);
}
#brand-motion .brand-btn-primary:hover {
background: var(--color-primary-dark, #d6304c);
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(239, 71, 101, 0.4);
}
#brand-motion .brand-btn-danger {
background: #ff4757;
color: #fff;
border: none;
}
#brand-motion .brand-btn-danger:hover {
background: #ff6b81;
}
/* Range Input styling */
#brand-motion input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
margin: 8px 0;
}
#brand-motion input[type=range]:focus {
outline: none;
}
#brand-motion input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(0,0,0,0.1);
border-radius: 2px;
}
#brand-motion input[type=range]::-webkit-slider-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--color-primary, #ef4765);
cursor: pointer;
-webkit-appearance: none;
margin-top: -6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
border: 2px solid #fff;
}
#brand-motion input[type=range]:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(239, 71, 101, 0.2);
}
</style>
<div id="brand-motion" class="brand-icon-panel-content panel-hide">
<a class="brand-title"><span class="material-icons accordion-icon">movie_filter</span>Motion Effects</a>
<div class="brand-control-wrap label-block" style="padding: 10px;">
<label>Global Animation Speed</label>
<input type="range" id="apSpeed" min="0.1" max="5" step="0.1" value="1" style="width:100%">
<button id="apStopBtn" class="brand-btn brand-btn-danger" style="width:80%; margin-top:10px;" onclick="if(window.apStop) apStop(); else console.error('apStop not found')"><span class="material-icons">stop</span> Stop All Animations</button>
</div>
<ul class="brand-accordion">
<!-- Text Effects -->
<li>
<a class="brand-title"><span class="material-icons accordion-icon">title</span>Text Animation<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-grid menu-grid" style="grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px;">
<div class="brand-layout-text light" onclick="if(window.apTextGen) apTextGen.typewriter()">
<span class="material-icons">keyboard</span>
<label>Typewriter</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apTextGen) apTextGen.fade()">
<span class="material-icons">opacity</span>
<label>Fade In</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apTextGen) apTextGen.slide()">
<span class="material-icons">swipe_right</span>
<label>Slide</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apTextGen) apTextGen.bounce()">
<span class="material-icons">sports_basketball</span>
<label>Bounce</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apTextGen) apTextGen.scale()">
<span class="material-icons">open_in_full</span>
<label>Scale</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apTextGen) apTextGen.rotate()">
<span class="material-icons">rotate_right</span>
<label>Rotate</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apTextGen) apTextGen.glitch()">
<span class="material-icons">bug_report</span>
<label>Glitch</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apTextGen) apTextGen.neon()">
<span class="material-icons">bolt</span>
<label>Neon</label>
</div>
</div>
</div>
</li>
<!-- Image Effects -->
<li>
<a class="brand-title"><span class="material-icons accordion-icon">image</span>Image Effects<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block">
<label>Pixelate Size</label>
<input type="range" id="px" min="1" max="50" value="10">
<button class="brand-btn" onclick="if(window.apBgGen) apBgGen.pixelate()">Apply Pixelate</button>
</div>
<div class="brand-control-wrap label-block">
<label>Halftone Size</label>
<input type="range" id="ht" min="1" max="50" value="10">
<button class="brand-btn" onclick="if(window.apBgGen) apBgGen.halftone()">Apply Halftone</button>
</div>
<div class="brand-grid menu-grid" style="grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px;">
<div class="brand-layout-text light" onclick="if(window.apBgGen) apBgGen.duotone()">
<span class="material-icons">gradient</span>
<label>Duotone</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apBgGen) apBgGen.thermal()">
<span class="material-icons">thermostat</span>
<label>Thermal</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apBgGen) apBgGen.chromatic()">
<span class="material-icons">blur_on</span>
<label>Chromatic</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apBgGen) apBgGen.emboss()">
<span class="material-icons">texture</span>
<label>Emboss</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apBgGen) apBgGen.solarize()">
<span class="material-icons">wb_sunny</span>
<label>Solarize</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apBgGen) apBgGen.posterize()">
<span class="material-icons">filter_b_and_w</span>
<label>Posterize</label>
</div>
</div>
<!-- Hidden inputs for default values -->
<input type="hidden" id="thI" value="70">
<input type="hidden" id="chO" value="6">
<input type="hidden" id="chA" value="0">
<input type="hidden" id="em" value="2">
</div>
</li>
<!-- Export -->
<li>
<a class="brand-title"><span class="material-icons accordion-icon">download</span>Export<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block" style="padding:10px;">
<div class="brand-layout-text light" onclick="if(window.apBgGen && apBgGen.exportVideo) apBgGen.exportVideo(); else alert('Export function not ready')" style="background-color: var(--color-primary, #ef4765); color: white;">
<span class="material-icons" style="color: white;">videocam</span>
<label style="color: white;">Export Video (MP4)</label>
</div>
<div class="brand-layout-text light" onclick="if(window.apBgGen && apBgGen.exportGIF) apBgGen.exportGIF(); else alert('Export function not ready')">
<span class="material-icons">gif</span>
<label>Export GIF</label>
</div>
</div>
</div>
</li>
</ul>
</div> <!-- Motion END -->
<!-- Tools START -->
<script>
$(document).ready(function() {
let isResizingEffects = false;
let initialHeightEffects;
let initialYEffects;
function startResizingEffects(event) {
isResizingEffects = true;
const $button = $(this);
const $div = $('#brand-effects');
initialHeightEffects = $div.height(); // Store the initial height
initialYEffects = event.clientY; // Store the initial Y position
/* $button.effects("...");*/ // Change button effects while resizing
event.preventDefault(); // Prevent default behavior
}
function resizeDivEffects(event) {
if (isResizingEffects) {
const $div = $('#brand-effects');
const newHeight = initialHeightEffects - (event.clientY - initialYEffects); // Calculate new height
if (newHeight > 50) { // Minimum height limit
$div.height(newHeight); // Set new height
}
}
}
function stopResizingEffects() {
isResizingEffects = false;
/* $('#btn-resize-image').effects("Resize");*/ // Reset button effects
}
// Mouse events
$('#btn-resize-effects').on('mousedown', startResizingEffects);
$(document).on('mousemove', resizeDivEffects);
$(document).on('mouseup', stopResizingEffects);
// Touch events for mobile
$('#btn-resize-effects').on('touchstart', startResizingEffects);
$(document).on('touchmove', resizeDivEffects);
$(document).on('touchend', stopResizingEffects);
});
</script>
<div id="brand-effects" class=" brand-icon-panel-content panel-hide hide-on-canvas-mode">
<a class="brand-title"><span class="material-icons accordion-icon">landscape</span>Effects</a>
<div id="brand-effects-menu">
<div id="brand-effects-menu" class="brand-tools-menu-item" data-id="#brand-filters-tool">
<div class="brand-img-wrap">
<!-- <div class="brand-img-loader"></div>-->
<img class="lazy entered loaded" data-src="https://www.thebrand.ai/wowX/assets/effects/filters.png" data-ll-status="loaded" src="https://www.thebrand.ai/wowX/assets/effects/filters.png">
</div>
<div class="brand-tools-menu-item-desc">Quick Filters</div>
</div>
<div id="brand-tools-menu-filterl" class="brand-tools-menu-item" data-id="#brand-filterl-tool">
<div class="brand-img-wrap">
<!-- <div class="brand-img-loader"></div>-->
<img class="lazy entered loaded" data-src="https://www.thebrand.ai/wowX/assets/effects/filters2.png" data-ll-status="loaded" src="https://www.thebrand.ai/wowX/assets/effects/filters2.png">
</div>
<div class="brand-tools-menu-item-desc">Filter Library</div>
</div>
<div id="brand-tools-menu-basic" class="brand-tools-menu-item" data-id="#brand-basic-tool">
<div class="brand-img-wrap">
<!-- <div class="brand-img-loader"></div>-->
<img class="lazy entered loaded" data-src="https://www.thebrand.ai/wowX/assets/effects/basic.png" data-ll-status="loaded" src="https://www.thebrand.ai/wowX/assets/effects/basic.png">
</div>
<div class="brand-tools-menu-item-desc">Basic Adjust</div>
</div>
<div id="brand-tools-menu-gamma" class="brand-tools-menu-item" data-id="#brand-gamma-tool">
<div class="brand-img-wrap">
<!-- <div class="brand-img-loader"></div>-->
<img class="lazy entered loaded" data-src="https://www.thebrand.ai/wowX/assets/effects/gamma.png" data-ll-status="loaded" src="https://www.thebrand.ai/wowX/assets/effects/gamma.png">
</div>
<div class="brand-tools-menu-item-desc">Gamma</div>
</div>
<div id="brand-tools-menu-blend" class="brand-tools-menu-item" data-id="#brand-blend-tool">
<div class="brand-img-wrap">
<!-- <div class="brand-img-loader"></div>-->
<img class="lazy entered loaded" data-src="https://www.thebrand.ai/wowX/assets/effects/blend.png" data-ll-status="loaded" src="https://www.thebrand.ai/wowX/assets/effects/blend.png">
</div>
<div class="brand-tools-menu-item-desc">Blend Colors</div>
</div>
<div id="brand-tools-menu-duo" class="brand-tools-menu-item" data-id="#brand-duo-tool">
<div class="brand-img-wrap">
<!-- <div class="brand-img-loader"></div>-->
<img class="lazy entered loaded" data-src="https://www.thebrand.ai/wowX/assets/effects/duo.png" data-ll-status="loaded" src="https://www.thebrand.ai/wowX/assets/effects/duo.png">
</div>
<div class="brand-tools-menu-item-desc">Duo Tone</div>
</div>
<div id="brand-tools-menu-swap" class="brand-tools-menu-item" data-id="#brand-swap-tool">
<div class="brand-img-wrap">
<!-- <div class="brand-img-loader"></div>-->
<img class="lazy entered loaded" data-src="https://www.thebrand.ai/wowX/assets/effects/swap.png" data-ll-status="loaded" src="https://www.thebrand.ai/wowX/assets/effects/swap.png">
</div>
<div class="brand-tools-menu-item-desc">Swap Colors</div>
</div>
<div id="brand-tools-menu-advanced" class="brand-tools-menu-item" data-id="#brand-advanced-tool">
<div class="brand-img-wrap">
<!-- <div class="brand-img-loader"></div>-->
<img class="lazy entered loaded" data-src="https://www.thebrand.ai/wowX/assets/apps/removebg.png" data-ll-status="loaded" src="https://www.thebrand.ai/wowX/assets/apps/removebg.png">
</div>
<div class="brand-tools-menu-item-desc">Advanced Edits</div>
</div>
<div id="brand-frames" class="brand-tools-menu-item" data-id="#brand-frames">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="https://www.thebrand.ai/wowX/files/frames/bohemian/1.jpg">
</div>
<div class="brand-tools-menu-item-desc">Frames</div>
</div>
</div>
<div id="brand-effects-content" class="">
<!-- filters START -->
<div id="brand-filters-tool" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-filters-settings">
<span class="brand-title"><span class="material-icons accordion-icon">auto_fix_high</span>Quick Filters<span class="data-count"></span><span class="material-icons arrow">keyboard_arrow_down</span></span>
<div id="brand-filters" class="brand-grid two-column">
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="grayscale" autocomplete="off"
class="input-hidden" />
<label for="grayscale"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/grayscale.png" /><span>Grayscale</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="sepia" autocomplete="off"
class="input-hidden" />
<label for="sepia"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/sepia.png" /><span>Sepia</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="blackwhite" autocomplete="off"
class="input-hidden" />
<label for="blackwhite"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/blackwhite.png" /><span>Black/White</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="brownie" autocomplete="off"
class="input-hidden" />
<label for="brownie"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/brownie.png" /><span>Brownie</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="vintage" autocomplete="off"
class="input-hidden" />
<label for="vintage"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/vintage.png" /><span>Vintage</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="kodachrome" autocomplete="off"
class="input-hidden" />
<label for="kodachrome"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/kodachrome.png" /><span>Kodachrome</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="technicolor" autocomplete="off"
class="input-hidden" />
<label for="technicolor"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/technicolor.png" /><span>Technicolor</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="polaroid" autocomplete="off"
class="input-hidden" />
<label for="polaroid"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/polaroid.png" /><span>Polaroid</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="shift" autocomplete="off"
class="input-hidden" />
<label for="shift"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/shift.png" /><span>Shift</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="invert" autocomplete="off"
class="input-hidden" />
<label for="invert"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/invert.png" /><span>Invert</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="sharpen" autocomplete="off"
class="input-hidden" />
<label for="sharpen"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/sharpen.png" /><span>Sharpen</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="emboss" autocomplete="off"
class="input-hidden" />
<label for="emboss"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/emboss.png" /><span>Emboss</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="sobelX" autocomplete="off"
class="input-hidden" />
<label for="sobelX"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/sobelX.png" /><span>SobelX</span></label>
</div>
<div class="grid-item" data-keyword="Blog Banner - 2240x1260px"
data-category="blog-banners">
<input type="checkbox" name="brand-filter" id="sobelY" autocomplete="off"
class="input-hidden" />
<label for="sobelY"><img class="lazy"
data-src="https://www.thebrand.ai/wowX/assets/filters/sobelY.png" /><span>SobelY</span></label>
</div>
</div>
</div>
</div>
<!-- tool END -->
<!-- filters START -->
<div id="brand-filterl-tool" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-filterl-settings">
<span class="brand-title"><span class="material-icons accordion-icon">auto_fix_high</span>Filter Library<span class="data-count"></span><span class="material-icons arrow">keyboard_arrow_down</span></span>
<div>
<div id="brand-filter-preview" class="d-none">
<img src="" />
</div>
<div id="brand-filter-library" class="brand-grid three-column paginated" data-perpage="12">
<div class="grid-item none" data-filter="" title="Clear Filters">
<span class="material-icons">block</span>
<img src="https://www.thebrand.ai/wowX/assets/filters/default.png">
</div>
<div class="grid-item" data-filter="horizontal_lines" title="horizontal_lines"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="extreme_offset_blue" title="extreme_offset_blue"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="extreme_offset_green" title="extreme_offset_green"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="offset_green" title="offset_green"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="extra_offset_blue" title="extra_offset_blue"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="extra_offset_red" title="extra_offset_red"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="extra_offset_green" title="extra_offset_green"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="extreme_offset_red" title="extreme_offset_red"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="specks_redscale" title="specks_redscale"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="eclectic" title="eclectic"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="pane" title="pane"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="diagonal_lines" title="diagonal_lines"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="green_specks" title="green_specks"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="casino" title="casino"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="yellow_casino" title="yellow_casino"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="green_diagonal_lines" title="green_diagonal_lines"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="offset" title="offset"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="offset_blue" title="offset_blue"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="neue" title="neue"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="sunset" title="sunset"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="specks" title="specks"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="wood" title="wood"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="lix" title="lix"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="ryo" title="ryo"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="bluescale" title="bluescale"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="solange" title="solange"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="evening" title="evening"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="crimson" title="crimson"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="teal_min_noise" title="teal_min_noise"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="phase" title="phase"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="dark_purple_min_noise" title="dark_purple_min_noise"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="coral" title="coral"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="darkify" title="darkify"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="incbrightness" title="incbrightness"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="incbrightness2" title="incbrightness2"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="invert" title="invert"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="sat_adj" title="sat_adj"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="lemon" title="lemon"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="pink_min_noise" title="pink_min_noise"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="frontward" title="frontward"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="vintage" title="vintage"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="perfume" title="perfume"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="serenity" title="serenity"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="pink_aura" title="pink_aura"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="haze" title="haze"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="cool_twilight" title="cool_twilight"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="blues" title="blues"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="horizon" title="horizon"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="mellow" title="mellow"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="solange_dark" title="solange_dark"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="solange_grey" title="solange_grey"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="zapt" title="zapt"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="eon" title="eon"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="aeon" title="aeon"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="matrix" title="matrix"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="cosmic" title="cosmic"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="min_noise" title="min_noise"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="red_min_noise" title="red_min_noise"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="matrix2" title="matrix2"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="purplescale" title="purplescale"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="radio" title="radio"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="twenties" title="twenties"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="ocean" title="ocean"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="a" title="a"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="pixel_blue" title="pixel_blue"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="greyscale" title="greyscale"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="grime" title="grime"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="redgreyscale" title="redgreyscale"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="retroviolet" title="retroviolet"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="greengreyscale" title="greengreyscale"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="warmth" title="warmth"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="green_med_noise" title="green_med_noise"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="green_min_noise" title="green_min_noise"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="blue_min_noise" title="blue_min_noise"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="rosetint" title="rosetint"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item" data-filter="purple_min_noise" title="purple_min_noise"><img src="https://www.thebrand.ai/wowX/assets/filters/default.png"></div>
<div class="grid-item none" data-filter="" title="Clear Filters" style="display: none;">
<span class="material-icons">block</span>
<img src="https://www.thebrand.ai/wowX/assets/filters/default.png">
</div>
</div>
</div>
</div> </div>
<!-- tool END -->
<!-- basic START -->
<div id="brand-basic-tool" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-basic-settings">
<span class="brand-title"><span class="material-icons accordion-icon">tune</span>Basic Adjust<span
class="material-icons arrow">keyboard_arrow_down</span></span>
<div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Adjust Brightness</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-brightness" class="brand-toggle-checkbox"
data-conditional="#brand-brightness-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-brightness-settings" class="d-none conditional-settings">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Brightness<span>0</span></label>
<div class="brand-control">
<input id="brightness" type="range" min="-1" max="1" value="0" step="0.01"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Adjust Contrast</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-contrast" class="brand-toggle-checkbox"
data-conditional="#brand-contrast-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-contrast-settings" class="d-none conditional-settings">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Contrast<span>0</span></label>
<div class="brand-control">
<input id="contrast" type="range" min="-1" max="1" value="0" step="0.01"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Adjust Saturation</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-saturation" class="brand-toggle-checkbox"
data-conditional="#brand-saturation-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-saturation-settings" class="d-none conditional-settings">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Saturation<span>0</span></label>
<div class="brand-control">
<input id="saturation" type="range" min="-1" max="1" value="0" step="0.01"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Adjust Hue</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-hue" class="brand-toggle-checkbox"
data-conditional="#brand-hue-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-hue-settings" class="d-none conditional-settings">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Hue<span>0</span></label>
<div class="brand-control">
<input id="hue" type="range" min="-2" max="2" value="0" step="0.02"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tool END -->
<!-- basic START -->
<div id="brand-gamma-tool" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-gamma-settings2">
<span class="brand-title"><span class="material-icons accordion-icon">wb_sunny</span>Gamma<span
class="material-icons arrow">keyboard_arrow_down</span></span>
<div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Adjust Gamma</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-gamma" class="brand-toggle-checkbox"
data-conditional="#brand-gamma-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-gamma-settings" class="d-none conditional-settings">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Red<span>1</span></label>
<div class="brand-control">
<input id="gamma-red" type="range" min="0.2" max="2.2" value="1" step="0.01"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Green<span>1</span></label>
<div class="brand-control">
<input id="gamma-green" type="range" min="0.2" max="2.2" value="1" step="0.01"
class="brand-slider" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Blue<span>1</span></label>
<div class="brand-control">
<input id="gamma-blue" type="range" min="0.2" max="2.2" value="1" step="0.01"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tool END -->
<!-- basic START -->
<div id="brand-blend-tool" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-blend-settings2">
<span class="brand-title"><span class="material-icons accordion-icon">palette</span>Blend Color<span
class="material-icons arrow">keyboard_arrow_down</span></span>
<div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Blend Color</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-blend-color" class="brand-toggle-checkbox"
data-conditional="#brand-blend-color-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-blend-color-settings" class="d-none conditional-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label">Mode</label>
<div class="brand-control">
<select id="blend-color-mode" class="brand-select tinyform" autocomplete="off">
<option selected value="add">Add</option>
<option value="diff">Diff</option>
<option value="subtract">Subtract</option>
<option value="multiply">Multiply</option>
<option value="screen">Screen</option>
<option value="lighten">Lighten</option>
<option value="darken">Darken</option>
<option value="overlay">Overlay</option>
<option value="exclusion">Exclusion</option>
<option value="tint">Tint</option>
</select>
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Color</label>
<div class="brand-control">
<input id="blend-color-color" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off"
value="#ffffff" />
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Alpha<span>0.5</span></label>
<div class="brand-control">
<input id="blend-color-alpha" type="range" min="0" max="1" value="0.5"
step="0.01" class="brand-slider" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tool END -->
<!-- basic START -->
<div id="brand-duo-tool" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-duo-settings2">
<span class="brand-title"><span class="material-icons accordion-icon">swap_horiz</span>Duotone Effect<span
class="material-icons arrow">keyboard_arrow_down</span></span>
<div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Adjust Duotone</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-duotone-color" class="brand-toggle-checkbox"
data-conditional="#brand-duotone-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-duotone-settings" class="d-none conditional-settings">
<div class="brand-control-wrap-half">
<label class="brand-control-label">Light Color</label>
<div class="brand-control">
<input id="duotone-light-color" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off"
value="green" />
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Dark Color</label>
<div class="brand-control">
<input id="duotone-dark-color" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off"
value="blue" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tool END -->
<!-- basic START -->
<div id="brand-swap-tool" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-swap-settings2">
<span class="brand-title"><span class="material-icons accordion-icon">swap_horiz</span>Swap Colors<span
class="material-icons arrow">keyboard_arrow_down</span></span>
<div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Swap Colors</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-swap-colors" class="brand-toggle-checkbox"
data-conditional="#brand-swap-colors-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-swap-colors-settings" class="d-none conditional-settings">
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Source</label>
<div class="brand-control">
<input id="color-source" type="text" class="brand-colorpicker disallow-empty"
autocomplete="off" value="#ffffff" />
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Destination</label>
<div class="brand-control">
<input id="color-destination" type="text"
class="brand-colorpicker disallow-empty" autocomplete="off"
value="#000000" />
</div>
</div>
<div class="brand-control-wrap label-block">
<div class="brand-control">
<div class="brand-btn-set">
<button id="brand-swap-apply" type="button"
class="brand-btn primary">Apply</button>
<button id="brand-swap-remove" type="button" class="brand-btn"
autocomplete="off" disabled><span
class="material-icons">delete</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tool END -->
<!-- basic START -->
<div id="brand-advanced-tool" class="d-none">
<div class="brand-close-tool brand-btn">
<span class="material-icons">keyboard_backspace</span>
Go Back
</div>
<div id="brand-duo-advanced2">
<a class="brand-title"><span class="material-icons accordion-icon">tune</span>Advanced Edits<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Adjust Blur</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-blur" class="brand-toggle-checkbox"
data-conditional="#brand-blur-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-blur-settings" class="d-none conditional-settings">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Blur<span>0</span></label>
<div class="brand-control">
<input id="blur" type="range" min="0" max="1" value="0" step="0.01"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Adjust Noise</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-noise" class="brand-toggle-checkbox"
data-conditional="#brand-noise-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-noise-settings" class="d-none conditional-settings">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Noise<span>0</span></label>
<div class="brand-control">
<input id="noise" type="range" min="0" max="1000" value="0" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
<div class="brand-control-wrap conditional">
<label class="brand-control-label">Adjust Pixelate</label>
<div class="brand-control brand-toggle-control">
<label class="brand-toggle">
<input id="brand-pixelate" class="brand-toggle-checkbox"
data-conditional="#brand-pixelate-settings" type="checkbox"
autocomplete="off" />
<div class="brand-toggle-switch"></div>
</label>
</div>
</div>
<div id="brand-pixelate-settings" class="d-none conditional-settings">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Pixelate<span>1</span></label>
<div class="brand-control">
<input id="pixelate" type="range" min="1" max="20" value="1" step="1"
class="brand-slider" autocomplete="off">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tool END -->
</div>
</div>
<!-- tools END -->
<div id="brand-templates" class="brand-icon-panel-content panel-hide">
<div class="brand-modal-wrap">
<div class="brand-tabs">
<ul class="brand-tabs-menu" style="margin-bottom: 10px; overflow:hidden">
<li class="active" data-target="#panel-templates-root">Templates</li>
<li data-target="#panel-image">Image</li>
<li data-target="#panel-blank">Blank</li>
<li data-target="#panel-ai">AI</li>
</ul>
<div id="panel-templates-root" class="brand-tab active">
<div class="brand-tabs" >
<ul class="brand-tabs-menu inside-tabs-menu" style="margin-bottom: 15px;">
<li class="active" data-target="#panel-all-templates">All</li>
<li data-target="#panel-my-designs">My Designs</li>
<li data-target="#panel-templates-favorites">My Favorites</li>
</ul>
<div id="panel-all-templates" class="brand-tab active">
<div style="margin-bottom: 15px;">
<button id="panel-open-ai" type="button" class="brand-btn info brand-lg-btn btn-full"><span class="material-icons">landscape</span>Create with AI</button>
<!-- <button id="panel-open-ai" type="button" class="brand-btn premium-btn"><span class="material-icons">landscape</span>Open AI Image</button> -->
</div>
<div class="brand-templates-menu-wrap" style="margin-top:5px;">
<input name="panel-search" id="panel-search" type="search" class="brand-form-field" placeholder="Search by keyword..." autocomplete="off" />
<select id="panel-templates-menu" class="brand-select brand-form-fieldX" autocomplete="off">
<option value="" selected>All Categories</option>
<option value="10">Social Media</option>
<option value="15">YouTube Graphics</option>
<option value="11">Stories</option>
<option value="12">Social Posts</option>
<option value="14">Pinterest Pins</option>
<option value="52">Facebook</option>
<option value="50">Instagram Posts</option>
<option value="53">LinkedIn</option>
<option value="187">Twitch</option>
<option value="56">Spotify</option>
<option value="54">Twitter</option>
<option value="28">Advertising</option>
<option value="33">Digital Displays</option>
<option value="29">Facebook Ads</option>
<option value="30">Google Ads</option>
<option value="31">Instagram Ads</option>
<option value="32">Story Ads</option>
<option value="16">Branding</option>
<option value="21">Live Streaming</option>
<option value="18">Letterheads</option>
<option value="19">Newsletters</option>
<option value="20">Media Kits</option>
<option value="22">Marketing</option>
<option value="13">Banners</option>
<option value="27">Invites & Cards</option>
<option value="110">Ecommerce</option>
<option value="25">Posters</option>
<option value="23">Flyers</option>
<option value="24">Brochures</option>
<option value="46">Business Cards</option>
<option value="809">Logos</option>
<option value="49">Sales Designs</option>
<option value="26">Presentations</option>
<option value="808">Content Marketing</option>
<option value="40">Others</option>
<option value="41">Food Menus</option>
<option value="61">Headers</option>
<option value="42">Resumes</option>
<option value="43">Invitations</option>
<option value="44">Planners</option>
<option value="45">Infographics</option>
<option value="55">Book Covers</option>
<option value="48">Quotes</option>
<option value="47">Press Releases</option>
<option value="60">Banner Ads</option>
<option value="51">Occasions</option>
</select>
<span id="panel-total-data" class="brand-btn primary brandeditor-form-field" style="display:none;background:none;border:none"></span>
</div>
<div class="brand-templates-content">
<div class="brand-grid-wrap">
<div id="panel-post-data" class="brand-grid template-grid five-column template-selection"></div>
<div id="panel-pagination" class="brand-pagination light-theme simple-pagination" style="margin-bottom:10px;margin-top:10px">Loading Designs...</div>
</div>
</div>
</div>
<div id="panel-my-designs" class="brand-tab">
<span id="panel-total-data-my" class="brand-btn primary brandeditor-form-field" style="display:none;background:none;border:none"></span>
<div id="panel-post-data-my" class="brand-grid template-grid template-selection-my-designs"></div>
<div id="panel-pagination-my" class="brand-pagination light-theme simple-pagination" style="margin-bottom:10px;margin-top:10px">Loading My Designs...</div>
</div>
<div id="panel-templates-favorites" class="brand-tab">
<div class="notice notice-info"><h6>No favorites yet</h6>Click the star icon on any item, and you will see it here next time you visit.</div>
</div>
</div>
</div>
<div id="panel-image" class="brand-tab">
<div class="brand-select-btn-block">
<div>
<div class="brand-btn-set">
<div class="brand-file-field">
<input type="file" id="panel-image-upload" class="brand-hidden-file" accept="image/png,image/jpeg,image/webp" />
<label for="panel-image-upload" class="brand-btn primary brand-lg-btn"><span class="material-icons">upload</span><span>Upload Image</span></label>
</div>
<button type="button" class="brand-btn primary brand-lg-btn brand-modal-open" data-target="#modal-media-library"><span class="material-icons">photo_library</span>Select Library</button>
</div>
</div>
</div>
</div>
<div id="panel-blank" class="brand-tab">
<div class="brand-control-group panel-blank-grid">
<div class="blank-row">
<label>Size</label>
<select id="panel-canvas-size-select" class="brand-select" autocomplete="off">
<option selected value="custom" data-width="800" data-height="800">Custom</option>
<option value="" data-width="2240" data-height="1260">Blog Banner</option>
<option value="" data-width="851" data-height="315">Facebook Cover</option>
<option value="" data-width="1200" data-height="628">Facebook Ad</option>
<option value="" data-width="1080" data-height="1080">Instagram Post</option>
<option value="" data-width="750" data-height="1120">Pinterest Post</option>
<option value="" data-width="940" data-height="788">Facebook Post</option>
<option value="" data-width="1600" data-height="900">Twitter Post</option>
<option value="" data-width="1280" data-height="720">Youtube Thumbnail</option>
<option value="" data-width="1920" data-height="1080">Wallpaper</option>
<option value="" data-width="1080" data-height="1920">Instagram Story</option>
<option value="" data-width="1080" data-height="1920">Instagram Reel</option>
<option value="" data-width="1080" data-height="1920">Facebook Story</option>
<option value="" data-width="1200" data-height="1200">Facebook Post (Square)</option>
<option value="" data-width="1080" data-height="1350">Facebook Post (Portrait)</option>
<option value="" data-width="1200" data-height="628">Facebook Event Cover</option>
<option value="" data-width="1200" data-height="675">Twitter Post (Alt)</option>
<option value="" data-width="1500" data-height="500">Twitter Header</option>
<option value="" data-width="1200" data-height="1200">LinkedIn Post</option>
<option value="" data-width="1584" data-height="396">LinkedIn Cover</option>
<option value="" data-width="1000" data-height="1500">Pinterest Pin</option>
<option value="" data-width="2560" data-height="1440">YouTube Channel Art</option>
<option value="" data-width="1080" data-height="1920">YouTube Shorts</option>
<option value="" data-width="1080" data-height="1920">TikTok Video</option>
<option value="" data-width="1080" data-height="1920">Snapchat Story</option>
<option value="" data-width="2480" data-height="3508">A4 Document</option>
<option value="" data-width="2550" data-height="3300">US Letter</option>
<option value="" data-width="728" data-height="90">Leaderboard Ad</option>
<option value="" data-width="300" data-height="250">Medium Rectangle Ad</option>
<option value="" data-width="160" data-height="600">Skyscraper Ad</option>
</select>
</div>
<div class="blank-row-2">
<div style="width:70%; margin-right:10px">
<label>Width</label>
<input id="panel-canvas-width" class="brand-form-field" type="number" value="800" data-min="1" data-max="10000" autocomplete="off">
</div>
<div style="width:70%; margin-right:10px">
<label>Height</label>
<input id="panel-canvas-height" class="brand-form-field" type="number" value="800" data-min="1" data-max="10000" autocomplete="off">
</div>
</div>
<div class="blank-row">
<label>Background</label>
<input id="panel-canvas-color" type="text" class="brand-colorpicker allow-empty" autocomplete="off" value="" />
</div>
<div class="blank-row">
<button id="panel-canvas-create" type="button" class="brand-btn primary"><span class="material-icons">done</span>Create</button>
</div>
</div>
</div>
<div id="panel-ai" class="brand-tab">
<div class="brand-control-group">
<div style="text-align: center; padding: 20px;">
<p style="font-size: 0.9rem; color: #64748b; margin-bottom: 15px;">Experience the power of AI image generation.</p>
<button type="button" class="brand-btn premium-btn brand-lg-btn" onclick="document.getElementById('panel-open-ai').click();"><span class="material-icons">auto_awesome</span>Generate with AI</button>
</div>
</div>
</div>
</div>
</div>
<style>
#brand-templates .brand-modal-wrap{display:block;justify-content:initial;align-items:initial;height:auto;padding:0;overflow:visible}
#brand-templates .brand-tab{padding:0;box-shadow:none}
#brand-templates .inside-tabs-menu li{padding:8px 16px}
#brand-templates .brand-templates-menu-wrap{display:flex;gap:8px;align-items:center}
#brand-templates #panel-search{height:30px;padding:6px 10px;font-size:.85rem;border-radius:8px}
#brand-templates #panel-templates-menu{height:30px;padding:6px 28px 6px 10px;font-size:.85rem;border-radius:8px;min-width:170px}
#brand-templates #panel-image .brand-select-btn-block{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#brand-templates #panel-image .brand-btn-set{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#brand-templates #panel-image .brand-btn.brand-lg-btn{padding:8px 12px}
#brand-templates #panel-image .brand-file-field{margin-right:6px}
#brand-templates #panel-image .brand-select-btn-block>div:last-child{width:100%}
#brand-templates #panel-blank .panel-blank-grid{display:grid;grid-template-columns:1fr;row-gap:12px}
#brand-templates #panel-blank .blank-row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
#brand-templates #panel-blank label{margin-bottom:6px;display:block;font-size:.85rem;color:#334155}
#brand-templates #panel-blank .brand-form-field,#brand-templates #panel-blank .brand-select{height:30px;padding:6px 10px;font-size:.85rem;border-radius:8px;width:100%}
#brand-templates #panel-blank .brand-btn{padding:8px 12px}
#brand-templates .brand-control-group>div{width:90%}
.premium-btn {
background: linear-gradient(135deg, #00b6e8 0%, #7a45ff 55%, #e5226b 100%);
color: #fff !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 12px !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
box-shadow: 0 4px 15px rgba(122, 69, 255, 0.3) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
width: fit-content;
}
.premium-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(122, 69, 255, 0.4) !important;
filter: brightness(1.1);
}
.premium-btn .material-icons {
font-size: 20px;
}
</style>
<script>
(function(){
function loadTemplates(query, page){
var fd = new FormData();
fd.append('query', query || '');
fd.append('page', page || 1);
var xhr = new XMLHttpRequest();
xhr.open('POST', (window.BASE_URL || '') + '/files/connect/themes?no=14');
xhr.send(fd);
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
try {
var res = JSON.parse(xhr.responseText);
var html = '';
if(res.data && res.data.length){
for(var i=0;i<res.data.length;i++){
var item = res.data[i];
var title = item.post_title;
var title2 = item.post_title2;
var poster = item.post_poster;
var post_me = item.post_me;
html += '<div class="grid-item" data-keyword="'+title+'" data-category="collage">';
html += '<div class="brand-masonry-item-inner brand-select-template" id="'+post_me+'" data-json="'+(window.BASE_URL || '')+'/selectTheme?themeid='+item.post_design+'">';
html += '<div class="brand-img-wrap">';
html += '<img class="lazy" src="https://www.thebrand.ai/taswira.php?width=300&height=300&quality=70&cropratio=1:1&image=/v/uploads/gallery/'+poster+'" data-src="https://www.thebrand.ai/taswira.php?width=300&height=300&quality=70&cropratio=1:1&image=/v/uploads/gallery/'+poster+'" title="'+title+'"/>';
html += '</div>';
html += '<div class="brand-masonry-item-desc"> '+title2+'</div>';
html += '</div>';
html += '</div>';
}
} else {
html = '<span>No Data Found</span>';
}
document.getElementById('panel-post-data').innerHTML = html;
document.getElementById('panel-total-data').innerHTML = (res.total_data||'');
document.getElementById('panel-pagination').innerHTML = (res.pagination||'');
} catch(e) {}
}
};
}
function loadMyDesigns(query, page){
var fd = new FormData();
fd.append('query', query || '');
fd.append('page', page || 1);
var xhr = new XMLHttpRequest();
var userID = document.getElementById('userID') ? document.getElementById('userID').value : '';
xhr.open('POST', (window.BASE_URL || '') + '/files/connect/mytemplates?no=14&me='+userID);
xhr.send(fd);
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
try {
var res = JSON.parse(xhr.responseText);
var html = '';
if(res.data && res.data.length){
for(var i=0;i<res.data.length;i++){
var item = res.data[i];
var title = item.post_title;
var title2 = item.post_title2;
var poster = item.post_poster;
html += '<div class="grid-item" data-keyword="'+title+'" data-category="collage">';
html += '<div id="'+item.post_id+'" class="brand-masonry-item-inner brand-select-my-design" data-json="'+(window.BASE_URL || '')+'/selectTheme?themeid='+item.post_design+'">';
html += '<div class="brand-img-wrap">';
html += '<img class="lazy" src="https://www.thebrand.ai/taswira.php?width=300&height=300&quality=70&cropratio=1:1&image=/v/uploads/gallery/'+poster+'" data-src="https://www.thebrand.ai/taswira.php?width=300&height=300&quality=70&cropratio=1:1&image=/v/uploads/gallery/'+poster+'" title="'+title+'"/>';
html += '</div>';
html += '<div class="brand-masonry-item-desc"> '+title2+'</div>';
html += '</div>';
html += '</div>';
}
} else {
html = '<span>No Data Found</span>';
}
document.getElementById('panel-post-data-my').innerHTML = html;
document.getElementById('panel-total-data-my').innerHTML = (res.total_data||'');
document.getElementById('panel-pagination-my').innerHTML = (res.pagination||'');
} catch(e) {}
}
};
}
document.addEventListener('DOMContentLoaded', function(){
setTimeout(function(){ loadTemplates('', 1); }, 20000);
setTimeout(function(){ loadMyDesigns('', 1); }, 20000);
var sel = document.getElementById('panel-templates-menu');
if(sel){ sel.addEventListener('change', function(){ loadTemplates(this.value, 1); }); }
var inp = document.getElementById('panel-search');
if(inp){ inp.addEventListener('keyup', function(){ loadTemplates(this.value, 1); }); }
var imgInput = document.getElementById('panel-image-upload');
if(imgInput){ imgInput.addEventListener('change', function(e){
var file = e.target.files && e.target.files[0];
if(!file) return;
var reader = new FileReader();
reader.onload = function(ev){
var src = ev.target.result;
var evt = new Event('loadBase64Img');
document.dispatchEvent(new CustomEvent('loadBase64Img', { detail: { src: src } }));
// Fallback for listeners expecting (event, src)
$(document).trigger('loadBase64Img', [src, null, true]);
};
reader.readAsDataURL(file);
}); }
var sizeSel = document.getElementById('panel-canvas-size-select');
if(sizeSel){ sizeSel.addEventListener('change', function(){
var w = this.options[this.selectedIndex].getAttribute('data-width');
var h = this.options[this.selectedIndex].getAttribute('data-height');
if(w) document.getElementById('panel-canvas-width').value = w;
if(h) document.getElementById('panel-canvas-height').value = h;
}); }
var createBtn = document.getElementById('panel-canvas-create');
if(createBtn){ createBtn.addEventListener('click', function(){
var w = document.getElementById('panel-canvas-width').value;
var h = document.getElementById('panel-canvas-height').value;
var c = document.getElementById('panel-canvas-color').value;
var $m = $('#modal-blank-canvas');
if($('#brand-canvas-width').length){ $('#brand-canvas-width').val(w); }
if($('#brand-canvas-height').length){ $('#brand-canvas-height').val(h); }
if($('#brand-canvas-color').length){ $('#brand-canvas-color').val(c).trigger('change'); }
if($('#brand-canvas-create').length){ $('#brand-canvas-create').trigger('click'); }
}); }
$('#panel-open-ai').on('click', function(){
$('#modal-add-new').show();
setTimeout(function(){
$('#modal-add-new .brand-tabs-menu li[data-target="#modal-ai-image"]').trigger('click');
}, 0);
});
function parsePageFromEvent(e){
var el = e.target.closest('a,button,li,span,div');
if(!el) return null;
var dp = el.getAttribute && el.getAttribute('data-page');
if(dp && /^\d+$/.test(dp)) return parseInt(dp,10);
var txt = (el.textContent || '').trim();
if(/^\d+$/.test(txt)) return parseInt(txt,10);
var href = el.getAttribute && el.getAttribute('href');
if(href){
var m = href.match(/[?&]page=(\d+)/);
if(m) return parseInt(m[1],10);
}
return null;
}
function currentTemplateQuery(){
var inp = document.getElementById('panel-search');
var sel = document.getElementById('panel-templates-menu');
var v = (inp && inp.value) ? inp.value : (sel ? sel.value : '');
return v || '';
}
var tplPag = document.getElementById('panel-pagination');
if(tplPag){ tplPag.addEventListener('click', function(e){
var page = parsePageFromEvent(e);
if(page){ e.preventDefault(); e.stopPropagation();
loadTemplates(currentTemplateQuery(), page);
}
}); }
var myPag = document.getElementById('panel-pagination-my');
if(myPag){ myPag.addEventListener('click', function(e){
var page = parsePageFromEvent(e);
if(page){ e.preventDefault(); e.stopPropagation();
loadMyDesigns('', page);
}
}); }
});
})();
</script>
</div>
<script>
$(document).ready(function() {
// --- Resize Logic (Standard App Pattern) ---
let isResizing = false;
let initialHeight;
let initialY;
function startResizing(event) {
isResizing = true;
const $button = $(this);
const $div = $('#brand-brand');
initialHeight = $div.height();
initialY = event.clientY;
event.preventDefault();
}
function resizeDiv(event) {
if (isResizing) {
const $div = $('#brand-brand');
const newHeight = initialHeight - (event.clientY - initialY);
if (newHeight > 50) {
$div.height(newHeight);
}
}
}
function stopResizing() {
isResizing = false;
}
// Mouse events
$('#btn-resize-brand').on('mousedown', startResizing);
$(document).on('mousemove', resizeDiv);
$(document).on('mouseup', stopResizing);
// Touch events for mobile
$('#btn-resize-brand').on('touchstart', startResizing);
$(document).on('touchmove', resizeDiv);
$(document).on('touchend', stopResizing);
});
</script>
<style>
/* Search Section Styling */
.brand-search-wrapper {
position: relative;
margin-bottom: 15px;
}
.brand-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 20px;
pointer-events: none;
}
#template-search {
padding-left: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid #e2e8f0;
width: 100% !important;
font-size: 14px;
background: #fff;
transition: all 0.2s ease;
}
#template-search:focus {
border-color: #6366f1;
outline: none;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
/* Template Grid Styling */
.template-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
padding-bottom: 20px;
}
/* Template Card Styling */
.brand-template-card {
cursor: pointer;
position: relative;
background: #fff;
border-radius: 8px;
border: 1px solid #e2e8f0;
overflow: hidden;
transition: all 0.2s ease;
}
.brand-template-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border-color: #cbd5e1;
}
.brand-template-thumb {
aspect-ratio: 1;
background: #f8fafc;
overflow: hidden;
position: relative;
}
.brand-template-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.brand-template-card:hover .brand-template-thumb img {
transform: scale(1.05);
}
.brand-template-info {
padding: 10px;
border-top: 1px solid #f1f5f9;
background: #fff;
}
.brand-template-title {
font-size: 12px;
font-weight: 500;
color: #334155;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hover Overlay */
.brand-template-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.brand-template-card:hover .brand-template-overlay {
opacity: 1;
}
.brand-use-btn {
background: #fff;
color: #0f172a;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transform: translateY(10px);
transition: transform 0.2s;
}
.brand-template-card:hover .brand-use-btn {
transform: translateY(0);
}
#my-categories{overflow:visible}
#my-categories .mycats-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
#my-categories .mycats-title{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.02em;color:#383a3f;font-size:1.05rem;line-height:1}
#my-categories .mycats-subtitle{font-family:'Inter',sans-serif;font-weight:500;color:rgba(56,58,63,.65);font-size:.85rem;line-height:1}
#my-categories .mycats-tabs{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;overflow:auto;padding:4px;border-radius:999px;background:rgba(56,58,63,.05);border:1px solid rgba(56,58,63,.08);margin-bottom:8px}
#my-categories .mycats-tab{flex:0 0 auto;border:0;cursor:pointer;border-radius:999px;padding:5px 10px;font-family:'Inter',sans-serif;font-weight:500;font-size:.75rem;letter-spacing:0;color:rgba(56,58,63,.78);background:transparent;transition:background .16s ease, box-shadow .16s ease, transform .16s ease}
#my-categories .mycats-tab:hover{background:rgba(255,255,255,.85);box-shadow:0 10px 25px rgba(10, 20, 30, .10);transform:translateY(-1px)}
#my-categories .mycats-tab[aria-selected="true"]{background:#fff;color:rgba(56,58,63,.92);box-shadow:0 14px 35px rgba(10, 20, 30, .12);font-weight:600}
#my-categories .mycats-masonry{display:flex;flex-wrap:wrap;gap:5px;width:100%}
#my-categories .mycats-btn{display:inline-block;padding:4px 10px;background:#fff;border:1px solid rgba(56,58,63,.15);border-radius:999px;color:#383a3f;font-family:'Inter',sans-serif;font-weight:500;font-size:0.75rem;cursor:pointer;transition:all 0.15s ease;text-align:center;width:auto}
#my-categories .mycats-btn:hover{background:#f1f5f9;border-color:rgba(56,58,63,.3);transform:translateY(-1px)}
#my-categories .mycats-item{break-inside:avoid;margin:0}
</style>
<div id="brand-brand" class="brand-icon-panel-content panel-hide" >
<div class="brand-tabs">
<ul class="brand-tabs-menu">
<li class="active" data-target="#brand-tab-my-brand">My Brand</li>
<li data-target="#brand-tab-templates">Templates</li>
<li data-target="#brand-tab-shared">Team</li>
</ul>
<!-- Tab: My Brand -->
<div id="brand-tab-my-brand" class="brand-tab active">
<div class="brand-templates-menu-wrap" style="margin-top: 10px;margin-bottom:0px!important">
<select id="brand-select" class="brand-select brand-form-field">
<option value="" disabled selected>Select a Brand...</option>
</select>
</div>
<div id="brand-assets-container" class="brand-templates-content" style="padding: 10px;">
<!-- Loading State -->
<div class="brand-pagination light-theme simple-pagination">Loading Assets...</div>
</div>
<div id="brand-texts-setting" style="padding: 10px;" >
<h6 style="margin: 0 0 10px 0; font-size: 12px; text-transform: uppercase; color: #888;">Brand Details</h6>
<ul class="brand-accordion" id="brand_identity_list">
</ul>
</div>
</div>
<!-- Tab: Templates -->
<div id="brand-tab-templates" class="brand-tab">
<div class="brand-templates-menu-wrap" style="margin-top: 10px;margin-bottom:0px!important">
<div class="brand-search-wrapper">
<span class="material-icons brand-search-icon">search</span>
<input type="text" id="template-search" placeholder="Search templates..." class="brand-form-field">
</div>
</div>
<div id="my-categories" style="margin-bottom:10px">
<!-- <div class="mycats-head">
<div class="mycats-title">Relevant Categories</div>
<div class="mycats-subtitle">Curated for you</div>
</div> -->
<div id="mycats-tabs" class="mycats-tabs" role="tablist" aria-label="My categories"></div>
<div id="mycats-masonry" class="mycats-masonry"></div>
</div>
<div class="brand-templates-content">
<div class="brand-grid-wrap">
<div id="brand-templates-container" class="template-grid">
<div class="brand-pagination light-theme simple-pagination">Loading Templates...</div>
</div>
</div>
</div>
</div>
<!-- Tab: Shared / Team -->
<div id="brand-tab-shared" class="brand-tab">
<div class="brand-templates-menu-wrap" style="margin-top: 10px;margin-bottom:0px!important">
<div id="shared-breadcrumb" style="font-size: 13px; color: #666; padding: 5px;">
<span data-index="0" style="cursor: pointer; font-weight: bold;">Home</span>
</div>
</div>
<div class="brand-templates-content">
<div class="brand-grid-wrap">
<div id="brand-shared-container" class="brand-grid brand-elements-grid four-column">
<div class="brand-pagination light-theme simple-pagination">Loading Shared Content...</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
(function() {
const API_URL = 'brandDetails.php';
const ASSETS_BASE_URL = 'https://www.thebrand.ai/wowX/dashboard/';
const TASWIRA_BASE_URL = 'https://www.thebrand.ai/taswira.php';
// State
const state = {
brands: [],
currentBrandId: null,
templates: [],
shared: {},
currentPath: [{id: 'root', name: 'Home'}],
isLoading: false,
context: {
creator: 'Gamer',
type: '',
interests: ''
}
};
var myCategoriesData = [];
const root = document.getElementById('brand-brand');
// DOM Elements
const els = {
tabs: root ? root.querySelectorAll('.brand-tabs-menu li') : [],
panes: root ? root.querySelectorAll('.brand-tab') : [],
brandSelect: document.getElementById('brand-select'),
assetsContainer: document.getElementById('brand-assets-container'),
templatesContainer: document.getElementById('brand-templates-container'),
sharedContainer: document.getElementById('brand-shared-container'),
sharedBreadcrumb: document.getElementById('shared-breadcrumb'),
templateSearch: document.getElementById('template-search')
};
// Init
function init() {
bindEvents();
loadBrands();
if (window.editorContext) {
updateContext(window.editorContext);
}
window.addEventListener('editor-context-change', (e) => {
if (e.detail) updateContext(e.detail);
});
}
function updateContext(newContext) {
state.context = { ...state.context, ...newContext };
const activeTab = root ? root.querySelector('.brand-tabs-menu li.active') : null;
if (activeTab && activeTab.dataset.target === '#brand-tab-templates') {
loadTemplates();
}
}
// Events
function bindEvents() {
els.tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = tab.dataset.target || '';
if (target === '#brand-tab-templates' && els.templatesContainer && els.templatesContainer.innerHTML.includes('Loading')) {
loadTemplates();
} else if (target === '#brand-tab-shared' && els.sharedContainer && els.sharedContainer.innerHTML.includes('Loading')) {
loadShared();
}
});
});
if (els.brandSelect) {
els.brandSelect.addEventListener('change', (e) => {
state.currentBrandId = e.target.value;
renderBrandAssets(state.currentBrandId);
});
}
if (els.assetsContainer) {
els.assetsContainer.addEventListener('click', (e) => {
const imgEl = e.target && e.target.closest('img');
if (!imgEl) return;
const fullUrl = imgEl.getAttribute('data-full') || imgEl.getAttribute('src') || '';
if (!fullUrl) return;
if (window.addImageObjectFromURL) window.addImageObjectFromURL(fullUrl);
});
}
let debounceTimer;
if (els.templateSearch) {
els.templateSearch.addEventListener('input', (e) => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
loadTemplates(e.target.value);
}, 500);
});
}
if (els.sharedBreadcrumb) {
els.sharedBreadcrumb.addEventListener('click', (e) => {
if (e.target.tagName === 'SPAN' && e.target.dataset.index) {
const index = parseInt(e.target.dataset.index);
navigateToPathIndex(index);
}
});
}
var mycatsTabsEl = document.getElementById('mycats-tabs');
if (mycatsTabsEl) {
mycatsTabsEl.addEventListener('click', function(e){
var btn = e.target.closest('.mycats-tab');
if(!btn) return;
var cat = btn.getAttribute('data-cat') || '';
setMyCatsActive(cat);
});
}
}
// API Helpers
function getAssetUrl(path) {
if (!path) return '';
if (path.startsWith('http')) return path;
let normalized = path.replace(/^\//, '');
// Prevent double prefixing if path already includes the base structure
if (normalized.startsWith('wowX/dashboard/')) {
return 'https://www.thebrand.ai/' + normalized;
}
return ASSETS_BASE_URL + normalized;
}
function getTaswiraUrl(imagePath) {
if (!imagePath) return '';
let normalizedPath = imagePath;
// Check for specific prefixes that indicate absolute paths we support
if (imagePath.startsWith('/wowX/dashboard/') || imagePath.startsWith('/v/uploads/gallery/')) {
normalizedPath = imagePath;
} else {
// Default legacy behavior
normalizedPath = '/v/uploads/gallery/' + imagePath.replace(/^(\/v\/uploads\/gallery\/)/, '');
}
return `${TASWIRA_BASE_URL}?width=560&height=560&quality=70&cropratio=1:1&image=${normalizedPath}`;
}
async function fetchData(params) {
try {
const query = new URLSearchParams(params).toString();
const res = await fetch(`${API_URL}?${query}`);
if (!res.ok) throw new Error('Network response was not ok');
return await res.json();
} catch (error) {
console.error('Brand API Error:', error);
return null;
}
}
// --- My Brand Logic ---
async function loadBrands() {
const data = await fetchData({ brands: 'yes' });
if (data && Array.isArray(data)) {
state.brands = data;
renderBrandSelect();
if (state.brands.length > 0) {
state.currentBrandId = state.brands[0].id;
els.brandSelect.value = state.currentBrandId;
renderBrandAssets(state.currentBrandId);
}
} else {
state.brands = [];
renderBrandSelect();
}
}
function renderBrandSelect() {
els.brandSelect.innerHTML = '<option value="" disabled>Select a Brand...</option>';
state.brands.forEach(brand => {
const opt = document.createElement('option');
opt.value = brand.id;
opt.textContent = brand.name + (brand.is_owner ? '' : ' (Shared)');
els.brandSelect.appendChild(opt);
});
}
function renderBrandAssets(brandId) {
const brand = state.brands.find(b => b.id == brandId);
if (!brand) return;
fetchBrandDetails(brandId);
}
async function fetchBrandDetails(brandId) {
els.assetsContainer.innerHTML = '<div class="brand-pagination light-theme simple-pagination">Loading Assets...</div>';
const data = await fetchData({ brandid: brandId });
// Ensure brand_id is preserved even if API returns partial data
const finalData = data || {};
if (!finalData.brand_id) finalData.brand_id = brandId;
renderAssetsUI(finalData);
}
function renderAssetsUI(brandData) {
let html = '';
const brandId = brandData.brand_id || 'shared';
const fontSuffix = `-${brandId}`;
// 1. Load Font Faces
const fonts = brandData.fonts || (brandData.brandkits ? brandData.brandkits.flatMap(k => k.fonts || []) : []);
const fontSelections = brandData.font_selections || {};
// Helper to normalize font names for comparison (remove quotes, trim, lowercase)
const normalizeFontName = (name) => (name || '').toLowerCase().replace(/['"]/g, '').trim();
// Normalize selections to lowercase for case-insensitive lookup
const normalizedSelections = {};
Object.keys(fontSelections).forEach(k => {
normalizedSelections[normalizeFontName(k)] = fontSelections[k];
});
const styleId = 'brand-custom-fonts';
let styleEl = document.getElementById(styleId);
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.id = styleId;
document.head.appendChild(styleEl);
}
if (fonts.length) {
let css = '';
fonts.forEach(f => {
let url = f.file_path;
if (!url.startsWith('http') && !url.startsWith('/')) {
url = getAssetUrl(url);
}
const safeName = f.font_name.replace(/'/g, "\\'");
const uniqueName = `${safeName}${fontSuffix}`;
css += `
@font-face {
font-family: '${uniqueName}';
src: url('${url}') format('truetype');
font-display: swap;
}
`;
});
styleEl.textContent = css;
} else {
styleEl.textContent = '';
}
// Helper for sections
const renderSection = (title, content) => `
<div style="margin-bottom: 20px;">
<h6 style="margin: 0 0 10px 0; font-size: 12px; text-transform: uppercase; color: #888;">${title}</h6>
<div class="brand-grid brand-elements-grid four-column" style="gap: 10px;">
${content}
</div>
</div>
`;
// Colors
const colors = brandData.colors || (brandData.brandkits ? brandData.brandkits.flatMap(k => k.colors || []) : []);
if (colors.length) {
html += `
<div style="margin-bottom: 20px;">
<h6 style="margin: 0 0 10px 0; font-size: 12px; text-transform: uppercase; color: #888;">Colors</h6>
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
${colors.map(c => {
const code = c.color_code || c;
return `<div style="width: 30px; height: 30px; background-color: ${code}; border-radius: 4px; border: 1px solid #ddd; cursor: pointer;" title="${code}" onclick="copyToClipboard('${code}')"></div>`;
}).join('')}
</div>
</div>`;
}
// Font Styles
const fontStyles = brandData.font_styles || (brandData.brandkits ? brandData.brandkits.flatMap(k => k.font_styles || []) : []);
if (fontStyles.length) {
html += `
<div style="margin-bottom: 20px;">
<h6 style="margin: 0 0 10px 0; font-size: 12px; text-transform: uppercase; color: #888;">Font Styles</h6>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
${fontStyles.map(s => {
// Resolve font family from selections if available
let fontFamily = s.font_family || s.font_name || 'inherit';
let uniqueFontFamily = fontFamily;
const lookupType = normalizeFontName(s.font_type);
// Only override if source is NOT google/explicit or if explicit font is missing
const isGoogleOrExplicit = (s.font_source === 'google' || !s.font_id);
if (!isGoogleOrExplicit && lookupType && normalizedSelections[lookupType]) {
const fontId = normalizedSelections[lookupType];
const linkedFont = fonts.find(f => f.id == fontId);
if (linkedFont) {
fontFamily = linkedFont.font_name;
const safeName = fontFamily.replace(/'/g, "\\'");
uniqueFontFamily = `${safeName}${fontSuffix}`;
}
} else {
// Try to match with loaded fonts to apply suffix
const cleanFamily = normalizeFontName(fontFamily);
const found = fonts.find(f => normalizeFontName(f.font_name) === cleanFamily);
if (found) {
const safeName = found.font_name.replace(/'/g, "\\'");
uniqueFontFamily = `${safeName}${fontSuffix}`;
}
}
return `
<div style="border: 1px solid #eee; padding: 15px; border-radius: 4px; background: #fff; display: flex; flex-direction: column; cursor: pointer;" onclick="applyFontStyle(this)" data-font-family="${uniqueFontFamily}" data-font-size="${s.font_size || '16'}" data-fill="${s.text_color || s.color || s.color_code || '#333'}" data-font-weight="${s.font_weight || 'normal'}" data-line-height="${s.line_height || '1.4'}">
<div style="font-family: '${uniqueFontFamily}', sans-serif; font-size: 10px; color: #aaa; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px;">${s.font_type || 'Style'}</div>
<div style="
font-family: '${uniqueFontFamily}', sans-serif;
font-size: ${s.font_size || '16px'};
color: ${s.text_color || s.color || s.color_code || '#333'};
font-weight: ${s.font_weight || 'normal'};
line-height: ${s.line_height || '1.4'};
letter-spacing: ${s.letter_spacing || 'normal'};
text-transform: ${s.text_transform || 'none'};
">
${s.font_type || 'Sample Text'}
</div>
</div>
`}).join('')}
</div>
</div>`;
}
// Logos
const logos = brandData.logos || (brandData.brandkits ? brandData.brandkits.flatMap(k => k.logos || []) : []);
if (logos.length) {
html += renderSection('Logos', logos.map(l => {
const fullUrl = getAssetUrl(l.file_path || l.url);
return `
<div style="border: 1px solid #eee; border-radius: 4px; padding: 5px; cursor: grab; background: #fff; display: flex; align-items: center; justify-content: center; height: 80px;" draggable="true" ondragstart="handleDragStart(event, '${fullUrl}', 'image')">
<img src="${fullUrl}" data-full="${fullUrl}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
</div>`;
}).join(''));
}
// Other Assets (Photos, Graphics, Icons)
['photos', 'graphics', 'icons'].forEach(type => {
const assets = brandData[type] || [];
if (assets.length) {
html += renderSection(type.charAt(0).toUpperCase() + type.slice(1), assets.map(a => {
const fullUrl = getAssetUrl(a.file_path || a.url);
return `
<div style="border: 1px solid #eee; border-radius: 4px; padding: 5px; cursor: grab; background: #fff; display: flex; align-items: center; justify-content: center; height: 80px;" draggable="true" ondragstart="handleDragStart(event, '${fullUrl}', 'image')">
<img src="${fullUrl}" data-full="${fullUrl}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
</div>`;
}).join(''));
}
});
// Fonts (Typography) - Last Section
if (fonts.length) {
html += `
<div style="margin-bottom: 20px;">
<h6 style="margin: 0 0 10px 0; font-size: 12px; text-transform: uppercase; color: #888;">Typography</h6>
<div style="display: flex; flex-direction: column; gap: 5px;">
${fonts.slice(0, 10).map(f => {
const safeName = f.font_name.replace(/'/g, "\\'");
const uniqueName = `${safeName}${fontSuffix}`;
return `
<div style="font-family: '${uniqueName}', sans-serif; padding: 8px; border: 1px solid #eee; background: #fff; cursor: pointer;" onclick="applyFontStyle(this)" data-font-family="${uniqueName}">
${f.font_name}
</div>
`}).join('')}
</div>
</div>`;
}
els.assetsContainer.innerHTML = html || '<div class="notice notice-info">No assets found for this brand.</div>';
}
// --- Templates Logic ---
async function loadTemplates(search = '') {
els.templatesContainer.innerHTML = '<div class="brand-pagination light-theme simple-pagination">Loading Templates...</div>';
const params = { templates: 'yes' };
if (search) params.query = search;
// Add context params
if (state.context.type) params.industry = state.context.type;
if (state.context.interests) params.interests = state.context.interests;
const data = await fetchData(params);
let templates = [];
if (data) {
if (Array.isArray(data)) {
templates = data;
} else if (data.curated_templates && Array.isArray(data.curated_templates)) {
templates = data.curated_templates;
} else if (data.templates && Array.isArray(data.templates)) {
templates = data.templates;
}
if (data.my_categories && Array.isArray(data.my_categories)) {
myCategoriesData = data.my_categories;
renderMyCategories();
}
}
renderTemplates(templates);
}
function renderTemplates(templates) {
if (!templates || templates.length === 0) {
els.templatesContainer.innerHTML = '<div class="notice notice-info">No templates found.</div>';
return;
}
// Group by category if needed, or just flat list.
// The previous implementation had categories. Let's do a simple flat grid for now as it matches standard "search results" view.
// Or if we want "Recommended", we can separate them.
let html = '';
// Filter recommended vs others if context is active?
// For simplicity and matching "app style", let's just dump them in the grid.
html = templates.map(t => {
const poster = t.post_poster || t.poster || t.url || t.image_path;
const posterUrl = getTaswiraUrl(poster);
return `
<div class="brand-template-card" onclick="loadTemplate(${t.id || t.post_id})">
<div class="brand-template-thumb">
<img src="${posterUrl}" loading="lazy">
<div class="brand-template-overlay">
<span class="brand-use-btn">Use Template</span>
</div>
</div>
<div class="brand-template-info">
<div class="brand-template-title">${t.title || t.post_title || 'Untitled'}</div>
</div>
</div>
`;
}).join('');
els.templatesContainer.innerHTML = html;
}
var mycatsState = { groups: [], active: '' };
function normKey(s){ return (s || '').toString().toLowerCase().replace(/\s+/g,' ').trim(); }
function pickRatioBadgeAndAR(label){
var nk = normKey(label);
if(nk.indexOf('story') !== -1 || nk.indexOf('tiktok') !== -1){ return {badge:'9:16', ar:'9/16'}; }
if(nk.indexOf('thumbnail') !== -1 || nk.indexOf('youtube') !== -1){ return {badge:'16:9', ar:'16/9'}; }
return {badge:'', ar:'1/1'};
}
function buildMyCategoryGroups(data){
var groups = [];
if(!data || !data.length) return groups;
for(var i=0;i<data.length;i++){
var cat = data[i];
if(!cat || !cat.children || !cat.children.length) continue;
var parent = (cat.category || '').toString().trim();
if(!parent) continue;
var seen = {};
var children = [];
for(var j=0;j<cat.children.length;j++){
var label = (cat.children[j] || '').toString().trim();
var k = normKey(label);
if(!k || seen[k]) continue;
seen[k] = true;
children.push({label: label, parent: parent});
}
if(children.length){ groups.push({category: parent, children: children}); }
}
return groups;
}
function defaultPreviewDataUrl(label, parent){
var t1 = (label || '').toString().slice(0, 34);
var t2 = (parent || '').toString().slice(0, 34);
var svg =
'<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1200\" height=\"1200\" viewBox=\"0 0 1200 1200\">' +
'<defs>' +
'<linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +
'<stop offset=\"0\" stop-color=\"#0f172a\" stop-opacity=\".22\"/>' +
'<stop offset=\".55\" stop-color=\"#475569\" stop-opacity=\".10\"/>' +
'<stop offset=\"1\" stop-color=\"#94a3b8\" stop-opacity=\".06\"/>' +
'</linearGradient>' +
'<linearGradient id=\"h\" x1=\"0\" y1=\"1\" x2=\"1\" y2=\"0\">' +
'<stop offset=\"0\" stop-color=\"#111827\" stop-opacity=\".70\"/>' +
'<stop offset=\"1\" stop-color=\"#111827\" stop-opacity=\"0\"/>' +
'</linearGradient>' +
'</defs>' +
'<rect width=\"1200\" height=\"1200\" fill=\"url(#g)\"/>' +
'<rect y=\"720\" width=\"1200\" height=\"480\" fill=\"url(#h)\"/>' +
'<g fill=\"#ffffff\" font-family=\"Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial\" text-rendering=\"geometricPrecision\">' +
'<text x=\"70\" y=\"940\" font-size=\"62\" font-weight=\"800\" opacity=\".98\">' + escapeHtml(t1) + '</text>' +
'<text x=\"70\" y=\"1025\" font-size=\"40\" font-weight=\"700\" opacity=\".75\">' + escapeHtml(t2) + '</text>' +
'</g>' +
'</svg>';
return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}
function escapeHtml(s){
return (s || '').toString()
.replace(/&/g,'&')
.replace(/</g,'<')
.replace(/>/g,'>')
.replace(/\"/g,'"')
.replace(/'/g,''');
}
function escapeHtmlAttr(s){ return escapeHtml(s); }
async function fetchPreviewForQuery(query){
var payload = null;
var res = await fetchData({ templates: 'yes', query: query || '' });
if(res && res.curated_templates && res.curated_templates.length){
var item = res.curated_templates[0];
payload = { title: item.post_title || item.title || '', poster: item.post_poster || item.poster || '' };
}
return payload;
}
function renderMyCatsTabs(){
var tabs = document.getElementById('mycats-tabs');
if(!tabs) return;
if(!mycatsState.groups.length){
tabs.innerHTML = '';
return;
}
var html = '';
for(var i=0;i<mycatsState.groups.length;i++){
var g = mycatsState.groups[i];
var selected = (g.category === mycatsState.active);
html += '<button type="button" class="mycats-tab" role="tab" aria-selected="'+(selected?'true':'false')+'" data-cat="'+escapeHtmlAttr(g.category)+'">';
html += escapeHtml(g.category);
html += '</button>';
}
tabs.innerHTML = html;
}
function setMyCatsActive(cat){
mycatsState.active = (cat || '').toString();
renderMyCatsTabs();
renderMyCatsGrid();
}
function renderMyCatsGrid(){
var root = document.getElementById('mycats-masonry');
if(!root) return;
var g = null;
for(var i=0;i<mycatsState.groups.length;i++){
if(mycatsState.groups[i].category === mycatsState.active){ g = mycatsState.groups[i]; break; }
}
var items = g && g.children ? g.children : [];
if(!items.length){
root.innerHTML = '<div style="padding:10px 6px;color:rgba(56,58,63,.6);font-weight:700">No categories found.</div>';
return;
}
var html = '';
for(var j=0;j<items.length;j++){
var it = items[j];
html += '<button type="button" class="mycats-btn" data-label="'+escapeHtmlAttr(it.label)+'" data-parent="'+escapeHtmlAttr(it.parent || '')+'" aria-label="'+escapeHtmlAttr(it.label)+'">';
html += escapeHtml(it.label);
html += '</button>';
}
root.innerHTML = html;
}
// Event Listener for My Categories Labels
(function(){
var grid = document.getElementById('mycats-masonry');
if(grid){
grid.addEventListener('click', function(e){
var btn = e.target.closest('.mycats-btn');
if(!btn) return;
var q = btn.getAttribute('data-label') || '';
if(!q) return;
var inp = document.getElementById('template-search');
if(inp){ inp.value = q; }
loadTemplates(q);
});
}
})();
function renderMyCategories(){
mycatsState.groups = buildMyCategoryGroups(myCategoriesData || []);
mycatsState.active = (mycatsState.groups[0] && mycatsState.groups[0].category) ? mycatsState.groups[0].category : '';
renderMyCatsTabs();
renderMyCatsGrid();
}
// --- Shared / Team Logic ---
async function loadShared() {
renderSharedContent();
}
async function navigateToPathIndex(index) {
state.currentPath = state.currentPath.slice(0, index + 1);
renderBreadcrumb();
renderSharedContent();
}
async function openFolder(folderId, folderName) {
state.currentPath.push({ id: folderId, name: folderName });
renderBreadcrumb();
renderSharedContent();
}
function renderBreadcrumb() {
els.sharedBreadcrumb.innerHTML = state.currentPath.map((item, index) => `
<span data-index="${index}" style="${index === state.currentPath.length - 1 ? 'font-weight: bold; color: #333; cursor: default;' : 'cursor: pointer; color: #666;'}">${item.name}</span>
${index < state.currentPath.length - 1 ? '<span style="margin: 0 5px; color: #ccc;">/</span>' : ''}
`).join('');
}
async function renderSharedContent() {
els.sharedContainer.innerHTML = '<div class="brand-pagination light-theme simple-pagination">Loading...</div>';
const currentFolderId = state.currentPath[state.currentPath.length - 1].id;
let params = {};
if (currentFolderId === 'root') {
params = { shared: 'yes' };
} else {
params = { folder: currentFolderId };
}
const data = await fetchData(params);
if (!data) {
els.sharedContainer.innerHTML = '<div class="notice notice-info">Failed to load content.</div>';
return;
}
let html = '';
// Handle Root (Shared) View
if (params.shared) {
console.log('Shared Data:', data);
// Folders
if (data.folders && data.folders.length) {
html += data.folders.map(f => {
const id = f.folder_id || f.id;
const name = f.folder_name || f.name || 'Untitled Folder';
const safeName = name.replace(/'/g, "\\'");
return `
<div onclick="openFolder('${id}', '${safeName}')" style="cursor: pointer; position: relative; aspect-ratio: 1; background: #fdfdfd; border: 1px solid #eee; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<span class="material-icons" style="font-size: 48px; color: #fbbf24;">folder</span>
<div style="font-size: 11px; margin-top: 5px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555;">${name}</div>
</div>
`}).join('');
}
// Templates (Shared Files at root)
if (data.templates && data.templates.length) {
html += data.templates.map(f => {
const thumb = getTaswiraUrl(f.poster || f.url);
return `
<div style="cursor: grab; position: relative; aspect-ratio: 1; background: #f9f9f9; border-radius: 4px; overflow: hidden;" draggable="true" ondragstart="handleDragStart(event, '${thumb}', 'image')">
<img src="${thumb}" style="width: 100%; height: 100%; object-fit: cover;">
</div>
`;
}).join('');
}
}
// Handle Folder View
else if (params.folder) {
// Combine designs and stock images for uniform rendering
const items = [
...(data.designs || []).map(d => ({ ...d, type: 'design' })),
...(data.stock_images || []).map(s => ({ ...s, type: 'stock' })),
// Also handle 'photo' type if present in the response
...(data.photos || []).map(p => ({ ...p, type: 'photo' }))
];
if (items.length) {
html += items.map(f => {
// Prioritize the correct property for each type to ensure valid thumbnail
let thumbPath = f.full_path || f.file_path || f.poster || f.url;
// If it's a design/template, it might have 'poster' or 'image_path'
if (f.type === 'design') {
thumbPath = f.full_path || f.poster || f.post_poster || f.image_path || f.file_path;
}
// If it's a stock/photo, it usually has 'file_path' or 'url'
else if (f.type === 'stock' || f.type === 'photo') {
thumbPath = f.full_path || f.file_path || f.url;
}
const thumb = getTaswiraUrl(thumbPath);
const fullUrl = getAssetUrl(thumbPath);
return `
<div class="folder-share-pick" style="cursor: pointer; position: relative; aspect-ratio: 1; background: #f9f9f9; border-radius: 4px; overflow: hidden;" draggable="true" ondragstart="handleDragStart(event, '${fullUrl}', 'image')">
<img src="${thumb}" data-full="${fullUrl}" style="width: 100%; height: 100%; object-fit: cover;">
</div>
`;
}).join('');
}
}
if (!html) {
html = '<div class="notice notice-info" style="grid-column: 1/-1;">This folder is empty.</div>';
}
els.sharedContainer.innerHTML = html;
// Expose openFolder to global scope for onclick attributes
window.openFolder = openFolder;
}
// Global Helpers
window.handleDragStart = function(e, url, type) {
e.dataTransfer.setData('text/plain', url);
e.dataTransfer.setData('type', type);
};
window.copyToClipboard = function(text) {
try { navigator.clipboard.writeText(text); } catch(_){}
try { if (window.toastr) { toastr.success('Copied ' + String(text) + ' to clipboard'); } } catch(_){}
try {
var canvas = window.brandCanvas;
if (!canvas) return;
var obj = canvas.getActiveObject();
if (!obj) return;
var code = String(text || '').trim();
if (!code) return;
if (obj._objects && obj._objects.length) {
for (var i = 0; i < obj._objects.length; i++) {
var child = obj._objects[i];
if (child && child.fill !== undefined && child.fill !== '') {
child.set('fill', code);
}
}
}
if (obj.fill !== undefined && obj.fill !== '') {
obj.set('fill', code);
}
canvas.requestRenderAll();
canvas.fire('object:modified', { target: obj });
try { if (window.toastr) { toastr.success('Applied ' + code + ' to current layer fill'); } } catch(_){}
} catch(_){}
};
window.applyFontStyle = function(el) {
var canvas = window.brandCanvas;
if (!canvas) return;
var obj = canvas.getActiveObject();
// Helper to check if object is text
function isText(o) {
return o && (o.type === 'i-text' || o.type === 'text' || o.type === 'textbox' || o.objectType === 'curvedText');
}
if (obj && isText(obj)) {
var ds = el.dataset;
var updates = {};
if (ds.fontFamily) {
updates.fontFamily = ds.fontFamily;
// Attempt to load font via FontManager if available
if (window.fontManager) {
var weight = ds.fontWeight || 'normal';
var variant = weight;
if (weight === 'normal') variant = 'regular';
else if (weight === 'bold') variant = '700';
window.fontManager.loadFont(ds.fontFamily, variant).then(function(success) {
if (success && canvas) {
canvas.requestRenderAll();
}
});
}
}
if (ds.fontSize) {
var fs = parseInt(ds.fontSize);
if (!isNaN(fs) && fs > 0) updates.fontSize = fs;
}
if (ds.fill && ds.fill !== 'undefined' && ds.fill !== '') updates.fill = ds.fill;
if (ds.fontWeight) updates.fontWeight = ds.fontWeight;
if (ds.lineHeight) {
var lh = parseFloat(ds.lineHeight);
if (!isNaN(lh) && lh > 0) updates.lineHeight = lh;
}
if (ds.letterSpacing) {
var ls = parseFloat(ds.letterSpacing);
if (!isNaN(ls)) updates.charSpacing = ls;
}
if (ds.textTransform) {
updates.textTransform = ds.textTransform;
}
if (ds.textAlign) {
updates.textAlign = ds.textAlign;
}
obj.set(updates);
canvas.requestRenderAll();
canvas.fire('object:modified', { target: obj });
try { if (window.toastr) { toastr.success('Applied font style'); } } catch(_){}
} else {
try { if (window.toastr) { toastr.info('Select a text layer to apply font style'); } } catch(_){}
}
};
window.loadTemplate = function(id) {
const event = new CustomEvent('template-load-request', { detail: { id } });
window.dispatchEvent(event);
};
window.addImageObjectFromURL = function(url) {
var canvas = window.brandCanvas;
if (!canvas || !window.fabric || !url) return;
try {
fetch(url, { cache: 'no-cache' }).then(function(res){ return res.blob(); }).then(function(blob){
var reader = new FileReader();
reader.onload = function(ev){
var src = ev.target.result;
var tempImg = new Image();
tempImg.src = src;
tempImg.onload = function(){
var image = new fabric.Image(tempImg, {
objectType: 'image',
objectCaching: true,
roundedCorders: 0,
stroke: '#fff',
strokeWidth: 0,
originX: 'center',
originY: 'center',
left: canvas.getWidth() / 2,
top: canvas.getHeight() / 2
});
image.set({ ogWidth: image.get('width'), ogHeight: image.get('height') });
var cw = canvas.getWidth(), ch = canvas.getHeight();
var iw = image.width, ih = image.height;
var scale = 1;
if (iw > cw || ih > ch) {
scale = Math.min(cw / iw, ch / ih) * 0.8;
}
image.scale(scale);
canvas.add(image);
canvas.setActiveObject(image);
canvas.requestRenderAll();
};
};
reader.readAsDataURL(blob);
}).catch(function(){});
} catch(_){}
};
// Run
init();
})();
</script>
<!-- Drawing START -->
<div id="brand-draw" class="brand-icon-panel-content panel-hide"> <button class="resize-button">Resize</button>
</div> <!-- Drawing END -->
<!-- Settings START -->
<div id="brand-settings" class="brand-icon-panel-content panel-hide"> <button class="resize-button">Resize</button>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Canvas Background</label>
<div class="brand-control">
<input id="custom-image-background" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="" />
</div>
</div>
<div class="brand-sub-settings" style="display: block;"></div>
<div class="brand-sub-settings" style="display: block;"></div>
<h5>Preferences</h5>
<div id="brand-preferences">
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Font Size<span>14</span></label>
<div class="brand-control">
<input id="custom-font-size" type="range" min="10" max="18" value="14" step="1"
class="brand-slider preference" autocomplete="off">
</div>
</div>
<div class="brand-control-wrap-half">
<label class="brand-control-label">Theme</label>
<div class="brand-control">
<select id="custom-theme" class="brand-select preference" autocomplete="off">
<option value="dark" selected>Dark</option>
<option value="light">Light</option>
</select>
</div>
</div>
<div class="brand-control-wrap control-text-color">
<label class="brand-control-label">Ruler Guide Color</label>
<div class="brand-control">
<input id="ruler-guide-color" type="text" class="brand-colorpicker allow-empty preference"
autocomplete="off" value="#00b6e8" />
</div>
</div>
<div class="brand-control-wrap label-block">
<label class="brand-control-label slider-label">Ruler Guide Size<span>1</span></label>
<div class="brand-control">
<input id="ruler-guide-size" type="range" min="1" max="10" value="1" step="1"
class="brand-slider preference" autocomplete="off">
</div>
</div>
</div>
<div class="brand-control-wrap label-block">
<div class="brand-control">
<button id="brand-preferences-save" type="button"
class="brand-btn brand-lg-btn btn-full primary">Save Preferences</button>
</div>
</div>
</div> <!-- Settings END -->
</div>
</div>
<!-- Toggle Left -->
<div id="brand-toggle-left" class="closed">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
<path d="M15 3v18"></path>
</svg>
<span id="brand-toggle-left-label">TOOLS</span>
</div>
<!-- Right Column START -->
<!-- Body END -->
<!-- Toggle Right Button -->
<div id="brand-toggle-right">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
<path d="M15 3v18"></path>
</svg>
<span id="brand-toggle-right-label">Layers</span>
</div>
<!-- Right Column START -->
<div id="brand-right-col" style="transform: scale(0.9); transform-origin: right bottom; pointer-events: auto;">
<h6 class="brand-layers-title"><span class="material-icons">layers</span>Layers</h6>
<div id="brand-no-layer">
<!-- No layers found. You can add text, element, image etc. to the canvas to create a layer. <a href="#"
class="brand-toggle-right">Close Panel</a> -->
</div>
<!-- Layer list - Don't remove it! -->
<ul id="brand-layers"></ul>
<!-- Bulk delete layers -->
<div id="brand-layer-delete-wrap">
<select id="brand-layer-select" class="brand-select" autocomplete="off">
<option value="all" selected>All Layers</option>
<option value="textbox">Texts</option>
<option value="image">Images</option>
<option value="frame">Frames</option>
<option value="element">Elements</option>
<option value="circle">Circles</option>
<option value="ellipse">Ellipses</option>
<option value="square">Squares</option>
<option value="rectangle">Rectangles</option>
<option value="triangle">Triangles</option>
<option value="trapezoid">Trapezoids</option>
<option value="pentagon">Pentagons</option>
<option value="octagon">Octagons</option>
<option value="emerald">Emeralds</option>
<option value="star">Stars</option>
<option value="diamonds">Diamonds</option>
<option value="parallelogram">Parallelograms</option>
<option value="customShape">Custom Shapes</option>
</select>
<button id="brand-layer-delete" class="brand-btn primary"><span
class="material-icons">delete</span></button>
</div>
</div>
<!-- Right Column END -->
<!-- Icon Panel END -->
<!-- Body START -->
<div class="TheBrandUtilHeader" style="background-color:none!important"> <div id="brand-pages"></div></div>
<!-- Body END -->
<style>
/* #pages-scroll-container {
width: 100%;
height: 100vh;
overflow-y: auto;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
#pages-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
}
.page-container {
display: flex;
justify-content: center;
align-items: center;
}
*/
/* */
#pages-scroll-container {
width: 100%;
display: flex;
justify-content: center;
padding-top: 10px;
}
.page-container {
width: 100%;
display: flex;
justify-content: center;
}
.canvas-container {
display: flex;
justify-content: center;
}
.brand-loader-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
border-radius: 999px;
overflow: hidden;
background: rgba(15, 23, 42, 0.08);
display: none;
z-index: 1000;
pointer-events: none;
}
.brand-loader-progress > span {
display: block;
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(0, 182, 232, 0) 0%, #00b6e8 22%, #7a45ff 55%, #e5226b 78%, rgba(229, 34, 107, 0) 100%);
background-size: 220% 100%;
animation: brandProgressShimmer 1.15s infinite linear;
transition: width 0.2s ease;
}
@keyframes brandProgressShimmer {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
</style>
<div class="TheBrandUtilMain"><div id="brand-body">
<div class="brand-wrap">
<div id="brand-ruler" class="brand-inner-wrap">
<!-- Ruler -->
<!-- Canvas Content START -->
<div id="brand-content" class="">
<div id="brand-canvas-img-wrap" style="position:absolute;left:-100000px;top:-100000px;opacity:0;pointer-events:none;">
<img id="brand-canvas-img" src="" data-filename="" data-template="" />
</div>
<!-- Scrollable Container for Pages -->
<div id="pages-scroll-container" style=" width:100%; overflow-y: auto; max-height: 100vh; position: relative;">
<div id="pages-wrapper" style="gap:20px; display: flex; flex-direction: column; align-items: center; ">
<!-- Pages will be injected here by brand.js -->
</div>
</div>
<!-- Global UI Elements (Keep these if they are shared, or move into JS to append per-page) -->
<!-- Note: 'brand-content-bar' (zoom/dimensions) might need to be per-page or global context-aware -->
<div class="brand-content-bar" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000; transform: scale(0.8);">
<div class="brand-img-size"><span id="brand-img-width"></span>px <span class="material-icons">clear</span> <span id="brand-img-height"></span>px</div>
<!-- ... other controls ... -->
<button id="brand-img-drag-proxy" class="brand-btn" style="background: none"><span class="material-icons" style="font-size:20px; line-height:25px; margin-right:10px">pan_tool</span></button>
<div class="brand-comment-btn" title="Comments (C)" style="display:inline-block; vertical-align:middle; cursor:pointer; margin-left:5px;"><span class="material-icons" style="font-size:20px; line-height:25px;">comment</span></div>
</div>
</div>
<!-- Canvas Content END -->
</div>
</div>
</div></div>
<div class="TheBrandUtilFooter">
<div class="MidTabPanel" id="panel-brand-tab-annotate" slot="footer">
<div class="TheBrandControlPanels">
<div class="TheBrandControlPanel">
<div class="TheBrandShapeStyleEditor">
<div class="secondTab radio-group-bytosri-1" style="display:none;">
<div class="TheBrandScrollable TheBrandShapeStyles"
style="--scrollable-feather-start-opacity: 1;--scrollable-feather-end-opacity: 1"
data-direction="x" data-state="idle">
<div>
<ul class="TheBrandShapeStyleList"></ul>
</div>
</div>
</div>
<div class="secondTab radio-group-bytosri-2" style="display:none;">
<div class="TheBrandScrollable TheBrandShapeStyles"
style="--scrollable-feather-start-opacity: 1;--scrollable-feather-end-opacity: 1"
data-direction="x" data-state="idle">
<div>
<!--<ul class="TheBrandShapeStyleList">
<li class="TheBrandShapeStyle "><span
class="TheBrandShapeStyleLabel">Line color</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandColorPickerButton TheBrandColorPickerButtonStroke"
title="undefined"><span slot="label"
class="TheBrandButtonLabel"><div
class="TheBrandColorPreview"
title="Line color"
style="--color:rgba(255, 255, 255, 1)"><span></span></div> </span>
</button>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Line width</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandDropdownButton"
title="undefined"><span slot="label"
title="Line width"
class="TheBrandButtonInner"> <span
class="TheBrandButtonLabel">Small</span></span>
</button>
</li>
</ul>-->
</div>
</div>
</div>
<div class="secondTab radio-group-bytosri-7 thebrand-text-more" style="display:none;">
<div class="TheBrandScrollable TheBrandShapeStyles"
style="--scrollable-feather-start-opacity: 1;--scrollable-feather-end-opacity: 1"
data-direction="x" data-state="idle">
<div style="transform: translateX(-5px)">
<ul class="TheBrandShapeStyleList">
<!--
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Fill color</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandColorPickerButton"
title="undefined"><span slot="label"
class="TheBrandButtonLabel"><div
class="TheBrandColorPreview"
title="Fill color"
style="--color:rgba(0, 0, 0, 0)"><span></span></div> </span>
</button>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Font color</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandColorPickerButton"
title="undefined"><span slot="label"
class="TheBrandButtonLabel"><div
class="TheBrandColorPreview"
title="Font color"
style="--color:rgba(0, 0, 0, 1)"><span></span></div> </span>
</button>
</li>
-->
<!--
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Font style</span>
<select id="brand-font-family" class="brand-select thebrand-select2 thebrand-form-fieldX TheBrandButton TheBrandPanelButton TheBrandDropdownButton" autocomplete="off" data-loadFont="yes">
<optgroup style="font-size: 9px" class="TheBrandButtonLabel" id="websafe-fonts" label="Default Fonts"></optgroup>
<optgroup style="font-size: 9px" class="TheBrandButtonLabel" id="google-fonts" label="Google Fonts"></optgroup>
</select>
</li>-->
<!--
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Font style</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandDropdownButton"
title="undefined"><span slot="label"
title="Font style"
class="TheBrandButtonInner"> <span
class="TheBrandButtonLabel">Normal</span></span>
</button>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Font size</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandDropdownButton"
title="undefined"><span slot="label"
title="Font size"
class="TheBrandButtonInner"> <span
class="TheBrandButtonLabel">Small</span></span>
</button>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Line height</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandDropdownButton"
title="undefined"><span slot="label"
title="Line height"
class="TheBrandButtonInner"> <span
class="TheBrandButtonLabel">Medium</span></span>
</button>
</li>-->
</ul>
</div>
</div>
</div>
<div class="secondTab radio-group-bytosri-Layouts" id="brand-text-layouts" style="display:none;" >
</div>
</div>
</div>
</div>
<div id="brand-text" class="TheBrandScrollable TheBrandControlListScroller"
style="--scrollable-feather-start-opacity: 0;--scrollable-feather-end-opacity: 0"
data-direction="x" >
<div style="transform: translateX(-5px)">
<fieldset class="TheBrandRadioGroup TheBrandControlList" data-layout="row">
<ul class="TheBrandRadioGroupOptions">
<!-- <li class="TheBrandNavGroup "> <div class="TheBrandNavSet thebrand-counter">
<button id="brand-img-zoom-out" type="button" class="counter-minus TheBrandButton TheBrandButtonIconOnly resetElements" title="Zoom out"><span class="TheBrandButtonInner"><svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><path stroke="currentColor" stroke-width=".125em" d="M9 12 h6"></path></g></svg> <span class="implicit">Zoom out</span></span></button>
<div id="brand-img-zoom-counter" class="brand-counter"> </div>
<input id="brand-img-zoom" class="brand-form-field numeric-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="text" style="width: 25px; font-size: 10px" value="100" autocomplete="off" data-min="10" data-max="200" data-step="5">
<button id="brand-img-zoom-in" type="button" class="counter-plus TheBrandButton TheBrandButtonIconOnly resetElements" title="Zoom in"><span class="TheBrandButtonInner"><svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><path stroke="currentColor" stroke-width=".125em" d="M8 12 h8 M12 8 v8"></path></g></svg> <span class="implicit">Zoom in</span></span></button>
</div>
</li>
-->
<!-- <li id="brand-add-textX" class="TheBrandRadioGroupOption TheBrandControlListOption "
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-texta"
value="text">
<label id="brand-add-text-proxy" class="TheBrandButtonExport" for="radio-group-bytosri-texta" title="Text">
<div slot="option">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 467.399 467.399;" xml:space="preserve"><g><path d="m0 18.372 0.104 -0.534 0.163 -0.008c0.54 -0.029 0.874 -0.097 1.004 -0.202 0.129 -0.106 0.469 -0.59 1.02 -1.451l6.657 -10.764h0.629l2.039 10.609c0.149 0.781 0.3 1.272 0.452 1.472 0.153 0.201 0.452 0.313 0.9 0.336l0.215 0.008 -0.112 0.534h-4.779l0.112 -0.534h0.266c0.833 0 1.249 -0.138 1.249 -0.413 0 -0.293 -0.049 -0.704 -0.146 -1.232l-0.33 -1.748H4.135l-1.078 1.714c-0.442 0.695 -0.663 1.143 -0.663 1.343 0 0.224 0.353 0.336 1.059 0.336h0.215l-0.112 0.534H0zm4.477 -4.676h4.809l-1.11 -5.993 -3.699 5.993zm15.973 4.676 0.786 -3.943c-0.714 1.26 -1.509 2.267 -2.387 3.024 -0.876 0.757 -1.693 1.135 -2.45 1.135 -0.613 0 -1.073 -0.181 -1.379 -0.543 -0.307 -0.362 -0.46 -0.902 -0.46 -1.62 0 -1.867 0.656 -3.604 1.969 -5.21 1.312 -1.606 2.731 -2.409 4.255 -2.409 0.161 0 0.367 0.018 0.619 0.054 0.253 0.036 0.553 0.09 0.903 0.161h1.693l-1.402 7.12c-0.097 0.471 -0.147 0.881 -0.147 1.232 0 0.183 0.055 0.296 0.164 0.336 0.109 0.041 0.467 0.081 1.076 0.121l0.155 0.008 -0.103 0.534h-3.293v0zm1.042 -5.226 0.596 -2.988c-0.332 -0.175 -0.672 -0.305 -1.02 -0.39 -0.349 -0.085 -0.709 -0.127 -1.081 -0.127 -0.858 0 -1.552 0.388 -2.083 1.163 -0.423 0.62 -0.786 1.446 -1.09 2.48 -0.303 1.033 -0.454 1.963 -0.454 2.79 0 0.413 0.069 0.723 0.206 0.93 0.137 0.207 0.343 0.31 0.619 0.31 1.095 -0.001 2.53 -1.389 4.307 -4.167z"/></g></svg>
<span>Add Text</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-Layouts"
value="text">
<label id="textlayouts" for="radio-group-bytosri-Layouts" title="Text">
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 1.08 1.08" version="1.1" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>edit-line</title><path class="clr-i-outline clr-i-outline-path-1" d="M1.016 0.25 0.84 0.073a0.062 0.062 0 0 0 -0.088 0L0.128 0.696l-0.057 0.246a0.062 0.062 0 0 0 0.06 0.075 0.064 0.064 0 0 0 0.013 0l0.249 -0.057 0.623 -0.623a0.062 0.062 0 0 0 0 -0.088ZM0.363 0.906l-0.233 0.049 0.053 -0.229L0.65 0.261l0.18 0.18ZM0.87 0.397l-0.18 -0.18 0.104 -0.104 0.177 0.18Z"/><path x="0" y="0" width="36" height="36" fill-opacity="0" d="M0 0H1.08V1.08H0V0z"/></svg>
<span>Text Layouts</span></div>
</label></li>-->
<!--
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-7"
value="text">
<label for="radio-group-bytosri-7" title="Text">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.96 0.96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="icomoon-ignore"/><path d="M0.096 0.384a0.096 0.096 0 1 0 0 0.192 0.096 0.096 0 0 0 0 -0.192zm0 0.16a0.064 0.064 0 0 1 0 -0.128c0.035 0 0.064 0.029 0.064 0.064s-0.029 0.064 -0.064 0.064z" fill="#000000"/><path d="M0.864 0.384a0.096 0.096 0 1 0 0 0.192 0.096 0.096 0 0 0 0 -0.192zm0 0.16c-0.035 0 -0.064 -0.029 -0.064 -0.064s0.029 -0.064 0.064 -0.064c0.035 0 0.064 0.029 0.064 0.064s-0.029 0.064 -0.064 0.064z" fill="#000000"/><path d="M0.48 0.384a0.096 0.096 0 1 0 0 0.192 0.096 0.096 0 0 0 0 -0.192zm0 0.16c-0.035 0 -0.064 -0.029 -0.064 -0.064s0.029 -0.064 0.064 -0.064c0.035 0 0.064 0.029 0.064 0.064s-0.029 0.064 -0.064 0.064z" fill="#000000"/></svg>
<span>More</span></div>
</label></li>
-->
<!--
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false" id="radio-group-bytosri-1">
<label
for="radio-group-bytosri-1" title="Move">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor"
fill="none">
<path d="M6 2 L6 19 L18 13 Z M13 18 L16 24"
stroke="currentColor"
stroke-width=".125em" fill="none"
fill-rule="evenodd"
stroke-linejoin="round"></path>
</g>
</g>
</svg>
<span>Move</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-2"
value="sharpie"> <label
for="radio-group-bytosri-2" title="Sharpie">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor"
fill="none">
<path d="M2.025 5c5.616-2.732 8.833-3.857 9.65-3.374C12.903 2.351.518 12.666 2.026 14 3.534 15.334 16.536.566 17.73 2.566 18.924 4.566 3.98 17.187 4.831 18c.851.813 9.848-6 11.643-6 1.087 0-2.53 5.11-2.92 7-.086.41 3.323-1.498 4.773-1 .494.17.64 2.317 1.319 3 .439.443 1.332.776 2.679 1"
stroke="currentColor"
stroke-width=".125em" fill="none"
fill-rule="evenodd"
stroke-linejoin="round"></path>
</g>
</g>
</svg>
<span>Sharpie</span></div>
</label></li>-->
<!-- <li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-3"
value="eraser"> <label
for="radio-group-bytosri-3" title="Eraser">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor"
stroke-linecap="round" fill="none">
<g transform="translate(3, 15) rotate(-45)">
<rect x="0" y="0" width="18" height="10"
rx="3"></rect>
</g>
<line x1="11" y1="21" x2="18" y2="21"></line>
<line x1="20" y1="21" x2="22" y2="21"></line>
</g>
</g>
</svg>
<span>Eraser</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-5"
value="path"> <label
for="radio-group-bytosri-5" title="Path">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round"
fill="none">
<circle cx="21" cy="3" r="2"></circle>
<circle cx="9" cy="9" r="2"></circle>
<circle cx="3" cy="21" r="2"></circle>
<path d="M19 4 11 8 M8 11 4 19"></path>
</g>
</g>
</svg>
<span>Path</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-texta"
value="line"> <label
for="radio-group-bytosri-texta" title="Line">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor"
fill="none">
<line x1="20" y1="3" x2="6" y2="21"></line>
</g>
</g>
</svg>
<span>Line</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-7"
value="arrow"> <label
for="radio-group-bytosri-7" title="Arrow">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor"
fill="none">
<line x1="20" y1="3" x2="6" y2="21"></line>
<path d="m10 6 L21.5 1 L20 13.5"
fill="currentColor" stroke="none"></path>
</g>
</g>
</svg>
<span>Arrow</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-8"
value="rectangle"> <label
for="radio-group-bytosri-8" title="Rectangle">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor"
fill="none">
<rect x="1" y="1" width="22" height="22"
rx="4"></rect>
</g>
</g>
</svg>
<span>Rectangle</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-9"
value="ellipse"> <label
for="radio-group-bytosri-9" title="Ellipse">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor"
fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Ellipse</span></div>
</label></li>-->
</ul>
</fieldset>
</div>
</div>
</div> <div class="MidTabPanel" style="display:none" id="panel-brand-tab-crop" slot="footer">
<div class="TheBrandControlPanels">
<div class="TheBrandControlPanel">
<div class="TheBrandShapeStyleEditor">
<div class="secondTab radio-group-bytosri-upload" id="brand-image-settings" style="display:block;" >
<div class="TheBrandScrollable TheBrandShapeStyles"
style="--scrollable-feather-start-opacity: 0.5;--scrollable-feather-end-opacity: 0"
data-direction="x" data-state="idle overflows" >
<div style="transform: translateX(-5px)" id="brand-image-mode" >
<ul class="TheBrandShapeStyleList">
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Position </span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption brandX-btn"
data-hidden="false" data-disabled="false"
data-selected="false">
<label class="img-flip-horizontal" for="none" rel="text"
title="Center align text">
<span class="material-icons">flip</span>
</label></li>
<li class="TheBrandRadioGroupOption brandX-btn"
data-hidden="false" data-disabled="false"
data-selected="false">
<label class="img-flip-vertical" for="none" rel="text" id="text-flip-y"
title="Left align text">
<span class="material-icons" id="text-flip-y">flip</span>
</label></li>
<li class="TheBrandRadioGroupOption brandX-btn"
data-hidden="false" data-disabled="false"
data-selected="false">
<label
class="brand-horizontal-center" for="none" rel="text"
title="Right align text">
<span class="material-icons">align_horizontal_center</span>
</label></li>
<li class="TheBrandRadioGroupOption brandX-btn"
data-hidden="false" data-disabled="false"
data-selected="false">
<label
class="brand-vertical-center" for="none" rel="text"
title="Right align text">
<span class="material-icons">vertical_align_center</span> </label></li>
</ul>
</fieldset>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel slider-label">Rounded Corners </span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="img-border-radius" style="width: 50px; font-size: 10px; border-style: none" type="range" min="0" max="1000" value="0" step="1" class="brand-slider" autocomplete="off">
<!--<input id="img-border-radius" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="number" type="range" min="0" max="1000" value="0" step="1" autocomplete="off">-->
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel slider-label">Opacity</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="img-opacity" style="width: 50px; font-size: 10px; border-style: none" type="range" min="0" max="1" value="1" step="0.1" class="brand-slider" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Border Width</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="img-border-width" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="number" value="0" data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Border Color</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="img-border-color" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters brand-colorpicker disallow-empty" type="text" value="#ffffff" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<!--
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Fill color</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandColorPickerButton"
title="undefined"><span slot="label"
class="TheBrandButtonLabel"><div
class="TheBrandColorPreview"
title="Fill color"
style="--color:rgba(0, 0, 0, 0)"><span></span></div> </span>
</button>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Font color</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandColorPickerButton"
title="undefined"><span slot="label"
class="TheBrandButtonLabel"><div
class="TheBrandColorPreview"
title="Font color"
style="--color:rgba(0, 0, 0, 1)"><span></span></div> </span>
</button>
</li>
-->
<!--
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Font style</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandDropdownButton"
title="undefined"><span slot="label"
title="Font style"
class="TheBrandButtonInner"> <span
class="TheBrandButtonLabel">Normal</span></span>
</button>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Font size</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandDropdownButton"
title="undefined"><span slot="label"
title="Font size"
class="TheBrandButtonInner"> <span
class="TheBrandButtonLabel">Small</span></span>
</button>
</li>
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Line height</span>
<button type="button"
class="TheBrandButton TheBrandPanelButton resetElements TheBrandDropdownButton"
title="undefined"><span slot="label"
title="Line height"
class="TheBrandButtonInner"> <span
class="TheBrandButtonLabel">Medium</span></span>
</button>
</li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="brand-image" class="TheBrandScrollable TheBrandControlListScroller"
style="--scrollable-feather-start-opacity: 0;--scrollable-feather-end-opacity: 0"
data-direction="x" >
<div style="transform: translateX(-5px)">
<fieldset class="TheBrandRadioGroup TheBrandControlList" data-layout="row">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab" data-selected="true">
<input type="file" name="brand-file" id="brand-img-upload" class="brand-hidden-file" accept="image/png, image/jpeg, image/webp" />
<label for="brand-img-upload" title="Text">
<div slot="option">
<svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><g fill="none" stroke="currentColor" stroke-width="0.0625em"><path d="M8 21 L15 11 L19 15"></path><path d="M15 2 v5 h5"></path><path d="M8 2 h8 l4 4 v12 q0 4 -4 4 h-8 q-4 0 -4 -4 v-12 q0 -4 4 -4z"></path></g><circle fill="currentColor" cx="10" cy="8" r="1.5"></circle></g></svg>
<span>Upload Image</span></div>
</label> </li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab" data-selected="false">
<label for="brand-overlay-img-media-libraryX" title="Text">
<div slot="option">
<svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><g fill="none" stroke="currentColor" stroke-width="0.0625em"><path d="M8 21 L15 11 L19 15"></path><path d="M15 2 v5 h5"></path><path d="M8 2 h8 l4 4 v12 q0 4 -4 4 h-8 q-4 0 -4 -4 v-12 q0 -4 4 -4z"></path></g><circle fill="currentColor" cx="10" cy="8" r="1.5"></circle></g></svg>
<span>Image Library</span></div>
</label> </li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab " data-selected="false" id="brand-replace-settings" style="display: none" >
<label for="brand-overlay-img-media-libraryZ" id="brand-img-replace-media-library" class="brand-modal-open" title="Text">
<div slot="option">
<svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><g fill="none" stroke="currentColor" stroke-width="0.0625em"><path d="M8 21 L15 11 L19 15"></path><path d="M15 2 v5 h5"></path><path d="M8 2 h8 l4 4 v12 q0 4 -4 4 h-8 q-4 0 -4 -4 v-12 q0 -4 4 -4z"></path></g><circle fill="currentColor" cx="10" cy="8" r="1.5"></circle></g></svg>
<span>Replace Image</span></div>
</label></li>
<!--
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab" data-selected="false">
<label title="Text" class="brand-modal-open" data-target="#modal-media-library">
<div slot="option">
<svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><g fill="none" stroke="currentColor" stroke-width="0.0625em"><path d="M8 21 L15 11 L19 15"></path><path d="M15 2 v5 h5"></path><path d="M8 2 h8 l4 4 v12 q0 4 -4 4 h-8 q-4 0 -4 -4 v-12 q0 -4 4 -4z"></path></g><circle fill="currentColor" cx="10" cy="8" r="1.5"></circle></g></svg>
<span>Image Library</span></div>
</label></li>
-->
<!-- -->
</ul>
</fieldset>
</div>
</div>
</div> <div class="MidTabPanel" style="display:none" id="panel-brand-tab-shapes" slot="footer">
<div class="TheBrandControlPanels" id="brand-shapes" >
<div class="TheBrandControlPanel">
<div class="TheBrandShapeStyleEditor">
<div class="secondTab radio-group-bytosri-shapes" id="brand-shape-settings" style="display:block;" >
<div class="TheBrandScrollable TheBrandShapeStyles"
style="--scrollable-feather-start-opacity: 0.5;--scrollable-feather-end-opacity: 0"
data-direction="x" data-state="idle overflows" >
<div style="transform: translateX(-5px)">
<ul class="TheBrandShapeStyleList" style="">
<li class="TheBrandShapeStyle"><span class="TheBrandShapeStyleLabel">Fill Style</span>
<fieldset class="TheBrandRadioGroup resetElements" title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label for="none" rel="text" title="Right align text">
<select id="brand-shape-gradient" style="width: 80px; font-size: 10px; border-style: none" class="TheBrandButtonLabel TheBrandFixedWidthCharacters TheBrandDropdownButton">
<option value="none" style="font-size:10px;" selected>Solid Color</option>
<option value="vertical" style="font-size:10px" >Vertical Gradient</option>
<option value="horizontal" style="font-size:10px" >Horizontal
</select>
</label></li>
</ul>
</fieldset>
</li>
<li id="shape-gradient-settings" class="TheBrandShapeStyle">
<fieldset class="TheBrandRadioGroup resetElements" title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions" >
<li style="margin-left: 10px" class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Color 1</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="shape-gradient-color-1" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters thebrand-colorpicker disallow-empty" type="text" value="#9C27B0" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<li style="margin-left: 10px" class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Color 2</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="shape-gradient-color-2" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters thebrand-colorpicker disallow-empty" type="text" value="#ffffff" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<li style="margin-left: 10px" class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Color 3</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="shape-gradient-color-3" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters thebrand-colorpicker disallow-empty" type="text" value="#ffffff" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<li style="margin-left: 10px" class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Color 4</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="shape-gradient-color-4" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters thebrand-colorpicker disallow-empty" type="text" value="#ffffff" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
</ul>
</fieldset>
</li>
<li id="shape-fill-color" class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Fill Color</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="brand-shape-color" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters thebrand-colorpicker disallow-empty" type="text" value="#fff" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<li class="TheBrandShapeStyle"><span class="TheBrandShapeStyleLabel slider-label">Opacity </span>
<fieldset class="TheBrandRadioGroup resetElements" title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="shape-opacity" style="width: 50px; font-size: 10px; border-style: none" type="range" min="0" max="1" value="1" step="0.1" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<li style="margin-left: 10px" class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Outline Size</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="shape-outline-width" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="number" value="0" data-min="0" data-max="1000" step="1" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
<li style="margin-left: 10px" class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Outline Color</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="false">
<label title="Text" for="none" rel="input">
<div slot="option">
<input id="shape-outline-color" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters thebrand-colorpicker disallow-empty" type="text" value="#000000" autocomplete="off">
</div>
</label>
</li>
</ul>
</fieldset>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="TheBrandScrollable TheBrandControlListScroller"
style="--scrollable-feather-start-opacity: 0;--scrollable-feather-end-opacity: 0"
data-direction="x" >
<div style="transform: translateX(-5px)">
<fieldset class="TheBrandRadioGroup TheBrandControlList" data-layout="row">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab" data-selected="true">
<fieldset class="TheBrandRadioGroup resetElements" title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label for="none" rel="text" title="Right align text">
<select id="brand-shape-select" style=" background: none; border-style: none; width: 80px; font-size: 10px; " class="TheBrandButtonLabel TheBrandFixedWidthCharacters TheBrandDropdownButton">
<!--<option style="font-size:10px" value="none" selected>Select Shape</option>-->
<option style="font-size:10px" value="circle">Circle</option>
<option style="font-size:10px" value="ellipse">Ellipse</option>
<option style="font-size:10px" value="square">Square</option>
<option style="font-size:10px" value="rectangle" selected>Rectangle</option>
<option style="font-size:10px" value="triangle">Triangle</option>
<option style="font-size:10px" value="trapezoid">Trapezoid</option>
<option style="font-size:10px" value="pentagon">Pentagon</option>
<option style="font-size:10px" value="octagon">Octagon</option>
<option style="font-size:10px" value="emerald">Emerald</option>
<option style="font-size:10px" value="star">Star</option>
</select>
</label></li>
<li style="margin-left:10px;" class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="true">
<label id="brand-shape-add" for="none" rel="text" title="Right align text">
<svg class="TheBrandButtonIcon" width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round"><g><path stroke="currentColor" stroke-width=".125em" d="M8 12 h8 M12 8 v8"></path></g></svg>
</label></li>
</ul>
</fieldset>
</li>
</ul>
</fieldset>
</div>
</div>
</div>
<!--<div class="TheBrandPanel brand-editor-panel" id style="position: fixed; top: 100px; left: 0; overflow: auto; z-index: 50; min-height: 10px; max-height:300px; min-width: 150px; display: block; flex-direction: column; ">
<h6 class="brand-layers-title" style="">ELEMENTS</h6>
</div>
-->
<div class="MidTabPanel" id="panel-brand-tab-elements" slot="footer">
<div class="TheBrandControlPanels">
<div class="TheBrandControlPanel">
<div class="TheBrandShapeStyleEditor">
<div class="secondTab radio-group-bytosri-all-frames" style="display:block;padding-bottom:5px" >
<div class="TheBrandScrollable TheBrandShapeStyles" style="--scrollable-feather-start-opacity: 0.5;--scrollable-feather-end-opacity: 0" data-direction="x" data-state="idle overflows" >
<div style=" transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; ">
<fieldset class="TheBrandRadioGroup TheBrandControlList" data-layout="row">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="grunge"><input type="radio" class="implicit" value="move">
<label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<path d="M6 2 L6 19 L18 13 Z M13 18 L16 24" stroke="currentColor" stroke-width=".125em" fill="none" fill-rule="evenodd" stroke-linejoin="round"></path>
</g>
</g>
</svg>
<span>Grunge</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="grunge-square"><input type="radio" class="implicit" id="radio-group-bytosri-2" value="sharpie"> <label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Grunge - Square</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="business"><input type="radio" class="implicit" id="radio-group-bytosri-3" value="eraser"><label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span> Business</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="bohemian"><input type="radio" class="implicit" id="radio-group-bytosri-4" value="text">
<label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Bohemian</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="abstract"><input type="radio" class="implicit" id="radio-group-bytosri-5" value="path"> <label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Abstract</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="floral"><input type="radio" class="implicit" id="radio-group-bytosri-6" value="line"><label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Floral</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="neon"><input type="radio" class="implicit" id="radio-group-bytosri-7" value="arrow"><label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Neon</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="winter"><input type="radio" class="implicit" id="radio-group-bytosri-8" value="rectangle"><label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Winter</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="halloween"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"><label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Halloween</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="cute"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Cute</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="watercolor"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Watercolor</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="love"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"><label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Love</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalFrames" data-selected="false" id="others"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="frameChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"></path></svg>
<span>Others</span></div>
</label></li>
</ul>
</fieldset>
</div>
</div>
</div>
<div class="secondTab radio-group-bytosri-all-elements" style="display:block;padding-bottom:5px" >
<div class="TheBrandScrollable TheBrandShapeStyles" style="--scrollable-feather-start-opacity: 0.5;--scrollable-feather-end-opacity: 0" data-direction="x" data-state="idle overflows" >
<div style=" transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; ">
<fieldset class="TheBrandRadioGroup TheBrandControlList" data-layout="row">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="ink-brush-strokes"><input type="radio" class="implicit" value="move">
<label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<path d="M6 2 L6 19 L18 13 Z M13 18 L16 24" stroke="currentColor" stroke-width=".125em" fill="none" fill-rule="evenodd" stroke-linejoin="round"></path>
</g>
</g>
</svg>
<span>Ink Brush Strokes</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="abstract-shapes"><input type="radio" class="implicit" id="radio-group-bytosri-2" value="sharpie"> <label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<path d="M2.025 5c5.616-2.732 8.833-3.857 9.65-3.374C12.903 2.351.518 12.666 2.026 14 3.534 15.334 16.536.566 17.73 2.566 18.924 4.566 3.98 17.187 4.831 18c.851.813 9.848-6 11.643-6 1.087 0-2.53 5.11-2.92 7-.086.41 3.323-1.498 4.773-1 .494.17.64 2.317 1.319 3 .439.443 1.332.776 2.679 1" stroke="currentColor" stroke-width=".125em" fill="none" fill-rule="evenodd" stroke-linejoin="round"></path>
</g>
</g>
</svg>
<span>Abstract Shapes</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="geometric-shapes"><input type="radio" class="implicit" id="radio-group-bytosri-3" value="eraser"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" stroke-linecap="round" fill="none">
<g transform="translate(3, 15) rotate(-45)">
<rect x="0" y="0" width="18" height="10" rx="3"></rect>
</g>
<line x1="11" y1="21" x2="18" y2="21"></line>
<line x1="20" y1="21" x2="22" y2="21"></line>
</g>
</g>
</svg>
<span>Geometric Shapes</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="shape-badges"><input type="radio" class="implicit" id="radio-group-bytosri-4" value="text">
<label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke="none" fill="currentColor" transform="translate(6,0)">
<path d="M8.14 20.085c.459 0 .901-.034 1.329-.102a8.597 8.597 0 001.015-.21v1.984c-.281.135-.695.247-1.242.336a9.328 9.328 0 01-1.477.133c-3.312 0-4.968-1.745-4.968-5.235V6.804H.344v-1.25l2.453-1.078L3.89.819h1.5v3.97h4.97v2.015H5.39v10.078c0 1.031.245 1.823.735 2.375s1.161.828 2.015.828z"></path>
</g>
</g>
</svg>
<span>Shapes and Badges</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="hand-drawn-dividers"><input type="radio" class="implicit" id="radio-group-bytosri-5" value="path"> <label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none">
<circle cx="21" cy="3" r="2"></circle>
<circle cx="9" cy="9" r="2"></circle>
<circle cx="3" cy="21" r="2"></circle>
<path d="M19 4 11 8 M8 11 4 19"></path>
</g>
</g>
</svg>
<span>Hand Drawn Dividers</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="Line"><input type="radio" class="implicit" id="radio-group-bytosri-6" value="line"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<line x1="20" y1="3" x2="6" y2="21"></line>
</g>
</g>
</svg>
<span>Line</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="arrows"><input type="radio" class="implicit" id="radio-group-bytosri-7" value="arrow"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<line x1="20" y1="3" x2="6" y2="21"></line>
<path d="m10 6 L21.5 1 L20 13.5" fill="currentColor" stroke="none"></path>
</g>
</g>
</svg>
<span>Arrows</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="speech-bubbles"><input type="radio" class="implicit" id="radio-group-bytosri-8" value="rectangle"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<rect x="1" y="1" width="22" height="22" rx="4"></rect>
</g>
</g>
</svg>
<span>Speech Bubbles</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="clouds"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Clouds</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="social-media"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Social Media</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="payment"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Payment</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="crypto"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Crypto</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="avatars"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Avatars</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="people"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>People</span></div>
</label></li><li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="dividers"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Dividers</span></div>
</label></li><li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="trees"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Trees</span></div>
</label></li><li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="animals"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>ANimals</span></div>
</label></li><li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="vehicles"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Vehicles</span></div>
</label></li><li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="quote"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Quote</span></div>
</label></li><li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="weather"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Weather</span></div>
</label></li><li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="weapons"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"><label for="elementaChoose" title="Text" rel="rara">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Weapons</span></div>
</label></li><li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" id="gifts"><input type="radio" class="implicit" id="radio-group-bytosri-9" value="ellipse"> <label for="radio-group-bytosri-9" title="Ellipse">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<circle cx="12" cy="12" r="11"></circle>
</g>
</g>
</svg>
<span>Gifts</span></div>
</label></li>
</ul>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="brand-text" class="TheBrandScrollable TheBrandControlListScroller"
style="--scrollable-feather-start-opacity: 0;--scrollable-feather-end-opacity: 0"
data-direction="x" >
<div style="transform: translateX(-5px)">
<fieldset class="TheBrandRadioGroup TheBrandControlList" data-layout="row">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption TheBrandControlListOption "
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-all-elements"
value="text">
<label id="radio-group-bytosri-all-elementsX" class="TheBrandButtonExport" for="radio-group-bytosri-all-elements" title="Text">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round" stroke-linejoin="round">
<g>
<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" stroke-width=".125em">
<path d="M 4 5 l 1 -1"></path>
<path d="M 4 10 l 6 -6"></path>
<path d="M 4 15 l 11 -11"></path>
<path d="M 4 20 l 16 -16"></path>
<path d="M 9 20 l 11 -11"></path>
<path d="M 14 20 l 6 -6"></path>
<path d="M 19 20 l 1 -1"></path>
</g>
</g>
</svg>
<span>Elements</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab"
data-selected="true"><input type="radio" class="implicit"
id="radio-group-bytosri-icons"
value="text">
<label for="radio-group-bytosri-icons" title="Text">
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.48 0.48" xmlns="http://www.w3.org/2000/svg"><g><path d="M0.371 0.03H0.109A0.079 0.079 0 0 0 0.03 0.109v0.262A0.079 0.079 0 0 0 0.109 0.45h0.262A0.079 0.079 0 0 0 0.45 0.371V0.109A0.079 0.079 0 0 0 0.371 0.03Zm0.037 0.341a0.037 0.037 0 0 1 -0.037 0.037H0.109a0.037 0.037 0 0 1 -0.037 -0.037V0.109A0.037 0.037 0 0 1 0.109 0.072h0.262a0.037 0.037 0 0 1 0.037 0.037ZM0.24 0.309A0.069 0.069 0 0 1 0.171 0.24H0.129a0.111 0.111 0 0 0 0.222 0h-0.042A0.069 0.069 0 0 1 0.24 0.309ZM0.18 0.15a0.03 0.03 0 1 0 -0.03 0.03 0.03 0.03 0 0 0 0.03 -0.03Zm0.15 -0.03a0.03 0.03 0 1 0 0.03 0.03 0.03 0.03 0 0 0 -0.03 -0.03Z"/></g></svg>
<span>Icons</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab"
data-selected="true"><input type="radio" class="implicit"
id="radio-group-bytosri-all-frames"
value="text">
<label for="radio-group-bytosri-all-frames" title="Text">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.45 0.45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.105 0v0.45m0.24 -0.45v0.45M0 0.105h0.45m-0.45 0.24h0.45" stroke="#000000" stroke-width="0.03"/></svg>
<span>Frames</span></div>
</label></li>
</ul>
</fieldset>
</div>
</div>
</div> <div class="MidTabPanel" style="display:none" id="panel-brand-tab-adjust" slot="footer">
<div class="TheBrandControlPanels">
<div class="TheBrandControlPanel">
<div class="TheBrandShapeStyleEditor">
<div class="secondTab radio-group-bytosri-crop" style="display:block;" >
<div class="TheBrandScrollable TheBrandShapeStyles"
style="--scrollable-feather-start-opacity: 0.5;--scrollable-feather-end-opacity: 0"
data-direction="x" >
<div class="accordion-crop">
<ul class="TheBrandShapeStyleList ">
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Crop Ratio</span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption"
data-hidden="false" data-disabled="false"
data-selected="true">
<div class="dropdown-container" for="none" rel="nada"
title="Left align text"> <select id="brand-crop-style" style=" background: none; border-style: none; width: 80px; font-size: 9px; " class="brand-select brand-select2 brand-form-fieldX" autocomplete="off">
<option value="" style=" background: none; border-style: none; width: 80px; font-size: 9px; ">Please select</option>
<option value="freeform" style=" background: none; border-style: none; width: 80px; font-size: 9px; " data-icon="crop_free">Freeform</option>
<option value="custom" style=" background: none; border-style: none; width: 80px; font-size: 9px; " data-icon="crop">Custom</option>
<option value="square" style=" background: none; border-style: none; width: 80px; font-size: 9px; " data-icon="crop_square">Square</option>
<option value="original" style=" background: none; border-style: none; width: 80px; font-size: 9px; " data-icon="crop_original">Original Ratio</option>
</select> </div></li>
</ul>
</fieldset>
</li>
<li class="crop-custom TheBrandShapeStyle"><span class="TheBrandShapeStyleLabel">Width /Height </span>
<fieldset class="TheBrandRadioGroup resetElements" title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="nada">
<div slot="option">
<input id="brand-crop-width" style="width: 30px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="number" value="" data-max="" autocomplete="off">
</div>
</label>
</li> <li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="nada">
<div slot="option">
<input id="brand-crop-height" style="width: 30px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="number" value="" data-max="" autocomplete="off">
</div>
</label>
</li>
<li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="nada">
<button id="brand-crop-lock" type="button" class="brand-btn brand-lock-unlock hide-on-canvas-mode TheBrandButtonLabel"><span class="material-icons">lock</span></button>
</label>
</li>
</ul>
</fieldset>
</li>
<li class="TheBrandShapeStyle brand-crop-btns"><span
class="TheBrandShapeStyleLabel">Confirm </span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions " id="brand-crop-btns">
<li class="TheBrandRadioGroupOption brandX-btn" id="brand-crop-apply"
data-hidden="false" data-disabled="false"
data-selected="false">
<label class="format-bold" for="none" rel="nada"
title="Left align text">
<svg width="24px" height="24px" viewBox="0 0 2.28 2.28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" enable-background="new 0 0 76.00 76.00" xml:space="preserve"><path fill="#000000" fill-opacity="1" stroke-width="0.006" stroke-linejoin="round" d="m0.713 0.997 0.332 0.332L1.567 0.665l0.142 0.142 -0.665 0.807L0.57 1.14l0.142 -0.142Z"/></svg>
</label></li>
<li class="TheBrandRadioGroupOption brandX-btn" id="brand-crop-cancel"
data-hidden="false" data-disabled="false"
data-selected="false">
<label class="format-bold" for="none" rel="nada"
title="Left align text">
<svg width="24px" height="24px" viewBox="0 0 2.28 2.28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" enable-background="new 0 0 76.00 76.00" xml:space="preserve"><path fill="#000000" fill-opacity="1" stroke-width="0.006" stroke-linejoin="round" d="M1.14 0.57c0.315 0 0.57 0.255 0.57 0.57s-0.255 0.57 -0.57 0.57 -0.57 -0.255 -0.57 -0.57 0.255 -0.57 0.57 -0.57Zm0 0.142c-0.084 0 -0.162 0.024 -0.228 0.066l0.59 0.59A0.425 0.425 0 0 0 1.567 1.14c0 -0.236 -0.191 -0.427 -0.427 -0.427ZM0.713 1.14c0 0.236 0.191 0.427 0.427 0.427 0.084 0 0.162 -0.024 0.228 -0.066L0.778 0.912A0.426 0.426 0 0 0 0.713 1.14Z"/></svg>
</label></li>
</ul>
</fieldset>
</li>
</ul>
</div>
</div>
</div>
<div class="secondTab radio-group-bytosri-rotate " style="display:none;">
<div class="TheBrandScrollable TheBrandShapeStyles"
style="--scrollable-feather-start-opacity: 1;--scrollable-feather-end-opacity: 1"
data-direction="x" data-state="idle">
<div >
<ul class="TheBrandShapeStyleList">
<li class="TheBrandShapeStyle"><span
class="TheBrandShapeStyleLabel">Position </span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption brandX-btn"
data-hidden="false" data-disabled="false"
data-selected="false">
<label for="none" rel="nada"
title="Center align text" id="brand-flip-horizontal">
<span class="material-icons">flip</span>
</label></li>
<li class="TheBrandRadioGroupOption brandX-btn"
data-hidden="false" data-disabled="false"
data-selected="false">
<label for="none" rel="nada" id="brand-flip-vertical"
title="Left align text">
<span class="material-icons" id="text-flip-y">flip</span>
</label></li>
<li class="TheBrandRadioGroupOption brandX-btn"
data-hidden="false" data-disabled="false"
data-selected="false">
<label
id="brand-rotate-left" for="none" rel="text"
title="Right align text">
<span class="material-icons">rotate_left</span>
</label></li>
<li class="TheBrandRadioGroupOption brandX-btn"
data-hidden="false" data-disabled="false"
data-selected="false">
<label
id="brand-rotate-right" for="none" rel="text"
title="Right align text">
<span class="material-icons" >rotate_right</span> </label></li>
</ul>
</fieldset>
</li>
</ul>
</div>
</div>
</div>
<div class="secondTab radio-group-bytosri-resize " style="display:none;">
<div class="TheBrandScrollable TheBrandShapeStyles"
style="--scrollable-feather-start-opacity: 1;--scrollable-feather-end-opacity: 1"
data-direction="x" data-state="idle">
<div >
<ul class="TheBrandShapeStyleList">
<li class=" TheBrandShapeStyle"><span class="TheBrandShapeStyleLabel">Width/Height </span>
<fieldset class="TheBrandRadioGroup resetElements" title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="nada">
<div slot="option">
<input id="brand-resize-width" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="number" value="" data-max="" autocomplete="off">
</div>
</label>
</li> <li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="nada">
<div slot="option" style="width: 8px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters">
X
</div>
</label>
</li>
<li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="nada">
<div slot="option">
<input id="brand-resize-height" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="number" value="" data-max="" autocomplete="off">
</div>
</label>
</li>
<li class="TheBrandRadioGroupOption brandX-btn" id="brand-crop-apply"
data-hidden="false" data-disabled="false"
data-selected="false">
<label class=" brand-lock-unlock active" for="none" rel="nada"
title="Left align text" id="brand-resize-lock">
<svg width="24px" height="24px" viewBox="0 0 2.28 2.28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" enable-background="new 0 0 76.01 76.01" xml:space="preserve"><path fill="#000000" fill-opacity="1" stroke-width="0.006" stroke-linejoin="round" d="M0.665 1.093h0.095v-0.142c0 -0.21 0.17 -0.38 0.38 -0.38 0.21 0 0.38 0.17 0.38 0.38v0.142h0.095v0.618H0.665V1.093Zm0.713 -0.142a0.238 0.238 0 1 0 -0.475 0v0.142h0.475v-0.142Z"/></svg>
</label></li>
</ul>
</fieldset>
</li>
<li class="TheBrandShapeStyle brand-crop-btns"><span
class="TheBrandShapeStyleLabel">Apply </span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions " >
<li class="TheBrandRadioGroupOption brandX-btn" id="brand-crop-apply"
data-hidden="false" data-disabled="false"
data-selected="false">
<label class="format-bold" for="none" rel="nada"
title="Left align text" id="brand-resize-apply">
<svg width="24px" height="24px" viewBox="0 0 2.28 2.28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" enable-background="new 0 0 76.00 76.00" xml:space="preserve"><path fill="#000000" fill-opacity="1" stroke-width="0.006" stroke-linejoin="round" d="m0.713 0.997 0.332 0.332L1.567 0.665l0.142 0.142 -0.665 0.807L0.57 1.14l0.142 -0.142Z"/></svg>
</label></li>
</ul>
</div>
</div>
</div>
<div class="secondTab radio-group-bytosri-pan " style="display:none;">
<div class="TheBrandScrollable TheBrandShapeStyles"
style="--scrollable-feather-start-opacity: 1;--scrollable-feather-end-opacity: 1"
data-direction="x" data-state="idle">
<div >
<ul class="TheBrandShapeStyleList">
<li class=" TheBrandShapeStyle"><span class="TheBrandShapeStyleLabel">Dimensions </span>
<fieldset class="TheBrandRadioGroup resetElements" title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="nada">
<div slot="option">
<input id="brand-resize-width" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="number" value="" data-max="" autocomplete="off">
</div>
</label>
</li> <li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="nada">
<div slot="option" style="width: 8px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters">
X
</div>
</label>
</li>
<li class="TheBrandRadioGroupOption" data-hidden="false" data-disabled="false" data-selected="false">
<label title="Text" for="none" rel="nada">
<div slot="option">
<input id="brand-resize-height" style="width: 40px; font-size: 10px; border-style: none" class="brand-form-field TheBrandButtonLabel TheBrandFixedWidthCharacters" type="number" value="" data-max="" autocomplete="off">
</div>
</label>
</li>
<li class="TheBrandRadioGroupOption brandX-btn" id="brand-crop-apply"
data-hidden="false" data-disabled="false"
data-selected="false">
<label class=" brand-lock-unlock active" for="none" rel="nada"
title="Left align text" id="brand-resize-lock">
<svg width="24px" height="24px" viewBox="0 0 2.28 2.28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" enable-background="new 0 0 76.01 76.01" xml:space="preserve"><path fill="#000000" fill-opacity="1" stroke-width="0.006" stroke-linejoin="round" d="M0.665 1.093h0.095v-0.142c0 -0.21 0.17 -0.38 0.38 -0.38 0.21 0 0.38 0.17 0.38 0.38v0.142h0.095v0.618H0.665V1.093Zm0.713 -0.142a0.238 0.238 0 1 0 -0.475 0v0.142h0.475v-0.142Z"/></svg>
</label></li>
</ul>
</fieldset>
</li>
<li class="TheBrandShapeStyle brand-crop-btns"><span
class="TheBrandShapeStyleLabel">Apply </span>
<fieldset class="TheBrandRadioGroup resetElements"
title="e=>e.shapeTitleTextAlign">
<ul class="TheBrandRadioGroupOptions " >
<li class="TheBrandRadioGroupOption brandX-btn" id="brand-crop-apply"
data-hidden="false" data-disabled="false"
data-selected="false">
<label class="format-bold" for="none" rel="nada"
title="Left align text" id="brand-resize-apply">
<svg width="24px" height="24px" viewBox="0 0 2.28 2.28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" enable-background="new 0 0 76.00 76.00" xml:space="preserve"><path fill="#000000" fill-opacity="1" stroke-width="0.006" stroke-linejoin="round" d="m0.713 0.997 0.332 0.332L1.567 0.665l0.142 0.142 -0.665 0.807L0.57 1.14l0.142 -0.142Z"/></svg>
</label></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="TheBrandScrollable TheBrandControlListScroller"
style="--scrollable-feather-start-opacity: 0;--scrollable-feather-end-opacity: 0"
data-direction="x" >
<div >
<fieldset class="TheBrandRadioGroup TheBrandControlList" data-layout="row">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab"
data-selected="true"><input type="radio" class="implicit"
id="radio-group-bytosri-crop"
value="text">
<label id="radio-group-bytosri-cropX" for="radio-group-bytosri-crop" title="Text">
<div slot="option">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 1.92 1.92" enable-background="new 0 0 64 64" xml:space="preserve"><path fill="none" stroke="#000000" stroke-width="0.06" stroke-miterlimit="10" points="0,11 53,11 53,64 " d="M0 0.33L1.59 0.33L1.59 1.92"/><path fill="none" stroke="#000000" stroke-width="0.06" stroke-miterlimit="10" points="11,0 11,53 64,53 " d="M0.33 0L0.33 1.59L1.92 1.59"/><path fill="none" stroke="#000000" stroke-width="0.06" stroke-miterlimit="10" x1="11" y1="53" x2="63" y2="1" d="M0.33 1.59L1.89 0.03"/></svg>
<span>Crop</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption startTab"
data-selected="hover"><input type="radio" class="implicit"
id="radio-group-bytosri-rotate"
value="text">
<label for="radio-group-bytosri-rotate" title="Text">
<div slot="option">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 1.92 1.92" enable-background="new 0 0 64 64" xml:space="preserve"><g><path fill="none" stroke="#000000" stroke-width="0.06" stroke-miterlimit="10" d="M0.99 0.03c0.23 0 0.461 0.088 0.636 0.264C1.947 0.615 1.975 1.117 1.71 1.47l-0.18 0.18"/></g><g><path fill="none" stroke="#000000" stroke-width="0.06" stroke-miterlimit="10" d="M0.93 1.89c-0.23 0 -0.461 -0.088 -0.636 -0.264C-0.027 1.305 -0.055 0.803 0.21 0.45l0.18 -0.18"/></g><path fill="none" stroke="#000000" stroke-width="0.06" stroke-linejoin="bevel" stroke-miterlimit="10" points="51,44 51,55
62,55 " d="M1.53 1.32L1.53 1.65L1.86 1.65"/><path fill="none" stroke="#000000" stroke-width="0.06" stroke-linejoin="bevel" stroke-miterlimit="10" points="13,20 13,9 2,9
" d="M0.39 0.6L0.39 0.27L0.06 0.27"/></svg>
<span>Rotate</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-resize"
value="text">
<label for="radio-group-bytosri-resize" title="Text">
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.48 0.48" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M0.175 0.154a0.014 0.014 0 0 1 0 0.021 0.014 0.014 0 0 1 -0.021 0L0.03 0.051V0.105a0.015 0.015 0 0 1 -0.015 0.015 0.015 0.015 0 0 1 -0.015 -0.015v-0.09a0.012 0.012 0 0 1 0 -0.006A0.015 0.015 0 0 1 0.009 0 0.012 0.012 0 0 1 0.015 0h0.09a0.015 0.015 0 0 1 0.015 0.015 0.015 0.015 0 0 1 -0.015 0.015H0.051ZM0.48 0.375a0.015 0.015 0 0 0 -0.03 0v0.054l-0.124 -0.124a0.015 0.015 0 0 0 -0.021 0.021L0.429 0.45H0.375a0.015 0.015 0 0 0 0 0.03h0.09a0.012 0.012 0 0 0 0.006 0 0.015 0.015 0 0 0 0.008 -0.008 0.012 0.012 0 0 0 0 -0.006Z"/></g></g></svg>
<span>Resize</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-resize"
value="text">
<label for="radio-group-bytosri-pan" title="Text">
<div slot="option">
<svg width="24px" height="24px" viewBox="0 0 0.72 0.72" xmlns="http://www.w3.org/2000/svg"><path d="m0.606 0.643 0.006 0.017h-0.017l-0.006 -0.018 -0.002 -0.005c-0.006 -0.016 -0.013 -0.023 -0.013 -0.038a1.334 1.334 0 0 0 0.006 -0.142c-0.002 -0.023 -0.001 -0.045 -0.003 -0.062 -0.002 -0.015 -0.003 -0.027 -0.003 -0.033 0 -0.003 0 -0.008 -0.001 -0.014h0l0 -0.002 0 -0.002 0 0c0 -0.007 0 -0.016 0.001 -0.021a0.367 0.367 0 0 0 0.007 -0.109c-0.004 -0.013 -0.014 -0.044 -0.033 -0.044a0.027 0.027 0 0 0 -0.012 0.003 0.033 0.033 0 0 0 -0.006 0.024 0.239 0.239 0 0 1 0.001 0.051 0.16 0.16 0 0 1 -0.006 0.028c-0.001 0.005 -0.003 0.01 -0.004 0.015l-0.001 0.004 0 0.004a0.039 0.039 0 0 1 -0.002 0.009 0.018 0.018 0 0 1 -0.017 0.012 0.015 0.015 0 0 1 -0.015 -0.014 0.348 0.348 0 0 1 -0.003 -0.024c-0.001 -0.01 -0.002 -0.017 -0.002 -0.024 -0.002 -0.013 -0.005 -0.028 -0.008 -0.044l-0.001 -0.004c-0.003 -0.013 -0.005 -0.025 -0.006 -0.034a0.2 0.2 0 0 0 -0.014 -0.06 0.02 0.02 0 0 0 -0.017 -0.011h-0.001a0.025 0.025 0 0 0 -0.027 0.019 0.061 0.061 0 0 0 0.003 0.025l0.002 0.008a0.166 0.166 0 0 1 0.005 0.019 0.539 0.539 0 0 1 0.002 0.055c0 0.008 0 0.014 0 0.019a0.215 0.215 0 0 0 0.004 0.03 0.108 0.108 0 0 1 0.002 0.013 0.027 0.027 0 0 1 -0.001 0.009 0.027 0.027 0 0 1 -0.002 0.004 0.008 0.008 0 0 1 -0.006 0.004h0c-0.003 0 -0.005 0 -0.006 -0.002a0.08 0.08 0 0 1 -0.014 -0.027c-0.002 -0.006 -0.004 -0.012 -0.005 -0.019l-0.003 -0.012a0.188 0.188 0 0 0 -0.019 -0.043l-0.004 -0.007a0.298 0.298 0 0 1 -0.018 -0.036c-0.002 -0.004 -0.003 -0.009 -0.005 -0.013l-0.006 -0.015a0.123 0.123 0 0 0 -0.013 -0.026 0.027 0.027 0 0 0 -0.023 -0.011 0.024 0.024 0 0 0 -0.027 0.022 0.107 0.107 0 0 0 0.009 0.023l0.002 0.005a0.227 0.227 0 0 1 0.01 0.024l0.004 0.015c0.007 0.023 0.016 0.055 0.021 0.069 0 0.001 0.001 0.003 0.002 0.005 0 0 0.007 0.016 0.009 0.02 0.009 0.022 0.008 0.025 0.008 0.027a0.014 0.014 0 0 1 -0.014 0.008 0.025 0.025 0 0 1 -0.013 -0.004 0.13 0.13 0 0 1 -0.028 -0.03 0.626 0.626 0 0 1 -0.02 -0.029l-0.003 -0.004a0.157 0.157 0 0 0 -0.008 -0.011l-0.005 -0.006c-0.004 -0.005 -0.01 -0.014 -0.015 -0.022 -0.002 -0.002 -0.011 -0.018 -0.011 -0.018a0.104 0.104 0 0 0 -0.014 -0.018 0.033 0.033 0 0 0 -0.023 -0.011 0.034 0.034 0 0 0 -0.015 0.004c-0.003 0.001 -0.008 0.011 -0.003 0.027a0.247 0.247 0 0 0 0.023 0.049c0.006 0.01 0.012 0.02 0.017 0.03l0.013 0.023a0.292 0.292 0 0 0 0.02 0.03l0.011 0.015a0.128 0.128 0 0 1 0.022 0.05 0.027 0.027 0 0 0 0.003 0.008l0.006 0.01a0.024 0.024 0 0 1 0.003 0.024 0.07 0.07 0 0 1 -0.01 0.014 0.024 0.024 0 0 1 -0.017 0.009 0.159 0.159 0 0 1 -0.032 -0.009 0.268 0.268 0 0 0 -0.029 -0.009 0.024 0.024 0 0 1 -0.006 -0.004 0.033 0.033 0 0 1 -0.003 -0.003l-0.005 -0.005a0.09 0.09 0 0 0 -0.039 -0.025 0.064 0.064 0 0 0 -0.015 -0.002 0.053 0.053 0 0 0 -0.023 0.004 0.008 0.008 0 0 0 -0.003 0.006 0.013 0.013 0 0 0 0.001 0.007c0.001 0.001 0.004 0.004 0.007 0.006l0.009 0.008c0.001 0.001 0.002 0.002 0.003 0.002l0.003 0.002a0.023 0.023 0 0 1 0.008 0.008 0.091 0.091 0 0 0 0.042 0.044c0.01 0.005 0.025 0.013 0.036 0.019l0.005 0.003a0.113 0.113 0 0 1 0.018 0.014l0.009 0.007a0.082 0.082 0 0 0 0.009 0.006c0.004 0.002 0.021 0.012 0.021 0.012a0.229 0.229 0 0 1 0.021 0.013c0.012 0.008 0.023 0.021 0.037 0.03 0.006 0.004 0.011 0.007 0.015 0.01l0.008 0.005a0.099 0.099 0 0 1 0.016 0.012c0.008 0.007 0.012 0.007 0.017 0.022l0.005 0.017h-0.014l-0.007 -0.017c-0.004 -0.01 -0.008 -0.008 -0.012 -0.013a0.08 0.08 0 0 0 -0.013 -0.01l-0.006 -0.004c-0.006 -0.004 -0.011 -0.007 -0.017 -0.011 -0.014 -0.01 -0.022 -0.02 -0.037 -0.031a0.25 0.25 0 0 0 -0.016 -0.01l-0.016 -0.009A0.171 0.171 0 0 1 0.226 0.534a0.086 0.086 0 0 0 -0.014 -0.011l-0.003 -0.002c-0.012 -0.007 -0.027 -0.015 -0.037 -0.019a0.105 0.105 0 0 1 -0.049 -0.051 0.013 0.013 0 0 0 -0.004 -0.003l-0.003 -0.002a0.021 0.021 0 0 1 -0.004 -0.003l-0.009 -0.007a0.112 0.112 0 0 1 -0.008 -0.007 0.025 0.025 0 0 1 0.006 -0.035 0.071 0.071 0 0 1 0.032 -0.007 0.084 0.084 0 0 1 0.02 0.002 0.108 0.108 0 0 1 0.047 0.029l0.005 0.005 0.003 0.003a0.201 0.201 0 0 1 0.024 0.007l0.004 0.001a0.161 0.161 0 0 0 0.027 0.008 0.044 0.044 0 0 0 0.011 -0.014c0.002 -0.003 -0.003 -0.011 -0.004 -0.014l-0.002 -0.004a0.062 0.062 0 0 1 -0.003 -0.006 0.035 0.035 0 0 1 -0.004 -0.01 0.106 0.106 0 0 0 -0.019 -0.043 0.419 0.419 0 0 1 -0.033 -0.048c-0.003 -0.006 -0.026 -0.044 -0.03 -0.052a0.27 0.27 0 0 1 -0.025 -0.052 0.037 0.037 0 0 1 0.012 -0.044 0.053 0.053 0 0 1 0.023 -0.006 0.051 0.051 0 0 1 0.04 0.022 0.204 0.204 0 0 1 0.017 0.024l0.012 0.019a0.123 0.123 0 0 0 0.009 0.013c0.008 0.01 0.015 0.02 0.021 0.029 0 0 0.01 0.015 0.014 0.02a0.119 0.119 0 0 0 0.024 0.027l0 -0.001a0.293 0.293 0 0 0 -0.006 -0.015s-0.01 -0.023 -0.011 -0.024c-0.006 -0.015 -0.018 -0.055 -0.022 -0.072l-0.004 -0.013a0.205 0.205 0 0 0 -0.009 -0.022l-0.003 -0.006a0.089 0.089 0 0 1 -0.01 -0.029A0.04 0.04 0 0 1 0.304 0.084a0.044 0.044 0 0 1 0.037 0.018 0.136 0.136 0 0 1 0.014 0.028l0.005 0.014c0.002 0.006 0.004 0.01 0.005 0.014a0.282 0.282 0 0 0 0.018 0.036l0.004 0.007a0.226 0.226 0 0 1 0.018 0.038l0 -0.01c0 -0.019 -0.001 -0.043 -0.002 -0.052a0.129 0.129 0 0 0 -0.005 -0.018l-0.003 -0.009a0.07 0.07 0 0 1 -0.003 -0.03 0.039 0.039 0 0 1 0.04 -0.032 0.042 0.042 0 0 1 0.005 0 0.037 0.037 0 0 1 0.03 0.02 0.209 0.209 0 0 1 0.015 0.064c0.001 0.008 0.003 0.019 0.006 0.032l0.002 0.009c0.003 0.015 0.006 0.028 0.007 0.04l0.003 0.028c0.001 0.009 0.002 0.016 0.003 0.02a0.02 0.02 0 0 1 0.001 -0.005l0.002 -0.01a0.24 0.24 0 0 1 0.003 -0.014 0.149 0.149 0 0 0 0.005 -0.027 0.224 0.224 0 0 0 -0.001 -0.048 0.041 0.041 0 0 1 0.014 -0.039 0.045 0.045 0 0 1 0.02 -0.005c0.031 0 0.045 0.039 0.049 0.056a0.361 0.361 0 0 1 -0.007 0.115c-0.001 0.005 -0.001 0.016 -0.001 0.022 0.001 0.006 0.001 0.011 0.001 0.015 0 0.005 0.002 0.017 0.003 0.031 0.002 0.019 0.001 0.04 0.003 0.063a1.248 1.248 0 0 1 -0.006 0.144 0.22 0.22 0 0 0 0.015 0.041 0.025 0.025 0 0 1 0.001 0.002z"/><path fill="none" d="M0 0h0.72v0.72H0z"/></svg>
<span> Pan & Details</span></div>
</label></li>
</ul>
</fieldset>
</div>
</div>
</div> <div class="MidTabPanel" style="display:none" id="panel-brand-tab-filterz" slot="footer">
<div class="TheBrandControlPanels">
<div class="TheBrandControlPanel">
<div class="TheBrandShapeStyleEditor">
<div class="secondTab radio-group-bytosri-filta" style="display:none;" >
<div class="TheBrandScrollable TheBrandShapeStyles" style="--scrollable-feather-start-opacity: 0.5;--scrollable-feather-end-opacity: 0; overflow-x: auto" data-direction="x" data-state="idle overflows">
<ul class="brand-grid" style="min-width: 2000px!important; " id="brand-filters">
<li class="brand-frames-grid " style="padding-right: 5px; margin-right: 0px ; padding-right: 0px" >
<input type="checkbox" name="brand-filter" id="sepia" autocomplete="off" class="input-hidden" />
<label for="sepia"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/sepia.png" /><span style="font-size: 8px">Sepia</span></label>
</li>
<li class="brand-frames-grid TheBrandFillTile" style="padding-right: 5px; " >
<input type="checkbox" name="brand-filter" id="blackwhite" autocomplete="off" class="input-hidden" />
<label for="blackwhite"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/blackwhite.png" /><span style="font-size: 8px">Black/White</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="brownie" autocomplete="off" class="input-hidden" />
<label for="brownie"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/brownie.png" /><span style="font-size: 8px">Brownie</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="vintage" autocomplete="off" class="input-hidden" />
<label for="vintage"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/vintage.png" /><span style="font-size: 8px">Vintage</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="kodachrome" autocomplete="off" class="input-hidden" />
<label for="kodachrome"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/kodachrome.png" /><span style="font-size: 8px">Kodachrome</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="technicolor" autocomplete="off" class="input-hidden" />
<label for="technicolor"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/technicolor.png" /><span style="font-size: 8px">Technicolor</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="polaroid" autocomplete="off" class="input-hidden" />
<label for="polaroid"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/polaroid.png" /><span style="font-size: 8px">Polaroid</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="shift" autocomplete="off" class="input-hidden" />
<label for="shift"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/shift.png" /><span style="font-size: 8px">Shift</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="invert" autocomplete="off" class="input-hidden" />
<label for="invert"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/invert.png" /><span style="font-size: 8px">Invert</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="sharpen" autocomplete="off" class="input-hidden" />
<label for="sharpen"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/sharpen.png" /><span style="font-size: 8px">Sharpen</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="emboss" autocomplete="off" class="input-hidden" />
<label for="emboss"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/emboss.png" /><span style="font-size: 8px">Emboss</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="sobelX" autocomplete="off" class="input-hidden" />
<label for="sobelX"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/sobelX.png" /><span style="font-size: 8px">SobelX</span></label>
</li>
<li class="brand-frames-grid" style="padding-right: 5px" >
<input type="checkbox" name="brand-filter" id="sobelY" autocomplete="off" class="input-hidden" />
<label for="sobelY"><img class="lazy" style="border-radius:10px; " data-src="assets/filters/sobelY.png" /><span style="font-size: 8px">SobelY</span></label>
</li>
</ul>
</div>
</div> <div class="secondTab radio-group-bytosri-basica" style="display:none;" >
<div class="TheBrandScrollable TheBrandShapeStyles" style="--scrollable-feather-start-opacity: 0; --scrollable-feather-end-opacity: 0; touch-action: none;" data-direction="x" data-state="idle overflows">
<fieldset class="TheBrandRadioGroup TheBrandControlList" data-layout="row">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption TheBrandControlListOption" data-selected="false" ><input type="radio" class="implicit" value="move">
<label rel="basic-options" for="elementEffects" title="Text" >
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.72 0.72" xmlns="http://www.w3.org/2000/svg"><path d="M0.36 0.06a0.3 0.3 0 1 0 0.3 0.3A0.3 0.3 0 0 0 0.36 0.06Zm-0.03 0.538a0.24 0.24 0 0 1 0 -0.476Zm0.06 0V0.122a0.24 0.24 0 0 1 0 0.476Z"></path></svg>
<span>Basic </span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption" data-selected="false" ><input type="radio" class="implicit" value="move">
<label rel="gamma-options" for="elementEffects" title="Text" >
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.72 0.72" xmlns="http://www.w3.org/2000/svg"><path d="M0.36 0.06a0.3 0.3 0 1 0 0.3 0.3A0.3 0.3 0 0 0 0.36 0.06Zm-0.03 0.538a0.24 0.24 0 0 1 0 -0.476Zm0.06 0V0.122a0.24 0.24 0 0 1 0 0.476Z"></path></svg>
<span>Gamma</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" ><input type="radio" class="implicit" value="move">
<label rel="blend-options" for="elementEffects" title="Text" >
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.72 0.72" xmlns="http://www.w3.org/2000/svg"><path d="M0.36 0.06a0.3 0.3 0 1 0 0.3 0.3A0.3 0.3 0 0 0 0.36 0.06Zm-0.03 0.538a0.24 0.24 0 0 1 0 -0.476Zm0.06 0V0.122a0.24 0.24 0 0 1 0 0.476Z"></path></svg>
<span>Blend Color</span></div>
</label></li>
<!-- <li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" ><input type="radio" class="implicit" value="move">
<label rel="duotone-options" for="elementEffects" title="Text" >
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.72 0.72" xmlns="http://www.w3.org/2000/svg"><path d="M0.36 0.06a0.3 0.3 0 1 0 0.3 0.3A0.3 0.3 0 0 0 0.36 0.06Zm-0.03 0.538a0.24 0.24 0 0 1 0 -0.476Zm0.06 0V0.122a0.24 0.24 0 0 1 0 0.476Z"></path></svg>
<span>Duotone Color</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" ><input type="radio" class="implicit" value="move">
<label rel="swap" for="elementEffects" title="Text" >
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.72 0.72" xmlns="http://www.w3.org/2000/svg"><path d="M0.36 0.06a0.3 0.3 0 1 0 0.3 0.3A0.3 0.3 0 0 0 0.36 0.06Zm-0.03 0.538a0.24 0.24 0 0 1 0 -0.476Zm0.06 0V0.122a0.24 0.24 0 0 1 0 0.476Z"></path></svg>
<span>Swap Colors </span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption modalElements" data-selected="false" ><input type="radio" class="implicit" value="move">
<label rel="advanced" for="elementEffects" title="Text" >
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.72 0.72" xmlns="http://www.w3.org/2000/svg"><path d="M0.36 0.06a0.3 0.3 0 1 0 0.3 0.3A0.3 0.3 0 0 0 0.36 0.06Zm-0.03 0.538a0.24 0.24 0 0 1 0 -0.476Zm0.06 0V0.122a0.24 0.24 0 0 1 0 0.476Z"></path></svg>
<span>Advanced </span></div>
</label></li>
-->
</ul></fieldset>
</div>
</div>
</div>
</div>
</div>
<div class="TheBrandScrollable TheBrandControlListScroller"
style="--scrollable-feather-start-opacity: 0;--scrollable-feather-end-opacity: 0"
data-direction="x" >
<div >
<fieldset class="TheBrandRadioGroup TheBrandControlList" data-layout="row">
<ul class="TheBrandRadioGroupOptions">
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="true"><input type="radio" class="implicit"
id="radio-group-bytosri-filta"
value="text">
<label id="radio-group-bytosri-filtaX" for="radio-group-bytosri-filta" title="Text">
<div slot="option">
<svg width="24" height="24" viewBox="0 0 24
24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" stroke-linecap="round"
stroke-linejoin="round">
<g>
<g stroke-width=".125em" stroke="currentColor" fill="none">
<path d="M18.347 9.907a6.5 6.5 0 1 0-1.872 3.306M3.26 11.574a6.5 6.5 0 1 0 2.815-1.417 M10.15 17.897A6.503 6.503 0 0 0 16.5 23a6.5 6.5 0 1 0-6.183-8.51"></path>
</g>
</g>
</svg>
<span>Filters</span></div>
</label></li>
<li class="TheBrandRadioGroupOption TheBrandControlListOption"
data-selected="false"><input type="radio" class="implicit"
id="radio-group-bytosri-basica"
value="text">
<label for="radio-group-bytosri-basica" title="Text">
<div slot="option">
<svg fill="#000000" width="24px" height="24px" viewBox="0 0 0.72 0.72" xmlns="http://www.w3.org/2000/svg"><path d="M0.36 0.06a0.3 0.3 0 1 0 0.3 0.3A0.3 0.3 0 0 0 0.36 0.06Zm-0.03 0.538a0.24 0.24 0 0 1 0 -0.476Zm0.06 0V0.122a0.24 0.24 0 0 1 0 0.476Z"/></svg>
<span>Adjustments</span></div>
</label></li>
</ul>
</fieldset>
</div>
</div>
</div>
<div class="brand-tool-nav-toolbar textBar has-subpanel" style="display: none; ">
<div class="brand-tool-nav-toolbar-inner">
<div class="brand-tool-label-wrapper">
<label class="brand-tool-label" for="brand-tool-font-size"><span class="material-icons">text_fields</span> </label>
<input type="number" id="brand-tool-font-size" class="brand-tool-input" value="24" min="1" data-tooltip="Font Size" data-tooltip-placement="top">
</div>
<!-- Font Family Display -->
<div class="brand-tool-select select2-item" id="brand-tool-font-family" title="Font Family" data-tooltip="Font Family" data-tooltip-placement="top">Inter</div>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-dropdown" id="brand-tool-format-menu" aria-expanded="false" aria-controls="brand-tool-format-panel" data-tooltip="Format" data-tooltip-placement="top">
<span class="material-icons">text_format</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-dropdown" id="brand-tool-align-menu" aria-expanded="false" aria-controls="brand-tool-align-panel" data-tooltip="Align" data-tooltip-placement="top">
<span class="material-icons">format_align_center</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-dropdown" id="brand-tool-transform-menu" aria-expanded="false" aria-controls="brand-tool-transform-panel" data-tooltip="Transform" data-tooltip-placement="top">
<span class="material-icons">align_horizontal_center</span>
</button>
<!--
<input type="number" class="brand-tool-input" id="brand-tool-letter-spacing" value="0" step="1" title="Letter Spacing">
<input type="number" class="brand-tool-input" id="brand-tool-line-height" value="1.2" step="0.1" title="Line Height"> -->
<span class="brand-tool-divider"></span>
<div id="brand-tool-color" class="brand-tool-color" title="Text Color" data-tooltip="Text Color" data-tooltip-placement="top"></div>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-dropdown" id="brand-tool-opacity-menu" aria-expanded="false" aria-controls="brand-tool-opacity-panel" data-tooltip="Opacity" data-tooltip-placement="top">
<span class="material-icons">opacity</span>
</button>
<span class="brand-tool-divider"></span>
<label class="brand-tool-label" for="brand-tool-text-background"><span class="material-icons">format_color_fill</span></label>
<div id="brand-tool-text-background" class="brand-tool-color" title="Text Background" data-tooltip="Text Background" data-tooltip-placement="top"></div>
<!-- ========================================================= -->
<!-- ADDITIONAL FORM ELEMENTS (FULL SET) -->
<!-- ========================================================= -->
<!--
<span class="brand-tool-divider"></span> -->
<!-- Range Slider -->
<!-- <input type="range" class="brand-tool-range" id="brand-tool-range" min="0" max="100" value="50">
<span class="brand-tool-divider"></span> -->
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-text-settings" data-tooltip="Text Settings" data-tooltip-placement="top">
<span class="material-icons">tune</span>
<span class="brand-tool-toggle-text">Text Settings</span>
</button>
</div>
<div class="brand-tool-subpanel" id="brand-tool-format-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<button class="brand-tool-toggle" id="brand-tool-bold" data-tooltip="Bold" data-tooltip-placement="top"><span class="material-icons">format_bold</span></button>
<button class="brand-tool-toggle" id="brand-tool-italic" data-tooltip="Italic" data-tooltip-placement="top"><span class="material-icons">format_italic</span></button>
<button class="brand-tool-toggle" id="brand-tool-format-uppercase" data-tooltip="Uppercase" data-tooltip-placement="top"><span class="material-icons">text_fields</span></button>
<button class="brand-tool-toggle" id="brand-tool-underline" data-tooltip="Underline" data-tooltip-placement="top"><span class="material-icons">format_underlined</span></button>
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-align-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<button class="brand-tool-toggle" id="brand-tool-align-left" data-tooltip="Align Left" data-tooltip-placement="top"><span class="material-icons">format_align_left</span></button>
<button class="brand-tool-toggle" id="brand-tool-align-center" data-tooltip="Align Center" data-tooltip-placement="top"><span class="material-icons">format_align_center</span></button>
<button class="brand-tool-toggle" id="brand-tool-align-right" data-tooltip="Align Right" data-tooltip-placement="top"><span class="material-icons">format_align_right</span></button>
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-transform-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<button class="brand-tool-toggle" id="brand-tool-text-flip-x" data-tooltip="Flip Horizontal" data-tooltip-placement="top"><span class="material-icons">flip</span></button>
<button class="brand-tool-toggle" id="brand-tool-text-flip-y" data-tooltip="Flip Vertical" data-tooltip-placement="top"><span class="material-icons">flip</span></button>
<button class="brand-tool-toggle" id="brand-tool-brand-horizontal-center" data-tooltip="Center Horizontally" data-tooltip-placement="top"><span class="material-icons">align_horizontal_center</span></button>
<button class="brand-tool-toggle" id="brand-tool-brand-vertical-center" data-tooltip="Center Vertically" data-tooltip-placement="top"><span class="material-icons">vertical_align_center</span></button>
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-opacity-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<label class="brand-tool-label" for="proxy-text-opacity"><span class="material-icons">opacity</span></label>
<input id="proxy-text-opacity" type="range" min="0" max="1" value="1" step="0.1" class="brand-tool-range" autocomplete="off" data-tooltip="Text Opacity" data-tooltip-placement="top">
</div>
</div>
</div>
<script>
(function(){
if (typeof jQuery === 'undefined') return;
jQuery(function($){
var $textOpacity = $('#text-opacity');
if ($textOpacity.length) {
var op = $textOpacity.val();
if (op != null) $('#proxy-text-opacity').val(op);
}
$(document).on('input change', '#proxy-text-opacity', function(){
$('#text-opacity').val(this.value).trigger('input').trigger('change');
});
$(document).on('click', '#brand-tool-text-background', function(){
$('#brand-text-background').trigger('click');
});
$(document).on('click', '#brand-tool-font-family', function(){
var $btn = $('#Card-Text button');
if ($btn.length) { $btn.trigger('click'); }
$('#brand-font-family').trigger('focus').trigger('click');
});
$(document).on('click', '#brand-tool-text-settings', function(){
var $btn = $('button.resetElements[data-tooltip="Add and style text"]').first();
if ($btn.length) { $btn.trigger('click'); return; }
$btn = $('#Card-Text button').first();
if ($btn.length) { $btn.trigger('click'); }
});
function setFormatPanelOpen(open) {
var $panel = $('#brand-tool-format-panel');
var $toggle = $('#brand-tool-format-menu');
if (open) setAlignPanelOpen(false);
if (open) setTransformPanelOpen(false);
if (open) setOpacityPanelOpen(false);
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setAlignPanelOpen(open) {
var $panel = $('#brand-tool-align-panel');
var $toggle = $('#brand-tool-align-menu');
if (open) setFormatPanelOpen(false);
if (open) setTransformPanelOpen(false);
if (open) setOpacityPanelOpen(false);
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setTransformPanelOpen(open) {
var $panel = $('#brand-tool-transform-panel');
var $toggle = $('#brand-tool-transform-menu');
if (open) setFormatPanelOpen(false);
if (open) setAlignPanelOpen(false);
if (open) setOpacityPanelOpen(false);
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setOpacityPanelOpen(open) {
var $panel = $('#brand-tool-opacity-panel');
var $toggle = $('#brand-tool-opacity-menu');
if (open) setFormatPanelOpen(false);
if (open) setAlignPanelOpen(false);
if (open) setTransformPanelOpen(false);
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
setFormatPanelOpen(false);
setAlignPanelOpen(false);
setTransformPanelOpen(false);
setOpacityPanelOpen(false);
$(document).on('click', '#brand-tool-format-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setFormatPanelOpen(!open);
});
$(document).on('click', '#brand-tool-format-panel .brand-tool-toggle', function(){
setTimeout(function(){ setFormatPanelOpen(false); }, 0);
});
$(document).on('click', '#brand-tool-align-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setAlignPanelOpen(!open);
});
$(document).on('click', '#brand-tool-align-panel .brand-tool-toggle', function(){
setTimeout(function(){ setAlignPanelOpen(false); }, 0);
});
$(document).on('click', '#brand-tool-transform-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setTransformPanelOpen(!open);
});
$(document).on('click', '#brand-tool-transform-panel .brand-tool-toggle', function(){
setTimeout(function(){ setTransformPanelOpen(false); }, 0);
});
$(document).on('click', '#brand-tool-opacity-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setOpacityPanelOpen(!open);
});
$(document).on('keydown', function(e){
if (e.key === 'Escape') {
setFormatPanelOpen(false);
setAlignPanelOpen(false);
setTransformPanelOpen(false);
setOpacityPanelOpen(false);
}
});
$(document).on('click', function(e){
if ($(e.target).closest('.brand-tool-nav-toolbar.textBar').length) return;
setFormatPanelOpen(false);
setAlignPanelOpen(false);
setTransformPanelOpen(false);
setOpacityPanelOpen(false);
});
});
})();
</script>
<div class="brand-tool-nav-toolbar ImageBar has-subpanel" style="display: none; width: 800px!important;">
<div class="brand-tool-nav-toolbar-inner">
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-image-add" data-tooltip="Browse Media" data-tooltip-placement="top">
<span class="material-icons">photo_library</span>
<span class="brand-tool-toggle-text">Media</span>
</button>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-image-upload" data-tooltip="Upload" data-tooltip-placement="top">
<span class="material-icons">upload</span>
<span class="brand-tool-toggle-text">Upload</span>
</button>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-image-replace" data-tooltip="Replace Image" data-tooltip-placement="top">
<span class="material-icons">change_circle</span>
<span class="brand-tool-toggle-text">Replace</span>
</button>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-image-ai" data-tooltip="Edit With AI" data-tooltip-placement="top">
<span class="material-icons">smart_toy</span>
<span class="brand-tool-toggle-text">AI Edit</span>
</button>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-image-crop" data-tooltip="Crop Image" data-tooltip-placement="top">
<span class="material-icons">crop</span>
<span class="brand-tool-toggle-text">Crop</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-image-filter-menu" aria-expanded="false" aria-controls="brand-tool-image-filter-panel" data-tooltip="Filter" data-tooltip-placement="top">
<span class="material-icons">tune</span>
<span class="brand-tool-toggle-text">Filter</span>
</button>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-image-mask-menu" aria-expanded="false" aria-controls="brand-tool-image-mask-panel" data-tooltip="Mask" data-tooltip-placement="top">
<span class="material-icons">texture</span>
<span class="brand-tool-toggle-text">Mask</span>
</button>
<button class="brand-tool-toggle brand-tool-toggle-dropdown" id="brand-tool-image-opacity-menu" aria-expanded="false" aria-controls="brand-tool-image-opacity-panel" data-tooltip="Opacity" data-tooltip-placement="top">
<span class="material-icons">opacity</span>
</button>
<button class="brand-tool-toggle brand-tool-toggle-dropdown" id="brand-tool-image-transform-menu" aria-expanded="false" aria-controls="brand-tool-image-transform-panel" data-tooltip="Transform" data-tooltip-placement="top">
<span class="material-icons">align_horizontal_center</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-image-settings" data-tooltip="Image Settings" data-tooltip-placement="top">
<span class="material-icons">tune</span>
<span class="brand-tool-toggle-text">Image Settings</span>
</button>
</div>
<div class="brand-tool-subpanel" id="brand-tool-image-filter-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<select id="proxy-image-filter" class="brand-tool-select" data-tooltip="Image Filter" data-tooltip-placement="top"></select>
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-image-mask-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<select id="proxy-img-mask" class="brand-tool-select" data-tooltip="Image Mask" data-tooltip-placement="top"></select>
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-image-opacity-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<input type="range" id="proxy-img-opacity" class="brand-tool-range" min="0" max="1" step="0.01" value="1" data-tooltip="Opacity" data-tooltip-placement="top">
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-image-transform-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<button class="brand-tool-toggle" id="proxy-img-flip-horizontal" data-tooltip="Flip Horizontal" data-tooltip-placement="top"><span class="material-icons">flip</span></button>
<button class="brand-tool-toggle" id="proxy-img-flip-vertical" data-tooltip="Flip Vertical" data-tooltip-placement="top"><span class="material-icons">flip</span></button>
<button class="brand-tool-toggle" id="brand-tool-brand-horizontal-center" data-tooltip="Center Horizontally" data-tooltip-placement="top"><span class="material-icons">align_horizontal_center</span></button>
<button class="brand-tool-toggle" id="brand-tool-brand-vertical-center" data-tooltip="Center Vertically" data-tooltip-placement="top"><span class="material-icons">vertical_align_center</span></button>
</div>
</div>
</div>
<script>
(function(){
if (typeof jQuery === 'undefined') return;
jQuery(function($){
function syncSelect(src, proxy){
var $src = $(src);
var $proxy = $(proxy);
$proxy.empty();
$src.find('option').each(function(){
$proxy.append($('<option>').val($(this).val()).text($(this).text()));
});
$proxy.val($src.val());
}
syncSelect('#image-filter', '#proxy-image-filter');
syncSelect('#brand-img-mask', '#proxy-img-mask');
var op = $('#img-opacity').val();
if (op != null) $('#proxy-img-opacity').val(op);
$(document).on('click', '#brand-tool-image-add', function(){ $('#brand-img-media-library').trigger('click'); });
$(document).on('click', '#brand-tool-image-upload', function(){ $('#brand-img-upload-proxy').trigger('click'); });
$(document).on('click', '#brand-tool-image-replace', function(){ $('#crop-image-replace-proxy').trigger('click'); });
$(document).on('click', '#brand-tool-image-ai', function(){ $('#img-ai').trigger('click'); });
$(document).on('click', '#brand-tool-image-crop', function(){ $('#crop-image-object-proxy').trigger('click'); });
$(document).on('click', '#brand-tool-image-settings', function(){ $(".TheBrandTabList li#Card-Image button").trigger("click"); });
$(document).on('change', '#proxy-image-filter', function(){ $('#image-filter').val(this.value).trigger('change'); setImageFilterPanelOpen(false); });
$(document).on('change', '#proxy-img-mask', function(){ $('#brand-img-mask').val(this.value).trigger('change'); setImageMaskPanelOpen(false); });
$(document).on('input change', '#proxy-img-opacity', function(){ $('#img-opacity').val(this.value).trigger('input'); });
$(document).on('click', '#proxy-img-flip-horizontal', function(){ $('#img-flip-horizontal').trigger('click'); });
$(document).on('click', '#proxy-img-flip-vertical', function(){ $('#img-flip-vertical').trigger('click'); });
function setImageFilterPanelOpen(open) {
var $panel = $('#brand-tool-image-filter-panel');
var $toggle = $('#brand-tool-image-filter-menu');
if (open) {
setImageMaskPanelOpen(false);
setImageOpacityPanelOpen(false);
setImageTransformPanelOpen(false);
}
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setImageMaskPanelOpen(open) {
var $panel = $('#brand-tool-image-mask-panel');
var $toggle = $('#brand-tool-image-mask-menu');
if (open) {
setImageFilterPanelOpen(false);
setImageOpacityPanelOpen(false);
setImageTransformPanelOpen(false);
}
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setImageOpacityPanelOpen(open) {
var $panel = $('#brand-tool-image-opacity-panel');
var $toggle = $('#brand-tool-image-opacity-menu');
if (open) {
setImageFilterPanelOpen(false);
setImageMaskPanelOpen(false);
setImageTransformPanelOpen(false);
}
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setImageTransformPanelOpen(open) {
var $panel = $('#brand-tool-image-transform-panel');
var $toggle = $('#brand-tool-image-transform-menu');
if (open) {
setImageFilterPanelOpen(false);
setImageMaskPanelOpen(false);
setImageOpacityPanelOpen(false);
}
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
setImageFilterPanelOpen(false);
setImageMaskPanelOpen(false);
setImageOpacityPanelOpen(false);
setImageTransformPanelOpen(false);
$(document).on('click', '#brand-tool-image-filter-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setImageFilterPanelOpen(!open);
});
$(document).on('click', '#brand-tool-image-mask-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setImageMaskPanelOpen(!open);
});
$(document).on('click', '#brand-tool-image-opacity-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setImageOpacityPanelOpen(!open);
});
$(document).on('click', '#brand-tool-image-transform-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setImageTransformPanelOpen(!open);
});
$(document).on('click', '#brand-tool-image-transform-panel .brand-tool-toggle', function(){
setTimeout(function(){ setImageTransformPanelOpen(false); }, 0);
});
$(document).on('keydown', function(e){
if (e.key === 'Escape') {
setImageFilterPanelOpen(false);
setImageMaskPanelOpen(false);
setImageOpacityPanelOpen(false);
setImageTransformPanelOpen(false);
}
});
$(document).on('click', function(e){
if ($(e.target).closest('.brand-tool-nav-toolbar.ImageBar').length) return;
setImageFilterPanelOpen(false);
setImageMaskPanelOpen(false);
setImageOpacityPanelOpen(false);
setImageTransformPanelOpen(false);
});
});
})();
</script>
<div class="brand-tool-nav-toolbar adjustBar has-subpanel" >
<div class="brand-tool-nav-toolbar-inner">
<button class="brand-tool-toggle" id="brand-tool-adjust-bg-color" data-tooltip="Background Color" data-tooltip-placement="top"><span class="material-icons">format_color_fill</span></button>
<button class="brand-tool-toggle" id="brand-tool-adjust-bg-media" data-tooltip="Background Media" data-tooltip-placement="top"><span class="material-icons">photo_library</span></button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-crop-menu" aria-expanded="false" aria-controls="brand-tool-crop-panel" data-tooltip="Crop" data-tooltip-placement="top">
<span class="material-icons">crop</span>
<span class="brand-tool-toggle-text">Crop</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-rotate-menu" aria-expanded="false" aria-controls="brand-tool-rotate-panel" data-tooltip="Rotate" data-tooltip-placement="top">
<span class="material-icons">rotate_right</span>
<span class="brand-tool-toggle-text">Rotate</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-resize-menu" aria-expanded="false" aria-controls="brand-tool-resize-panel" data-tooltip="Resize" data-tooltip-placement="top">
<span class="material-icons">straighten</span>
<span class="brand-tool-toggle-text">Resize</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-adjust-effects" data-tooltip="Effects" data-tooltip-placement="top">
<span class="material-icons">auto_fix_high</span>
<span class="brand-tool-toggle-text">Effects</span>
</button>
</div>
<div class="brand-tool-subpanel" id="brand-tool-crop-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<select id="proxy-crop-style" class="brand-tool-select" data-tooltip="Crop Style" data-tooltip-placement="top"></select>
<button class="brand-tool-toggle" id="proxy-crop-apply" data-tooltip="Apply Crop" data-tooltip-placement="top"><span class="material-icons">done</span></button>
<button class="brand-tool-toggle" id="proxy-crop-cancel" data-tooltip="Cancel Crop" data-tooltip-placement="top"><span class="material-icons">close</span></button>
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-rotate-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<button class="brand-tool-toggle" id="brand-tool-rotate-left" data-tooltip="Rotate Left" data-tooltip-placement="top"><span class="material-icons">rotate_left</span></button>
<button class="brand-tool-toggle" id="brand-tool-rotate-right" data-tooltip="Rotate Right" data-tooltip-placement="top"><span class="material-icons">rotate_right</span></button>
<button class="brand-tool-toggle" id="brand-tool-flip-horizontal" data-tooltip="Flip Horizontal" data-tooltip-placement="top"><span class="material-icons">flip</span></button>
<button class="brand-tool-toggle" id="brand-tool-flip-vertical" data-tooltip="Flip Vertical" data-tooltip-placement="top"><span class="material-icons">flip</span></button>
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-resize-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<label class="brand-tool-label" for="proxy-resize-width">W</label>
<input id="proxy-resize-width" class="brand-tool-input" type="number" min="1" step="1" value="" data-tooltip="Width" data-tooltip-placement="top" />
<label class="brand-tool-label" for="proxy-resize-height">H</label>
<input id="proxy-resize-height" class="brand-tool-input" type="number" min="1" step="1" value="" data-tooltip="Height" data-tooltip-placement="top" />
<button class="brand-tool-toggle" id="proxy-resize-lock" data-tooltip="Lock Aspect Ratio" data-tooltip-placement="top"><span class="material-icons">link</span></button>
<button class="brand-tool-toggle" id="proxy-resize-apply" data-tooltip="Apply Resize" data-tooltip-placement="top"><span class="material-icons">done</span></button>
</div>
</div>
</div>
<script>
(function(){
if (typeof jQuery === 'undefined') return;
jQuery(function($){
function isLocked(){
return $('#brand-resize-lock').hasClass('active');
}
function syncLockUI(){
var locked = isLocked();
var $p = $('#proxy-resize-lock');
$p.toggleClass('active', locked);
$p.find('.material-icons').text(locked ? 'link' : 'link_off');
}
function syncSelect(src, proxy){
var $src = $(src);
var $proxy = $(proxy);
$proxy.empty();
$src.find('option').each(function(){
$proxy.append($('<option>').val($(this).val()).text($(this).text()));
});
$proxy.val($src.val());
}
syncSelect('#brand-crop-style', '#proxy-crop-style');
var w = $('#brand-resize-width').val();
var h = $('#brand-resize-height').val();
if (w) $('#proxy-resize-width').val(w);
if (h) $('#proxy-resize-height').val(h);
syncLockUI();
$(document).on('click', '#brand-tool-adjust-bg-color', function(){ $('#custom-image-background').trigger('click'); });
$(document).on('click', '#brand-tool-adjust-bg-media', function(){ $('#brand-bg-media-library').trigger('click'); });
$(document).on('change', '#proxy-crop-style', function(){ $('#brand-crop-style').val(this.value).trigger('change'); });
$(document).on('click', '#proxy-crop-apply', function(){ $('#brand-crop-apply').trigger('click'); });
$(document).on('click', '#proxy-crop-cancel', function(){ $('#brand-crop-cancel').trigger('click'); });
$(document).on('click', '#brand-tool-rotate-right', function(){ $('#brand-rotate-right').trigger('click'); });
$(document).on('click', '#brand-tool-rotate-left', function(){ $('#brand-rotate-left').trigger('click'); });
$(document).on('click', '#brand-tool-flip-horizontal', function(){ $('#brand-flip-horizontal').trigger('click'); });
$(document).on('click', '#brand-tool-flip-vertical', function(){ $('#brand-flip-vertical').trigger('click'); });
function setCropPanelOpen(open) {
var $panel = $('#brand-tool-crop-panel');
var $toggle = $('#brand-tool-crop-menu');
if (open) setRotatePanelOpen(false);
if (open) setResizePanelOpen(false);
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setRotatePanelOpen(open) {
var $panel = $('#brand-tool-rotate-panel');
var $toggle = $('#brand-tool-rotate-menu');
if (open) setCropPanelOpen(false);
if (open) setResizePanelOpen(false);
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setResizePanelOpen(open) {
var $panel = $('#brand-tool-resize-panel');
var $toggle = $('#brand-tool-resize-menu');
if (open) setCropPanelOpen(false);
if (open) setRotatePanelOpen(false);
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
setCropPanelOpen(false);
setRotatePanelOpen(false);
setResizePanelOpen(false);
$(document).on('click', '#brand-tool-crop-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setCropPanelOpen(!open);
});
$(document).on('click', '#brand-tool-crop-panel .brand-tool-toggle', function(){
setTimeout(function(){ setCropPanelOpen(false); }, 0);
});
$(document).on('click', '#brand-tool-rotate-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setRotatePanelOpen(!open);
});
$(document).on('click', '#brand-tool-rotate-panel .brand-tool-toggle', function(){
setTimeout(function(){ setRotatePanelOpen(false); }, 0);
});
$(document).on('click', '#brand-tool-resize-menu', function(e){
e.preventDefault();
e.stopPropagation();
var open = $(this).attr('aria-expanded') === 'true';
setResizePanelOpen(!open);
});
$(document).on('click', '#brand-tool-resize-panel .brand-tool-toggle', function(){
setTimeout(function(){ setResizePanelOpen(false); }, 0);
});
$(document).on('keydown', function(e){
if (e.key === 'Escape') {
setCropPanelOpen(false);
setRotatePanelOpen(false);
setResizePanelOpen(false);
}
});
$(document).on('click', function(e){
if ($(e.target).closest('.brand-tool-nav-toolbar.adjustBar').length) return;
setCropPanelOpen(false);
setRotatePanelOpen(false);
setResizePanelOpen(false);
});
$(document).on('input paste change', '#proxy-resize-width', function(){
var v = parseInt(this.value) || 0;
$('#brand-resize-width').val(v).trigger('input');
if (isLocked()) {
var bw = $('#brand-resize-width').data('size');
var bh = $('#brand-resize-height').data('size');
var ratio = (bw && bh) ? (bw / bh) : 1;
var nh = Math.round(v / ratio);
$('#proxy-resize-height').val(nh);
$('#brand-resize-height').val(nh);
}
});
$(document).on('input paste change', '#proxy-resize-height', function(){
var v = parseInt(this.value) || 0;
$('#brand-resize-height').val(v).trigger('input');
if (isLocked()) {
var bh = $('#brand-resize-height').data('size');
var bw = $('#brand-resize-width').data('size');
var ratio = (bh && bw) ? (bh / bw) : 1;
var nw = Math.round(v / ratio);
$('#proxy-resize-width').val(nw);
$('#brand-resize-width').val(nw);
}
});
$(document).on('click', '#proxy-resize-lock', function(){
$('#brand-resize-lock').trigger('click');
syncLockUI();
});
$(document).on('click', '#proxy-resize-apply', function(){ $('#brand-resize-apply').trigger('click'); });
$(document).on('input change', '#brand-resize-width', function(){
var v = $(this).val() || $(this).data('size');
$('#proxy-resize-width').val(v);
});
$(document).on('input change', '#brand-resize-height', function(){
var v = $(this).val() || $(this).data('size');
$('#proxy-resize-height').val(v);
});
$(document).on('sizeChanged', '#brand-resize-width', function(){
var v = $(this).val() || $(this).data('size');
$('#proxy-resize-width').val(v);
});
$(document).on('sizeChanged', '#brand-resize-height', function(){
var v = $(this).val() || $(this).data('size');
$('#proxy-resize-height').val(v);
});
$(document).on('click', '#brand-resize-lock', function(){ syncLockUI(); });
$(document).on('click', '#Card-Design', function(){
$('.brand-tool-nav-toolbar').css('display','none');
$('.brand-tool-nav-toolbar.adjustBar').css('display','block').attr('data-visible','true');
if (window.canvas && typeof window.canvas.discardActiveObject === 'function') {
window.canvas.discardActiveObject();
window.canvas.requestRenderAll();
window.canvas.fire('selection:cleared');
}
});
var hasEffects = $('#brand-adjust-effects-card').length > 0;
if (!hasEffects) {
$('#brand-tool-adjust-effects').hide();
}
$(document).on('click', '#brand-tool-adjust-effects', function(){
var $el = $('#brand-adjust-effects-card');
if ($el.length) { $el.trigger('click'); }
});
});
})();
</script>
<div class="brand-tool-nav-toolbar shapesBar has-subpanel" style="display: none;">
<div class="brand-tool-nav-toolbar-inner">
<label class="brand-tool-label" for="brand-tool-shape-color"><span class="material-icons">palette</span></label>
<div id="brand-tool-shape-color" class="brand-tool-color" title="Shape Color" data-tooltip="Shape Color" data-tooltip-placement="top"></div>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-shape-opacity-menu" aria-expanded="false" aria-controls="brand-tool-shape-opacity-panel" data-tooltip="Opacity" data-tooltip-placement="top">
<span class="material-icons">opacity</span>
<span class="brand-tool-toggle-text">Opacity</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-shape-rotate-menu" aria-expanded="false" aria-controls="brand-tool-shape-rotate-panel" data-tooltip="Rotate" data-tooltip-placement="top">
<span class="material-icons">rotate_right</span>
<span class="brand-tool-toggle-text">Rotate</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-shape-transform-menu" aria-expanded="false" aria-controls="brand-tool-shape-transform-panel" data-tooltip="Transform" data-tooltip-placement="top">
<span class="material-icons">transform</span>
<span class="brand-tool-toggle-text">Transform</span>
</button>
<span class="brand-tool-divider"></span>
<button class="brand-tool-toggle brand-tool-toggle-pill" id="brand-tool-shape-settings" data-tooltip="Shape Settings" data-tooltip-placement="top">
<span class="material-icons">tune</span>
<span class="brand-tool-toggle-text">Shape Settings</span>
</button>
</div>
<div class="brand-tool-subpanel" id="brand-tool-shape-opacity-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<label class="brand-tool-label" for="proxy-shape-opacity"><span class="material-icons">opacity</span></label>
<input id="proxy-shape-opacity" type="range" min="0" max="1" value="1" step="0.1" class="brand-tool-range" autocomplete="off" data-tooltip="Opacity" data-tooltip-placement="top">
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-shape-rotate-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<label class="brand-tool-label" for="proxy-shape-rotate"><span class="material-icons">rotate_right</span></label>
<input id="proxy-shape-rotate" type="range" min="0" max="360" value="0" step="1" class="brand-tool-range" autocomplete="off" data-tooltip="Rotate" data-tooltip-placement="top">
</div>
</div>
<div class="brand-tool-subpanel" id="brand-tool-shape-transform-panel" aria-hidden="true">
<div class="brand-tool-subpanel-inner">
<button class="brand-tool-toggle" id="brand-tool-shape-flip-x" data-tooltip="Flip Horizontal" data-tooltip-placement="top"><span class="material-icons">flip</span></button>
<button class="brand-tool-toggle" id="brand-tool-shape-flip-y" data-tooltip="Flip Vertical" data-tooltip-placement="top"><span class="material-icons">flip</span></button>
<button class="brand-tool-toggle" id="brand-tool-shape-h-center" data-tooltip="Center Horizontally" data-tooltip-placement="top"><span class="material-icons">align_horizontal_center</span></button>
<button class="brand-tool-toggle" id="brand-tool-shape-v-center" data-tooltip="Center Vertically" data-tooltip-placement="top"><span class="material-icons">vertical_align_center</span></button>
</div>
</div>
</div>
<script>
(function(){
if (typeof jQuery === 'undefined') return;
jQuery(function($){
// Initial sync from main panel values
var op = $('#shape-opacity').val();
var rot = $('#shape-rotate').val();
if (op != null) $('#proxy-shape-opacity').val(op);
if (rot != null) $('#proxy-shape-rotate').val(rot);
var col = $('#brand-shape-color').val();
if (col) { $('#brand-tool-shape-color').css('background', col); }
var lastCol = col || '';
var colorSyncTimer = setInterval(function(){
var cur = $('#brand-shape-color').val() || '';
if (cur && cur !== lastCol) {
$('#brand-tool-shape-color').css('background', cur);
lastCol = cur;
}
}, 300);
$(window).on('unload', function(){ clearInterval(colorSyncTimer); });
// Proxy -> main
$(document).on('input change', '#proxy-shape-opacity', function(){
$('#shape-opacity').val(this.value).trigger('input').trigger('change');
});
$(document).on('input change', '#proxy-shape-rotate', function(){
$('#shape-rotate').val(this.value).trigger('input').trigger('change');
});
$(document).on('click', '#brand-tool-shape-color', function(){
$('#brand-shape-color').trigger('click');
});
// Main -> proxy
$(document).on('input change', '#shape-opacity', function(){
$('#proxy-shape-opacity').val($(this).val());
});
$(document).on('input change', '#shape-rotate', function(){
$('#proxy-shape-rotate').val($(this).val());
});
$(document).on('change', '#brand-shape-color', function(){
var val = $(this).val() || '';
if (val) { $('#brand-tool-shape-color').css('background', val); }
lastCol = val;
});
// Subpanel Toggle Logic
function setShapeOpacityPanelOpen(open) {
var $panel = $('#brand-tool-shape-opacity-panel');
var $toggle = $('#brand-tool-shape-opacity-menu');
if (open) {
setShapeRotatePanelOpen(false);
setShapeTransformPanelOpen(false);
}
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setShapeRotatePanelOpen(open) {
var $panel = $('#brand-tool-shape-rotate-panel');
var $toggle = $('#brand-tool-shape-rotate-menu');
if (open) {
setShapeOpacityPanelOpen(false);
setShapeTransformPanelOpen(false);
}
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
function setShapeTransformPanelOpen(open) {
var $panel = $('#brand-tool-shape-transform-panel');
var $toggle = $('#brand-tool-shape-transform-menu');
if (open) {
setShapeOpacityPanelOpen(false);
setShapeRotatePanelOpen(false);
}
$toggle.toggleClass('active', open).attr('aria-expanded', open ? 'true' : 'false');
$panel.attr('aria-hidden', open ? 'false' : 'true');
$panel.stop(true, true)[open ? 'slideDown' : 'slideUp'](140);
}
setShapeOpacityPanelOpen(false);
setShapeRotatePanelOpen(false);
setShapeTransformPanelOpen(false);
$(document).on('click', '#brand-tool-shape-opacity-menu', function(e){
e.preventDefault(); e.stopPropagation();
setShapeOpacityPanelOpen($(this).attr('aria-expanded') !== 'true');
});
$(document).on('click', '#brand-tool-shape-rotate-menu', function(e){
e.preventDefault(); e.stopPropagation();
setShapeRotatePanelOpen($(this).attr('aria-expanded') !== 'true');
});
$(document).on('click', '#brand-tool-shape-transform-menu', function(e){
e.preventDefault(); e.stopPropagation();
setShapeTransformPanelOpen($(this).attr('aria-expanded') !== 'true');
});
// Actions
$(document).on('click', '#brand-tool-shape-flip-x', function(){
$('#element-flip-horizontal').trigger('click');
});
$(document).on('click', '#brand-tool-shape-flip-y', function(){
$('#element-flip-vertical').trigger('click');
});
$(document).on('click', '#brand-tool-shape-h-center', function(){
$('.brand-horizontal-center').trigger('click');
});
$(document).on('click', '#brand-tool-shape-v-center', function(){
$('.brand-vertical-center').trigger('click');
});
$(document).on('click', '#brand-tool-shape-settings', function(){
var $cardElements = $('#Card-Elements');
if ($cardElements.length) {
$cardElements.trigger('click');
// Give it a tiny bit of time to switch panels if needed
setTimeout(function(){
var $editBtn = $('#brand-custom-element-open');
if ($editBtn.length) {
$editBtn.trigger('click');
}
}, 50);
}
});
// Global close
$(document).on('keydown', function(e){
if (e.key === 'Escape') {
setShapeOpacityPanelOpen(false);
setShapeRotatePanelOpen(false);
setShapeTransformPanelOpen(false);
}
});
$(document).on('click', function(e){
if ($(e.target).closest('.brand-tool-nav-toolbar.shapesBar').length) return;
setShapeOpacityPanelOpen(false);
setShapeRotatePanelOpen(false);
setShapeTransformPanelOpen(false);
});
});
})();
</script>
</div>
<div id="brand-pages-ui" class="brand-pages-ui">
<div id="panel-tab" title="Show pages panel" role="button" tabindex="0">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
<path d="M15 3v18"></path>
</svg>
<span id="panel-tab-label">Pages</span>
<span class="brand-pages-count">1</span>
</div>
<div id="panel">
<div id="panel-inner">
<div id="panel-hd">
<span>Pages</span>
<button id="close-panel-btn" type="button" title="Hide panel" aria-label="Hide pages panel">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M18 6L6 18M6 6l12 12"></path>
</svg>
</button>
</div>
<div id="pages-list"></div>
<button id="add-page" type="button">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M12 5v14M5 12h14"></path>
</svg>
Add page
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="brand-dragit" class="preview-image">
</div>
<!-- modals hee-->
<!-- Modal Add New START -->
<div id="modal-add-new" class="brand-modal">
<div class="brand-modal-close" data-target="#modal-add-new"><span class="material-icons">close</span></div>
<div class="brand-modal-wrap">
<div class="brand-modal-inner large">
<div class="brand-tabs">
<!-- Menu -->
<ul class="brand-tabs-menu">
<li class="active" data-target="#modal-template-library"><span
class="material-icons">photo_library</span>Templates</li><li id="imagetab" data-target="#modal-select-img"><span
class="material-icons">file_upload</span>Image</li>
<li id="blanktab" data-target="#modal-blank-canvas"><span class="material-icons">crop_original</span>Blank
</li>
<li data-target="#modal-ai-image"><span class="material-icons">landscape</span>AI Image</li>
</ul>
<!-- New Image -->
<div id="modal-select-img" class="brand-tab">
<div class="brand-select-btn-block">
<div>
<div class="brand-btn-set">
<div class="brand-file-field">
<input type="file" name="brand-image-upload" id="brand-image-upload"
class="brand-hidden-file" accept="image/png, image/jpeg, image/webp" />
<label for="brand-image-upload"
class="brand-btn primary brand-lg-btn"><span
class="material-icons">upload</span><span>Upload Image</span></label>
</div>
<button id="brand-media-library" type="button"
class="brand-btn primary brand-lg-btn brand-modal-open"
data-target="#modal-media-library"><span
class="material-icons">photo_library</span>Select From Media Library
</button>
</div>
<div class="brand-keep">
<label class="brand-checkbox">
<input id="keep-data" type="checkbox" autocomplete="off">
<span class="brand-checkmark"></span>
</label>
<div>Keep current objects and filters</div>
</div>
</div>
<div>
</div>
</div>
</div>
<!-- Template Library -->
<div id="modal-template-library" class="brand-tab active">
<div class="brand-templates-wrap">
<div class="brand-tabs">
<ul class="brand-tabs-menu">
<li id="templatestab" class="active" data-target="#brand-all-templates">All</li>
<li id="mydesignstab" data-target="#brand-my-designs">My Designs</li>
<li data-target="#brand-templates-favorites">My Favorites</li>
<!-- <li data-target="#brand-mytemplates">My Templates</li>-->
</ul>
<!-- All Templates -->
<div id="brand-all-templates" class="brand-tab active">
<div class="brand-templates-menu-wrap" style="margin-top:5px; ">
<input name="search" id="search" onkeyup="load_data(this.value);" type="search" class="brand-form-field" placeholder="Search by keyword..."
/>
<select id="brand-templates-menu-x"
class="brand-select brand-form-fieldX" autocomplete="off">
<option value="" selected>All Categories</option>
<option value="10">Social Media</option>
<option value="15">YouTube Graphics</option>
<option value="11">Stories</option>
<option value="12">Social Posts</option>
<option value="14">Pinterest Pins</option>
<option value="52">Facebook</option>
<option value="50">Instagram Posts</option>
<option value="53">LinkedIn</option>
<option value="187">Twitch</option>
<option value="56">Spotify</option>
<option value="54">Twitter</option>
<option value="28">Advertising</option>
<option value="33">Digital Displays</option>
<option value="29">Facebook Ads</option>
<option value="30">Google Ads</option>
<option value="31">Instagram Ads</option>
<option value="32">Story Ads</option>
<option value="16">Branding</option>
<option value="21">Live Streaming</option>
<option value="18">Letterheads</option>
<option value="19">Newsletters</option>
<option value="20">Media Kits</option>
<option value="22">Marketing</option>
<option value="13">Banners</option>
<option value="27">Invites & Cards</option>
<option value="110">Ecommerce</option>
<option value="25">Posters</option>
<option value="23">Flyers</option>
<option value="24">Brochures</option>
<option value="46">Business Cards</option>
<option value="809">Logos</option>
<option value="49">Sales Designs</option>
<option value="26">Presentations</option>
<option value="808">Content Marketing</option>
<option value="40">Others</option>
<option value="41">Food Menus</option>
<option value="61">Headers</option>
<option value="42">Resumes</option>
<option value="43">Invitations</option>
<option value="44">Planners</option>
<option value="45">Infographics</option>
<option value="55">Book Covers</option>
<option value="48">Quotes</option>
<option value="47">Press Releases</option>
<option value="60">Banner Ads</option>
<option value="51">Occasions</option>
</select>
<span style="display:none;background: none; border: none" id="total_data" class="brand-btn primary brandeditor-form-field">
</span>
</div>
<div class="brand-templates-content">
<div class="brand-grid-wrap">
<div id="post_data" class="brand-grid template-grid five-column template-selection" >
</div>
<div id="pagination_link" class="brand-pagination light-theme simple-pagination" style="margin-bottom: 10px; margin-top: 10px">Loading Designs...
</div>
<script>
$(document).ready(function(){
setTimeout(function() {
load_data();
}, 20000);
});
function load_data(query = '', page_number = 1)
{
var form_data = new FormData();
form_data.append('query', query);
form_data.append('page', page_number);
var apiCall = function() {
var ajax_request = new XMLHttpRequest();
ajax_request.open('POST', 'https://www.thebrand.ai/wowX/files/connect/themes?no=14');
ajax_request.send(form_data);
ajax_request.onreadystatechange = function()
{
if(ajax_request.readyState == 4 && ajax_request.status == 200)
{
var response = JSON.parse(ajax_request.responseText);
var html = '';
var serial_no = 1;
if(response.data.length > 0)
{
for(var count = 0; count < response.data.length; count++)
{
var title = response.data[count].post_title;
var title2 = response.data[count].post_title2;
var poster = response.data[count].post_poster;
var post_me = response.data[count].post_me;
html += '<div class="grid-item" data-keyword="'+title+'" data-category="collage">';
html += '<div class="brand-masonry-item-inner brand-select-template" id="'+post_me+'" data-json="https://www.thebrand.ai/wowX/selectTheme?themeid='+response.data[count].post_design+'">';
html += '<div class="brand-img-wrap">';
/* html += '<div class="brand-img-loader"></div>';*/
html += '<img class="lazy" src="https://www.thebrand.ai/taswira.php?width=300&height=300&quality=70&cropratio=1:1&image=/v/uploads/gallery/'+poster+'" data-src="https://www.thebrand.ai/taswira.php?width=300&height=300&quality=70&cropratio=1:1&image=/v/uploads/gallery/'+poster+'" title="'+title+'"/>';
html += '</div>';
html += '<div class="brand-masonry-item-desc"> '+title2+'</div>';
html += '</div>';
html += '</div>';
serial_no++;
}
}
else
{
html += '<span>No Data Found</span>';
}
document.getElementById('post_data').innerHTML = html;
document.getElementById('total_data').innerHTML = response.total_data;
document.getElementById('pagination_link').innerHTML = response.pagination;
}
}
};
window.apiLoadingQueue = window.apiLoadingQueue || [];
if (window.canvasLoadComplete) {
apiCall();
} else {
window.apiLoadingQueue.push(apiCall);
}
}
var selectElement = document.getElementById("brand-templates-menu-x");
// Add event listener to the select element
selectElement.addEventListener("change", function () {
// Get the selected option value
var selectedValue = selectElement.value;
// Call the load_data function with the selected category ID
load_data(selectedValue, page_number = 1);
});
</script>
</div>
</div>
</div>
<!-- My Favorites -->
<div id="brand-templates-favorites" class="brand-tab">
<div id="templates-favorites" class="brand-grid template-grid template-selection">
<div class="notice notice-info">
<h6>No favorites yet</h6>Click the star icon on any item, and you will see
it here next time you visit.
</div>
</div>
</div>
<!-- My Templates -->
<div id="brand-mytemplates" class="brand-tab">
<div id="brand-my-templates-menu">
<div></div>
<div class="brand-search-box">
<input type="search" class="brand-form-field"
placeholder="Search by title..." autocomplete="off" />
<button id="brand-my-templates-search" type="button"
class="brand-btn primary"><span
class="material-icons">search</span></button>
</div>
</div>
<ul id="brand-my-templates" class="brand-template-list template-selection paginated" data-perpage="10">
</ul>
<div id="brand-my-templates-noimg" class="notice notice-warning d-none">Nothing found.</div>
</div>
<div id="brand-my-designs" class="brand-tab">
<div class="brand-my-designs-content">
<div class="brand-grid-wrap">
<span style="display:none;background: none; border: none" id="total_data_my_designs" class="brand-btn primary brandeditor-form-field">
</span>
<div id="post_data_my_designs" class="brand-grid template-grid template-selection-my-designs" >
</div>
<div id="pagination_link_my_designs" class="brand-pagination light-theme simple-pagination" style="margin-bottom: 10px; margin-top: 10px">Loading My Designs...
</div>
<script>
$(document).ready(function(){
getBrandIdentity();
setTimeout(function() {
load_data_my_designs();
}, 20000);
});
function getBrandIdentity() {
var identify = $("#userID").val();
$.ajax({
url: window.BASE_URL + '/php/brand_identity?images',
type: 'POST',
headers: {
'Authorization': 'Bearer f4c3b9a2e6d1c5e0a8f1b2c3d4e5f6g7'
},
data: { // Data to be sent
name: identify,
},
success: function(data) {
data = $.parseJSON(data);
// Create a list item with the parsed data
var listItem = `
<li class="brand-add-brand-text" id="${data.name}">
<a style="text-transform: initial; color: #666666; text-align:left">
<span class="material-icons accordion-icon">list</span>Add Brand Name - '${data.name}'
</a>
</li>
<li class="brand-add-brand-text" id="${data.catalogname}">
<a style="text-transform: initial; color: #666666; text-align:left">
<span class="material-icons accordion-icon">list</span>Add Name - '${data.catalogname}'
</a>
</li>
<li class="brand-add-brand-text" id="${data.phone}">
<a style="text-transform: initial; color: #666666; text-align:left">
<span class="material-icons accordion-icon">phone</span>Add Phone - '${data.phone}'
</a>
</li>
<li class="brand-add-brand-text" id="${data.website}">
<a style="text-transform: initial; color: #666666; text-align:left">
<span class="material-icons accordion-icon">link</span>Add Web - '${data.website}'
</a>
</li>
`;
$('#brand_identity_list').append(listItem);
},
error: function(jqXHR,error,errorThrown) {
if (jqXHR.status) {
toastr.error(thebrandParams.wrong, jqXHR.status + ' - ' + thebrandParams.error);
} else {
toastr.error(thebrandParams.wrong, thebrandParams.error);
}
}
});
}
function load_data_my_designs(query = '', page_number = 1)
{
var form_data = new FormData();
form_data.append('query', query);
form_data.append('page', page_number);
var apiCall = function() {
var ajax_request = new XMLHttpRequest();
var userID = $('#userID').val() ;
ajax_request.open('POST', window.BASE_URL + '/files/connect/mytemplates?no=14&me='+userID);
ajax_request.send(form_data);
ajax_request.onreadystatechange = function()
{
if(ajax_request.readyState == 4 && ajax_request.status == 200)
{
var response = JSON.parse(ajax_request.responseText);
var html = '';
var serial_no = 1;
if(response.data.length > 0)
{
for(var count = 0; count < response.data.length; count++)
{
var title = response.data[count].post_title;
var title2 = response.data[count].post_title2;
var poster = response.data[count].post_poster;
html += '<div class="grid-item" data-keyword="'+title+'" data-category="collage">';
html += '<div id="'+response.data[count].post_id+'" class="brand-masonry-item-inner brand-select-my-design" data-json="' + window.BASE_URL + '/selectTheme?themeid='+response.data[count].post_design+'">';
html += '<div class="brand-img-wrap">';
/* html += '<div class="brand-img-loader"></div>';*/
html += '<img class="lazy" src="https://www.thebrand.ai/taswira.php?width=300&height=300&quality=70&cropratio=1:1&image=/v/uploads/gallery/'+poster+'" data-src="https://www.thebrand.ai/taswira.php?width=300&height=300&quality=70&cropratio=1:1&image=/v/uploads/gallery/'+poster+'" title="'+title+'"/>';
html += '</div>';
html += '<div class="brand-masonry-item-desc"> '+title2+'</div>';
html += '</div>';
html += '</div>';
serial_no++;
}
}
else
{
html += '<span>No Data Found</span>';
}
document.getElementById('post_data_my_designs').innerHTML = html;
document.getElementById('total_data_my_designs').innerHTML = response.total_data;
document.getElementById('pagination_link_my_designs').innerHTML = response.pagination;
}
}
};
window.apiLoadingQueue = window.apiLoadingQueue || [];
if (window.canvasLoadComplete) {
apiCall();
} else {
window.apiLoadingQueue.push(apiCall);
}
}
var selectElement = document.getElementById("brand-templates-menu-x");
// Add event listener to the select element
selectElement.addEventListener("change", function () {
// Get the selected option value
var selectedValue = selectElement.value;
// Call the load_data_my_designs function with the selected category ID
load_data_my_designs(selectedValue, page_number = 1);
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Blank Canvas -->
<div id="modal-blank-canvas" class="brand-tab">
<div class="brand-control-group">
<div>
<label>Size</label>
<select id="brand-canvas-size-select" class="brand-select" autocomplete="off">
<option selected value="custom" data-width="800" data-height="800">Custom</option>
<option value="" data-width="2240" data-height="1260">Blog Banner</option>
<option value="" data-width="851" data-height="315">Facebook Cover</option>
<option value="" data-width="1200" data-height="628">Facebook Ad</option>
<option value="" data-width="1080" data-height="1080">Instagram Post</option>
<option value="" data-width="750" data-height="1120">Pinterest Post</option>
<option value="" data-width="940" data-height="788">Facebook Post</option>
<option value="" data-width="1600" data-height="900">Twitter Post</option>
<option value="" data-width="1280" data-height="720">Youtube Thumbnail</option>
<option value="" data-width="1920" data-height="1080">Wallpaper</option>
</select>
</div>
<div>
<label>Width</label>
<input id="brand-canvas-width" class="brand-form-field" type="number" value="800"
data-min="1" data-max="10000" autocomplete="off">
</div>
<div>
<label>Height</label>
<input id="brand-canvas-height" class="brand-form-field" type="number" value="800"
data-min="1" data-max="10000" autocomplete="off">
</div>
<div>
<label>Background</label>
<input id="brand-canvas-color" type="text" class="brand-colorpicker allow-empty"
autocomplete="off" value="" />
</div>
<div>
<button id="brand-canvas-create" type="button" class="brand-btn primary"><span
class="material-icons">done</span>Create</button>
</div>
</div>
</div>
<div id="modal-ai-image" class="brand-tab brand-modal-bg">
<div class="brand-tabs">
<ul id="aibrand-add-new-apis" class="brand-tabs-menu">
<li data-target="#sai-text-to-text-tab" class="">AI Style1</li>
<li data-target="#oai-text-to-text-tab" class="active">AI Style2</li>
<li data-target="#clipdrop-text-to-text-tab" class="">AI Style3</li>
<li id="sketch-to-image-link" data-target="#clipdrop-sketch-to-image-tab" class="">
Sketch To Image
</li>
</ul>
<div id="sai-text-to-text-tab" class="brand-tab ">
<div class="modal-ai-image-wrap">
<div class="modal-ai-image-column-left">
<div id="aibrand-loader-1" class="brand-loader-wrap aibrand-loader">
<div class="brand-loader"></div>
</div>
<div id="sai-images" class="brand-grid aibrand-grid aibrand-grid-placeholder">
<div class="brand-masonry-item">
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap"><img src="https://www.thebrand.ai/wowX/assets/ai-placeholder.png"></div>
</div>
</div>
<div class="brand-masonry-item">
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap"><img src="https://www.thebrand.ai/wowX/assets/ai-placeholder.png"></div>
</div>
</div>
</div>
</div>
<div class="modal-ai-image-column-right">
<ul class="brand-accordion">
<li class="opened"><a href="#"><span
class="material-icons accordion-icon text-success">check_circle</span>Prompt
(required)<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="sai-prompt" class="brand-form-field" rows="2"
autocomplete="off"
placeholder="Post-apocalyptic wasteland with rusted and abandoned vehicles, dust storms and towering dust clouds, gritty, dark, dramatic, apocalyptic, stylized"
maxlength="2000"></textarea></div>
</li>
<li class=""><a href="#"><span
class="material-icons accordion-icon text-danger">cancel</span>Negative
Prompt<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="sai-negative-prompt" class="brand-form-field" rows="2"
autocomplete="off" placeholder="black and white, monochrome"
maxlength="2000"></textarea></div>
</li>
<li class=""><a href="#"><span
class="material-icons accordion-icon">image</span>Source<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Image Size</label>
<div class="brand-control"><select id="sai-size"
class="brand-select"
autocomplete="off">
<option value="1536x640">1536x640px</option>
<option value="1344x768">1344x768px</option>
<option value="1216x832">1216x832px</option>
<option value="1152x896">152x896px</option>
<option value="1024x1024" selected="">1024x1024px</option>
<option value="896x1152">896x1152px</option>
<option value="832x1216">832x1216px</option>
<option value="768x1344">768x1344px</option>
<option value="640x1536">640x1536px</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Seed (Optional)</label>
<div class="brand-control"><input id="sai-seed"
class="brand-form-field"
type="number" value=""
autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label slider-label">Image
Count<span>2</span></label>
<div class="brand-control"><input id="sai-samples" type="range"
min="1" max="10" value="2"
step="1" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc"> Number of images to generate.</div>
</div>
</li>
<li class=""><a href="#"><span
class="material-icons accordion-icon">brush</span>Style<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Style Preset</label>
<div class="brand-control"><select id="sai-style-presets"
class="brand-select"
autocomplete="off">
<option value="" selected="">Auto</option>
<option value="3d-model">3d Model</option>
<option value="analog-film">Analog Film</option>
<option value="anime">Anime</option>
<option value="cinematic">Cinematic</option>
<option value="comic-book">Comic Book</option>
<option value="digital-art">Digital Art</option>
<option value="enhance">Enhance</option>
<option value="fantasy-art">Fantasy Art</option>
<option value="isometric">Isometric</option>
<option value="line-art">Line Art</option>
<option value="low-poly">Low Poly</option>
<option value="modeling-compound">Modeling Compound</option>
<option value="neon-punk">Neon Punk</option>
<option value="origami">Origami</option>
<option value="photographic">Photographic</option>
<option value="pixel-art">Pixel Art</option>
<option value="tile-texture">Tile Texture</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label slider-label">CFG
Scale<span>7</span></label>
<div class="brand-control"><input id="sai-cfg" type="range" min="0"
max="35" value="7" step="1"
class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc"> How strictly the diffusion process
adheres to the prompt text (higher values keep your image closer to
your prompt).
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label slider-label">Steps<span>50</span></label>
<div class="brand-control"><input id="sai-steps" type="range"
min="10" max="150" value="50"
step="1" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc"> Number of diffusion steps to run.</div>
</div>
</li>
</ul>
<button id="sai-image-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"
disabled=""><span class="material-icons arrow">landscape</span>Generate
</button>
<div id="sai-balance-notice" style="display:none" class="notice notice-info"><span id="sai-balance">You have 0.47 credits left.</span><a
href="#" id="sai-balance-check" class=""><span
class="material-icons arrow">refresh</span></a></div>
</div>
</div>
</div>
<div id="oai-text-to-text-tab" class="brand-tab active">
<div class="modal-ai-image-wrap">
<div class="modal-ai-image-column-left">
<div id="aibrand-loader-4" class="brand-loader-wrap aibrand-loader">
<div class="brand-loader"></div>
</div>
<div id="oai-images" class="brand-grid aibrand-grid aibrand-grid-placeholder">
<div class="brand-masonry-item">
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap"><img src="https://www.thebrand.ai/wowX/assets/ai-placeholder.png"></div>
</div>
</div>
</div>
</div>
<div class="modal-ai-image-column-right">
<ul class="brand-accordion">
<li class="opened"><a href="#"><span
class="material-icons accordion-icon text-success">check_circle</span>Prompt
(required)<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="oai-prompt" class="brand-form-field" rows="2"
autocomplete="off"
placeholder="Post-apocalyptic wasteland with rusted and abandoned vehicles, dust storms and towering dust clouds, gritty, dark, dramatic, apocalyptic, stylized"
maxlength="1000"></textarea></div>
</li>
<li><a href="#"><span
class="material-icons accordion-icon">image</span>Source<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Image Size</label>
<div class="brand-control"><select id="oai-size"
class="brand-select"
autocomplete="off">
<option value="1024x1024" selected="">1024x1024 px</option>
<option value="1792x1024">1792x1024 px</option>
<option value="1024x1792">1024x1792 px</option>
</select></div>
</div>
</div>
</li>
<li class=""><a href="#"><span
class="material-icons accordion-icon">brush</span>Style<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Quality</label>
<div class="brand-control"><select id="oai-quality"
class="brand-select"
autocomplete="off">
<option value="standard" selected="">Standard</option>
<option value="hd">HD</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Style</label>
<div class="brand-control"><select id="oai-style"
class="brand-select"
autocomplete="off">
<option value="vivid" selected="">Vivid</option>
<option value="natural">Natural</option>
</select></div>
</div>
<div class="brand-control-desc"> Vivid causes the model to lean towards
generating hyper-real and dramatic images. Natural causes the model
to produce more natural, less hyper-real looking images.
</div>
</div>
</li>
</ul>
<button id="oai-image-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"
disabled=""><span class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
<div id="clipdrop-text-to-text-tab" class="brand-tab">
<div class="modal-ai-image-wrap">
<div class="modal-ai-image-column-left">
<div id="aibrand-loader-2" class="brand-loader-wrap aibrand-loader">
<div class="brand-loader"></div>
</div>
<div id="clipdrop-images"
class="brand-grid aibrand-grid aibrand-grid-placeholder">
<div class="brand-masonry-item">
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap"><img src="https://www.thebrand.ai/wowX/assets/ai-placeholder.png"></div>
</div>
</div>
</div>
</div>
<div class="modal-ai-image-column-right">
<ul class="brand-accordion">
<li class="opened"><a href="#"><span
class="material-icons accordion-icon text-success">check_circle</span>Prompt
(required)<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="clipdrop-prompt" class="brand-form-field" rows="2"
autocomplete="off"
placeholder="Post-apocalyptic wasteland with rusted and abandoned vehicles, dust storms and towering dust clouds, gritty, dark, dramatic, apocalyptic, stylized"
maxlength="2000"></textarea></div>
</li>
</ul>
<button id="clipdrop-image-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"
disabled=""><span class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
<div id="clipdrop-sketch-to-image-tab" class="brand-tab ">
<div class="modal-ai-image-wrap">
<div class="modal-ai-image-column-left">
<div id="aibrand-loader-3" class="brand-loader-wrap aibrand-loader">
<div class="brand-loader"></div>
</div>
<div id="sketch-to-image-wrap" style="opacity: 1;">
<div class="canvas-container"
style="width: 524px; height: 524px; position: relative; user-select: none;">
<canvas id="sketch-to-image-canvas" class="lower-canvas"
style="position: absolute; width: 524px; height: 524px; left: 0px; top: 0px; touch-action: none; user-select: none;"
width="655" height="655"></canvas>
<canvas class="upper-canvas "
style="position: absolute; width: 524px; height: 524px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: crosshair;"
width="655" height="655"></canvas>
</div>
</div>
</div>
<div class="modal-ai-image-column-right">
<div id="clipdrop-sketch-images"
class="brand-grid aibrand-grid aibrand-grid-placeholder"></div>
<ul class="brand-accordion">
<li class="opened"><a href="#"><span
class="material-icons accordion-icon text-success">check_circle</span>Prompt
(required)<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="sketch-to-image-prompt" class="brand-form-field" rows="2"
autocomplete="off" maxlength="2000"></textarea>
<div class="brand-control-desc">Generate an image corresponding to the
sketch and the prompt describing what you expect.
</div>
</div>
</li>
<li><a href="#"><span class="material-icons accordion-icon">settings</span>Brush
Settings<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Brush Width</label>
<div class="brand-control"><input id="sketch-to-image-brush-width"
class="brand-form-field numeric-field"
type="number" value="8"
autocomplete="off" data-min="1"
data-max="1000" data-step="1">
</div>
</div>
<div class="brand-control-wrap control-text-color label-block"><label
class="brand-control-label">Brush Color</label>
<div class="brand-control"><span class="sp-original-input-container"
style="margin: 0px;"><div
class="sp-colorize-container sp-add-on"
style="width: 0px; border-radius: 7px; border: 0.8px solid rgb(209, 209, 209);"><div
class="sp-colorize"
style="background-color: rgb(102, 88, 234); color: white;"></div> </div><input
id="sketch-to-image-brush-color" type="text"
class="brand-colorpicker disallow-empty spectrum with-add-on"
autocomplete="off" value="#6658ea"></span></div>
</div>
<div class="brand-control-wrap brand-submit-btns sketch-to-image-buttons">
<button id="sketch-to-image-undo" type="button"
class="brand-btn tooltip" data-title="Undo"><span
class="material-icons">undo</span></button>
<button id="sketch-to-image-clear" type="button"
class="brand-btn tooltip" data-title="Clear"><span
class="material-icons">delete</span></button>
</div>
</div>
</li>
</ul>
<button id="sketch-to-image-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"
disabled=""><span class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Add New END -->
<!-- Share Dropdown START -->
<div id="modal-save" class="brand-modal brand-share-dropdown" style="display:none;transform: scale(0.9);transform-origin: top right;">
<style>
/* Premium SaaS Styling Overrides */
#modal-save.brand-share-dropdown .brand-modal-inner {
padding: 0 !important;
border-radius: 16px !important;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
background: #fff;
max-width: 520px; /* Slightly wider for breathing room */
margin: 0 auto;
}
#modal-save.brand-share-dropdown .brand-tab {
padding: 15px !important; /* Reduced padding */
}
#modal-save.brand-share-dropdown .brand-section {
margin-bottom: 15px;
}
#modal-save.brand-share-dropdown .brand-section:last-child {
margin-bottom: 0;
}
#modal-save.brand-share-dropdown .brand-section-title {
font-size: 15px !important;
font-weight: 600;
color: #0f172a; /* Slate 900 */
margin: 0 0 10px 0 !important;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 10px;
}
#modal-save.brand-share-dropdown .brand-section-title .material-icons {
font-size: 20px;
color: #64748b; /* Slate 500 */
}
#modal-save.brand-share-dropdown label {
font-size: 13px !important;
font-weight: 500;
color: #475569 !important; /* Slate 600 */
margin-bottom: 8px !important;
display: block;
}
#modal-save.brand-share-dropdown .brand-form-field,
#modal-save.brand-share-dropdown .brand-select {
height: 42px !important; /* Taller inputs */
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important; /* Smoother corners */
padding: 0 14px !important;
font-size: 14px !important;
color: #334155;
background-color: #fff;
transition: all 0.2s ease;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
#modal-save.brand-share-dropdown .brand-form-field:hover,
#modal-save.brand-share-dropdown .brand-select:hover {
border-color: #cbd5e1 !important;
}
#modal-save.brand-share-dropdown .brand-form-field:focus,
#modal-save.brand-share-dropdown .brand-select:focus {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
outline: none;
}
/* Specific fix for input with icon */
#modal-save.brand-share-dropdown .brand-input-with-icon .brand-form-field {
padding-left: 35px !important;
}
#modal-save.brand-share-dropdown .brand-btn {
height: 42px !important;
padding: 0 20px !important;
font-size: 14px !important;
font-weight: 500 !important;
border-radius: 10px !important;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
#modal-save.brand-share-dropdown .brand-btn.primary {
background: #2563eb;
color: white;
border: none;
box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
}
#modal-save.brand-share-dropdown .brand-btn.primary:hover {
background: #1d4ed8;
transform: translateY(-1px);
box-shadow: 0 6px 8px -1px rgba(37, 99, 235, 0.15);
}
#modal-save.brand-share-dropdown .brand-btn:not(.primary) {
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #475569;
}
#modal-save.brand-share-dropdown .brand-btn:not(.primary):hover {
background: #f1f5f9;
color: #1e293b;
border-color: #cbd5e1;
}
#modal-save.brand-share-dropdown .brand-divider {
height: 1px;
background: #f1f5f9; /* Very subtle divider */
margin: 15px -15px !important; /* Extend to edges */
}
/* Layout Fixes */
#modal-save.brand-share-dropdown .brand-block-33 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px !important;
}
#modal-save.brand-share-dropdown .brand-block-50 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px !important;
align-items: end;
}
#modal-save.brand-share-dropdown .brand-input-action {
display: flex;
gap: 8px;
}
#modal-save.brand-share-dropdown .brand-input-action input {
flex: 1;
background-color: #f8fafc;
}
#modal-save.brand-share-dropdown .social-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px !important;
}
#modal-save.brand-share-dropdown .social-btn {
width: 100%;
padding: 0 !important;
}
#modal-save.brand-share-dropdown .social-btn svg {
width: 20px;
height: 20px;
}
/* Modal Close Button */
#modal-save.brand-share-dropdown .brand-modal-close {
top: 20px;
right: 20px;
background: transparent;
color: #94a3b8;
}
#modal-save.brand-share-dropdown .brand-modal-close:hover {
color: #475569;
background: #f1f5f9;
}
#modal-save.brand-share-dropdown {
position: absolute;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 20px 45px rgba(0, 0, 0, .15);
width: 360px;
overflow: auto;
padding: 5px;
z-index: 999999;
}
</style>
<div class="brand-modal-close" data-target="#modal-save"><span class="material-icons">close</span></div>
<div class="brand-modal-wrap">
<div class="brand-modal-inner">
<div class="brand-tabs">
<!-- Menu -->
<ul class="brand-tabs-menu" style="display:none">
<li data-target="#modal-tab-download" class="active"><span class="material-icons">download</span>Download</li>
<li style="display:none" data-target="#modal-tab-save"><span class="material-icons">save</span>Save
</li>
</ul>
<!-- Download File -->
<div id="modal-tab-download" class="brand-tab active ">
<div id="brand-download-as-img">
<!-- Section 1: Share -->
<h6 class="brand-section-title"><span class="material-icons">share</span>Share Design</h6>
<div class="brand-section">
<label><strong>Share with user</strong></label>
<div style="display:flex;align-items:center;gap:8px">
<div style="position:relative;flex:1" class="brand-input-with-icon"><span class="material-icons">groups</span><input id="brand-share-people" class="brand-form-field" type="text" value="" autocomplete="off" placeholder="Add emails or names"><div id="brand-share-results" class="teams-card" style="display:none;position:absolute;z-index:10;left:0;right:0;top:calc(100% + 6px);padding:6px;max-height:240px;overflow:auto"></div></div>
<button id="brand-share-add-member" type="button" class="brand-btn primary" title="Add member" aria-label="Add member"><span class="material-icons">person_add</span></button>
</div>
<div id="brand-share-chips" class="brand-chip-list"></div>
</div>
<div class="brand-section">
<label><strong>Share with team</strong></label>
<div style="display:flex;align-items:center;gap:8px">
<select id="brand-share-team" class="brand-select" style="flex:1"></select>
<select id="brand-share-role" class="brand-select" style="flex:1">
<option value="4">Team Owner / Admin</option>
<option value="3">Template Designer / Brand Manager</option>
<option value="2">Editor</option>
<option value="5">Commenter</option>
<option value="6">Viewer</option>
</select>
<button id="brand-share-add-team" type="button" class="brand-btn" title="Share with team" aria-label="Share with team"><span class="material-icons">group_add</span></button>
</div>
</div>
<div class="brand-divider"></div>
<!-- Section 2: Download Design -->
<h6 class="brand-section-title"><span class="material-icons">download</span>Download Design</h6>
<div class="brand-block-33">
<div>
<label>DPI</label>
<select id="brand-download-img-dpi" class="brand-select" autocomplete="off">
<option selected value="72">72 DPI - Monitor Resolution</option>
<option value="96">96 DPI</option>
<option value="144">144 DPI</option>
<option value="300">300 DPI - Printer Resolution</option>
</select>
</div>
<div>
<label>Quality</label>
<select id="brand-download-quality" class="brand-select" autocomplete="off">
<option selected value="1">100%</option>
<option value="0.9">90%</option>
<option value="0.8">80%</option>
<option value="0.7">70%</option>
<option value="0.6">60%</option>
<option value="0.5">50%</option>
<option value="0.4">40%</option>
<option value="0.3">30%</option>
<option value="0.2">20%</option>
<option value="0.1">10%</option>
</select>
</div>
<div>
<label>Format</label>
<select id="brand-download-format" class="brand-select" autocomplete="off">
<option selected value="png">PNG</option>
<option value="jpeg">JPEG</option>
<option value="pdf">PDF</option>
<option value="svg">SVG</option>
<option value="webp">WEBP</option>
<option value="tiff">TIFF</option>
<option value="ppt">PowerPoint (PPTX)</option>
<!-- <option value="docx">Word (DOCX)</option> -->
</select>
</div>
</div>
<div class="brand-block-50">
<div>
<label>Name</label>
<input id="brand-download-name" class="brand-form-field"
type="text" value="" disabled autocomplete="off" data-default="">
</div>
<button id="brand-download" type="button" class="brand-btn primary"><span
class="material-icons">download</span>Download</button>
</div>
<div class="brand-divider"></div>
<!-- Section 3: Present -->
<h6 class="brand-section-title"><span class="material-icons">slideshow</span>Present</h6>
<div class="brand-section">
<button id="brand-present" type="button" class="brand-btn"><span class="material-icons">slideshow</span>Present</button>
</div>
<div class="brand-divider"></div>
<!-- Section 4: Share Online -->
<h6 class="brand-section-title"><span class="material-icons">public</span>Share Online</h6>
<div class="brand-section">
<label>Share on social media</label>
<div class="social-buttons">
<button type="button" class="brand-btn social-btn facebook" data-social="facebook" aria-label="Share on Facebook"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 12a10 10 0 1 0-11.6 9.9v-7h-2.4V12h2.4V9.8c0-2.4 1.4-3.7 3.6-3.7 1 0 2 .2 2 .2v2.2h-1.1c-1.1 0-1.4.7-1.4 1.3V12h2.5l-.4 2.9h-2.1v7A10 10 0 0 0 22 12Z"></path></svg></button>
<button type="button" class="brand-btn social-btn instagram" data-social="instagram" aria-label="Share on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm5.75-2.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z"></path></svg></button>
<button type="button" class="brand-btn social-btn linkedin" data-social="linkedin" aria-label="Share on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4.98 3.5A2.5 2.5 0 1 1 5 8.5a2.5 2.5 0 0 1-.02-5Zm-.73 6H7.2v11H4.25v-11ZM8.98 9.5H12v1.55h.05a3.4 3.4 0 0 1 3.07-1.69c3.29 0 3.89 2.17 3.89 4.99V20.5h-2.95v-4.45c0-1.06-.02-2.43-1.48-2.43-1.48 0-1.71 1.15-1.71 2.35v4.53H9.91v-11Z"></path></svg></button>
<button type="button" class="brand-btn social-btn twitter" data-social="twitter" aria-label="Share on Twitter"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M23 4.5c-.8.4-1.6.7-2.5.8.9-.5 1.6-1.4 2-2.4-.9.5-1.9.9-3 1.1A4.3 4.3 0 0 0 12 7.3c0 .3 0 .6.1.9-3.6-.2-6.9-1.9-9.1-4.7-.4.7-.6 1.4-.6 2.2 0 1.5.8 2.9 2.1 3.6-.7 0-1.4-.2-2-.6v.1c0 2.1 1.5 3.8 3.4 4.2-.4.1-.8.2-1.2.2-.3 0-.6 0-.9-.1.6 1.7 2.2 3 4.1 3.1-1.5 1.2-3.4 1.9-5.5 1.9-.4 0-.8 0-1.2-.1A12 12 0 0 0 8 20.8c7.7 0 11.9-6.4 11.9-11.9v-.5c.8-.6 1.5-1.3 2.1-2.1Z"></path></svg></button>
</div>
</div>
<div class="brand-section">
<label>Design link</label>
<div class="brand-input-action">
<input id="brand-design-link" class="brand-form-field" type="text" value="https://www.thebrand.ai/wowX/index.php?themeid=68175?mobile=yes" readonly>
<button id="brand-copy-design-link" type="button" class="brand-btn icon-left"><span class="material-icons">content_copy</span>Copy</button>
</div>
</div>
</div>
</div>
<!-- Save File -->
<div style="display:none" id="modal-tab-save" class="brand-tab ">
<div id="brand-save-as-img">
<div class="brand-block-50">
<div>
<label> Name</label>
<input id="brand-save-img-name" class="brand-form-field brand-file-name"
type="text" value="" autocomplete="off" data-default="">
</div>
<button id="brand-save-img" type="button" class="brand-btn primary"><span
class="material-icons">save</span>Save As Image</button>
</div>
<div class="brand-block-33">
<div>
<label>DPI</label>
<select id="brand-save-img-dpi" class="brand-select" autocomplete="off">
<option selected value="72">72 DPI - Monitor Resolution</option>
<option value="96">96 DPI</option>
<option value="144">144 DPI</option>
<option value="300">300 DPI - Printer Resolution</option>
</select>
</div>
<div>
<label> Quality</label>
<select id="brand-save-img-quality" class="brand-select" autocomplete="off">
<option selected value="1">100%</option>
<option value="0.9">90%</option>
<option value="0.8">80%</option>
<option value="0.7">70%</option>
<option value="0.6">60%</option>
<option value="0.5">50%</option>
<option value="0.4">40%</option>
<option value="0.3">30%</option>
<option value="0.2">20%</option>
<option value="0.1">10%</option>
</select>
</div>
<div>
<label> Format</label>
<select id="brand-save-img-format" class="brand-select" autocomplete="off">
<option selected value="jpeg">JPEG</option>
<option value="png">PNG</option>
<option value="svg">SVG</option>
<option value="webp">WEBP</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Share Dropdown END -->
<!-- Modal Media Library START -->
<div id="modal-media-library" class="brand-modal">
<div class="brand-modal-close" data-target="#modal-media-library"><span class="material-icons">close</span>
</div>
<div id="brand-modal-onstart"><span class="material-icons">keyboard_return</span></div>
<div class="brand-modal-wrap">
<div class="brand-modal-inner">
<div class="brand-tabs">
<!-- Menu -->
<ul class="brand-tabs-menu">
<li data-target="#pexels" class="active">Pexels</li>
<li data-target="#pixabay">Pixabay</li> <li data-target="#media-library-images">My Media</li>
<li data-target="#ai-modal-ai-image"><span class="material-icons">landscape</span>AI Image</li>
</ul>
<!-- Media Library -->
<div id="media-library-images" class="brand-tab">
<div class="brand-tabs">
<ul class="brand-tabs-menu">
<li data-target="#library-my-images" class="active">My Images</li>
<li data-target="#library-all-images">Other Images</li>
</ul>
<!-- My Images -->
<div id="library-my-images" class="brand-tab active">
<div id="brand-library-my-menu">
<div>
<form class="uploadImgToLibrary" enctype="multipart/form-data">
<div class="brand-file-field">
<input type="file" name="brand-library-upload-img"
id="brand-library-upload-img" class="brand-hidden-file"
accept="image/png, image/jpeg, image/webp" />
<label for="brand-library-upload-img"
class="brand-btn primary"><span
class="material-icons">upload</span><span>Upload
Image</span></label>
</div>
</form>
</div>
<div class="brand-search-box">
<input type="search" class="brand-form-field" placeholder="Search by title..."
autocomplete="off" />
<button id="brand-library-my-search" type="button"
class="brand-btn primary"><span
class="material-icons">search</span></button>
</div>
</div>
<div id="brand-library-my" class="brand-grid media-library-grid paginated" data-perpage="18"></div>
<div id="brand-library-my-noimg" class="notice notice-warning d-none">Nothing found.
</div>
</div>
<!-- All Images -->
<div id="library-all-images" class="brand-tab">
<div id="brand-library-all-menu">
<div></div>
<div class="brand-search-box">
<input type="search" class="brand-form-field" placeholder="Search by title..."
autocomplete="off" />
<button id="brand-library-all-search" type="button"
class="brand-btn primary"><span
class="material-icons">search</span></button>
</div>
</div>
<div id="brand-library-all" class="brand-grid media-library-grid paginated"
data-perpage="18">
<div class="brand-masonry-item" data-keyword="lorem">
<div class="brand-library-delete" data-target=""><span
class="material-icons">remove</span></div>
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="assets/placeholder.jpg"
data-full="assets/placeholder-big.jpg" data-filename="Lorem"
title="Lorem" />
</div>
<div class="brand-masonry-item-desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="brand-masonry-item" data-keyword="ipsum">
<div class="brand-library-delete" data-target=""><span
class="material-icons">remove</span></div>
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap">
<div class="brand-img-loader"></div>
<img class="lazy" data-src="assets/placeholder.jpg"
data-full="assets/placeholder-big.jpg" data-filename="Lorem"
title="Lorem" />
</div>
<div class="brand-masonry-item-desc">Lorem ipsum dolor</div>
</div>
</div>
</div>
<div id="brand-library-all-noimg" class="notice notice-warning d-none"><strong>Nothing
found.</strong></div>
</div>
</div>
</div>
<!-- Pexels -->
<div id="pexels" class="brand-tab active">
<div id="pexels-menu">
<div id="pexels-search-options">
<select id="pexels-orientation" class="brand-select" autocomplete="off" disabled>
<option value="" selected>All Orientations</option>
<option value="landscape">Landscape</option>
<option value="portrait">Portrait</option>
<option value="square">Square</option>
</select>
<select id="pexels-color" class="brand-select" autocomplete="off" disabled>
<option value="" selected>All Colors</option>
<option value="white">White</option>
<option value="black">Black</option>
<option value="gray">Gray</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="turquoise">Turquoise</option>
<option value="red">Red</option>
<option value="violet">Violet</option>
<option value="pink">Pink</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
</div>
<div class="brand-search-box">
<input id="brand-pexels-keyword" type="search" class="brand-form-field"
placeholder="Enter a keyword..." autocomplete="off" />
<button id="brand-pexels-search" type="button" class="brand-btn primary"><span
class="material-icons">search</span></button>
</div>
</div>
<div id="pexels-output">
</div>
<a id="pexels-credit" href="https://www.pexels.com/" target="_blank">Photos provided by
Pexels</a>
</div>
<!-- Pixabay -->
<div id="pixabay" class="brand-tab">
<div id="pixabay-menu">
<div id="pixabay-search-options">
<select id="pixabay-orientation" class="brand-select" autocomplete="off">
<option value="" selected>All Orientations</option>
<option value="horizontal">Horizontal</option>
<option value="vertical">Vertical</option>
</select>
<select id="pixabay-color" class="brand-select" autocomplete="off">
<option value="" selected>All Colors</option>
<option value="white">White</option>
<option value="black">Black</option>
<option value="gray">Gray</option>
<option value="grayscale">Grayscale</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="turquoise">Turquoise</option>
<option value="red">Red</option>
<option value="lilac">Lilac</option>
<option value="pink">Pink</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
<select id="pixabay-category" class="brand-select" autocomplete="off">
<option value="" selected>All Categories</option>
<option value="backgrounds">Backgrounds</option>
<option value="fashion">Fashion</option>
<option value="nature">Nature</option>
<option value="science">Science</option>
<option value="education">Education</option>
<option value="feelings">Feelings</option>
<option value="health">Health</option>
<option value="people">People</option>
<option value="religion">Religion</option>
<option value="places">Places</option>
<option value="animals">Animals</option>
<option value="industry">Industry</option>
<option value="computer">Computer</option>
<option value="food">Food</option>
<option value="sports">Sports</option>
<option value="transportation">Transportation</option>
<option value="travel">Travel</option>
<option value="buildings">Buildings</option>
<option value="business">Business</option>
<option value="music">Music</option>
</select>
</div>
<div class="brand-search-box">
<input id="brand-pixabay-keyword" type="search" class="brand-form-field"
placeholder="Enter a keyword..." autocomplete="off" />
<button id="brand-pixabay-search" type="button" class="brand-btn primary"><span
class="material-icons">search</span></button>
</div>
</div>
<div id="pixabay-output">
</div>
<a id="pixabay-credit" href="https://www.pixabay.com/" target="_blank">Photos provided by
Pixabay</a>
</div>
<div id="ai-modal-ai-image" class="brand-tab brand-modal-bg">
<div class="brand-tabs">
<ul id="ai-aibrand-add-new-apis" class="brand-tabs-menu">
<li data-target="#ai-sai-text-to-text-tab" class="active">AI Style1</li>
<li data-target="#ai-oai-text-to-text-tab" class="">AI Style2</li>
<li data-target="#ai-clipdrop-text-to-text-tab" class="">AI Style3</li>
<li id="ai-sketch-to-image-link" data-target="#clipdrop-sketch-to-image-tab2" class="">
Sketch To Image
</li>
</ul>
<div id="ai-sai-text-to-text-tab" class="brand-tab active">
<div class="modal-ai-image-wrap">
<div class="modal-ai-image-column-left">
<div id="ai-aibrand-loader-1" class="brand-loader-wrap aibrand-loader">
<div class="brand-loader"></div>
</div>
<div id="ai-sai-images" class="brand-grid aibrand-grid aibrand-grid-placeholder">
<div class="brand-masonry-item">
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap"><img src="https://www.thebrand.ai/wowX/assets/ai-placeholder.png"></div>
</div>
</div>
<div class="brand-masonry-item">
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap"><img src="https://www.thebrand.ai/wowX/assets/ai-placeholder.png"></div>
</div>
</div>
</div>
</div>
<div class="modal-ai-image-column-right">
<ul class="brand-accordion">
<li class="opened"><a href="#"><span
class="material-icons accordion-icon text-success">check_circle</span>Prompt
(required)<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="ai-sai-prompt" class="brand-form-field" rows="2"
autocomplete="off"
placeholder="Post-apocalyptic wasteland with rusted and abandoned vehicles, dust storms and towering dust clouds, gritty, dark, dramatic, apocalyptic, stylized"
maxlength="2000"></textarea></div>
</li>
<li class=""><a href="#"><span
class="material-icons accordion-icon text-danger">cancel</span>Negative
Prompt<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="ai-sai-negative-prompt" class="brand-form-field" rows="2"
autocomplete="off" placeholder="black and white, monochrome"
maxlength="2000"></textarea></div>
</li>
<li class=""><a href="#"><span
class="material-icons accordion-icon">image</span>Source<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Image Size</label>
<div class="brand-control"><select id="ai-sai-size"
class="brand-select"
autocomplete="off">
<option value="1536x640">1536x640px</option>
<option value="1344x768">1344x768px</option>
<option value="1216x832">1216x832px</option>
<option value="1152x896">152x896px</option>
<option value="1024x1024" selected="">1024x1024px</option>
<option value="896x1152">896x1152px</option>
<option value="832x1216">832x1216px</option>
<option value="768x1344">768x1344px</option>
<option value="640x1536">640x1536px</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Seed (Optional)</label>
<div class="brand-control"><input id="ai-sai-seed"
class="brand-form-field"
type="number" value=""
autocomplete="off"></div>
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label slider-label">Image
Count<span>2</span></label>
<div class="brand-control"><input id="ai-sai-samples" type="range"
min="1" max="10" value="2"
step="1" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc"> Number of images to generate.</div>
</div>
</li>
<li class=""><a href="#"><span
class="material-icons accordion-icon">brush</span>Style<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Style Preset</label>
<div class="brand-control"><select id="ai-sai-style-presets"
class="brand-select"
autocomplete="off">
<option value="" selected="">Auto</option>
<option value="3d-model">3d Model</option>
<option value="analog-film">Analog Film</option>
<option value="anime">Anime</option>
<option value="cinematic">Cinematic</option>
<option value="comic-book">Comic Book</option>
<option value="digital-art">Digital Art</option>
<option value="enhance">Enhance</option>
<option value="fantasy-art">Fantasy Art</option>
<option value="isometric">Isometric</option>
<option value="line-art">Line Art</option>
<option value="low-poly">Low Poly</option>
<option value="modeling-compound">Modeling Compound</option>
<option value="neon-punk">Neon Punk</option>
<option value="origami">Origami</option>
<option value="photographic">Photographic</option>
<option value="pixel-art">Pixel Art</option>
<option value="tile-texture">Tile Texture</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label slider-label">CFG
Scale<span>7</span></label>
<div class="brand-control"><input id="ai-sai-cfg" type="range" min="0"
max="35" value="7" step="1"
class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc"> How strictly the diffusion process
adheres to the prompt text (higher values keep your image closer to
your prompt).
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label slider-label">Steps<span>50</span></label>
<div class="brand-control"><input id="ai-sai-steps" type="range"
min="10" max="150" value="50"
step="1" class="brand-slider"
autocomplete="off"></div>
</div>
<div class="brand-control-desc"> Number of diffusion steps to run.</div>
</div>
</li>
</ul>
<button id="ai-sai-image-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"
disabled=""><span class="material-icons arrow">landscape</span>Generate
</button>
<div id="ai-sai-balance-notice" class="notice notice-info"><span id="ai-sai-balance">You have 0.47 credits left.</span><a
href="#" id="ai-sai-balance-check" class=""><span
class="material-icons arrow">refresh</span></a></div>
</div>
</div>
</div>
<div id="ai-oai-text-to-text-tab" class="brand-tab">
<div class="modal-ai-image-wrap">
<div class="modal-ai-image-column-left">
<div id="aibrand-loader-4" class="brand-loader-wrap aibrand-loader">
<div class="brand-loader"></div>
</div>
<div id="ai-oai-images" class="brand-grid aibrand-grid aibrand-grid-placeholder">
<div class="brand-masonry-item">
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap"><img src="https://www.thebrand.ai/wowX/assets/ai-placeholder.png"></div>
</div>
</div>
</div>
</div>
<div class="modal-ai-image-column-right">
<ul class="brand-accordion">
<li class="opened"><a href="#"><span
class="material-icons accordion-icon text-success">check_circle</span>Prompt
(required)<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="ai-oai-prompt" class="brand-form-field" rows="2"
autocomplete="off"
placeholder="Post-apocalyptic wasteland with rusted and abandoned vehicles, dust storms and towering dust clouds, gritty, dark, dramatic, apocalyptic, stylized"
maxlength="1000"></textarea></div>
</li>
<li><a href="#"><span
class="material-icons accordion-icon">image</span>Source<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Image Size</label>
<div class="brand-control"><select id="ai-oai-size"
class="brand-select"
autocomplete="off">
<option value="1024x1024" selected="">1024x1024 px</option>
<option value="1792x1024">1792x1024 px</option>
<option value="1024x1792">1024x1792 px</option>
</select></div>
</div>
</div>
</li>
<li class=""><a href="#"><span
class="material-icons accordion-icon">brush</span>Style<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Quality</label>
<div class="brand-control"><select id="ai-oai-quality"
class="brand-select"
autocomplete="off">
<option value="standard" selected="">Standard</option>
<option value="hd">HD</option>
</select></div>
</div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Style</label>
<div class="brand-control"><select id="ai-oai-style"
class="brand-select"
autocomplete="off">
<option value="vivid" selected="">Vivid</option>
<option value="natural">Natural</option>
</select></div>
</div>
<div class="brand-control-desc"> Vivid causes the model to lean towards
generating hyper-real and dramatic images. Natural causes the model
to produce more natural, less hyper-real looking images.
</div>
</div>
</li>
</ul>
<button id="ai-oai-image-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"
disabled=""><span class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
<div id="ai-clipdrop-text-to-text-tab" class="brand-tab">
<div class="modal-ai-image-wrap">
<div class="modal-ai-image-column-left">
<div id="aibrand-loader-2" class="brand-loader-wrap aibrand-loader">
<div class="brand-loader"></div>
</div>
<div id="ai-clipdrop-images"
class="brand-grid aibrand-grid aibrand-grid-placeholder">
<div class="brand-masonry-item">
<div class="brand-masonry-item-inner">
<div class="brand-img-wrap"><img src="https://www.thebrand.ai/wowX/assets/ai-placeholder.png"></div>
</div>
</div>
</div>
</div>
<div class="modal-ai-image-column-right">
<ul class="brand-accordion">
<li class="opened"><a href="#"><span
class="material-icons accordion-icon text-success">check_circle</span>Prompt
(required)<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="ai-clipdrop-prompt" class="brand-form-field" rows="2"
autocomplete="off"
placeholder="Post-apocalyptic wasteland with rusted and abandoned vehicles, dust storms and towering dust clouds, gritty, dark, dramatic, apocalyptic, stylized"
maxlength="2000"></textarea></div>
</li>
</ul>
<button id="ai-clipdrop-image-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"
disabled=""><span class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
<div id="ai-clipdrop-sketch-to-image-tab" class="brand-tab ">
<div class="modal-ai-image-wrap">
<div class="modal-ai-image-column-left">
<div id="aibrand-loader-3" class="brand-loader-wrap aibrand-loader">
<div class="brand-loader"></div>
</div>
<div id="sketch-to-image-wrap" style="opacity: 1;">
<div class="canvas-container"
style="width: 524px; height: 524px; position: relative; user-select: none;">
<canvas id="ai-sketch-to-image-canvas" class="lower-canvas"
style="position: absolute; width: 524px; height: 524px; left: 0px; top: 0px; touch-action: none; user-select: none;"
width="655" height="655"></canvas>
<canvas class="upper-canvas "
style="position: absolute; width: 524px; height: 524px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: crosshair;"
width="655" height="655"></canvas>
</div>
</div>
</div>
<div class="modal-ai-image-column-right">
<div id="ai-clipdrop-sketch-images"
class="brand-grid aibrand-grid aibrand-grid-placeholder"></div>
<ul class="brand-accordion">
<li class="opened"><a href="#"><span
class="material-icons accordion-icon text-success">check_circle</span>Prompt
(required)<span class="material-icons arrow">keyboard_arrow_down</span></a>
<div><textarea id="ai-sketch-to-image-prompt" class="brand-form-field" rows="2"
autocomplete="off" maxlength="2000"></textarea>
<div class="brand-control-desc">Generate an image corresponding to the
sketch and the prompt describing what you expect.
</div>
</div>
</li>
<li><a href="#"><span class="material-icons accordion-icon">settings</span>Brush
Settings<span
class="material-icons arrow">keyboard_arrow_down</span></a>
<div>
<div class="brand-control-wrap label-block"><label
class="brand-control-label">Brush Width</label>
<div class="brand-control"><input id="ai-sketch-to-image-brush-width"
class="brand-form-field numeric-field"
type="number" value="8"
autocomplete="off" data-min="1"
data-max="1000" data-step="1">
</div>
</div>
<div class="brand-control-wrap control-text-color label-block"><label
class="brand-control-label">Brush Color</label>
<div class="brand-control"><span class="sp-original-input-container"
style="margin: 0px;"><div
class="sp-colorize-container sp-add-on"
style="width: 0px; border-radius: 7px; border: 0.8px solid rgb(209, 209, 209);"><div
class="sp-colorize"
style="background-color: rgb(102, 88, 234); color: white;"></div> </div><input
id="ai-sketch-to-image-brush-color" type="text"
class="brand-colorpicker disallow-empty spectrum with-add-on"
autocomplete="off" value="#6658ea"></span></div>
</div>
<div class="brand-control-wrap brand-submit-btns sketch-to-image-buttons">
<button id="ai-sketch-to-image-undo" type="button"
class="brand-btn tooltip" data-title="Undo"><span
class="material-icons">undo</span></button>
<button id="ai-sketch-to-image-clear" type="button"
class="brand-btn tooltip" data-title="Clear"><span
class="material-icons">delete</span></button>
</div>
</div>
</li>
</ul>
<button id="ai-sketch-to-image-generate" type="button"
class="brand-btn primary brand-lg-btn btn-full" autocomplete="off"
disabled=""><span class="material-icons arrow">landscape</span>Generate
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Media Library END -->
<!-- Modal BG Library START -->
<div id="modal-bg-library" class="brand-modal">
<div class="brand-modal-close" data-target="#modal-bg-library" style=""><span class="material-icons">close</span>
</div>
<div class="brand-modal-wrap">
<div class="brand-modal-inner">
<div class="brand-tabs">
<!-- Menu -->
<ul class="brand-tabs-menu">
<li data-target="#bg-pexels" class="active">Pexels</li>
<li data-target="#bg-pixabay">Pixabay</li>
</ul>
<!-- Pexels -->
<div id="bg-pexels" class="brand-tab active">
<div id="bg-pexels-menu">
<div id="bg-pexels-search-options">
<select id="bg-pexels-orientation" class="brand-select" autocomplete="off" disabled>
<option value="" selected>All Orientations</option>
<option value="landscape">Landscape</option>
<option value="portrait">Portrait</option>
<option value="square">Square</option>
</select>
<select id="bg-pexels-color" class="brand-select" autocomplete="off" disabled>
<option value="" selected>All Colors</option>
<option value="white">White</option>
<option value="black">Black</option>
<option value="gray">Gray</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="turquoise">Turquoise</option>
<option value="red">Red</option>
<option value="violet">Violet</option>
<option value="pink">Pink</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
</div>
<div class="bg-brand-search-box">
<input id="brand-pexels-bg-keyword" type="search" class="brand-form-field"
placeholder="Enter a keyword..." value="gradient" autocomplete="off" />
<button id="bg-brand-pexels-search" type="button" class="brand-btn primary"><span
class="material-icons">search</span></button>
</div>
</div>
<div id="bg-pexels-output">
</div>
<a id="pexels-credit" href="https://www.pexels.com/" target="_blank">Photos provided by
Pexels</a>
</div>
<!-- Pixabay -->
<div id="bg-pixabay" class="brand-tab">
<div id="bg-pixabay-menu">
<div id="bg-pixabay-search-options">
<select id="pixabay-orientation" class="brand-select" autocomplete="off">
<option value="" selected>All Orientations</option>
<option value="horizontal">Horizontal</option>
<option value="vertical">Vertical</option>
</select>
<select id="bg-pixabay-color" class="brand-select" autocomplete="off">
<option value="" selected>All Colors</option>
<option value="white">White</option>
<option value="black">Black</option>
<option value="gray">Gray</option>
<option value="grayscale">Grayscale</option>
<option value="brown">Brown</option>
<option value="blue">Blue</option>
<option value="turquoise">Turquoise</option>
<option value="red">Red</option>
<option value="lilac">Lilac</option>
<option value="pink">Pink</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
<select id="bg-pixabay-category" class="brand-select" autocomplete="off">
<option value="" selected>All Categories</option>
<option value="backgrounds">Backgrounds</option>
<option value="fashion">Fashion</option>
<option value="nature">Nature</option>
<option value="science">Science</option>
<option value="education">Education</option>
<option value="feelings">Feelings</option>
<option value="health">Health</option>
<option value="people">People</option>
<option value="religion">Religion</option>
<option value="places">Places</option>
<option value="animals">Animals</option>
<option value="industry">Industry</option>
<option value="computer">Computer</option>
<option value="food">Food</option>
<option value="sports">Sports</option>
<option value="transportation">Transportation</option>
<option value="travel">Travel</option>
<option value="buildings">Buildings</option>
<option value="business">Business</option>
<option value="music">Music</option>
</select>
</div>
<div class="brand-search-box">
<input id="bg-brand-pixabay-keyword" type="search" class="brand-form-field"
placeholder="Enter a keyword..." autocomplete="off" value="gradient" />
<button id="bg-brand-pixabay-search" type="button" class="brand-btn primary"><span
class="material-icons">search</span></button>
</div>
</div>
<div id="bg-pixabay-output">
</div>
<a id="pixabay-credit" href="https://www.pixabay.com/" target="_blank">Photos provided by
Pixabay</a>
</div>
</div>
</div>
</div>
</div>
<!-- Modal BG Library END -->
<!-- Modal History START -->
<div id="modal-history" class="brand-modal">
<div class="brand-modal-close" data-target="#modal-history"><span class="material-icons">close</span></div>
<div class="brand-modal-wrap">
<div class="brand-modal-inner">
<div class="brand-modal-bg">
<h3 class="brand-history-title">History<button id="brand-clear-history" type="button"
class="brand-btn danger"><span class="material-icons">clear</span>Clear History</button>
</h3>
<!-- History List - Don't remove ul element -->
<ul id="brand-history-list" class="brand-template-list" data-max="50"></ul>
<p class="brand-history-count">Showing your last <span id="brand-history-count"></span> actions.
</p>
</div>
</div>
</div>
</div>
<!-- Modal History END -->
<!-- <button id="moveUp">Move Up</button>
<button id="moveDown">Move Down</button>-->
<!-- Translation Strings -->
<script>
/* <![CDATA[ */
var thebrandParams = {
"textbox": "Add Your Text Here",
"object": "Object",
"loading": "Loading...",
"loadmore": "Load More",
"saved": "Saved!",
"imgsaved": "Image is saved.",
"tempsaved": "Design is saved.",
"freeDrawing": "Free drawing",
"frame": "Frame",
"image": "Image",
"circle": "Circle",
"square": "Square",
"rectangle": "Rectangle",
"triangle": "Triangle",
"ellipse": "Ellipse",
"trapezoid": "Trapezoid",
"pentagon": "Pentagon",
"octagon": "Octagon",
"emerald": "Emerald",
"star": "Star",
"element": "Element",
"customSvg": "Custom SVG",
"success": "Success",
"error": "Error",
"delete": "Delete",
"duplicate": "Duplicate",
"showhide": "Show/Hide",
"lockunlock": "Lock/Unlock",
"text": "Text",
"started": "Editing started.",
"added": "added.",
"removed": "removed.",
"resized": "resized.",
"edited": "edited.",
"replaced": "replaced.",
"rotated": "rotated.",
"moved": "moved.",
"scaled": "scaled.",
"flipped": "flipped.",
"cropped": "cropped.",
"bg": "Canvas",
"filter": "filter",
"showRulers": "Show rulers",
"hideRulers": "Hide rulers",
"showGuides": "Show guides",
"hideGuides": "Hide guides",
"clearAllGuides": "Clear guides",
"question1": "Are you sure you want clear the history?",
"question2": "Are you sure you want to delete the layers?",
"question3": "Are you sure you want to crop the image?",
"question4": "Are you sure you want to resize the design?",
"noDuplicate": "Please select single object to duplicate.",
"warning": "Warning",
"app": "App",
"startDrawing": "Start Drawing",
"stopDrawing": "Stop Drawing",
"erased": "Pixels erased.",
"loadMore": "Load More",
"wrong": "Something went wrong.",
"apiKeyRequired": "API key is required.",
"pexelsApiError": "Error connecting to Pexels.",
"pixabayApiError": "Error connecting to Pixabay.",
"nothing": "Nothing found.",
"loadMore": "Load More",
"favorited": "The item has been favorited.",
"unfavorited": "The item has been unfavorited.",
"nofavorites": "No favorites yet",
"nofavoritesdesc": "Click the star icon on any item, and you will see it here next time you visit.",
"settingsaved": "Settings saved.",
"fillColor": "Fill Color",
"mask": "mask",
"parallelogram": "Parallelogram",
"diamond": "Diamond",
"customShape":"Custom Shape",
"easyAccess": "Your uploaded images will show up here for easy access.",
"easyAccessTemplate": "Your saved templates will show up here for easy access.",
"select": "Select"
};
/* ]]> */
</script> <script src="https://www.thebrand.ai/wowX/js/ai.js?250563"></script>
<script src="https://www.thebrand.ai/wowX/js/unminified/brandlayers.js?250563"></script>
<script src="https://www.thebrand.ai/wowX/js/plugins.js?250563"></script>
<script src="https://www.thebrand.ai/wowX/js/jspdf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.min.js"></script>
<script src="https://www.thebrand.ai/wowX/js/unminified/font-manager.js?250563"></script>
<script src="https://www.thebrand.ai/wowX/js/unminified/brand-animations.js?250563"></script>
<script src="https://www.thebrand.ai/wowX/js/unminified/brand-project.js?250563"></script>
<script>
window.brandConfig = {
themeId: '68175?mobile=yes',
userId: '6667',
baseUrl: 'https://www.thebrand.ai/wowX',
pages: [{"id":1,"snapshotUrl":"\/v\/uploads\/converted\/images\/9e6e1c5b637623b5ad5ace11d513e10842d183dd.png"},{"id":2}] };
</script>
<script src="https://www.thebrand.ai/wowX/js/unminified/brand.js?250563"></script>
<script type="application/javascript">
(function($) {
"use strict";
$(document).ready(function() {
var shouldBlock = false;
var cloudSaved = '<svg width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#0080ff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect x="0" fill="none" width="20" height="20"></rect> <g> <path d="M14.8 9c.1-.3.2-.6.2-1 0-2.2-1.8-4-4-4-1.5 0-2.9.9-3.5 2.2-.3-.1-.7-.2-1-.2C5.1 6 4 7.1 4 8.5c0 .2 0 .4.1.5-1.8.3-3.1 1.7-3.1 3.5C1 14.4 2.6 16 4.5 16h10c1.9 0 3.5-1.6 3.5-3.5 0-1.8-1.4-3.3-3.2-3.5zm-6.3 5.9l-3.2-3.2 1.4-1.4 1.8 1.8 3.8-3.8 1.4 1.4-5.2 5.2z"></path> </g> </g></svg>';
var cloudSaving = '<svg width="24px" height="24px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none" class="hds-flight-icon--animation-loading"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g fill="#0080ff" fill-rule="evenodd" clip-rule="evenodd"> <path d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z" opacity=".2"></path> <path d="M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z"></path> </g> </g></svg>';
$('#brand').brand({
baseURL: "https://www.thebrand.ai/wowX/",
//////////////////////* API SETTINGS *//////////////////////
PexelsApiKey: 'SnJeKdzoLJiTT1Ge8rud21n5uvhWZPBTT0I9AwBtNSyG1pQLAJA5sRqh', // Your Pexels API key. @see https://www.pexels.com/api/documentation/
PexelsPagination: 8, // Max. number of images to show.
PexelsLanguage: 'en-US', // The locale of the search you are performing. The current supported locales are: 'en-US' 'pt-BR' 'es-ES' 'ca-ES' 'de-DE' 'it-IT' 'fr-FR' 'sv-SE' 'id-ID' 'pl-PL' 'ja-JP' 'zh-TW' 'zh-CN' 'ko-KR' 'th-TH' 'nl-NL' 'hu-HU' 'vi-VN' 'cs-CZ' 'da-DK' 'fi-FI' 'uk-UA' 'el-GR' 'ro-RO' 'nb-NO' 'sk-SK' 'tr-TR' 'ru-RU'
PexelsImgSize: 'large2x', // Valid image sizes are; original large2x large medium small portrait landscape
PixabayApiKey: '33011976-8e54c670d386b82f432cf1381', // Your Pixabay API key. @see https://pixabay.com/api/docs/
PixabayPagination: 8, // Max. number of images to show.
PixabayLanguage: 'en', // The locale of the search you are performing. Accepted values: cs, da, de, en, es, fr, id, it, hu, nl, no, pl, pt, ro, sk, fi, sv, tr, vi, th, bg, ru, el, ja, ko, zh
PixabaySafeSearch: 'false', // A flag indicating that only images suitable for all ages should be returned. Accepted values: "true", "false".
PixabayEditorsChice: 'false', // Select images that have received an Editor's Choice award. Accepted values: "true", "false".
apiCaching: true, // Browser caching for API requests. Boolean value: true or false
//////////////////////* CANVAS SETTINGS *//////////////////////
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", // Should be a web safe font
fontSize: 60, // Default font size
fontWeight: 'normal', // e.g. bold, normal, 400, 600, 800
fontStyle: 'normal', // Possible values: "", "normal", "italic" or "oblique".
canvasColor: 'transparent', // Canvas background color
fill: '#000', // Default text color
stroke: '#fff', // Default stroke color
strokeWidth: 0, // Default stroke width
textBackgroundColor: 'rgba(255,255,255,0)', // Default text background color
textAlign: 'left', // Possible values: "", "left", "center" or "right".
lineHeight: 1.2, // Default line height.
borderColor: '#00a0ff', // Color of controlling borders of an object (when it's active).
borderDashArray: null, // Solid border (no dash) for selection box.
borderOpacityWhenMoving: 0.5, // Opacity of object's controlling borders when object is active and moving.
borderScaleFactor: 2, // Scale factor of object's controlling borders bigger number will make a thicker border border is 1, so this is basically a border thickness since there is no way to change the border itself.
editingBorderColor: '#00a0ff', // Editing object border color.
cornerColor: '#fff', // Color of controlling corners of an object (when it's active).
cornerSize: 11, // Size of object's controlling corners (in pixels).
cornerStrokeColor: '#000', // Color of controlling corners of an object (when it's active and transparentCorners false).
cornerStyle: 'circle', // Specify style of control, 'rect' or 'circle'.
transparentCorners: false, // When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill).
cursorColor: '#666666', // Cursor color (Free drawing)
cursorWidth: 2, // Cursor width (Free drawing)
enableGLFiltering: true, // set false if you experience issues on image filters.
textureSize: 4096, // Required for enableGLFiltering
watermark: false, // true or false
watermarkText: 'www.thebrand.ai', // The watermark text
watermarkFontFamily: 'Georgia, serif', // Should be a web safe font
watermarkFontStyle: 'normal', // Possible values: "", "normal", "italic" or "oblique".
watermarkFontColor: '#000', // Watermark font color
watermarkFontSize: 40, // Watermark font size (integer only)
watermarkFontWeight: 'bold', // e.g. bold, normal, 400, 600, 800
watermarkBackgroundColor: '#FFF', // Watermark background color
watermarkLocation: 'bottom-right', // Possible values: "bottom-right", "bottom-left", "top-left" and "top-right".
templatePreview: true, // true or false
palette: [
["#000000", "#444444", "#5b5b5b", "#999999", "#bcbcbc", "#eeeeee", "#f3f6f4", "#ffffff"],
["#f44336", "#744700", "#ce7e00", "#8fce00", "#2986cc", "#16537e", "#6a329f", "#c90076"],
["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
["#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
["#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
["#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
["#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
["#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
],
//////////////////////* CUSTOM FUNCTIONS *//////////////////////
customFunctions: function(selector, canvas, lazyLoadInstance) {
// Expose canvas globally and initialize context menu
window.brandCanvas = canvas;
if (window.initContextMenu) {
console.log('Initializing ContextMenu from customFunctions');
window.contextMenuInstance = window.initContextMenu(canvas);
}
/**
* @see http://fabricjs.com/fabric-intro-part-1#canvas
* You may need to update "lazyLoadInstance" if you are going to populate items of a grid with ajax.
* lazyLoadInstance.update();
* @see https://github.com/verlok/vanilla-lazyload
*/
if (typeof aibrand === 'function') {
aibrand(selector, canvas, lazyLoadInstance);
}
(function(){
var editorState = null;
var pages = [];
var currentIndex = 0;
var original = {
width: canvas.getWidth(),
height: canvas.getHeight(),
zoom: canvas.getZoom()
};
var overlay = null;
var stage = null;
var presentationCanvas = null;
var resizeHandler = null;
var keyHandler = null;
var nav = null;
var prevBtn = null;
var nextBtn = null;
var counterEl = null;
function getEditorCanvas() {
try {
if (window.brandProject && typeof window.brandProject.getActiveCanvas === 'function') {
var active = window.brandProject.getActiveCanvas();
if (active) { return active; }
}
} catch(_) {}
try { if (window.canvas) { return window.canvas; } } catch(_) {}
return canvas;
}
function collectSlides() {
var list = [];
try {
if (window.brandProject && Array.isArray(window.brandProject.pages) && window.brandProject.pages.length) {
window.brandProject.pages.forEach(function(p){
if (!p || !p.canvas) { return; }
var jsonObj = null;
try { jsonObj = p.canvas.toJSON(); } catch(_) { jsonObj = getEditorCanvas().toJSON(); }
var w = 0, h = 0;
try { w = p.canvas.getWidth(); } catch(_) {}
try { h = p.canvas.getHeight(); } catch(_) {}
if (!w || !h) {
try { w = getEditorCanvas().getWidth(); } catch(_) {}
try { h = getEditorCanvas().getHeight(); } catch(_) {}
}
list.push({ id: 'slide-' + p.id, width: w, height: h, json: jsonObj });
});
if (list.length) { return list; }
}
if (typeof jQuery !== 'undefined' && selector && selector.find) {
selector.find('#brand-pages > div').not('.brand-page-add').each(function(){
var id = this.id || '';
var scr = selector.find('#brand-page-' + id + '-json');
var jsonStr = scr.length ? scr.html() : '';
var jsonObj = null;
var editorCanvas = getEditorCanvas();
try { jsonObj = jsonStr ? JSON.parse(jsonStr) : editorCanvas.toJSON(); } catch(_) { jsonObj = editorCanvas.toJSON(); }
list.push({ id: 'slide-' + id, width: editorCanvas.getWidth(), height: editorCanvas.getHeight(), json: jsonObj });
});
} else {
var pagesRoot = document.querySelector('#brand-pages');
if (pagesRoot) {
var tiles = pagesRoot.querySelectorAll('div:not(.brand-page-add)');
tiles.forEach(function(el){
var id = el.id || '';
var scr = document.getElementById('brand-page-' + id + '-json');
var jsonStr = scr ? (scr.textContent || scr.innerText || '') : '';
var jsonObj = null;
var editorCanvas = getEditorCanvas();
try { jsonObj = jsonStr ? JSON.parse(jsonStr) : editorCanvas.toJSON(); } catch(_) { jsonObj = editorCanvas.toJSON(); }
list.push({ id: 'slide-' + id, width: editorCanvas.getWidth(), height: editorCanvas.getHeight(), json: jsonObj });
});
}
}
} catch(_) {}
return list;
}
function ensureOverlay(slideW, slideH) {
overlay = document.getElementById('brand-presentation-overlay');
if (!overlay) {
overlay = document.createElement('div');
overlay.id = 'brand-presentation-overlay';
overlay.style.position = 'fixed';
overlay.style.inset = '0';
overlay.style.background = '#ffffff';
overlay.style.zIndex = '2147483646';
overlay.style.overflow = 'hidden';
overlay.style.display = 'block';
document.body.appendChild(overlay);
}
stage = document.getElementById('brand-presentation-stage');
if (!stage) {
stage = document.createElement('div');
stage.id = 'brand-presentation-stage';
stage.style.position = 'absolute';
stage.style.top = '50%';
stage.style.left = '50%';
stage.style.transform = 'translate(-50%, -50%)';
stage.style.transformOrigin = 'top left';
overlay.appendChild(stage);
}
var cvsEl = document.getElementById('brand-presentation-canvas');
if (!cvsEl) {
cvsEl = document.createElement('canvas');
cvsEl.id = 'brand-presentation-canvas';
stage.appendChild(cvsEl);
}
stage.style.width = slideW + 'px';
stage.style.height = slideH + 'px';
cvsEl.width = slideW;
cvsEl.height = slideH;
if (!presentationCanvas) {
presentationCanvas = new fabric.StaticCanvas('brand-presentation-canvas', { backgroundColor: '#ffffff' });
presentationCanvas.enableRetinaScaling = false;
presentationCanvas.renderOnAddRemove = false;
presentationCanvas.preserveObjectStacking = true;
} else {
try { presentationCanvas.setWidth(slideW); presentationCanvas.setHeight(slideH); } catch(e) {}
}
}
function fitPresentationCanvas(opts) {
if (!opts || !opts.canvas) { return; }
var padding = (typeof opts.padding === 'number') ? opts.padding : 32;
var designWidth = opts.designWidth;
var designHeight = opts.designHeight;
var exact = !!opts.exact;
var canvasEl = opts.canvas;
if (!overlay || !stage) { return; }
if (exact) {
var editorZoom = 1, editorW = designWidth, editorH = designHeight;
var editorCanvas = getEditorCanvas();
try { editorZoom = (editorCanvas && typeof editorCanvas.getZoom === 'function') ? editorCanvas.getZoom() : 1; } catch(e) {}
try { editorW = (editorCanvas && typeof editorCanvas.getWidth === 'function') ? editorCanvas.getWidth() : designWidth; } catch(e) {}
try { editorH = (editorCanvas && typeof editorCanvas.getHeight === 'function') ? editorCanvas.getHeight() : designHeight; } catch(e) {}
try { canvasEl.setZoom(editorZoom); } catch(e) {}
try { canvasEl.setWidth(editorW); } catch(e) {}
try { canvasEl.setHeight(editorH); } catch(e) {}
stage.style.width = editorW + 'px';
stage.style.height = editorH + 'px';
stage.style.transform = 'translate(-50%, -50%)';
try { if (typeof canvasEl.calcOffset === 'function') { canvasEl.calcOffset(); } } catch(e) {}
try { if (typeof canvasEl.requestRenderAll === 'function') { canvasEl.requestRenderAll(); } else { canvasEl.renderAll(); } } catch(e) {}
return;
}
var vw = Math.max(overlay.clientWidth - padding * 2, 0);
var vh = Math.max(overlay.clientHeight - padding * 2, 0);
var scale = Math.min(vw / designWidth, vh / designHeight);
if (!isFinite(scale) || scale <= 0) { scale = 1; }
var cw = Math.floor(designWidth * scale);
var ch = Math.floor(designHeight * scale);
try { canvasEl.setZoom(scale); } catch(e) {}
try { canvasEl.setWidth(cw); } catch(e) {}
try { canvasEl.setHeight(ch); } catch(e) {}
stage.style.width = cw + 'px';
stage.style.height = ch + 'px';
stage.style.transform = 'translate(-50%, -50%)';
try { if (typeof canvasEl.calcOffset === 'function') { canvasEl.calcOffset(); } } catch(e) {}
try { if (typeof canvasEl.requestRenderAll === 'function') { canvasEl.requestRenderAll(); } else { canvasEl.renderAll(); } } catch(e) {}
}
function ensureBadge() {
var badge = document.getElementById('brand-presentation-badge');
if (!badge) {
badge = document.createElement('div');
badge.id = 'brand-presentation-badge';
badge.style.position = 'fixed';
badge.style.top = '12px';
badge.style.right = '12px';
badge.style.zIndex = '2147483647';
badge.style.background = 'rgba(17,24,39,0.85)';
badge.style.color = '#fff';
badge.style.fontSize = '12px';
badge.style.padding = '8px 10px';
badge.style.borderRadius = '8px';
badge.style.display = 'flex';
badge.style.alignItems = 'center';
badge.style.gap = '8px';
var label = document.createElement('span');
label.id = 'brand-presentation-label';
label.textContent = 'Presenting';
var btn = document.createElement('button');
btn.id = 'brand-presentation-exit';
btn.textContent = 'Exit';
btn.style.background = '#ef4444';
btn.style.color = '#fff';
btn.style.border = 'none';
btn.style.borderRadius = '6px';
btn.style.padding = '4px 8px';
btn.style.cursor = 'pointer';
badge.appendChild(label);
badge.appendChild(btn);
(overlay || document.body).appendChild(badge);
btn.addEventListener('click', function(){ exitPresentation(); });
}
return badge;
}
function ensureControls() {
if (nav) { return nav; }
if (!overlay) { return null; }
if (!pages || pages.length < 2) { return null; }
nav = document.createElement('div');
nav.id = 'brand-presentation-nav';
nav.style.position = 'fixed';
nav.style.bottom = '24px';
nav.style.left = '50%';
nav.style.transform = 'translateX(-50%)';
nav.style.zIndex = '2147483647';
nav.style.background = 'rgba(17,24,39,0.85)';
nav.style.color = '#fff';
nav.style.fontSize = '14px';
nav.style.padding = '8px 12px';
nav.style.borderRadius = '9999px';
nav.style.display = 'flex';
nav.style.alignItems = 'center';
nav.style.gap = '12px';
prevBtn = document.createElement('button');
prevBtn.type = 'button';
prevBtn.textContent = '←';
prevBtn.style.background = '#111827';
prevBtn.style.color = '#fff';
prevBtn.style.border = 'none';
prevBtn.style.borderRadius = '9999px';
prevBtn.style.padding = '6px 10px';
prevBtn.style.cursor = 'pointer';
nextBtn = document.createElement('button');
nextBtn.type = 'button';
nextBtn.textContent = '→';
nextBtn.style.background = '#111827';
nextBtn.style.color = '#fff';
nextBtn.style.border = 'none';
nextBtn.style.borderRadius = '9999px';
nextBtn.style.padding = '6px 10px';
nextBtn.style.cursor = 'pointer';
counterEl = document.createElement('span');
counterEl.id = 'brand-presentation-counter';
nav.appendChild(prevBtn);
nav.appendChild(counterEl);
nav.appendChild(nextBtn);
overlay.appendChild(nav);
prevBtn.addEventListener('click', function(){ prevSlide(); });
nextBtn.addEventListener('click', function(){ nextSlide(); });
return nav;
}
function updateControls() {
if (!pages || pages.length < 2) { return; }
if (!counterEl) { return; }
var total = pages.length;
var idx = currentIndex + 1;
counterEl.textContent = idx + ' / ' + total;
if (prevBtn) {
prevBtn.disabled = currentIndex === 0;
prevBtn.style.opacity = prevBtn.disabled ? '0.5' : '1';
prevBtn.style.cursor = prevBtn.disabled ? 'default' : 'pointer';
}
if (nextBtn) {
nextBtn.disabled = currentIndex >= total - 1;
nextBtn.style.opacity = nextBtn.disabled ? '0.5' : '1';
nextBtn.style.cursor = nextBtn.disabled ? 'default' : 'pointer';
}
}
function updateBadge() {
var label = document.getElementById('brand-presentation-label');
if (label) {
var total = pages.length || 1;
var idx = (currentIndex + 1);
label.textContent = 'Presenting • Slide ' + idx + ' / ' + total;
}
}
function loadSlide(slide) {
ensureOverlay(slide.width, slide.height);
if (!presentationCanvas) { presentationCanvas = new fabric.StaticCanvas('brand-presentation-canvas', { backgroundColor: '#ffffff' }); }
presentationCanvas.clear();
presentationCanvas.setWidth(slide.width);
presentationCanvas.setHeight(slide.height);
presentationCanvas.loadFromJSON(slide.json, function() {
try {
var bgColor = (slide && slide.json) ? (slide.json.backgroundColor || slide.json.background) : null;
if (!bgColor) { try { bgColor = getEditorCanvas().backgroundColor || null; } catch(_) {} }
if (!bgColor) { bgColor = '#ffffff'; }
presentationCanvas.setBackgroundColor(bgColor, presentationCanvas.renderAll.bind(presentationCanvas));
} catch(e) {}
var hasObjects = (presentationCanvas.getObjects && presentationCanvas.getObjects().length) || (presentationCanvas._objects && presentationCanvas._objects.length);
var hasBGImage = !!(slide && slide.json && slide.json.backgroundImage && slide.json.backgroundImage.src);
if (hasObjects || hasBGImage) {
try {
var imgs = stage ? stage.querySelectorAll('img') : [];
imgs && imgs.forEach(function(n){ try { n.remove(); } catch(e){} });
} catch(e) {}
fitPresentationCanvas({ canvas: presentationCanvas, designWidth: slide.width, designHeight: slide.height, padding: 32, exact: true });
updateBadge();
updateControls();
} else {
try {
var imgs2 = stage ? stage.querySelectorAll('img') : [];
imgs2 && imgs2.forEach(function(n){ try { n.remove(); } catch(e){} });
} catch(e) {}
try { presentationCanvas.clear(); } catch(e) {}
try {
var bgColor2 = (slide && slide.json) ? (slide.json.backgroundColor || slide.json.background) : null;
if (!bgColor2) { try { bgColor2 = getEditorCanvas().backgroundColor || null; } catch(_) {} }
if (!bgColor2) { bgColor2 = '#ffffff'; }
presentationCanvas.setBackgroundColor(bgColor2, presentationCanvas.renderAll.bind(presentationCanvas));
} catch(e) {}
fitPresentationCanvas({ canvas: presentationCanvas, designWidth: slide.width, designHeight: slide.height, padding: 32, exact: true });
updateBadge();
updateControls();
}
});
}
function nextSlide() {
if (currentIndex < pages.length - 1) {
currentIndex++;
loadSlide(pages[currentIndex]);
}
}
function prevSlide() {
if (currentIndex > 0) {
currentIndex--;
loadSlide(pages[currentIndex]);
}
}
function enterPresentation(slides) {
var editorCanvas = getEditorCanvas();
editorState = editorCanvas ? editorCanvas.toJSON() : canvas.toJSON();
var discovered = Array.isArray(slides) && slides.length ? slides : collectSlides();
pages = (Array.isArray(discovered) && discovered.length) ? discovered : [{ id: 'slide-1', width: (editorCanvas ? editorCanvas.getWidth() : canvas.getWidth()), height: (editorCanvas ? editorCanvas.getHeight() : canvas.getHeight()), json: editorState }];
ensureOverlay(pages[0].width, pages[0].height);
var fsTarget = overlay || document.documentElement;
try {
if (fsTarget.requestFullscreen) { fsTarget.requestFullscreen(); }
else if (fsTarget.webkitRequestFullscreen) { fsTarget.webkitRequestFullscreen(); }
else if (fsTarget.msRequestFullscreen) { fsTarget.msRequestFullscreen(); }
else if (fsTarget.mozRequestFullScreen) { fsTarget.mozRequestFullScreen(); }
} catch(e) {}
currentIndex = 0;
ensureBadge();
ensureControls();
loadSlide(pages[currentIndex]);
try { if (typeof toastr !== 'undefined') { toastr.info('Presentation Mode'); } } catch(e) {}
keyHandler = function(e){
if (e.key === 'ArrowRight' || e.key === ' ') { nextSlide(); }
else if (e.key === 'ArrowLeft') { prevSlide(); }
else if (e.key === 'Escape') { exitPresentation(); }
};
document.addEventListener('keydown', keyHandler);
resizeHandler = function(){ var s = pages[currentIndex]; fitPresentationCanvas({ canvas: presentationCanvas, designWidth: s.width, designHeight: s.height, padding: 32, exact: true }); };
window.addEventListener('resize', resizeHandler);
}
function exitPresentation() {
try {
if (document.exitFullscreen) { document.exitFullscreen(); }
else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
else if (document.msExitFullscreen) { document.msExitFullscreen(); }
else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
} catch(e) {}
try { var badge = document.getElementById('brand-presentation-badge'); if (badge) { badge.remove(); } } catch(e) {}
try { var navEl = document.getElementById('brand-presentation-nav'); if (navEl) { navEl.remove(); } } catch(e) {}
if (presentationCanvas) { try { presentationCanvas.dispose && presentationCanvas.dispose(); } catch(e) {} presentationCanvas = null; }
if (stage) { try { stage.remove(); } catch(e) {} stage = null; }
if (overlay) { try { overlay.remove(); } catch(e) {} overlay = null; }
if (keyHandler) { document.removeEventListener('keydown', keyHandler); keyHandler = null; }
if (resizeHandler) { window.removeEventListener('resize', resizeHandler); resizeHandler = null; }
nav = null; prevBtn = null; nextBtn = null; counterEl = null;
try { if (typeof window.restorePresentationSize === 'function') { window.restorePresentationSize(); } } catch(e) {}
try { if (typeof toastr !== 'undefined') { toastr.info('Exited Presentation'); } } catch(e) {}
}
window.BrandPresentation = {
enter: enterPresentation,
exit: exitPresentation,
next: nextSlide,
prev: prevSlide,
collectSlides: collectSlides,
loadSlide: function(index){ if (pages[index]) { currentIndex = index; loadSlide(pages[index]); } },
fitToScreen: function(w, h){
try { if (presentationCanvas) { fitPresentationCanvas({ canvas: presentationCanvas, designWidth: w, designHeight: h, padding: 32, exact: true }); } } catch(e) {}
}
};
if (typeof jQuery !== 'undefined') {
jQuery(function($){
$(document).on('click', '#brand-present', function(){
try { if (typeof window.SyncEditorToPresentationDims === 'function') { window.SyncEditorToPresentationDims(); } } catch(e) {}
try { if (window.BrandPresentation && typeof window.BrandPresentation.enter === 'function') { window.BrandPresentation.enter(); } } catch(e) {}
$('.brand-modal-close[data-target="#modal-save"]').trigger('click');
});
$(document).on('click', '#one-click-resize', function(){
try {
if (typeof window.resizePresentation === 'function') {
window.resizePresentation();
}
} catch(e) {}
});
$(document).on('click', '#brand-file-present', function(){ try { if (window.BrandPresentation && typeof window.BrandPresentation.enter === 'function') { window.BrandPresentation.enter(); } } catch(e) {} });
});
} else {
document.addEventListener('click', function(e){
var el1 = e.target.closest && e.target.closest('#brand-present');
if (el1) {
try { if (typeof window.SyncEditorToPresentationDims === 'function') { window.SyncEditorToPresentationDims(); } } catch(e) {}
try { if (window.BrandPresentation && typeof window.BrandPresentation.enter === 'function') { window.BrandPresentation.enter(); } } catch(e) {}
var closeBtn = document.querySelector('.brand-modal-close[data-target="#modal-save"]'); if (closeBtn) { closeBtn.click(); }
}
var elPrep = e.target.closest && e.target.closest('#brand-prepare-present');
if (elPrep) {
try {
if (typeof window.resizePresentation === 'function') {
window.resizePresentation();
}
} catch(e) {}
}
var elOne = e.target.closest && e.target.closest('#one-click-resize');
if (elOne) {
try {
if (typeof window.resizePresentation === 'function') {
window.resizePresentation();
}
} catch(e) {}
}
var el2 = e.target.closest && e.target.closest('#brand-file-present');
if (el2) { try { if (window.BrandPresentation && typeof window.BrandPresentation.enter === 'function') { window.BrandPresentation.enter(); } } catch(e) {} }
});
}
document.addEventListener('keydown', function(e){
var k = (e.key || '').toLowerCase();
if (e.shiftKey && k === 'p') { try { if (window.BrandPresentation && typeof window.BrandPresentation.enter === 'function') { window.BrandPresentation.enter(); } } catch(e) {} }
if (e.shiftKey && k === 'e') { try { if (window.BrandPresentation && typeof window.BrandPresentation.exit === 'function') { window.BrandPresentation.exit(); } } catch(e) {} }
});
})();
},
//////////////////////* SAVE TEMPLATE *//////////////////////
saveTemplate: function(selector, template) {
shouldBlock = true;
// Warn the user if they try to close the window while changes are being saved
/* window.onbeforeunload = function() {
if (shouldBlock) {
toastr.warning("Changes are being saved...", "alert");
return;
}
};
*/
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setSave) { window.BrandLayoutStatus.setSave('saving'); }
var userID = selector.find('#userID').val();
var currentID = selector.find('#designThemeid').val();
if (currentID == 0) {
return;
}
let designThemeid = currentID.replace("Design-", "");
var urlSelect = 'https://www.thebrand.ai/TheBrandZ/mode?mode=saveDesignNewInterfaceV3&themeid=' + designThemeid + '&nani=' + userID;
// try {
// try { if (window.BrandLayoutStatus && window.BrandLayoutStatus.setSave) { window.BrandLayoutStatus.setSave('saving'); } } catch(_){}
// $.ajax({
// url: 'https://www.thebrand.ai/wowX/files/connect/save_template.php',
// type: 'POST',
// dataType: 'json',
// data: { themeid: designThemeid, designID: selector.find('#designID').val() },
// success: function(){ try { if (window.BrandLayoutStatus && window.BrandLayoutStatus.setSave) { window.BrandLayoutStatus.setSave('saved'); } } catch(_){} }
// });
// } catch (e) {}
},
//////////////////////* SAVE TEMPLATE AUTO*//////////////////////
saveTemplateAutomate: function(selector, template) {
/**
* var template is JSON string
* @see http://fabricjs.com/docs/fabric.Canvas.html#toDataURL
*/
// var name = selector.find('#brand-json-save-name').val();
/* $.ajax({
url: 'https://www.thebrand.ai/TheBrandZ/mode?mode=saveDesignNewInterfaceV2&themeid=&nani=6667',
type: 'POST',
body: template,
data: template,
dataType: 'text',
success: function(data) {
},
error: function(request, error) {
toastr.error("Error!", "error while saving");
}
}); */
/* Do what you want */
/*toastr.success("Successfully saved!", "Info");*/
// toastr.error("Error!", "Lorem ipsum dolor");
},
//////////////////////* SAVE IMAGE *//////////////////////
saveImage: function(selector, imgData) {
var name = selector.find('#brand-save-img-name').val();
var quality = parseFloat(selector.find('#brand-save-img-quality').val());
var format = selector.find('#brand-save-img-format').val();
if (format == 'svg') {
// var imgData is raw svg code
//console.log(imgData);
/* Do what you want */
} else {
/**
* var imgData is DataURL
* @see https://flaviocopes.com/data-urls/
* @see http://fabricjs.com/docs/fabric.Canvas.html#toDataURL
*/
//console.log(imgData);
/* Do what you want */
var currentID = selector.find('#designThemeid').val();
if (currentID == 0) {
return;
}
let designThemeid = currentID.replace("Design-", "");
var userID = selector.find('#userID').val();
}
}
});
});
})(jQuery);
</script>
<script>
(function() {
function renderStatus(el, key, text) {
var icons = {
connected: {
name: 'cloud_done',
color: '#10B981'
},
disconnected: {
name: 'cloud_off',
color: '#9CA3AF'
},
saving: {
name: 'cloud_upload',
color: '#9CA3AF'
},
saved: {
name: 'task_alt',
color: '#10B981'
},
error: {
name: 'error',
color: '#EF4444'
}
};
if (!el) return;
var cfg = icons[key] || icons.disconnected;
el.setAttribute('data-status', key);
el.innerHTML =
'<span class="material-icons" style="font-size:14px;width:14px;height:14px;margin-right:5px;color:' + cfg.color + '">' + cfg.name + '</span>' +
'<span>' + text + '</span>';
}
var last = {
key: 'disconnected',
text: 'Disconnected'
};
window.BrandLayoutStatus = {
setConnection: function(state) {
var el = document.getElementById('layoutStatus');
var isConnected = (state === 'connected');
last = {
key: isConnected ? 'connected' : 'disconnected',
text: isConnected ? 'Connected' : 'Disconnected'
};
renderStatus(el, last.key, last.text);
},
setSave: function(state) {
var el = document.getElementById('layoutStatus');
var map = {
saving: {
key: 'saving',
text: 'Saving...'
},
saved: {
key: 'saved',
text: 'Saved'
},
error: {
key: 'error',
text: 'Error'
}
};
var cfg = map[state] || map.saving;
last = {
key: cfg.key,
text: cfg.text
};
renderStatus(el, cfg.key, cfg.text);
},
setError: function(msg, timeout) {
var el = document.getElementById('layoutStatus');
renderStatus(el, 'error', msg || 'Error');
if (timeout && timeout > 0) {
setTimeout(function() {
renderStatus(el, last.key, last.text);
}, timeout);
}
},
setMessage: function(txt, timeout) {
var el = document.getElementById('layoutStatus');
var prev = {
key: last.key,
text: last.text
};
renderStatus(el, prev.key, txt);
var t = (typeof timeout === 'number') ? timeout : 1500;
setTimeout(function() {
renderStatus(el, prev.key, prev.text);
}, t);
}
};
try {
renderStatus(document.getElementById('layoutStatus'), last.key, last.text);
} catch (e) {}
})();
</script>
<script src="https://www.thebrand.ai/wowX/brandSync/js/canvas-sync.js?250563"></script>
<script src="https://www.thebrand.ai/wowX/brandSync/js/canvas-enhanced.js?250563"></script>
<script src="https://www.thebrand.ai/wowX/brandSync/js/canvas-comments.js?250563"></script>
<script src="https://www.thebrand.ai/wowX/js/touch-punch.js"></script>
<!-- Scripts END -->
<script>
$(document).ready(function() {
$('#trigger-download').on('click', function() {
$('#brand-download').click();
});
});
</script>
<script>
(function initBrandCollab() {
var userId = 6667;
var ownerId = 6667;
var themeid = 68175;
var userName = "SCALINE";
var isOwner = (userId === ownerId);
// Expose for UI
window.BrandCollabContext = {
userId: userId,
ownerId: ownerId,
userName: userName,
isOwner: isOwner,
themeid: themeid
};
function getPageId() {
try {
if (window.brandProject && window.brandProject.activePageId) {
var bp = parseInt(window.brandProject.activePageId, 10);
if (!isNaN(bp) && bp > 0) return bp;
}
var active = document.querySelector('#brand-pages > div.active');
var val = active && active.dataset.page ? active.dataset.page : '1';
var n = parseInt(val, 10);
if (isNaN(n)) return 1;
return n;
} catch (e) {
return 1;
}
}
function wireBrandCollabUI(collab) {
try {
var layoutStatus = document.getElementById('layoutStatus');
if (layoutStatus) {
collab.ws.addEventListener('open', function() {
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setConnection) {
window.BrandLayoutStatus.setConnection('connected');
}
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setMessage) {
window.BrandLayoutStatus.setMessage('Connected', 1500);
}
});
collab.ws.addEventListener('close', function() {
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setConnection) {
window.BrandLayoutStatus.setConnection('disconnected');
}
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setMessage) {
window.BrandLayoutStatus.setMessage('Reconnecting...', 2500);
}
});
}
if (collab.ws && collab.ws.addEventListener) {
collab.ws.addEventListener('error', function() {
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setError) {
window.BrandLayoutStatus.setError('Connection error', 3000);
} else if (window.BrandLayoutStatus && window.BrandLayoutStatus.setSave) {
window.BrandLayoutStatus.setSave('error');
}
});
}
} catch (e) {}
collab.onUserJoined = function(data) {
var uc = document.getElementById('userCount');
if (uc) uc.textContent = (data && data.count ? data.count : 1) + ' users';
try {
if (data && data.user_id && String(data.user_id) !== String(userId)) {
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setMessage) {
window.BrandLayoutStatus.setMessage('User joined', 2000);
}
try {
if (typeof toastr !== 'undefined' && toastr.info) {
toastr.info((data && data.user_name) ? (data.user_name + ' joined the session') : 'User joined');
}
} catch (e) {}
}
} catch (e) {}
};
collab.onUserLeft = function(data) {
var uc = document.getElementById('userCount');
if (uc) uc.textContent = (data && data.count ? data.count : 1) + ' users';
try {
if (data && data.user_id) {
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setMessage) {
window.BrandLayoutStatus.setMessage('User left', 2000);
}
try {
if (typeof toastr !== 'undefined' && toastr.info) {
toastr.info((data && data.user_name) ? (data.user_name + ' left the session') : 'User left');
}
} catch (e) {}
}
} catch (e) {}
};
var btn = document.getElementById('brand-json-save');
if (btn && !btn._collabListenerAttached) {
btn._collabListenerAttached = true;
btn.addEventListener('click', function() {
var target = this;
var activeCollab = window.brandCollab;
if (!activeCollab) return;
if (target._collabSaving) return;
target._collabSaving = true;
target.disabled = true;
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setSave) {
window.BrandLayoutStatus.setSave('saving');
}
Promise.resolve().then(function() {
return activeCollab.manualSave ? activeCollab.manualSave() : null;
}).then(function() {
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setSave) {
window.BrandLayoutStatus.setSave('saved');
}
}).catch(function() {
if (window.BrandLayoutStatus && window.BrandLayoutStatus.setError) {
window.BrandLayoutStatus.setError('Save failed', 3000);
} else if (window.BrandLayoutStatus && window.BrandLayoutStatus.setSave) {
window.BrandLayoutStatus.setSave('error');
}
}).finally(function() {
target.disabled = false;
target._collabSaving = false;
});
});
}
}
function startCollab(pageId, skipLoad) {
if (!window.fabric || !window.brandCanvas || typeof EnhancedCanvasCollaboration === 'undefined') {
return;
}
// Reuse existing connection if possible
if (window.brandCollab && window.brandCollab.connected &&
String(window.brandCollab.themeid) === String(themeid)) {
try {
if (typeof window.brandCollab.setPageId === 'function') {
window.brandCollab.setPageId(pageId);
} else {
window.brandCollab.pageId = pageId;
}
} catch (e) {
window.brandCollab.pageId = pageId;
}
// Update comments context
if (window.brandComments) {
window.brandComments.setPageId(pageId);
}
// Re-send join/update message to update server context without full reconnect
window.brandCollab.send({
type: 'join',
user_id: String(userId),
user_name: userName,
themeid: themeid,
page_id: pageId
});
// Trigger load for new page
if (!skipLoad) {
window.brandCollab.loadFromBackend();
}
return;
}
if (window.brandCollab && typeof window.brandCollab.disconnect === 'function') {
try {
window.brandCollab.disconnect();
} catch (e) {}
}
var isShared = false;
var collab = new EnhancedCanvasCollaboration(window.brandCanvas, String(userId), themeid, pageId, String(ownerId), userName, isShared);
collab.backendUrl = 'https://www.thebrand.ai/wowX/brandSync/api/canvas-handler.php';
// Check if a template is being forced via data-template
if (!skipLoad) {
collab.loadFromBackend();
} else {
collab.startCollaboration();
}
window.brandCollab = collab;
wireBrandCollabUI(collab);
// Initialize or update Comments
if (!window.brandComments) {
window.brandComments = new CanvasComments(window.brandCanvas, {
userId: String(userId),
userName: userName,
themeId: themeid,
pageId: pageId
});
} else {
window.brandComments.setPageId(pageId);
}
}
function waitForCanvas() {
if (!window.fabric || !window.brandCanvas || typeof EnhancedCanvasCollaboration === 'undefined') {
setTimeout(waitForCanvas, 150);
return;
}
startCollab(getPageId());
}
window.rejoinBrandCollabForPage = function(newPageId, skipLoad) {
var id = parseInt(newPageId, 10);
if (isNaN(id)) {
id = 1;
}
startCollab(id, skipLoad);
}
waitForCanvas();
})();
</script>
<script type="text/javascript">
if (document.body.clientWidth >= 1200) {
var evt = new Event('brand-ruler'),
dragdrop = new Dragdrop(evt),
rg = new RulersGuides(evt, dragdrop, document.getElementById("brand-ruler"));
}
$(document).ready(function() {
$("#brand-toggle-right").trigger("click");
if (!$("#brand-toggle-left").hasClass("closed")) {
$("#brand-toggle-left").trigger("click");
}
if (!$("#brand-toggle-right").hasClass("closed")) {
$("#brand-toggle-right").trigger("click");
}
});
</script>
<div id="teamsBackdrop" style="display:none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 100019999998;"></div>
<div id="designDetailModal" class="teams-sheet" style="display:none; visibility: hidden; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 950px; height: 85vh; max-height: 800px; right: auto; bottom: auto; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); z-index: 100019999999; background: #fff; overflow: hidden; flex-direction: column;">
<div class="teams-sheet-header" style="border-bottom: 1px solid #eef2f6; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; background: #fff;">
<h5 id="designDetailTitle" style="font-size: 1.25rem; font-weight: 600; color: #1e293b; margin: 0;">Design Details</h5>
<button class="brand-btn icon-only" id="closeDesignDetail" style="color: #64748b; background: transparent; border: none; cursor: pointer;"><span class="material-icons">close</span></button>
</div>
<div class="teams-sheet-body" style="padding: 0; display: flex; flex-direction: row; height: 100%; overflow: hidden;">
<div style="flex: 1; background: #f8fafc; display: flex; align-items: center; justify-content: center; padding: 32px; overflow: auto; position: relative;">
<div id="designDetailPremiumBadge" style="display:none; position: absolute; top: 20px; right: 20px; background: #f59e0b; color: white; padding: 6px 12px; border-radius: 6px; font-weight: 700; font-size: 0.75rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-transform: uppercase; letter-spacing: 0.05em; z-index: 10;">
<span class="material-icons" style="font-size: 14px; vertical-align: middle; margin-right: 4px;">star</span> Premium
</div>
<img id="designDetailImage" src="" alt="Design Preview" style="max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); object-fit: contain;">
</div>
<div style="width: 360px; padding: 32px; border-left: 1px solid #eef2f6; display: flex; flex-direction: column; overflow-y: auto; background: #fff; flex-shrink: 0;">
<div style="margin-bottom: 24px;">
<h3 id="designDetailName" style="font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-bottom: 12px; line-height: 1.3;"></h3>
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<span id="designDetailCategory" style="background: #e0f2fe; color: #0284c7; padding: 4px 12px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;"></span>
<span id="designDetailPrice" style="background: #dcfce7; color: #166534; padding: 4px 12px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;"></span>
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px;">
<button type="button" class="brand-btn primary large" id="addToMyPageBtn" style="width: 100%; justify-content: center; height: 48px; font-size: 1rem; display: none;">
<span class="material-icons" style="margin-right: 8px;">note_add</span> Add To My Page
</button>
<button type="button" class="brand-btn primary large" id="useTemplateBtn" style="width: 100%; justify-content: center; height: 48px; font-size: 1rem;">
<span class="material-icons" style="margin-right: 8px;">add_circle</span> Use Template
</button>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
<button type="button" class="brand-btn secondary" id="favDesignBtn" style="justify-content: center;">
<span class="material-icons" style="margin-right: 8px;">favorite_border</span> Save
</button>
<button type="button" class="brand-btn secondary" id="shareDesignBtn" style="justify-content: center;">
<span class="material-icons" style="margin-right: 8px;">share</span> Share
</button>
</div>
</div>
<div style="margin-top: auto; padding-top: 24px; border-top: 1px solid #eef2f6;">
<div style="font-size: 0.75rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px;">Tags</div>
<div id="designDetailKeywords" style="display: flex; flex-wrap: wrap; gap: 8px;"></div>
</div>
</div>
</div>
</div>
<script>
(function(){
function escapeHtml(s){
return (s || '').toString()
.replace(/&/g,'&')
.replace(/</g,'<')
.replace(/>/g,'>')
.replace(/"/g,'"')
.replace(/'/g,''');
}
function getWowBaseUrl(){
try {
var origin = window.location.origin || '';
var path = window.location.pathname || '';
var dir = path.replace(/\/[^\/]*$/, '');
dir = dir.replace(/\/dashboard$/, '');
return origin + dir;
} catch(_) {
return 'https://www.thebrand.ai/wowX';
}
}
function openDesignDetail(designId, jsonUrl){
if(!designId) return;
if(typeof closeSheets === 'function'){
closeSheets();
}
var modal = document.getElementById('designDetailModal');
if(!modal) return;
var name = document.getElementById('designDetailName');
var img = document.getElementById('designDetailImage');
var cat = document.getElementById('designDetailCategory');
var price = document.getElementById('designDetailPrice');
var kwContainer = document.getElementById('designDetailKeywords');
var premiumBadge = document.getElementById('designDetailPremiumBadge');
var useBtn = document.getElementById('useTemplateBtn');
var addBtn = document.getElementById('addToMyPageBtn');
var favBtn = document.getElementById('favDesignBtn');
var shareBtn = document.getElementById('shareDesignBtn');
if(useBtn) useBtn.setAttribute('data-design-id', designId);
if(addBtn) addBtn.setAttribute('data-design-id', designId);
if(favBtn) favBtn.setAttribute('data-design-id', designId);
if(shareBtn) shareBtn.setAttribute('data-design-id', designId);
if(addBtn) {
var base = getWowBaseUrl();
jsonUrl = base + '/files/connect/add_page_design.php?themeid=' + encodeURIComponent(designId);
addBtn.setAttribute('data-json', jsonUrl);
var canAddPage = (typeof window !== 'undefined') && (typeof window.brandAddPageFromTemplateUrl === 'function') && !!document.getElementById('brand-pages');
addBtn.style.display = (canAddPage && !!jsonUrl) ? 'inline-flex' : 'none';
}
modal.setAttribute('data-json', jsonUrl || '');
if(name) name.textContent = '';
if(img) img.src = '';
if(cat) cat.textContent = '';
if(price) price.textContent = '';
if(kwContainer) kwContainer.innerHTML = '';
if(premiumBadge) premiumBadge.style.display = 'none';
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://www.thebrand.ai/wowX/dashboard/process/display_design.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
try {
var res = JSON.parse(xhr.responseText);
if(res.ok && res.data) {
var d = res.data;
if(name) name.textContent = d.title || 'Untitled Design';
if(img && d.poster) {
img.src = 'https://www.thebrand.ai/taswira.php?width=1000&height=1000&quality=90&image=/v/uploads/gallery/' + d.poster;
}
if(cat) {
if(d.category_name){
var slug = d.category_slug || '';
var href = slug ? 'https://www.thebrand.ai/wowX/dashboard/index.php?tab=templates&category=' + encodeURIComponent(slug) : '#';
cat.innerHTML = '<a href="' + href + '" style="color:inherit;text-decoration:none;">' + escapeHtml(d.category_name) + '</a>';
} else {
cat.textContent = d.category || 'Uncategorized';
}
}
if(price) {
var pVal = parseFloat(d.price);
if(pVal > 0){
price.textContent = 'Premium';
price.style.background = '#dcfce7';
price.style.color = '#166534';
if(premiumBadge) premiumBadge.style.display = 'block';
modal.setAttribute('data-premium', '1');
} else {
price.textContent = 'Free';
price.style.background = '#f1f5f9';
price.style.color = '#64748b';
if(premiumBadge) premiumBadge.style.display = 'none';
modal.setAttribute('data-premium', '0');
}
}
if(kwContainer && d.keywords){
var tags = String(d.keywords).split(',');
var html = '';
for(var i=0; i<tags.length; i++){
var t = tags[i].trim();
if(t) html += '<span style="background:#eef2f6;color:#475569;padding:4px 10px;border-radius:99px;font-size:0.75rem;font-weight:600">' + escapeHtml(t) + '</span>';
}
kwContainer.innerHTML = html;
}
modal.style.display = 'flex';
modal.style.visibility = 'visible';
var backdrop = document.getElementById('teamsBackdrop');
if(backdrop) backdrop.style.display = 'block';
document.body.classList.add('teams-modal-open');
} else {
console.error('Error loading design:', res.error);
}
} catch(e){
console.error('Error parsing design data', e);
}
} else {
console.error('Error loading design: Status ' + xhr.status);
}
}
};
xhr.send('id=' + encodeURIComponent(designId));
}
function closeDesignDetail(){
var modal = document.getElementById('designDetailModal');
if(modal){
modal.style.display = 'none';
modal.style.visibility = 'hidden';
}
var backdrop = document.getElementById('teamsBackdrop');
if(backdrop) backdrop.style.display = 'none';
document.body.classList.remove('teams-modal-open');
}
document.body.addEventListener('click', function(e){
var card = e.target.closest('.brand-select-template, .brand-select-my-design');
if(!card) return;
e.preventDefault();
e.stopPropagation();
var designId = card.id;
if(!designId) return;
var jsonUrl = '';
try { jsonUrl = card.getAttribute('data-json') || ''; } catch(_) { jsonUrl = ''; }
openDesignDetail(designId, jsonUrl);
});
document.body.addEventListener('click', function(e){
var useTemplateBtn = e.target.closest('#useTemplateBtn');
if(!useTemplateBtn) return;
e.preventDefault();
var designId = useTemplateBtn.getAttribute('data-design-id');
if(!designId) return;
// Get user ID from PHP
var userId = "6667";
// Check plan
var checkUrl = 'https://www.thebrand.ai/wowX/files/connect/my_plan.php?user_id=' + encodeURIComponent(userId);
// Optional: visual feedback
var originalText = useTemplateBtn.textContent;
useTemplateBtn.textContent = 'Processing...';
useTemplateBtn.style.opacity = '0.7';
fetch(checkUrl)
.then(function(res){ return res.json(); })
.then(function(data){
if(data.has_plan === true) {
// Plan exists, proceed to add design
var addUrl = 'https://www.thebrand.ai/wowX/files/connect/add_design.php';
var params = new URLSearchParams();
params.append('themeid', designId);
params.append('owner_id', userId);
params.append('userid', userId);
fetch(addUrl, {
method: 'POST',
body: params
})
.then(function(r){ return r.json(); })
.then(function(resData){
console.log('Design check/create result:', resData);
// Reset button
useTemplateBtn.textContent = originalText;
useTemplateBtn.style.opacity = '1';
if(resData.status === 'exists' || resData.filename) {
// Display full JSON response as requested
// alert(JSON.stringify(resData));
// Redirect using new_design_id if available
if(resData.new_design_id) {
// console.log(JSON.stringify(resData));
// alert(JSON.stringify(resData));
window.location.href = 'https://www.thebrand.ai/wowX/index.php?themeid=' + resData.new_design_id;
} else {
// Fallback or just show success
// alert('Design ready. Filename: ' + JSON.stringify(resData));
// Show a toast notification for the error
var toast = document.createElement('div');
toast.style.position = 'fixed';
toast.style.bottom = '20px';
toast.style.left = '50%';
toast.style.transform = 'translateX(-50%)';
toast.style.background = '#ef4444';
toast.style.color = '#fff';
toast.style.padding = '12px 24px';
toast.style.borderRadius = '8px';
toast.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
toast.style.zIndex = '9999';
toast.style.fontSize = '14px';
toast.textContent = 'An error occurred. Please try again later.';
document.body.appendChild(toast);
setTimeout(function(){ document.body.removeChild(toast); }, 3000);
}
}
})
.catch(function(err){
console.error('Error adding design:', err);
useTemplateBtn.textContent = originalText;
useTemplateBtn.style.opacity = '1';
});
} else {
// No plan
var msg = data.message || "No active plan found for this user.";
alert(msg);
var redirectUrl = "https://www.thebrand.ai/brandpay/index?redirect=" + encodeURIComponent(window.location.href);
window.location.href = redirectUrl;
}
})
.catch(function(err){
console.error('Error checking plan:', err);
useTemplateBtn.textContent = originalText;
useTemplateBtn.style.opacity = '1';
alert('Unable to verify plan status.');
});
});
document.body.addEventListener('click', function(e){
var addBtn = e.target.closest('#addToMyPageBtn');
if(!addBtn) return;
e.preventDefault();
e.stopPropagation();
var jsonUrl = addBtn.getAttribute('data-json') || '';
if(!jsonUrl) return;
var userId = "6667";
var modal = document.getElementById('designDetailModal');
var isPremium = false;
try { isPremium = modal && modal.getAttribute('data-premium') === '1'; } catch(_) { isPremium = false; }
var originalText = addBtn.textContent;
addBtn.textContent = 'Adding...';
addBtn.style.opacity = '0.7';
function resetBtn(){
addBtn.textContent = originalText;
addBtn.style.opacity = '1';
}
function doAdd(){
if (window.brandProject && typeof window.brandProject.addPageFromTemplateUrl === 'function') {
window.brandProject.addPageFromTemplateUrl(jsonUrl, { focus: true })
.then(function(){
resetBtn();
if(typeof closeSheets === 'function'){ closeSheets(); }
else { closeDesignDetail(); }
})
.catch(function(err){
console.error('Error adding page from template:', err);
resetBtn();
});
return;
}
if(typeof window.brandAddPageFromTemplateUrl !== 'function'){
resetBtn();
return;
}
window.brandAddPageFromTemplateUrl(jsonUrl, { focus: true })
.then(function(){
resetBtn();
if(typeof closeSheets === 'function'){ closeSheets(); }
else { closeDesignDetail(); }
})
.catch(function(err){
console.error('Error adding page from template:', err);
resetBtn();
});
}
if(!isPremium){
doAdd();
return;
}
var checkUrl = 'https://www.thebrand.ai/wowX/files/connect/my_plan.php?user_id=' + encodeURIComponent(userId);
fetch(checkUrl)
.then(function(res){ return res.json(); })
.then(function(data){
if(data.has_plan === true) {
doAdd();
} else {
resetBtn();
var msg = data.message || "No active plan found for this user.";
alert(msg);
var redirectUrl = "https://www.thebrand.ai/brandpay/index?redirect=" + encodeURIComponent(window.location.href);
window.location.href = redirectUrl;
}
})
.catch(function(err){
console.error('Error checking plan:', err);
resetBtn();
alert('Unable to verify plan status.');
});
});
if(typeof window !== 'undefined'){
window.openDesignDetailModal = openDesignDetail;
}
document.addEventListener('click', function(e){
var btn = e.target.closest('#closeDesignDetail');
if(!btn) return;
e.preventDefault();
if(typeof closeSheets === 'function'){ closeSheets(); }
else { closeDesignDetail(); }
});
document.addEventListener('click', function(e){
if(e.target && e.target.id === 'teamsBackdrop'){
if(typeof closeSheets === 'function'){ closeSheets(); }
else { closeDesignDetail(); }
}
});
document.addEventListener('keydown', function(e){
if(e.key === 'Escape'){
var modal = document.getElementById('designDetailModal');
if(modal && modal.style.display !== 'none'){
if(typeof closeSheets === 'function'){ closeSheets(); }
else { closeDesignDetail(); }
}
}
});
})();
</script>
</body>
<!-- Body END -->
</html>