*{
margin: 0;
border: 0;
padding: 0;
flex-wrap: wrap;
text-decoration: none;
}

@font-face {
	font-family: 'DFWireframe';
	src: url('../fonts/inter-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DFWireframe';
	src: url('../fonts/inter-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DFWireframe';
	src: url('../fonts/inter-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DFWireframe';
	src: url('../fonts/inter-black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

*, 
*:after, 
*::before { -webkit-box-sizing: border-box; box-sizing: border-box; }

:root {
	--color-wfb-silver: #F9F9F9;
	--color-wfb-silver-line: #EBEBEB;
	--color-wfb-deep-navy: #1B1D1F;
	--color-wfb-slate-navy: #323436;
	--color-wfb-coral-red: #F03454;
}

.df-wfb { min-height: 100vh; font-family: 'DFWireframe', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 30px; background: var(--color-wfb-silver); position: relative; }

/*
--------------
	HEADER
--------------
*/
.df-wfb-header { height: 60px; top: 0; background: #FFFFFF; border-bottom: 2px solid var(--color-wfb-silver-line); position: sticky; z-index: 10; }


/*
------------
	MAIN
------------
*/
.df-wfb-main { flex: 1; display: flex; align-items: flex-start; position: relative; }
.df-wfb-main .df-wfb-main-top { height: 50px; background: #FFFFFF; border-bottom: 1px solid var(--color-wfb-silver-line); }
.df-wfb-main .df-wfb-content { min-height: calc(100vh - 60px); flex: 1; display: flex; }
.df-wfb-main .df-wfb-content .df-wfb-content__left { flex: 1; padding: 30px 20px; display: flex; justify-content: center; }
.df-wfb-main .df-wfb-content .df-wfb-content__right { width: 400px; padding: 20px; background: pink; }


/*
---------------
	SIDEBAR
---------------
*/
.df-wfb-sidebar { width: 200px; height: calc(100vh - 60px); top: 60px; background: #FFFFFF; border-right: 1px solid var(--color-wfb-silver-line); position: sticky; z-index: 10; }
.df-wfb-sidebar h2 { padding: 20px; font-size: 18px; font-weight: 700; color: #000000; line-height: 100%; }
.df-wfb-sidebar .df-wfb-sidebar-logo { padding: 30px 20px; }
.df-wfb-sidebar .df-wfb-sidebar-logo img { width: 100%; max-width: 150px; height: auto; display: block; }

.df-wfb-sidebar .df-group .df-group-title { padding: 15px 10px 15px 20px; font-size: 16px; font-weight: 400; line-height: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.df-wfb-sidebar .df-group .df-group-title:hover, 
.df-wfb-sidebar .df-group .df-group-title.active { color: #FFFFFF; background: var(--color-wfb-slate-navy); }
.df-wfb-sidebar .df-group .df-group-content { width: 300px; height: 100vh; left: 100%; top: 0; padding: 20px; background: var(--color-wfb-slate-navy); display: none; position: absolute; overflow: auto; }
.df-wfb-sidebar .df-group .df-group-content .df-item { margin-bottom: 20px; cursor: pointer; position: relative; }
.df-wfb-sidebar .df-group .df-group-content .df-item .df-item-text { margin-bottom: 10px; text-align: center; }
.df-wfb-sidebar .df-group .df-group-content .df-item .df-item-text strong { font-size: 14px; color: rgba(255 255 255 / 75%); display: block; }
.df-wfb-sidebar .df-group .df-group-content .df-item .df-item-text small { font-size: 13px; color: rgba(255 255 255 / 50%); line-height: 100%; display: block; }

.df-wfb-sidebar .df-group .df-group-content .df-item img.df-thumb { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.df-wfb-sidebar .df-group .df-group-content .df-item .df-item-icon { inset: 0; width: 100%; height: 100%; background: rgba(50 52 54 / 80%) url(../images/icon-plus-colored.svg) no-repeat center / auto 30px; position: absolute; z-index: 2; opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.df-wfb-sidebar .df-group .df-group-content .df-item:hover .df-item-icon { opacity: 100%; }

.df-wfb-sidebar .df-group.open .df-group-content { display: block; }


/* 
--------------
	CANVAS
--------------
*/
.df-canvas { width: 100%; max-width: 900px; height: fit-content; position: relative; border-radius: 5px; box-shadow: 0 2px 3px rgba(0 0 0 / 10%); overflow: hidden; } 
.df-canvas .df-canvas-item { min-height: 70px; background: #FFFFFF; display: flex; justify-content: space-between; position: relative; }
.df-canvas .df-canvas-item .df-canvas-image { width: 100%; max-width: 900px; display: block; position: relative; z-index: 1; }
.df-canvas .df-canvas-item .df-canvas-image img { width: 100%; height: auto; display: block; }
.df-canvas .df-canvas-item .df-canvas-meta { top: 20px; right: 20px; display: flex; flex-direction: column; align-items: end; gap: 10px; position: absolute; z-index: 2; opacity: 100%; }
.df-canvas .df-canvas-item:hover .df-canvas-meta { opacity: 100%; }
.df-canvas .df-canvas-item .df-canvas-meta .df-item-title { width: max-content; height: 30px; padding: 0 15px; font-size: 14px; background: #FFFFFF; border: 1px solid var(--color-wfb-silver-line); display: flex; align-items: center; border-radius: 15px; }
.df-canvas .df-canvas-item .df-canvas-meta .df-item-price { }

.df-canvas .df-canvas-item[data-type="header"] .df-item-price { display: none; }

/* Controls */
.df-canvas .df-canvas-item .df-item-controls { left: 20px; top: 20px; display: flex; position: absolute; z-index: 3; }
.df-canvas .df-canvas-item .df-item-controls button { width: 30px; height: 30px; margin-right: 5px; background: pink; border-radius: 50%; cursor: pointer; }








.df-canvas-item.required {
  border-left: 4px solid #007cba;
}


.df-canvas-item small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #777;
}


.df-move-buttons {
  display: flex;
  gap: 6px;
  margin: 6px 0;
}

.df-move-buttons button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}