/* --- styled select --- */
.select { box-sizing: border-box; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2e52' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 13px; border: solid 1px #dfe5ec; border-radius: 8px; color: #0b2e52; cursor: pointer; position: relative; padding: 0 0 0 10px; transition: border-color .12s ease; }
.select div { background: #fff; border: solid 1px #e4e7ec; border-radius: 8px; box-shadow: 0 8px 24px rgba(16,24,40,0.14); display: none; position: absolute; left: 0; top: 38px; z-index: 100; }
.select div > i {position: absolute;width: 100px;height: 10px;background: transparent;top: -9px;left: 0;z-index: 150}
.select div a { display: block; color: #475467; padding: 8px 15px; white-space: nowrap; text-decoration: none; font-family: "Open Sans"; }
.select div a.active,.select div a:hover { background: #2563eb; color: #fff; }
.select div.caption { color: #c0c0c0; display: block; border: none; left: -40px; top: 6px; font-weight: 700; width: 30px; text-align: right; }
.select i { color: #98a2b3; position: absolute; right: 10px; top: 45%; font-size: .5em; }
.select:hover { border-color: #0b2e52; }
.select:hover i { color: #2563eb; }
.select:hover div { display: block; }
.select.font-family { width: 156px; padding: 0 30px 0 12px; height: 38px; }
.select.font-family span {white-space: nowrap;overflow: hidden;display: inline-block;width: 100%;font-size: 13px;line-height: 36px;}
.select.font-family div { width: 260px!important;overflow-x: hidden; right: auto; left: 0; }
.select.font-family div div {cursor: pointer;border: none;position: relative;top: 0;left: 0;padding: 0 10px;margin: 0;display: flex;align-items: center;height: 44px;background: #fff;box-shadow: none;border-radius: 0;color: #333;font-size: 16px;white-space: nowrap;overflow: hidden;}
.select.font-family div div .fnt-preview {display: block;width: auto;height: 32px;line-height: 0;overflow: hidden;pointer-events: none;}
.select.font-family div div img {width: auto;display: block;filter: invert(0.8);pointer-events: none;}
.select.font-family div div.active, .select.font-family div div:hover {background-color:#2563eb;color:#fff;}
.select.font-family div div.active img, .select.font-family div div:hover img {filter: none;}

.select.font-size { width: 76px; padding: 0 28px 0 12px; height: 38px; }
.select.font-size span {white-space: nowrap;overflow: hidden;display: inline-block;width: 100%;font-size: 13px;line-height: 36px;}
.select.font-size div { min-width: 82px; overflow-x: hidden }
.select.font-size div a {padding: 4px 15px;}

/* Toolbar and button icons */
@font-face {font-family: 'tools';src:url('fonts/icons.eot?32ac94');src:url('fonts/icons.eot?#iefix32ac94') format('embedded-opentype'),url('fonts/icons.woff?32ac94') format('woff'),url('fonts/icons.ttf?32ac94') format('truetype'),url('fonts/icons.svg?32ac94#icomoon') format('svg');font-weight: normal;font-style: normal;}
i[class^="tool-"], i[class*=" tool-"] {font-family: 'tools';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
i[class^="tool-"], i[class*=" tool-"] {font-family: 'tools';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.tool-align:before {content: "\e600";}
.tool-align-bottom:before {content: "\e601";}
.tool-align-h-center:before {content: "\e602";}
.tool-align-left:before {content: "\e603";}
.tool-align-right:before {content: "\e604";}
.tool-align-top:before {content: "\e605";}
.tool-align-v-center:before {content: "\e606";}
.tool-background:before {content: "\e607";}
.tool-clipart:before {content: "\e608";}
.tool-color .path1:before {content: "\e609";color: rgb(255, 0, 255);}
.tool-color .path2:before {content: "\e60a";margin-left: -1em;color: rgb(255, 255, 0);}
.tool-color .path3:before {content: "\e60b";margin-left: -1em;color: rgb(255, 255, 0);}
.tool-color .path4:before {content: "\e60c";margin-left: -1em;color: rgb(255, 0, 255);}
.tool-color .path5:before {content: "\e60d";margin-left: -1em;color: rgb(0, 255, 255);}
.tool-color .path6:before {content: "\e60e";margin-left: -1em;color: rgb(0, 255, 255);}
.tool-color .path7:before {content: "\e60f";margin-left: -1em;color: rgb(0, 0, 0);}
.tool-color .path8:before {content: "\e610";margin-left: -1em;color: rgb(0, 0, 0);}
.tool-copy:before {content: "\e611";}
.tool-delete:before {content: "\e612";}
.tool-dropdown:before {content: "\e613";}
.tool-flip:before {content: "\e614";}
.tool-flip-horizontal:before {content: "\e615";}
.tool-flip-vertical:before {content: "\e616";}
.tool-grid:before {content: "\e617";}
.tool-layer:before {content: "\e618";}
.tool-layer-bottom:before {content: "\e619";}
.tool-layer-down:before {content: "\e61a";}
.tool-layer-top:before {content: "\e61b";}
.tool-layer-up:before {content: "\e61c";}
.tool-safe:before {content: "\e61d";}
.tool-shapes:before {content: "\e61e";}
.tool-text-bold:before {content: "\e61f";}
.tool-text-center:before {content: "\e620";}
.tool-text-italic:before {content: "\e621";}
.tool-text-left:before {content: "\e622";}
.tool-text-right:before {content: "\e623";}
.tool-undo:before {content: "\e624";}
.tool-upload-image:before {content: "\e625";}

/* editor */
#redactor, .popup_wnd { color: #363636; font-family: "Open Sans"; font-weight: 400; line-height: 1.715em; }
.editor { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.editor input[type=text] { background: #fff; border: solid 1px #d0d5dd; border-radius: 6px; color: #344054; font-family: 'Open Sans'; margin: 0; padding: 6px 8px; font-size: .86em; }
.editor input[type=text]:focus { border-color: #2563eb; outline: none; }

/* --- fast css tooltips (data-tooltip) --- */
.editor [data-tooltip] {position: relative;}
.editor [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; left: 50%; bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(3px);
    background: #101828; color: #fff;
    font-family: "Open Sans", sans-serif; font-size: 11px; font-weight: 400; line-height: 1.3;
    text-transform: none; letter-spacing: .01em; white-space: nowrap;
    padding: 5px 9px; border-radius: 6px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease .3s, transform .12s ease .3s, visibility 0s linear .42s;
    z-index: 300;
}
.editor [data-tooltip]:hover::after {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: .3s, .3s, .3s;}

/* --- top bar --- */
.editor .toolbar {flex: 0 0 auto;display: flex;align-items: center;gap: 20px;box-sizing: border-box;background: #0b2e52;height: 64px;padding: 0 24px;position: relative;z-index: 60;}
.editor .toolbar .logo {display: flex;align-items: center;}
.editor .toolbar .logo img {display: block;}
.editor .toolbar__title {display: flex;align-items: center;height: 32px;padding-left: 20px;border-left: solid 1px rgba(255,255,255,.3);color: #fff;font-family: "Open Sans",sans-serif;font-size: 20px;font-weight: 700;letter-spacing: -.01em;white-space: nowrap;}
.editor .toolbar .btn {text-transform: uppercase;font-size: .715em;font-weight: 600;letter-spacing: .04em;padding: 6px 22px;min-width: 62px;border-radius: 6px;transition: filter .12s ease;}
.editor .toolbar .btn:hover {filter: brightness(0.94);}
.editor .toolbar .cart-btn {display: flex;align-items: center;gap: 10px;height: 44px;padding: 0 22px;background: #00a112;border-radius: 8px;font-family: "Open Sans",sans-serif;font-size: 15px;font-weight: 700;letter-spacing: 0;text-transform: none;}
.editor .design-action {margin-left: auto;display: flex;align-items: center;gap: 10px;}
.editor .toolbar__product {display: flex;align-items: center;height: 32px;margin-right: 10px;padding-right: 20px;border-right: solid 1px rgba(255,255,255,.3);color: #fff;font-family: "Open Sans",sans-serif;font-size: 14px;font-weight: 600;white-space: nowrap;}

/* --- insert bar: create with AI, upload image, clipart, shapes, backgrounds --- */
.editor .insert-bar {flex: 0 0 auto;display: flex;align-items: center;gap: 14px;box-sizing: border-box;height: 70px;padding: 0 24px;background: #fff;border-bottom: solid 1px #e3e8ef;position: relative;z-index: 58;}
.editor .insert-tools {display: flex;align-items: center;gap: 14px;margin-left: auto;}
.editor .insert-bar .b.large {display: flex;align-items: center;gap: 10px;box-sizing: border-box;height: 44px;padding: 0 16px;color: #0b2e52;background: #fff;border: solid 1px #dfe5ec;border-radius: 8px;font-family: "Open Sans",sans-serif;font-size: 14px;font-weight: 600;text-decoration: none;white-space: nowrap;transition: border-color .12s ease, background-color .12s ease;}
.editor .insert-bar .b.large i {font-size: 20px;color: #0b2e52;}
.editor .insert-bar .b.large:hover {border-color: #0b2e52;background: #f5f8fb;}
.editor .ai-btn {position: relative;display: flex;align-items: center;gap: 10px;box-sizing: border-box;height: 44px;padding: 0 26px 0 20px;border-radius: 8px;background: #f7841b;box-shadow: 0 2px 8px rgba(247,132,27,.28);color: #fff;font-family: "Open Sans",sans-serif;font-size: 16px;font-weight: 700;text-decoration: none;white-space: nowrap;transition: background-color .12s ease;}
.editor .ai-btn:hover {background: #e8740d;}
.editor .ai-btn svg {flex: 0 0 auto;}
.editor .ai-btn__badge {position: absolute;top: -10px;right: -12px;padding: 2px 8px;border-radius: 999px;background: #0b2e52;color: #fff;font-size: 10px;font-style: normal;font-weight: 700;letter-spacing: .05em;line-height: 16px;text-transform: uppercase;}

/* --- front/back switch (floating pill) --- */
.editor .sides-wrap {position: absolute;top: 196px;left: 50%;transform: translateX(calc(-50% - 160px));z-index: 10;}
@media all and (min-width: 766px) {
    .editor:has(.canvas-head) .sides-wrap {top: 248px;}
}
.editor .sides-wrap > input {display: none;}
.editor .sides {display: flex;overflow: hidden;border: solid 1px #d0d5dd;border-radius: 999px;background: #fff;box-shadow: 0 2px 8px rgba(16,24,40,0.08);}
.editor .sides a {display: block;padding: 6px 18px;background: #fff;color: #475467;text-decoration: none;text-align: center;font-size: .75em;font-family: "Open Sans";font-weight: 600;text-transform: uppercase;letter-spacing: .03em;}
.editor .sides a.active {background: #0b2e52;color: #fff;}
.editor .sides a span {margin: 0;}

/* --- same design on both sides --- */
.editor .sides-wrap {display: flex;flex-direction: column;align-items: center;gap: 8px;white-space: nowrap;}
.editor .sides a .same-label {display: none;}
.editor .sides a.is-same {background: #f2f4f7;color: #98a2b3;cursor: not-allowed;}
.editor .sides a.is-same span {display: none;}
.editor .sides a.is-same .same-label {display: inline;}
.editor .same-sides {display: flex;align-items: center;gap: 10px;padding: 8px 14px;border: solid 2px #0b2e52;border-radius: 12px;background: #eef3f8;box-shadow: 0 2px 8px rgba(16,24,40,0.12);cursor: pointer;font-family: "Open Sans";line-height: 1.25;user-select: none;}
.editor .same-sides input {width: 20px;height: 20px;margin: 0;flex-shrink: 0;accent-color: #0b2e52;cursor: pointer;}
.editor .same-sides__text {display: flex;flex-direction: column;}
.editor .same-sides__text strong {font-size: 14px;font-weight: 700;color: #0b2e52;}
.editor .same-sides__text small {font-size: 12px;color: #475467;}
.editor .same-sides.attention {animation: same-sides-attention .9s ease-out;}
@keyframes same-sides-attention {
    0% {box-shadow: 0 0 0 0 rgba(11,46,82,.6);}
    50% {box-shadow: 0 0 0 10px rgba(11,46,82,0);transform: scale(1.04);}
    100% {box-shadow: 0 2px 8px rgba(16,24,40,0.12);}
}

/* --- main layout --- */
.editor .editor-body {flex: 1 1 auto;min-height: 0;display: flex;align-items: stretch;background: #e8eef4;}
.editor .workspace {flex: 1 1 auto;min-width: 0;display: flex;flex-direction: column;}
.editor .canvas-head {flex: 0 0 auto;display: flex;align-items: center;gap: 16px;box-sizing: border-box;height: 52px;padding: 10px 48px 0;}
.editor .canvas-head__ai {display: flex;align-items: center;gap: 8px;color: #0b2e52;font-family: "Open Sans",sans-serif;font-size: 13px;font-weight: 600;text-decoration: none;}
.editor .canvas-head__ai svg {flex: 0 0 auto;color: #f7841b;}
.editor .canvas-head__ai:hover {color: #f7841b;}
.editor .canvas-head__product {margin-left: auto;color: #7a8799;font-family: "Open Sans",sans-serif;font-size: 12px;white-space: nowrap;}
.editor .area {flex: 1 1 auto;min-width: 0;min-height: 0;position: relative;overflow: hidden;}
.editor .area .canvas {position: relative;margin: 0;}
.editor .area .canvas .select_rect { visibility: hidden; position: absolute; border: 1px dashed black; }
.editor .area .canvas .loader {position: absolute;left: 48%;top: 48%;width: 30px;height: 30px}
.editor .area .canvas.pan-mode {cursor: grab !important;}
.editor .area .canvas.pan-mode * {cursor: grab !important;}
.editor .area .canvas.panning, .editor .area .canvas.panning * {cursor: grabbing !important;}

/* --- zoom bar --- */
.editor .zoom-bar {position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);display: flex;align-items: center;gap: 2px;background: #fff;border: solid 1px #e4e7ec;border-radius: 999px;box-shadow: 0 4px 16px rgba(16,24,40,0.14);padding: 4px 8px;z-index: 20;}
.editor .zoom-bar a {display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 999px;color: #475467;text-decoration: none;font-size: 17px;font-family: "Open Sans";line-height: 1;transition: background-color .12s ease, color .12s ease;}
.editor .zoom-bar a:hover {background: #f2f4f7;color: #1d4ed8;}
.editor .zoom-bar a.active {background: #2563eb;color: #fff;}
.editor .zoom-bar #zoomLabel {display: block;width: 48px;text-align: center;font-size: .78em;color: #344054;cursor: pointer;user-select: none;}
.editor .zoom-bar .zoom-bar__sep {display: block;width: 1px;height: 18px;background: #e4e7ec;margin: 0 4px;}

/* --- right side panel --- */
.editor .side-panel {flex: 0 0 320px;width: 320px;box-sizing: border-box;background: #fff;border-left: solid 1px #e3e8ef;padding: 24px 20px;overflow-y: auto;}

/* tool sections - horizontal compact bar under the toolbar */
.editor .tools {flex: 0 0 auto;display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;gap: 6px 0;box-sizing: border-box;min-height: 56px;background: #fff;border-bottom: solid 1px #e3e8ef;box-shadow: 0 1px 3px rgba(11,46,82,.05);padding: 8px 24px;position: relative;z-index: 55;}
.editor .tool-section {display: flex;align-items: center;gap: 6px;padding: 0 16px;border-bottom: none;border-right: solid 1px #e3e8ef;transition: opacity .15s ease;}
.editor .tool-section:first-child {padding-left: 0;}
.editor #textToolsGrp .tool-row + .tool-row {margin-left: 10px;padding-left: 16px;border-left: solid 1px #e3e8ef;}
.editor .tool-section:last-child {border-right: none;}
.editor .tool-section__title {display: none;}
.editor .tool-row {display: flex;align-items: center;flex-wrap: nowrap;gap: 8px;margin-bottom: 0;}
.editor .tool-row:last-child {margin-bottom: 0;}
.editor .tool-item {display: inline-flex;flex-direction: row;align-items: center;gap: 0;transition: opacity .15s ease;}
.editor .tool-item__label {display: none;}

/* tool buttons */
.editor .tools .b {display: flex;align-items: center;justify-content: center;box-sizing: border-box;background: transparent;border: solid 1px transparent;color: #0b2e52;font-family: "Open Sans";font-size: .63em;text-align: center;text-transform: uppercase;text-decoration: none;width: 36px;height: 36px;transition: background-color .12s ease, color .12s ease, border-color .12s ease, opacity .15s ease;}
.editor .tools .b i {display: block;font-size: 19px;color: #0b2e52;transition: color .12s ease;}
.editor .tools .b img {width: 20px;height: 20px;display: block;margin: 8px auto;}
.editor .tools .b:hover {background: #eef2f6;color: #0b2e52;}
.editor .tools .b:hover i {color: #0b2e52;}
.editor .tools .b.active {background: #0b2e52;color: #fff;border-color: #0b2e52;}
.editor .tools .b.active i {color: #fff;}
.editor .tools .b:focus-visible {outline: 2px solid #2563eb;outline-offset: 1px;}
.editor .tools .b.disabled, .editor .tools .b.disabled:hover {cursor: default;background-color: transparent;color: #d0d5dd;border-color: transparent;}
.editor .tools .b.disabled i, .editor .tools .b.disabled:hover i {color: #d0d5dd;}
.editor .tools .b.start, .editor .tools .b.end, .editor .tools .b.both {border-radius: 8px;}
.editor .tools .b-group {display: flex;gap: 8px;}
.editor .tools .b.lock-btn {width: auto;padding: 0 12px;font-size: .7em;font-weight: 600;letter-spacing: .03em;line-height: 32px;text-align: center;border: solid 1px #d0d5dd;border-radius: 6px;}
.editor .tools .b.lock-btn:hover {border-color: #2563eb;background: #f7faff;}
.editor .tools .spacing-field {display: inline-flex;flex-direction: row;align-items: center;gap: 0;}
.editor .tools .spacing-field input {width: 42px;text-align: center;padding: 4px 4px;}
.editor .tools .spacing-field span {display: none;}

/* selection-aware states: groups stay in place but dim until a matching
   object is selected (ids toggled by ToolBar.adoptForSelected) */
.editor .tools.sel-none #textToolsGrp,
.editor .tools.sel-multi #textToolsGrp,
.editor .tools.sel-img #textToolsGrp,
.editor .tools.sel-obj #textToolsGrp,
.editor .tools.sel-locked #textToolsGrp,
.editor .tools.sel-none #colorToolsGrp,
.editor .tools.sel-multi #colorToolsGrp,
.editor .tools.sel-locked #colorToolsGrp,
.editor .tools.sel-none #posToolsGrp,
.editor .tools.sel-locked #posToolsGrp,
.editor .tools.sel-none #deleteBtn,
.editor .tools.sel-locked #deleteBtn,
.editor .tools.sel-none #copyBtn,
.editor .tools.sel-locked #copyBtn,
.editor .tools.sel-none #objLockGrp {opacity: .35;pointer-events: none;}
.editor .tools.sel-img #colorToolsGrp {opacity: .35;pointer-events: none;}

/* dropdown menus inside the tools panel */
.editor .tools .drop {position: relative;}
.editor .tools .drop div {z-index: 50;display: none;border-radius: 8px;position: absolute;top: 36px;right: auto;left: 0;border: solid 1px #e4e7ec;background: #fff;box-shadow: 0 8px 24px rgba(16,24,40,0.14);overflow: hidden;padding: 4px;}
.editor .tools .drop div > i {position: absolute;width: 100px;height: 5px;background: transparent;top: -5px;left: 0;z-index: 50;border: none;padding: 0;}
.editor .tools .drop div a {display: flex;align-items: center;border: none;width: auto;height: auto;color: #475467;padding: 7px 15px 7px 8px;white-space: nowrap;justify-content: flex-start;text-transform: uppercase;font-size: .72em;font-weight: 600;letter-spacing: .02em;text-decoration: none;font-family: "Open Sans";background: #fff;border-radius: 5px;}
.editor .tools .drop div a i {display: inline-block;width: 26px;font-size: 1.2em;color: #667085;}
.editor .tools .drop div a:hover {background: #2563eb;color: #fff;}
.editor .tools .drop div a:hover i {color: #fff;}
.editor .tools .drop:hover div {display: block;}

/* --- instructions --- */
.editor .design-instructions {margin: 28px 0 0;padding: 18px 16px;background: #eef6fd;border-radius: 10px;box-sizing: border-box;}
.editor .design-instructions__title {display: flex;align-items: center;gap: 10px;margin: 0 0 18px;color: #0b2e52;font-family: "Open Sans",sans-serif;font-size: 14.5px;font-weight: 700;line-height: 1.3;}
.editor .design-instructions__title svg {flex: 0 0 auto;}
.editor .design-instructions__list {margin: 0;padding: 0;list-style: none;}
.editor .design-instructions__item {display: flex;align-items: flex-start;gap: 12px;margin: 0 0 16px;color: #4b5b70;font-size: 12.5px;line-height: 1.45;}
.editor .design-instructions__item:last-child {margin-bottom: 0;}
.editor .design-instructions__step {flex-shrink: 0;width: 30px;height: 30px;border-radius: 50%;background: #f7841b;color: #fff;font-size: 14px;font-weight: 700;line-height: 30px;text-align: center;}
.editor .design-instructions__text strong {display: block;margin-bottom: 1px;color: #0b2e52;font-size: 14px;font-weight: 700;}

/* --- text fields panel (injected by JS) --- */
.editor .fields {position: relative;margin-bottom: 4px;}
.editor .fields label {display: block;padding: 0 0 2px;margin-bottom: 10px;}
.editor .fields label textarea {background: #fff;}
.editor .fields span {font-weight: 700;color: #98a2b3;text-transform: uppercase;font-size: .68em;letter-spacing: .06em;display: block;text-align: left;padding-bottom: 8px;}
.editor .fields .caption {color: #2563eb;font-weight: 700;position: absolute;top: -25px;text-align: center;text-transform: uppercase;width: 250px;}
.editor .fields .design-image {background: #f8fafc;border: solid 1px #e4e7ec;border-radius: 6px;padding: 5px;position: relative;width: 245px;margin: 0 0 10px;}
.editor .fields .design-image .btn {position: absolute;width: 170px;text-align: center;right: 0;bottom: 0;}
.editor .fields .design-image .remove {position: absolute;right: 8px;top: 5px;}
.editor .fields .btn {width: 200px;float: right;}
.editor .fields .fields__new {padding: 0;margin-bottom: 12px;}
.editor .fields .fields__title {display: block;padding: 0;color: #0b2e52;font-size: 19px;font-weight: 700;letter-spacing: -.01em;line-height: 1.3;text-transform: none;}
.editor .fields .fields__hint {display: block;padding: 3px 0 16px;color: #6b7a8d;font-size: 12.5px;font-weight: 400;letter-spacing: 0;line-height: 1.4;text-transform: none;}
.editor .fields .fields__new textarea {margin: 0;padding: 11px 14px;border-color: #dfe5ec;border-radius: 8px;font-size: 13px;}
.editor .fields textarea::placeholder {color: #98a2b3;}
.editor .fields .fields__add {display: flex;align-items: center;justify-content: center;gap: 10px;width: 100%;height: 44px;margin: 0 0 14px;padding: 0;border: 0;border-radius: 8px;background: #0b2e52;color: #fff;font-family: "Open Sans",sans-serif;font-size: 15px;font-weight: 700;cursor: pointer;transition: background-color .12s ease;}
.editor .fields .fields__add:hover {background: #154473;}

#txt_metrics, .editor .fields textarea {width: 100%;box-sizing: border-box;height: 42px;border: solid 1px #d0d5dd;border-radius: 6px;color: #344054;font-family: 'Open Sans';margin: 0 0 10px 0;padding: 11px 10px;font-size: .93em;resize: none;overflow: hidden;}
#txt_metrics, .editor .fields textarea {width: 100%;box-sizing: border-box;height: 42px;border: solid 1px #d0d5dd;border-radius: 6px;color: #344054;font-family: 'Open Sans';margin: 0 0 10px 0;padding: 11px 10px;font-size: .93em;resize: none;overflow: hidden;}
#txt_metrics {position: absolute;top: 0;left: 0;width: 258px;line-height: 19px;word-wrap: break-word;visibility: hidden;}

.editor .fields textarea:hover, .editor .fields textarea:focus, .editor .fields textarea.selected {border-color: #0b2e52;}
.editor .fields textarea:focus {background: #fff;outline: none;}

.popup_overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; background: rgba(16,24,40,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 900; }

.popup_wnd { position: fixed; background: #fff; top: 0; left: 0; width: 400px; height: 300px; border-radius: 12px; box-shadow: 0 24px 64px rgba(16,24,40,.24), 0 4px 12px rgba(16,24,40,.12); z-index: 910; animation: popup-in .16s ease; }
@keyframes popup-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
/* title bar must stay 54px tall overall: PopUp.size() adds 54 to the content height */
.popup_wnd .popup_title_bar { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 12px 0 20px; background: #fff; border-bottom: solid 1px #e4e7ec; border-radius: 12px 12px 0 0; color: #101828; font-size: 15px; font-weight: 600; cursor: move; }
.popup_wnd .popup_close_button { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; color: #667085; cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.popup_wnd .popup_close_button::before { content: "\00d7"; font-size: 22px; line-height: 1; }
.popup_wnd .popup_close_button:hover { background: #f2f4f7; color: #101828; }
.popup_wnd .popup_content { position: relative; }

.popup_wnd input[type=text]{-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px}
.popup_wnd .label {background: none;color: #7C7E80;font-weight: normal;text-transform: none;padding: 0;font-size: 11px;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0}

.editor_widget { position: relative; font-family: "Open Sans"; }
.editor_widget.visible { visibility: visible; }
.editor_widget.hidden { visibility: hidden; }

.editor_widget.tf { color: #222; cursor: default; font-size: 10px; }
.editor_widget.tf.edit_block { position: absolute; left: 10px; top: -12px; background: #fff; text-align: center; padding: 0 9px; }

.editor_widget.button { box-sizing: border-box; background-color: #2563eb; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-align: center; cursor: pointer; border-radius: 8px; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.editor_widget.button:hover { background-color: #1d4ed8; }
.editor_widget.button.gray { background-color: #fff; border: solid 1px #d0d5dd; color: #344054; }
.editor_widget.button.gray:hover { background-color: #f8fafc; border-color: #98a2b3; }
.editor_widget.button.green { background-color: #16a34a; }
.editor_widget.button.green:hover { background-color: #15803d; }
.editor_widget.button.disabled { cursor: default; background-color: #eef1f5; border-color: #eef1f5; color: #98a2b3; }
.editor_widget.button.disabled:hover { background-color: #eef1f5; border-color: #eef1f5; }

.editor_widget.combobox { border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; font: 11px 'Open Sans', Arial; color: #344054; }
.editor_widget.combobox .label { margin-left: 6px; float: left; cursor: default; overflow: hidden; }
.editor_widget.combobox .button { margin: 2px 1px 0 3px; background: #d1d1d1 url('icons/ico_drop_down.png'); width: 17px; height: 16px; float: left; cursor: pointer; }
.editor_widget.combobox .drop_down { border: 1px solid #e4e7ec; border-radius: 6px; box-shadow: 0 8px 24px rgba(16,24,40,0.14); background: #fff; height: 162px; position: relative; left: -1px; top: 4px; clear: both; display: none; }
.editor_widget.combobox .drop_down.open { display: block; overflow: auto; z-index: 99; }
.editor_widget.combobox .drop_down .item { padding: 0 8px 0 6px; height: 20px; line-height: 20px; cursor: pointer; overflow: hidden; }
.editor_widget.combobox .drop_down .item:hover, .editor_widget.combobox .drop_down .item.selected { background: #eff4ff; color: #1d4ed8; }

.editor_widget.tab_switch .tabs { height: 32px; }
.editor_widget.tab_switch .tabs .tab_button { box-sizing: border-box; background: transparent; border: none; border-bottom: 2px solid transparent; height: 32px; float: left; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .05em; color: #667085; line-height: 30px; padding: 0 12px; text-align: center; transition: color .12s ease, border-color .12s ease; }
.editor_widget.tab_switch .tabs .tab_button:hover { color: #344054; }
.editor_widget.tab_switch .tabs .tab_button.active { background: transparent; color: #2563eb; border-bottom-color: #2563eb; cursor: default; }
.editor_widget.tab_switch .tab_switch_content { position: relative; border: 1px solid #e4e7ec; border-radius: 8px; }
.editor_widget.tab_switch .tab_switch_content .tab_content { position: absolute; width: inherit; height: inherit; visibility: hidden; }
.editor_widget.tab_switch .tab_switch_content .tab_content.active { visibility: visible; }

.editor_widget.palette { overflow: hidden; }
.editor_widget.palette .color { box-sizing: border-box; width: 18px; height: 18px; border: 1px solid rgba(16,24,40,.15); border-radius: 3px; background: #fff; margin: 4px 0 0 4px; float: left; cursor: pointer; }
.editor_widget.palette .color.large { width: 38px; height: 38px; margin: 10px 0 0 5px; }

.color_editor { position: relative; }
.color_editor .color_demo { border: 1px solid #d0d5dd; border-radius: 6px; background: #000; }
.color_editor .color_demo.canvas { position: absolute; top: 19px; left: 8px; }
.color_editor .color_text { font-weight: bold; color: #555; }
.color_editor .color_input { position: absolute; border: 1px solid #d0d5dd; border-radius: 4px; width: 24px; height: 20px; font-size: 10px; color: #344054; padding: 0 7px; }
.color_editor .gradient_edit { border: 1px solid #000; width: 318px; height: 28px; position: absolute; top: 79px; left: 219px; }
.color_editor .gradient_stops { border: 1px dashed #fff; width: 318px; height: 15px; position: absolute; top: 114px; left: 219px; }
.color_editor .stop_color { position: absolute; left: 315px; top: 140px; width: 18px; height: 18px; border: 1px solid #000; cursor: pointer; }
.color_editor .gr_handle { position: absolute; width: 11px; height: 15px; cursor: move; }
.color_editor .gr_handle .arrow { width: 7px; height: 4px; background: url('icons/ico_arrow_up.png'); margin: 0 0 1px 2px; }
.color_editor .gr_handle .color { background: #fff; width: 9px; height: 8px; border: 1px solid #000; }
.color_editor .gr_handle:hover .arrow, .color_editor .gr_handle.selected .arrow { background-position: 0 4px; }
.color_editor .gr_handle:hover .color, .color_editor .gr_handle.selected .color { border: 1px solid #d1d1d1; }
.color_editor .color_items { overflow: hidden; overflow-y: auto; top: 8px; left: 5px; width: 683px; height: 144px; }
.color_editor .color_items .color { width: 19px; height: 19px; border: 1px solid #fff; background: #000; margin: 3px 0 0 3px; float: left; cursor: pointer; }
.color_editor .color_items .color:hover, .color_editor .color_items .color.selected { border-color: #2563eb; }
.color_editor .color_items .color.large { width: 39px; height: 39px; margin: 9px 0 0 4px; }

.cat_browser { padding: 10px 0; overflow-y: auto; }
.cat_browser .cat_item { margin: 0 6px 2px; padding: 4px 10px; border-radius: 6px; color: #475467; font-size: 13px; cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.cat_browser .cat_item:hover { background: #f2f4f7; color: #1d4ed8; }
.cat_browser .cat_item.selected { background: #eff4ff; color: #1d4ed8; cursor: default; }

.cat_img { box-sizing: border-box; width: 130px; height: 130px; border: 1px solid #eef1f5; border-radius: 10px; margin: 14px 0 0 14px; float: left; cursor: pointer; text-align: center; overflow: hidden; background: #fff; transition: border-color .12s ease, box-shadow .12s ease; }
.cat_img:hover { border-color: #b3c7f7; box-shadow: 0 2px 8px rgba(16,24,40,.08); }
.cat_img.selected { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.18); cursor: default; }

.file_select { box-sizing: border-box; float: left; width: 240px; height: 40px; border: 1px dashed #98a2b3; border-radius: 8px; background: #f8fafc; color: #475467; font-size: 13px; line-height: 38px; padding: 0 0 0 14px; white-space: nowrap; overflow: hidden; }

.text-tools {position: relative;width: 100%}
.text-tools div {position: absolute;left: 0;top: 0;width: calc(100% - 2px)}
.text-tools div a {display: block;float: right;height: 50px;width: 50px;color: #fff;line-height: 3.3em;text-align: center}
.text-tools div em {font-style: normal;display: block;float: right;margin-right: 20px;color: #0076ff;line-height: 3.4em;height: 50px}
.text-tools div a img {vertical-align: middle}
.text-dialog {top: 0;left: 0;right: 0;bottom:0;position: absolute;display:none;background: #fff;z-index: 90;min-height: 1000px}
.text-dialog .top-section {background: #f9f9f9;padding: 10px 0;position: relative;border-bottom: solid 1px #d4d4d4;text-align: center;overflow: hidden}
.text-dialog .top-section .cancel-tool{ float: left; margin-left: 20px}
.text-dialog .top-section .done-tool{ float: right;margin-right: 20px}
.text-dialog .main-section #editingText {display:block;margin: 10px auto; width: 85%}


#fontFamilyCombo.current-edit {width: 98%;border: none;height: auto}
#fontFamilyCombo.current-edit span {display: none}
#fontFamilyCombo.current-edit #fontFamilyComboItems {display: block;border: none;margin: 0 auto;height: 100%!important;position: relative}
#fontSizeCombo.current-edit {width: 98%;border: none;height: auto}
#fontSizeCombo.current-edit span {display: none}
#fontSizeCombo.current-edit div {display: block;border: none;margin: 0 auto;height: 100%!important;position: relative}
#fontSizeCombo.current-edit div a{text-align: center}

.mobile-palette {background:#fff;overflow: hidden}
.mobile-palette div {cursor: pointer;width: 125px;height: 25px;color: #fff;float: left;text-align: center;padding: 50px 0;position: relative}
.mobile-palette div i {position: absolute;background: url(/img/icon/selected-color.png); background-size: 26px 26px;width: 26px;height: 26px;display: block;right: 10px;bottom: 10px}


@media all and (max-width: 1200px) {
    .editor .toolbar__product {display: none;}
}
@media all and (max-width: 960px) {
    .editor .toolbar__title {display: none;}
    .editor .insert-tools {gap: 8px;}
    .editor .insert-bar .b.large {padding: 0 12px;}
}

@media all and (max-width: 765px) {
    .editor {display: block;height: auto;}
    .editor .toolbar {display: none}
    .editor .insert-bar {display: none}
    .editor .canvas-head {display: none}
    .editor .workspace {display: block}
    .editor .fields .fields__add {display: none}
    .editor .zoom-bar {display: none}
    .editor .tools {display: none}
    .editor .design-instructions {display: none;}

    .editor .sides-wrap {background: #f9f9f9;padding: 7px 0;position: relative;top: 0;left: 0;transform: none;border: solid 1px #d4d4d4;border-top: none;width: 234px;float: right}
    .editor .sides-wrap > input {border-radius: 3px;display: block;position: absolute;top: 7px;left: 20px;padding: 3px 0;min-width: 65px;background: #44db5e}
    .editor .sides {text-align: center;width: 110px;height:28px;margin: 0 0 0 105px;overflow: hidden;border: solid 1px #0076ff;border-radius: 3px;min-width: 110px;box-shadow: none;}
    .editor .sides a{background: #fff;text-align: center;width: 55px;padding: 2px 0}
    .editor .sides a span {color: #0076ff;margin: 0}
    .editor .sides a.active {background: #0076ff}
    .editor .sides a.active span {color:#fff}
    .editor .sides-wrap {display: block;white-space: normal;}
    .editor .sides a.is-same span {display: inline;color: #98a2b3;}
    .editor .sides a.is-same .same-label {display: none;}
    .editor .same-sides {margin: 8px 10px 0;padding: 6px 10px;gap: 8px;}
    .editor .same-sides__text strong {font-size: 13px;}
    .editor .same-sides__text small {font-size: 11px;}

    .editor .editor-body {display: block;background: none;}
    .editor .area {width: 60%;margin: 0 auto;overflow: hidden}

    .editor .side-panel {width: auto;border: none;background: none;padding: 0;overflow: visible;}
    .editor .fields {width: 236px;margin-left: 0;float: right}
    .editor .fields label {display: none}
    .editor .fields label span:first-child, .editor .fields div span:first-child {display: none!important;}
    .editor .fields textarea {margin: 0;padding: 15px 0 15px 10px;border: solid 1px #cecece;border-top: none;border-radius: 0;width: 224px}

    .popup.design-submit {width: auto;top:0;right: 0;bottom: 0;left:0;margin-left:0;border-radius: 0}
}
@media all and (max-width: 600px) {
    .editor .area {width: 55%}
}
@media all and (max-width: 550px) {
    .editor .sides-wrap {float: none;border-left: none;border-right:none;width: 100%}
    .editor .sides {margin: 0 auto}
    .editor .area {width: 95%;float: none}
    .editor .side-panel {float: none;}
    .editor .fields {float: none;width: 95%;margin: 0 auto;text-align: center}
    .editor .fields textarea {width: calc(100% - 15px);border: solid 1px #cecece;border-top: none}
    .editor .fields span ~ .text-tools:first-of-type textarea{border-top: solid 1px #cecece}
}