@charset "UTF-8";
body {
  --cb-surface: #fff;
  --cb-surface-2: rgba(0,0,0,.04);
  --cb-surface-3: rgba(250,250,250,1);
  --cb-backdrop: rgba(0,0,0,.17);
  --cb-segment: #f7f7f7;
  --cb-segment-hover: #dedede;
  --cb-segment-selected: #e9e9e9;
  --cb-segment-line: #d6d6d6;
  --cb-content-preview: #fff;
  --cb-text: rgba(0,0,0,.92);
  --cb-text-2: rgba(0,0,0,.55);
  --cb-text-3: rgba(0,0,0,.4);
  --cb-text-4: rgba(0,0,0,.28);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cb-line: rgba(0,0,0,.09);
  --cb-line-2: rgba(0,0,0,.05);
  --cb-line-3: rgba(0,0,0,.13);
  --cb-line-4: rgba(0,0,0,.18);
  --cb-fill: rgba(0,0,0,.05);
  --cb-fill-2: rgba(0,0,0,.02);
  --cb-fill-hover: rgba(0,0,0,.06);
  --cb-fill-active: rgba(0,0,0,.08);
  --cb-item: rgba(255,255,255,.9);
  --cb-item-border: rgba(0,0,0,.13);
  --cb-item-head: rgba(0,0,0,.02);
  --cb-item-head-hover: rgba(0,0,0,.035);
  --cb-accent: #2c6fdb;
  --cb-accent-fill: rgba(44,111,219,.12);
  --cb-accent-fill-2: rgba(44,111,219,.2);
  --cb-accent-fill-3: rgba(0,0,0,0.05);
  --cb-accent-line: rgba(44,111,219,.45);
  --cb-on-accent: #fff;
  --focus-outline-color: var(--cb-accent, #3e93f7);
  --cb-field-bg: #f6f6f6;
  --cb-field-border: none;
  --cb-field-radius: 6px;
  --cb-field-height: 34px;
  --cb-field-font-size: 13px;
  --cb-field-tracking: 1px;
  --cb-field-focus-color: var(--focus-outline-color);
  --cb-field-focus-outline: 2px solid var(--cb-field-focus-color);
  --cb-field-focus-offset: -2px;
  --cb-btn-bg: #efefef;
  --cb-btn-bg-hover: #ededed;
  --cb-btn-bg-active: #e0e0e0;
  --cb-btn-height: 34px;
  --cb-btn-radius: 6px;
  --cb-label-color: rgba(0,0,0,.6);
  --cb-label-gap: 5px;
  --cb-field-gap: 14px;
  --cb-row-gap: 8px;
  --cb-control-accent: var(--cb-accent);
  --cb-switch-track: #ccc;
  --cb-switch-handle: #fff;
  --cb-slider-track: rgba(0,0,0,.1);
  --cb-slider-thumb: var(--cb-control-accent);
  --cb-float-surface: rgba(255,255,255,.95);
  --cb-shadow: -1px 5px 8px 0px rgba(0,0,0,.08);
  --cb-shadow-2: 3px 11px 24px 0px rgba(0,0,0,.05);
  --cb-shadow-3: 0px 3px 6px -6px rgba(0,0,0,.32);
  --cb-danger: #e84949;
  --cb-danger-fill: rgba(232,73,73,.16);
  --cb-success: #3aa76d;
  --cb-modal-overlay: rgba(0,0,0,.04);
  --cb-modal-overlay-stay: rgba(0,0,0,.04);
  --cb-modal-bg: #fff;
  --cb-modal-color: #000;
  --cb-modal-border: 1px solid #dadada;
  --cb-modal-shadow: 6px 14px 20px 0px rgba(95,95,95,.11);
  --cb-modal-bar-close: #828282;
  --cb-chat-bubble-bg: #171717;
  --cb-chat-bubble-text: #ffffff;
  --cb-tool-surface: rgba(255,255,255,.97);
  --cb-tool-icon: #111;
  --cb-tool-bg: rgba(243,243,243,.9);
  --cb-tool-add: #0fcc52;
  --cb-tool-move: #169af7;
  --cb-tool-more: rgba(216,200,6,.9);
  --cb-tool-remove: rgba(255,85,4,.9);
  --cb-tool-oncolor: #fff;
  --cb-tool-addline: rgb(255,183,132);
  --cb-tool-addborder: rgb(255,142,62);
  --cb-tooltip-bg: #333;
  --cb-tooltip-fg: #fefefe;
  --cb-rte-surface: var(--cb-surface);
  --cb-rte-text: var(--cb-text);
  --cb-rte-text-2: var(--cb-text-3);
  --cb-rte-line: var(--cb-line);
  --cb-rte-fill-hover: var(--cb-fill-hover);
  --cb-rte-fill-active: var(--cb-fill-active);
  --cb-rte-field-bg: var(--cb-field-bg);
  --cb-rte-slider-track: var(--cb-slider-track);
  --cb-rte-slider-thumb: var(--cb-slider-thumb);
  --cb-outline-active: #00da89;
  --cb-outline-inspected: #ffb84a;
  --cb-moveable: #2196f3;
}

body.dark, body.colored, body.colored-dark {
  --cb-surface: #2b2b2b;
  --cb-surface-2: rgba(255,255,255,.07);
  --cb-surface-3: rgba(78,78,78,1);
  --cb-backdrop: rgba(0,0,0,.5);
  --cb-segment: #3d3d3d;
  --cb-segment-hover: #4d4d4d;
  --cb-segment-selected: #454545;
  --cb-segment-line: #2b2b2b;
  --cb-content-preview: rgba(255,255,255,.9);
  --cb-text: rgba(255,255,255,.92);
  --cb-text-2: rgba(255,255,255,.6);
  --cb-text-3: rgba(255,255,255,.45);
  --cb-text-4: rgba(255,255,255,.32);
  --cb-line: rgba(255,255,255,.14);
  --cb-line-2: rgba(255,255,255,.08);
  --cb-line-4: rgba(255,255,255,.22);
  --cb-fill: rgba(255,255,255,.08);
  --cb-fill-hover: rgba(255,255,255,.14);
  --cb-fill-active: rgba(255,255,255,.18);
  --cb-item: transparent;
  --cb-item-border: rgba(255,255,255,.24);
  --cb-item-head: rgba(255,255,255,.12);
  --cb-item-head-hover: rgba(255,255,255,.17);
  --cb-field-bg: rgba(255,255,255,.08);
  --cb-btn-bg: rgba(255,255,255,.08);
  --cb-btn-bg-hover: rgba(255,255,255,.14);
  --cb-btn-bg-active: rgba(255,255,255,.18);
  --cb-label-color: rgba(255,255,255,.65);
  --cb-switch-track: #7c7c7c;
  --cb-switch-handle: rgba(255,255,255,.82);
  --cb-slider-track: rgba(255,255,255,.13);
  --cb-accent: #5b9dff;
  --cb-accent-fill: rgba(91,157,255,.18);
  --cb-accent-fill-2: rgba(91,157,255,.28);
  --cb-accent-fill-3: rgba(255, 255, 255, 0.09);
  --cb-accent-line: rgba(91,157,255,.55);
  --cb-float-surface: rgba(38,38,40,.96);
  --cb-shadow: -1px 5px 14px 0px rgba(0,0,0,.55);
  --cb-shadow-2: 3px 11px 24px 0px rgba(0,0,0,.45);
  --cb-danger: #ff6b6b;
  --cb-danger-fill: rgba(255,107,107,.2);
  --cb-success: #57c993;
  --cb-modal-overlay: rgba(255,255,255,.000001);
  --cb-modal-overlay-stay: rgba(183,183,183,.11);
  --cb-modal-bg: #343434;
  --cb-modal-color: #fafafa;
  --cb-modal-border: 1px solid rgba(255,255,255,.09);
  --cb-modal-shadow: 4px 17px 20px 0px rgba(0,0,0,.23);
  --cb-modal-bar-close: #9a9a9a;
  --cb-chat-bubble-bg: #181818;
  --cb-chat-bubble-text: #f0f0f0;
  --cb-tool-surface: rgba(255,255,255,.97);
  --cb-tool-icon: #111;
  --cb-tool-bg: #eaeaea;
}

body.light {
  --cb-item: transparent;
  --cb-item-border: rgba(0,0,0,.11);
  --cb-item-head: rgba(255,255,255,.3);
  --cb-item-head-hover: rgba(255,255,255,.4);
}

body.colored {
  --cb-item-border: rgba(0,0,0,.14);
}

body.dark .motion-dock, body.dark .cascade-dock, body.dark .panel-motion, body.colored .motion-dock, body.colored .cascade-dock, body.colored .panel-motion, body.colored-dark .motion-dock, body.colored-dark .cascade-dock, body.colored-dark .panel-motion {
  color-scheme: dark;
}

body {
  overflow-x: hidden !important;
  --kelir-bg: var(--cb-surface);
  --kelir-fg: var(--cb-text);
  --kelir-fg-muted: var(--cb-text-2);
  --kelir-border: var(--cb-line-3);
  --kelir-border-strong: var(--cb-line-4);
  --kelir-field-bg: var(--cb-field-bg);
  --kelir-focus: var(--focus-outline-color);
  --kelir-shadow: var(--cb-shadow-2);
  --kelir-radius: 10px;
  --kelir-check-a: var(--cb-segment-selected);
  --kelir-check-b: var(--cb-surface);
}

body.dark, body.colored {
  --kelir-border: transparent;
}
body.dark .rte-color-picker, body.colored .rte-color-picker {
  --kelir-fg-muted: rgba(255, 255, 255, 0.7);
}

svg {
  overflow: hidden;
  vertical-align: middle;
  pointer-events: none;
}

.is-container > div > div svg {
  pointer-events: initial;
}

[contenteditable] svg {
  pointer-events: initial;
}

.is-icon-flex {
  width: 16px;
  height: 16px;
}

a:focus,
button:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: 2px;
  transition: none;
}

.transition1 {
  transition: all ease 0.1s;
}

.focus-outline {
  outline: var(--focus-outline-color) 2px solid !important;
  outline-offset: 2px !important;
}

.is-page {
  position: relative;
  transform-origin: top;
  max-width: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.is-page > .is-box.box-select {
  outline: 1px solid #00da89;
  outline-offset: -1px;
  z-index: 1;
}

.is-builder {
  transition: all ease 0.3s;
  transform-origin: top;
}
.is-builder > div > div:focus {
  outline: none;
}
.is-builder .is-subblock:focus {
  outline: none;
}
.is-builder > div {
  position: relative;
  transition: none;
  margin-left: 0;
  margin-right: 0;
  width: auto;
}
.is-builder[gridoutline] > div > div {
  outline: 1px solid var(--cb-line-4);
  outline-offset: 1px;
}
.is-builder > div > div.cell-active:not([data-protected]) {
  outline: 1px solid var(--cb-outline-active);
  transition: none !important;
}
.is-builder .row-active:not([data-protected]) {
  outline: 1px solid var(--cb-outline-active);
  z-index: 1;
}
.is-builder .row-active:not([data-protected]).row-outline {
  outline: 1px solid rgba(0, 0, 0, 0.09);
}
.is-builder .row-active:not([data-protected]):not(.row-outline) > div.cell-active {
  outline: none;
}
.is-builder table.default td {
  border: transparent 1px dashed;
}
.is-builder .cell-active .elm-active:not(button, table, [data-cb-type]) {
  background: var(--cb-surface-2);
}
.is-builder .cell-active table.default td,
.is-builder .cell-active table.default th {
  border: #cccccc 1px dashed;
}
.is-builder .cell-active hr {
  cursor: pointer;
}
.is-builder .cell-active[data-html] {
  background-color: var(--cb-fill);
}
.is-builder .cell-active .icon-active,
.is-builder .cell-active .svg-active {
  background-color: var(--cb-fill-active);
}
.is-builder .elm-inspected {
  animation-name: elm-inspected-anim;
  animation-duration: 0.6s;
  outline: 1px solid var(--cb-outline-inspected) !important;
}
.is-builder .elm-inspected .elm-active {
  background: none;
}
@keyframes elm-inspected-anim {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

@media (min-width: 971px) {
  .is-builder > div {
    display: flex;
  }
}
.sortable-drag {
  background-image: none !important;
  background-color: transparent !important;
  outline: none !important;
}
.sortable-drag * {
  opacity: 0;
}
.sortable-drag .is-row-tool {
  opacity: 0;
}

.sortable-ghost {
  background: var(--cb-fill);
  width: 100%;
  outline: none !important;
}
.sortable-ghost * {
  outline: none !important;
}
.sortable-ghost .is-row-tool,
.sortable-ghost .is-col-tool,
.sortable-ghost .is-rowadd-tool {
  display: none !important;
}

.sortable-drag::before {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.03);
  transform-origin: top left;
}

[data-cb-ui] .snippet-item {
  cursor: move;
  position: relative;
  overflow: hidden;
  background: var(--cb-content-preview);
  outline: 1px solid var(--cb-line-2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  transition: box-shadow 0.2s ease;
}
[data-cb-ui] .snippet-item img {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
[data-cb-ui] .snippet-item .is-overlay {
  position: absolute;
  inset: 0;
}
[data-cb-ui] .snippet-item:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
[data-cb-ui] .snippet-item:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: 2px;
}
[data-cb-ui] .snippet-item.sortable-chosen {
  height: auto;
}
[data-cb-ui] .snippet-item.sortable-chosen * {
  visibility: visible;
}
[data-cb-ui] .snippet-item.sortable-chosen.sortable-drag * {
  visibility: hidden;
  transition: none !important;
}
[data-cb-ui] .snippet-item.sortable-drag {
  outline: none !important;
}

.is-builder .snippet-item.sortable-ghost {
  width: 100%;
  background: var(--cb-fill);
  height: 40px;
}
.is-builder .snippet-item.sortable-ghost * {
  visibility: hidden;
}

.moveable-control {
  border: none !important;
  width: 17px !important;
  height: 17px !important;
  margin-top: -8.5px !important;
  margin-left: -8.5px !important;
  background: #fff !important;
  border: #dddddd 1px solid !important;
  box-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.22) !important;
}
.moveable-control.moveable-origin {
  display: none !important;
}

.moveable-direction.moveable-s, .moveable-direction.moveable-n {
  display: none !important;
}
.moveable-direction.moveable-e, .moveable-direction.moveable-w {
  display: none !important;
}

.moveable-line {
  display: none !important;
}

[data-cb-ui] {
  height: 0px;
  float: left;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: normal;
  /*  general use */
  /*
  .rte-align-options,
  .rte-formatting-options,
  .rte-list-options,
  .rte-more-options,
  .elementrte-more-options,
  .rte-textsetting-options,
  .rte-color-picker,
  .rte-icon-options,
  .rte-fontfamily-options,
  .rte-customtag-options,
  .rte-paragraph-options,
  .rte-zoom-options
  */
}
[data-cb-ui] p {
  font-size: 13px;
}
[data-cb-ui] .style-helper {
  display: none;
  background: var(--cb-surface);
  color: var(--cb-text);
}
[data-cb-ui] .style-helper.on {
  background: var(--cb-fill-active);
}
[data-cb-ui] .style-helper.hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .style-helper svg:not([fill]) {
  fill: var(--cb-text);
}
[data-cb-ui] .style-helper.modal-color {
  background: var(--cb-modal-color);
}
[data-cb-ui] .style-helper.modal-background {
  background: var(--cb-modal-bg);
}
[data-cb-ui] .style-helper.button-pickcolor-border {
  border: 1px solid var(--cb-line);
}
[data-cb-ui] .style-helper.button-pickcolor-background {
  background: var(--cb-field-bg);
}
[data-cb-ui] .style-helper.snippet-color {
  background: var(--cb-text);
}
[data-cb-ui] .style-helper.snippet-background {
  background: var(--cb-surface);
}
[data-cb-ui] .style-helper.snippet-tabs-background {
  background: var(--cb-field-bg);
}
[data-cb-ui] .style-helper.snippet-tab-item-background {
  background: var(--cb-surface);
}
[data-cb-ui] .style-helper.snippet-tab-item-background-active {
  background: var(--cb-field-bg);
}
[data-cb-ui] .style-helper.snippet-tab-item-background-hover {
  background: var(--cb-surface);
}
[data-cb-ui] .style-helper.snippet-tab-item-color {
  background: var(--cb-text);
}
[data-cb-ui] .style-helper.snippet-more-item-background {
  background: var(--cb-surface);
}
[data-cb-ui] .style-helper.snippet-more-item-background-active {
  background: var(--cb-surface-2);
}
[data-cb-ui] .style-helper.snippet-more-item-background-hover {
  background: var(--cb-surface-2);
}
[data-cb-ui] .style-helper.snippet-more-item-color {
  background: var(--cb-text);
}
[data-cb-ui] .style-helper.tabs-background {
  background: var(--cb-field-bg);
}
[data-cb-ui] .style-helper.tab-item-active-border-bottom {
  border: var(--cb-text) 1px solid;
}
[data-cb-ui] .style-helper.tab-item-color {
  background: var(--cb-text-2);
}
[data-cb-ui] .style-helper.tabs-more-background {
  background: var(--cb-surface);
}
[data-cb-ui] .style-helper.tabs-more-border {
  border: 1px solid var(--cb-line);
}
[data-cb-ui] .style-helper.tabs-more-item-color {
  background: var(--cb-text-2);
}
[data-cb-ui] .style-helper.tabs-more-item-background-hover {
  background: var(--cb-surface-2);
}
[data-cb-ui] .style-helper.separator-color {
  background: var(--cb-line);
}
[data-cb-ui] .style-helper.outline-color {
  background: var(--focus-outline-color);
}
[data-cb-ui] .style-helper-button-classic {
  background: transparent;
  color: var(--cb-text);
}
[data-cb-ui] .style-helper-button-classic.hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .style-helper-button-classic svg {
  fill: var(--cb-text);
}
[data-cb-ui] .is-area color {
  background: var(--cb-modal-color) !important;
}
[data-cb-ui] .is-area background {
  background: var(--cb-modal-bg) !important;
}
[data-cb-ui] .is-area button {
  color: var(--cb-modal-color) !important;
}
[data-cb-ui] .is-area button svg {
  fill: var(--cb-modal-color) !important;
}
[data-cb-ui] .is-area-2nd {
  color: var(--cb-text) !important;
  background: var(--cb-surface) !important;
}
[data-cb-ui] .is-area-2nd button {
  color: var(--cb-text) !important;
}
[data-cb-ui] .is-area-2nd button svg {
  fill: var(--cb-text) !important;
}
[data-cb-ui] .is-general-options {
  color: var(--cb-text);
  background: var(--cb-surface);
}
[data-cb-ui] .is-general-options button,
[data-cb-ui] .is-general-options div[role=button] {
  background-color: transparent;
  color: var(--cb-text);
  width: 45px;
  height: 40px;
  margin: 0;
  box-shadow: none;
}
[data-cb-ui] .is-general-options button.on,
[data-cb-ui] .is-general-options div[role=button].on {
  background: var(--cb-fill-active);
}
[data-cb-ui] .is-general-options button:hover,
[data-cb-ui] .is-general-options div[role=button]:hover {
  background: var(--cb-fill-hover) !important;
}
[data-cb-ui] .is-general-options button:focus,
[data-cb-ui] .is-general-options div[role=button]:focus {
  outline: none;
}
[data-cb-ui] .is-general-options button svg:not([fill]),
[data-cb-ui] .is-general-options div[role=button] svg:not([fill]) {
  fill: var(--cb-text);
}
[data-cb-ui] .is-modal a:focus {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: 0;
}
[data-cb-ui] .is-modal.active {
  display: flex;
}
[data-cb-ui] .is-modal button {
  color: var(--cb-modal-color);
  background: var(--cb-modal-bg);
}
[data-cb-ui] .is-modal button:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .is-modal button.on {
  background: var(--cb-fill-active);
}
[data-cb-ui] .is-modal button.is-btn-color {
  width: 35px !important;
  height: 35px !important;
  padding: 0 !important;
  background: var(--cb-field-bg);
  border: 1px solid var(--cb-line) !important;
}
[data-cb-ui] .is-modal .is-separator {
  width: 100%;
  border-top: var(--cb-line) 1px solid;
  margin-bottom: 10px;
  margin-top: 10px;
}
[data-cb-ui] .is-modal .form-upload-larger {
  border-radius: 6px !important;
}
[data-cb-ui] .is-modal .form-upload-larger.please-wait svg {
  transform: scale(1, 1);
  opacity: 1;
  animation-name: please-wait-anim;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
@keyframes please-wait-anim {
  0% {
    transform: scale(1, 1);
    opacity: 0;
  }
  25% {
    transform: scale(1.2, 1.2);
    opacity: 1;
  }
  50% {
    transform: scale(1, 1);
    opacity: 0;
  }
  75% {
    transform: scale(1.2, 1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
[data-cb-ui] .is-modal .form-upload-larger:focus-within {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: 0;
  border-radius: 6px;
}
[data-cb-ui] .is-modal .is-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cb-modal-overlay);
  z-index: -1;
  max-width: none !important;
  margin: 0 !important;
}
[data-cb-ui] .is-modal .is-modal-overlay.overlay-stay {
  background: var(--cb-modal-overlay-stay);
}
[data-cb-ui] .is-modal.is-modal-content,
[data-cb-ui] .is-modal .is-modal-content {
  background: var(--cb-modal-bg);
  color: var(--cb-modal-color);
  border: var(--cb-modal-border);
  box-shadow: var(--cb-modal-shadow);
  border-radius: 11px;
  overflow: hidden;
}
[data-cb-ui] .is-modal .is-modal-content {
  position: relative;
  width: 100%;
  padding: 25px 25px;
  box-sizing: border-box;
  border-radius: 11px;
}
[data-cb-ui] .is-modal:not(.is-modal-content) > div:not(.is-modal-overlay) {
  background: var(--cb-modal-bg);
  border: var(--cb-modal-border);
  box-shadow: var(--cb-modal-shadow);
  position: relative;
  width: 100%;
  padding: 25px 25px;
  box-sizing: border-box;
  border-radius: 11px;
  overflow: hidden;
}
[data-cb-ui] .is-modal.is-modal-full > div:not(.is-modal-overlay) {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
[data-cb-ui] .is-modal div.is-draggable {
  cursor: move;
  box-shadow: none;
  background: transparent;
  padding: 0;
  border: none;
}
[data-cb-ui] .is-modal div.is-draggable > span {
  pointer-events: none;
  user-select: none;
}
[data-cb-ui] .is-modal div.is-modal-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  flex: none;
  background: transparent;
  border: none;
  box-sizing: border-box;
  padding: 2px 19px 0 19px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cb-text);
  touch-action: none;
  user-select: none;
  z-index: 1;
  line-height: 35px;
  height: 35px;
}
[data-cb-ui] .is-modal div.is-modal-bar .is-modal-close {
  z-index: 1;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 0px;
  right: 0px;
  box-sizing: border-box;
  padding: 0;
  line-height: 32px;
  font-size: 12px;
  color: var(--cb-modal-bar-close);
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  background-color: transparent !important;
  border: none;
}
[data-cb-ui] .is-modal div.is-modal-footer button {
  margin-left: 2px;
}
[data-cb-ui] .is-modal.fileselect, [data-cb-ui] .is-modal.mediaselect, [data-cb-ui] .is-modal.imageselect, [data-cb-ui] .is-modal.videoselect, [data-cb-ui] .is-modal.otherselect, [data-cb-ui] .is-modal.pickcolor, [data-cb-ui] .is-modal.pickcolormore, [data-cb-ui] .is-modal.pickcolorclass, [data-cb-ui] .is-modal.imagesource, [data-cb-ui] .is-modal.imageadjust, [data-cb-ui] .is-modal.imageadjust2, [data-cb-ui] .is-modal.audioselect, [data-cb-ui] .is-modal.mediasource {
  z-index: 10006 !important;
}
[data-cb-ui] .is-modal.previewcontent {
  background: var(--cb-backdrop);
}
[data-cb-ui] .is-modal.previewcontent .size-control {
  cursor: pointer;
  background: var(--cb-field-bg);
  border-left: var(--cb-line-4) 2px solid;
  border-right: var(--cb-line-4) 2px solid;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
[data-cb-ui] .is-modal.previewcontent .size-control-info {
  text-align: center;
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.previewcontent .size-control.hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .is-modal.is-confirm div.is-modal-content {
  max-width: 460px;
  text-align: center;
}
[data-cb-ui] .is-modal.viewconfig div.is-modal-content {
  max-width: 750px;
  padding: 5px 25px 25px 25px;
}
[data-cb-ui] .is-modal.viewhtml, [data-cb-ui] .is-modal.viewhtmlformatted, [data-cb-ui] .is-modal.viewhtmlnormal {
  z-index: 10005;
}
[data-cb-ui] .is-modal.viewhtml div.is-modal-content, [data-cb-ui] .is-modal.viewhtmlformatted div.is-modal-content, [data-cb-ui] .is-modal.viewhtmlnormal div.is-modal-content {
  width: 80%;
  max-width: 1200px;
  height: 80%;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
[data-cb-ui] .is-modal.viewhtmllarger {
  z-index: 10005;
  align-items: flex-end;
}
[data-cb-ui] .is-modal.viewhtmllarger div.is-modal-content {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
}
[data-cb-ui] .is-modal.grideditor {
  background: var(--cb-surface);
  width: 96px;
  height: 488px;
  top: 33%;
  left: auto;
  right: 15%;
  margin-top: -220px;
  box-sizing: content-box;
  overflow: hidden;
}
[data-cb-ui] .is-modal.grideditor .is-modal-bar {
  z-index: 1;
  height: 20px;
}
[data-cb-ui] .is-modal.grideditor .is-modal-bar .is-modal-close {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  margin: 2px;
}
[data-cb-ui] .is-modal.grideditor.active {
  display: flex;
}
[data-cb-ui] .is-modal.grideditor > div {
  width: 100%;
  box-sizing: border-box;
  padding: 1px;
  border: none;
}
[data-cb-ui] .is-modal.grideditor button {
  width: 45px;
  height: 40px;
  margin: 1px;
  background-color: transparent !important;
  box-shadow: none !important;
  outline-offset: -2px;
}
[data-cb-ui] .is-modal.grideditor button.on {
  background-color: rgba(0, 0, 0, 0.05) !important;
}
[data-cb-ui] .is-modal.grideditor button:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
}
[data-cb-ui] .is-modal.grideditor .is-separator {
  width: 100%;
  border-top: var(--cb-line) 1px solid;
  display: flex;
  padding: 1px;
}
[data-cb-ui] .is-modal.pagesize .is-modal-content {
  max-width: 980px;
}
[data-cb-ui] .is-modal.pagesize .div-page-sizes {
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f3f3f3;
  flex-flow: row wrap;
  padding: 20px;
  box-sizing: border-box;
  height: 590px;
}
[data-cb-ui] .is-modal.pagesize .div-page-sizes .paper-item {
  flex: none;
}
[data-cb-ui] .is-modal.pagesize [data-pagesize] {
  background: #fff;
  margin: 20px;
  box-shadow: 5px 9px 10px rgba(0, 0, 0, 0.1);
  min-width: 70px;
  min-height: 70px;
}
[data-cb-ui] .is-modal.pagesize .input-width,
[data-cb-ui] .is-modal.pagesize .input-height {
  width: 65px;
}
[data-cb-ui] .is-modal.pluginsettings {
  z-index: 10003;
  position: fixed;
  overflow: hidden;
  width: 420px;
  height: 600px;
  top: 50%;
  left: calc(50% - 200px);
  right: 30%;
  margin-top: -300px;
  box-sizing: content-box;
  flex-direction: row;
  align-items: flex-start;
}
[data-cb-ui] .is-modal.pluginsettings.active {
  display: flex;
}
[data-cb-ui] .is-modal.pluginsettings > div:not(.is-draggable) {
  width: 100%;
  margin-top: 30px;
}
[data-cb-ui] .is-modal.pluginsettings .is-modal-overlay {
  display: none !important;
}
[data-cb-ui] .is-modal.edittable {
  z-index: 10002;
  position: fixed;
  overflow: hidden;
  width: 250px;
  height: 410px;
  top: 50%;
  left: auto;
  right: 30%;
  margin-top: -205px;
  box-sizing: content-box;
  flex-direction: row;
  align-items: flex-start;
}
[data-cb-ui] .is-modal.edittable.active {
  display: flex;
}
[data-cb-ui] .is-modal.edittable > div:not(.is-draggable) {
  width: 100%;
  margin-top: 30px;
}
[data-cb-ui] .is-modal.edittable .is-modal-overlay {
  display: none !important;
}
[data-cb-ui] .is-modal.edittable button {
  height: 35px;
  outline-offset: -2px;
}
[data-cb-ui] .is-modal.edittable button.is-btn-color {
  width: 35px;
  height: 35px;
  padding: 0;
  background: var(--cb-field-bg);
  border: 1px solid var(--cb-line);
}
[data-cb-ui] .is-modal.editblock {
  z-index: 10002;
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: auto;
  top: calc(50vh - 275px);
  left: auto;
  right: 40px;
  box-sizing: content-box;
  flex-direction: row;
  align-items: flex-start;
}
[data-cb-ui] .is-modal.editblock.active {
  display: flex;
}
[data-cb-ui] .is-modal.editblock > div:not(.is-draggable) {
  width: 100%;
  margin-top: 30px;
  padding: 25px;
  box-sizing: border-box;
}
[data-cb-ui] .is-modal.editblock .is-modal-overlay {
  display: none !important;
}
[data-cb-ui] .is-modal.editblock button {
  width: auto;
  height: 35px;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  padding: 1px 20px;
  box-sizing: border-box;
  border: none;
  outline-offset: -2px;
}
[data-cb-ui] .is-modal.editblock button.is-btn-color {
  width: 35px;
  height: 35px;
  padding: 0;
  background: var(--cb-field-bg);
  border: 1px solid var(--cb-line);
}
[data-cb-ui] .is-modal.editblock button span {
  margin-left: 5px;
}
[data-cb-ui] .is-modal.editblock button svg {
  width: 12px;
  height: 12px;
  flex: none;
}
[data-cb-ui] .is-modal.editblock button.input-cell-bgimage {
  margin-right: 1px;
}
[data-cb-ui] .is-modal.editblock button.input-cell-bgimage svg {
  width: 14px;
  height: 14px;
}
[data-cb-ui] .is-modal.editblock .asset-page-preview,
[data-cb-ui] .is-modal.editblock .asset-block-preview {
  max-width: 120px;
  height: 100px;
}
[data-cb-ui] .is-modal.editblock .asset-page-preview img,
[data-cb-ui] .is-modal.editblock .asset-block-preview img {
  max-width: 100%;
  max-height: 100%;
}
[data-cb-ui] .is-modal.editblock .div-content-textcolor {
  display: flex;
}
[data-cb-ui] .is-modal.editblock .div-content-textcolor button {
  width: 40px;
  border: transparent 1px solid;
}
[data-cb-ui] .is-modal.editblock .div-content-textcolor button[data-textcolor=dark] {
  width: auto;
  background-color: #f7f7f7;
  color: #111;
}
[data-cb-ui] .is-modal.editblock .div-content-textcolor button[data-textcolor=light] {
  width: auto;
  background-color: #333;
  color: #f7f7f7;
}
[data-cb-ui] .is-modal.shortcuts div.is-modal-content {
  max-width: 600px;
  padding: 5px 25px 25px 25px;
}
[data-cb-ui] .is-modal.shortcuts table {
  width: 100%;
  margin: 30px 7px 0;
}
[data-cb-ui] .is-modal.shortcuts td {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: normal;
  padding: 7px 2px;
  line-height: 1.2;
}
[data-cb-ui] .is-modal.shortcuts td.shortcut-title {
  font-weight: 500;
  padding-top: 20px;
}
[data-cb-ui] .is-modal.pickcolor {
  background: rgba(255, 255, 255, 0);
}
[data-cb-ui] .is-modal.pickcolor .is-modal-overlay {
  background: rgba(255, 255, 255, 0);
}
[data-cb-ui] .is-modal.snippetwindow {
  z-index: 10002;
  position: fixed;
  overflow: hidden;
  width: 228px;
  height: 85vh;
  min-height: 560px;
  max-height: 968px;
  top: calc(50% - 42.5vh);
  left: auto;
  right: 40px;
  box-sizing: content-box;
  flex-direction: row;
  align-items: flex-start;
  border-radius: 10px;
  border: 1px solid var(--cb-line-3);
  box-shadow: var(--cb-shadow-2);
  background-color: var(--cb-modal-bg);
}
[data-cb-ui] .is-modal.snippetwindow.left {
  right: auto;
  left: 40px;
}
[data-cb-ui] .is-modal.snippetwindow #divSnippetWindow {
  height: 100%;
  position: absolute;
  top: 0;
  border-top: transparent 20px solid;
  box-sizing: border-box;
  margin-top: 0;
}
[data-cb-ui] .is-modal.snippetwindow .is-modal-overlay {
  display: none !important;
}
[data-cb-ui] .is-modal.snippetwindow .is-modal-bar {
  line-height: 30px;
  height: 20px;
  background-color: transparent;
  transition: none !important;
}
[data-cb-ui] .is-modal.snippetwindow .is-modal-bar .is-modal-close {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  top: 0px;
}
[data-cb-ui] .is-modal.snippetwindow.active {
  display: flex;
}
[data-cb-ui] .is-modal.snippetwindow > div:not(.is-draggable) {
  width: 100%;
  margin-top: 20px;
}
[data-cb-ui] .is-modal.snippetwindow #divSnippetHandle {
  display: none !important;
}
[data-cb-ui] .is-modal.buttoneditor {
  display: none;
  position: fixed;
  z-index: 10002;
  overflow: hidden;
  width: 380px;
  height: 600px;
  top: 50%;
  left: calc(50% - 190px);
  right: auto;
  margin-top: -300px;
  box-sizing: border-box;
  padding: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  background: var(--cb-surface);
  color: var(--cb-text);
  border: 1px solid var(--cb-line);
  border-radius: 11px;
  box-shadow: var(--cb-shadow-2);
}
[data-cb-ui] .is-modal.buttoneditor.active {
  display: flex;
}
[data-cb-ui] .is-modal.buttoneditor .is-modal-overlay {
  display: none !important;
}
[data-cb-ui] .is-modal.buttoneditor .is-modal-bar {
  background: transparent;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 36px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-panel {
  display: none;
  padding: 16px 20px 24px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-panel.on {
  display: block;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-field {
  margin-bottom: 18px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cb-text-2);
  margin: 0 0 7px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-row {
  display: flex;
  gap: 14px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-half {
  flex: 1 1 0;
  min-width: 0;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-sub {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 12px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-sub > span {
  display: block;
  font-size: 11px;
  color: var(--cb-text-2);
  margin-bottom: 5px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-seg button {
  min-width: 34px;
  height: 32px;
  padding: 0 11px;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--cb-text);
  background: var(--cb-btn-bg);
  border: 1px solid transparent;
  border-radius: var(--cb-btn-radius);
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  transition: background 0.12s ease;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-seg button:hover {
  background: var(--cb-btn-bg-hover);
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-seg button.on {
  background: var(--cb-btn-bg-active);
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-seg button:focus {
  outline: none;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-seg button:focus-visible {
  outline: 2px solid var(--cb-accent-line);
  outline-offset: -2px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-toggle button {
  min-width: 40px;
  font-size: 14px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-step {
  display: inline-flex;
  align-items: stretch;
  background: var(--cb-btn-bg);
  border-radius: var(--cb-btn-radius);
  overflow: hidden;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-step button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--cb-text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-step button:hover {
  background: var(--cb-btn-bg-hover);
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-step button:focus {
  outline: none;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-step button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cb-accent-line);
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-stepval {
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-swrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-swrow > span {
  font-size: 13px;
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-swrow-seg {
  justify-content: space-between;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-swrow-seg .buttoneditor-seg {
  margin-left: auto;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-colorstate {
  margin-bottom: 13px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-swatch {
  width: 34px;
  height: 34px;
  padding: 3px;
  box-sizing: border-box;
  flex: none;
  border: 1px solid var(--cb-line);
  border-radius: 8px;
  background: var(--cb-surface);
  cursor: pointer;
  box-shadow: none;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-swatch > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: transparent;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-swatch.is-empty > span {
  background-color: #fff;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-sub select {
  width: 100%;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--cb-text);
  cursor: pointer;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-check input {
  margin: 0;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-margins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-margins label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: var(--cb-text-2);
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-margins input {
  height: var(--cb-field-height);
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 13px;
  color: var(--cb-text);
  background: var(--cb-field-bg);
  border: var(--cb-field-border);
  border-radius: var(--cb-field-radius);
  outline: none;
  box-shadow: none;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-margins input:focus {
  outline: var(--cb-field-focus-outline);
  outline-offset: var(--cb-field-focus-offset);
  border-color: var(--cb-line);
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-savebtn {
  font-size: 12px;
  color: var(--cb-text);
  background: var(--cb-btn-bg);
  border: none;
  border-radius: var(--cb-btn-radius);
  padding: 8px 13px;
  cursor: pointer;
  box-shadow: none;
  margin-bottom: 16px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-savebtn:hover {
  background: var(--cb-btn-bg-hover);
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-gallery.is-container {
  padding: 0;
  margin: 0;
  width: auto;
  max-width: none !important;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-gallery a {
  position: relative;
  text-decoration: none;
  cursor: pointer;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-gallery a:focus {
  outline: none;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-gallery a:focus-visible {
  outline: 2px solid var(--cb-accent-line);
  outline-offset: 2px;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--cb-danger);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
[data-cb-ui] .is-modal.buttoneditor .buttoneditor-saved a:hover .buttoneditor-remove {
  display: flex;
}
[data-cb-ui] .is-modal.columnsettings .is-modal-content, [data-cb-ui] .is-modal.rowsettings .is-modal-content {
  width: 380px !important;
  min-height: 435px;
  padding: 0px !important;
}
[data-cb-ui] .is-modal.columnsettings.active, [data-cb-ui] .is-modal.rowsettings.active {
  display: flex;
}
[data-cb-ui] .is-modal.columnsettings > div:not(.is-draggable), [data-cb-ui] .is-modal.rowsettings > div:not(.is-draggable) {
  width: 100%;
  margin-top: 30px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content, [data-cb-ui] .is-modal.rowsettings .is-tab-content, [data-cb-ui] .is-modal.viewconfig .is-tab-content {
  flex-direction: column;
  align-items: stretch;
  padding: 16px 18px 20px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content button:not(.cb-colorbtn):not(.cb-gradientbtn), [data-cb-ui] .is-modal.rowsettings .is-tab-content button:not(.cb-colorbtn):not(.cb-gradientbtn), [data-cb-ui] .is-modal.viewconfig .is-tab-content button:not(.cb-colorbtn):not(.cb-gradientbtn) {
  font-size: 13px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  border: none;
  border-radius: var(--cb-field-radius);
  color: var(--cb-text-2);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-grouplabel, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-grouplabel, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-grouplabel {
  margin-bottom: 8px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .is-separator, [data-cb-ui] .is-modal.rowsettings .is-tab-content .is-separator, [data-cb-ui] .is-modal.viewconfig .is-tab-content .is-separator {
  margin: 4px 0 18px;
  height: 1px;
  background: var(--cb-line);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-readout, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-readout, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-readout {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--cb-text-2);
  font-family: var(--mono);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-readout.is-default, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-readout.is-default, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-readout.is-default {
  color: var(--cb-text-3);
  font-family: inherit;
  font-weight: 400;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-hint, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-hint, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--cb-text-3);
  margin: 8px 0 0;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-hint svg, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-hint svg, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-hint svg {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-seg, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-seg, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--cb-field-bg);
  border-radius: 8px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-seg .cb-cs-seg-btn, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-seg .cb-cs-seg-btn, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-seg .cb-cs-seg-btn {
  flex: 1;
  height: 30px;
  border-radius: 6px;
  color: var(--cb-text-2);
  background: transparent;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-seg .cb-cs-seg-btn:hover, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-seg .cb-cs-seg-btn:hover, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-seg .cb-cs-seg-btn:hover {
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-seg .cb-cs-seg-btn.on, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-seg .cb-cs-seg-btn.on, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-seg .cb-cs-seg-btn.on {
  background: var(--cb-surface);
  color: var(--cb-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cell-bgimage-preview, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cell-bgimage-preview, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cell-bgimage-preview {
  max-width: 120px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cell-bgimage-preview img, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cell-bgimage-preview img, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cell-bgimage-preview img {
  max-width: 100%;
  border-radius: var(--cb-field-radius);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow {
  display: flex;
  gap: 6px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow .input-cell-bgimage, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow .input-cell-bgimage, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow .input-cell-bgimage {
  flex: 1;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow button, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow button, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow button {
  height: 34px;
  background: var(--cb-field-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow button:hover, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow button:hover, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow button:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow button svg, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow button svg, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow button svg {
  width: 14px;
  height: 14px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow .input-select, [data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow .input-cell-bgremove, [data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow .input-cell-bgimageadjust,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow .input-row-bgremove, [data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-imagerow .input-row-bgimageadjust, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow .input-select, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow .input-cell-bgremove, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow .input-cell-bgimageadjust,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow .input-row-bgremove, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-imagerow .input-row-bgimageadjust, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow .input-select, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow .input-cell-bgremove, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow .input-cell-bgimageadjust,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow .input-row-bgremove, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-imagerow .input-row-bgimageadjust {
  width: 40px;
  flex: none;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-devrow, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-devrow, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-devrow {
  display: flex;
  gap: 6px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-devrow .input-device, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-devrow .input-device, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-devrow .input-device {
  flex: 1;
  height: 38px;
  border-radius: 7px;
  background: var(--cb-field-bg);
  color: var(--cb-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-devrow .input-device:hover, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-devrow .input-device:hover, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-devrow .input-device:hover {
  color: var(--cb-text-2);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-devrow .input-device.on, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-devrow .input-device.on, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-devrow .input-device.on {
  background: var(--cb-fill-active);
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-devrow .input-device svg, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-devrow .input-device svg, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-devrow .input-device svg {
  width: 17px;
  height: 17px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-axis .input-cell-padding-pos,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chipset .input-cell-padding,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-presets .input-cell-height,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-colsperline .input-colsperline,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-pos-clear, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-axis .input-cell-padding-pos,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-chipset .input-cell-padding,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-presets .input-cell-height,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-colsperline .input-colsperline,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-pos-clear, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-axis .input-cell-padding-pos,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-chipset .input-cell-padding,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-presets .input-cell-height,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-colsperline .input-colsperline,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-pos-clear {
  background: var(--cb-fill);
  color: var(--cb-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-axis .input-cell-padding-pos:hover,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chipset .input-cell-padding:hover,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-presets .input-cell-height:hover,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-colsperline .input-colsperline:hover,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-pos-clear:hover, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-axis .input-cell-padding-pos:hover,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-chipset .input-cell-padding:hover,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-presets .input-cell-height:hover,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-colsperline .input-colsperline:hover,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-pos-clear:hover, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-axis .input-cell-padding-pos:hover,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-chipset .input-cell-padding:hover,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-presets .input-cell-height:hover,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-colsperline .input-colsperline:hover,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-pos-clear:hover {
  background: var(--cb-fill-hover);
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-axis .input-cell-padding-pos.on,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chipset .input-cell-padding.on,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-presets .input-cell-height.on,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-colsperline .input-colsperline.on,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-pos-clear.on, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-axis .input-cell-padding-pos.on,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-chipset .input-cell-padding.on,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-presets .input-cell-height.on,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-colsperline .input-colsperline.on,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-pos-clear.on, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-axis .input-cell-padding-pos.on,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-chipset .input-cell-padding.on,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-presets .input-cell-height.on,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-colsperline .input-colsperline.on,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-pos-clear.on {
  background: var(--cb-fill-active);
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-axis .input-cell-padding-pos svg,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chipset .input-cell-padding svg,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-presets .input-cell-height svg,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-colsperline .input-colsperline svg,
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-pos-clear svg, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-axis .input-cell-padding-pos svg,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-chipset .input-cell-padding svg,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-presets .input-cell-height svg,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-colsperline .input-colsperline svg,
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-pos-clear svg, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-axis .input-cell-padding-pos svg,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-chipset .input-cell-padding svg,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-presets .input-cell-height svg,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-colsperline .input-colsperline svg,
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-pos-clear svg {
  width: 16px;
  height: 16px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chip-clear, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-chip-clear, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-chip-clear {
  color: var(--cb-text-3);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .image-src, [data-cb-ui] .is-modal.rowsettings .is-tab-content .image-src, [data-cb-ui] .is-modal.viewconfig .is-tab-content .image-src {
  display: flex;
  gap: 6px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mono, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-mono, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-mono {
  font-family: var(--mono);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chips {
  display: flex;
  gap: 8px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chips .input-cell-textcolor {
  flex: 1;
  height: 46px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1.5px var(--cb-line);
  background: var(--cb-field-bg);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chips .input-cell-textcolor span {
  font-size: 11px;
  font-weight: 600;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chips .input-cell-textcolor[data-command=dark] {
  background: #f3f4f6;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chips .input-cell-textcolor[data-command=dark] span {
  color: #111;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chips .input-cell-textcolor[data-command=light] {
  background: #3a3f47;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chips .input-cell-textcolor[data-command=light] span {
  color: #fff;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chips .input-cell-textcolor[data-command=""] span {
  color: var(--cb-text-2);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chips .input-cell-textcolor.on {
  box-shadow: inset 0 0 0 1.5px var(--cb-line-4), 0 0 0 2px var(--cb-fill-active);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-sidepad {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad {
  flex: none;
  width: 84px;
  height: 84px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  background: var(--cb-surface-2);
  border: 1px solid var(--cb-line-4);
  border-radius: 8px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 4px;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos span {
  display: block;
  background: var(--cb-text-4);
  border-radius: 1px;
  margin: 0;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos[data-command=top] {
  grid-area: 1/2/2/3;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos[data-command=left] {
  grid-area: 2/1/3/2;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos[data-command=right] {
  grid-area: 2/3/3/4;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos[data-command=bottom] {
  grid-area: 3/2/4/3;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos[data-command=top] span, [data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos[data-command=bottom] span {
  width: 14px;
  height: 3px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos[data-command=left] span, [data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos[data-command=right] span {
  width: 3px;
  height: 14px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos:hover span {
  background: var(--cb-text-2);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos.on {
  background: var(--cb-accent-fill);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .input-cell-padding-pos.on span {
  background: var(--cb-accent);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-mpad .cb-cs-mpad-mid {
  grid-area: 2/2/3/3;
  background: var(--cb-fill);
  border-radius: 3px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-axis {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-axis .input-cell-padding-pos {
  min-width: 52px;
  height: 26px;
  padding: 0 12px;
  font-size: 11.5px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chipset .input-cell-padding {
  width: 36px;
  height: 32px;
  font-size: 11.7px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-heightrow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-stepper {
  display: flex;
  background: var(--cb-field-bg);
  border-radius: var(--cb-field-radius);
  overflow: hidden;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-stepper .input-cell-height {
  width: 34px;
  height: 32px;
  background: transparent;
  color: var(--cb-text-2);
  font-size: 16px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-stepper .input-cell-height:hover {
  background: var(--cb-fill-active);
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-presets .input-cell-height {
  min-width: 42px;
  height: 32px;
  padding: 0 8px;
  font-size: 12.5px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-padwrap {
  display: flex;
  gap: 14px;
  align-items: center;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 108px;
  height: 108px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 1px solid var(--cb-line-4);
  border-radius: 8px;
  background: var(--cb-surface-2);
  overflow: hidden;
  padding: 0;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad:focus-visible {
  outline: 2px solid var(--cb-accent-line);
  outline-offset: 2px;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad .cmd-content-pos {
  width: 36px;
  height: 36px;
  position: relative;
  z-index: 1;
  background: transparent;
  border-radius: 0;
  border-right: 1px solid var(--cb-line);
  border-bottom: 1px solid var(--cb-line);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad .cmd-content-pos:hover {
  background: var(--cb-fill);
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad .cmd-content-pos:nth-of-type(3n+3) {
  border-right: 0;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad .cmd-content-pos:nth-last-of-type(-n+3) {
  border-bottom: 0;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad .cbpad-fill {
  position: absolute;
  z-index: 0;
  width: 33.333%;
  height: 33.333%;
  left: 0;
  top: 0;
  opacity: 0;
  background: var(--cb-accent-fill);
  pointer-events: none;
  transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), top 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad .cbpad-marker {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 15px;
  opacity: 0;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.5px;
  pointer-events: none;
  transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), top 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad .cbpad-marker i {
  display: block;
  height: 3.5px;
  border-radius: 2px;
  background: var(--cb-accent);
  flex: none;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad .cbpad-marker i:nth-child(1) {
  width: 100%;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .div-content-position.cb-cs-pad .cbpad-marker i:nth-child(2) {
  width: 60%;
}
[data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-pos-clear {
  height: 30px;
  padding: 0 14px;
  font-size: 12px;
}
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-colsperline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-colsperline .input-colsperline {
  height: 32px;
  min-width: 36px;
  padding: 0 8px;
  font-size: 12.5px;
}
[data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-colsperline .input-colsperline.cb-cs-colsperline-default {
  min-width: 0;
  padding: 0 14px;
}
[data-cb-ui] .is-modal.viewconfig div.is-modal-content {
  width: 540px;
  max-width: 94vw;
  min-height: 0;
  padding: 0 !important;
}
[data-cb-ui] .is-modal.viewconfig .cb-actions {
  padding: 13px 18px 16px;
  border-top: 1px solid var(--cb-line);
  margin: 0;
}
[data-cb-ui] .is-modal.viewconfig .is-tab-content {
  min-height: 236px;
}
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-pref-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-pref-grouphead {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cb-text-3);
  margin: 2px 0 12px;
}
[data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-pref-sep {
  height: 1px;
  background: var(--cb-line);
  margin: 18px 0;
}
[data-cb-ui] .is-modal.viewconfig .is-tab-content .div-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
}
[data-cb-ui] .is-modal.viewconfig .is-tab-content button.input-setcolor {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0;
}
[data-cb-ui] .is-modal.viewconfig .is-tab-content button.input-setcolor.on {
  outline: 2px solid var(--cb-accent);
  outline-offset: 1px;
}
[data-cb-ui] .is-modal.imagesource .is-modal-content, [data-cb-ui] .is-modal.mediasource .is-modal-content {
  padding: 20px;
}
[data-cb-ui] .is-modal.imagesource .image-src, [data-cb-ui] .is-modal.mediasource .image-src {
  display: flex;
}
[data-cb-ui] .is-modal.imagesource .image-src > button, [data-cb-ui] .is-modal.mediasource .image-src > button {
  width: 50px;
  height: var(--cb-field-height);
}
[data-cb-ui] .is-modal.imagesource .input-select, [data-cb-ui] .is-modal.mediasource .input-select {
  width: 50px;
  height: var(--cb-field-height);
  flex: none;
}
[data-cb-ui] .is-modal.imagesource .input-upload, [data-cb-ui] .is-modal.mediasource .input-upload {
  width: 50px;
  height: var(--cb-field-height);
}
[data-cb-ui] .is-modal.pickfontfamily div.is-modal-content {
  max-width: 303px;
  padding: 0;
}
[data-cb-ui] .is-modal.editstyles {
  display: none;
  position: fixed;
  top: 100px;
  right: 320px;
  left: auto;
  width: 225px;
  height: 355px;
  z-index: 10005;
  box-sizing: border-box;
  flex-direction: column;
}
[data-cb-ui] .is-modal.editstyles.active {
  display: flex;
}
[data-cb-ui] .is-modal.editstyles .is-modal-bar.is-draggable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background: none;
  cursor: move;
  z-index: 1;
}
[data-cb-ui] .is-modal.editstyles .is-modal-close {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
}
[data-cb-ui] .is-modal.editstyles .editstyles-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cb-field-gap);
  padding: 22px 14px 14px;
  box-sizing: border-box;
}
[data-cb-ui] .is-modal.editstyles .cb-field {
  margin: 0;
}
[data-cb-ui] .is-modal.editstyles .cb-field-grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .is-modal.editstyles textarea, [data-cb-ui] .is-modal.editstyles input[type=text] {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0;
}
[data-cb-ui] .is-modal.editstyles textarea {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
}
[data-cb-ui] .is-modal.pickcolor div.is-modal-content {
  max-width: 271px;
  padding: 12px 12px;
}
[data-cb-ui] .is-modal.pickcolor .is-modal-bar {
  height: 11px;
}
[data-cb-ui] .is-modal.pickcolormore div.is-modal-content {
  max-width: 340px;
}
[data-cb-ui] .is-modal.pickcolormore .is-modal-bar {
  height: 11px;
}
[data-cb-ui] .is-modal.insertimage label {
  font-size: 14px;
}
[data-cb-ui] .is-modal.insertimage .is-drop-area {
  border: 2px dashed var(--cb-line-4);
  position: relative;
}
[data-cb-ui] .is-modal.insertimage .is-drop-area:hover {
  background-color: var(--cb-fill-hover);
}
[data-cb-ui] .is-modal.insertimage .is-drop-area:focus-within {
  border-color: var(--focus-outline-color);
}
[data-cb-ui] .is-modal.insertimage .is-drop-area.image-dropping {
  background-color: var(--cb-fill-hover);
}
[data-cb-ui] .is-modal.insertimage .is-drop-area #fileInsertImage {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}
[data-cb-ui] .is-modal.insertimage .is-drop-area .drag-text p {
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 60px 0;
}
[data-cb-ui] .is-modal.insertimage .is-preview-area {
  display: none;
  text-align: center;
}
[data-cb-ui] .is-modal.insertimage .is-preview-area div {
  position: relative;
  display: inline-block;
  margin: 10px;
}
[data-cb-ui] .is-modal.insertimage .is-preview-area div button {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background: var(--cb-surface);
  color: var(--cb-text);
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  font-size: 27px;
  box-sizing: border-box;
  padding-left: 1px;
  cursor: pointer;
}
[data-cb-ui] .is-modal.insertimage .is-preview-area #imgInsertImagePreview {
  max-height: 200px;
  max-width: 200px;
}
[data-cb-ui] .is-modal.insertimage .image-src {
  display: flex;
}
[data-cb-ui] .is-modal.insertimage .image-src > button {
  width: 50px;
  height: var(--cb-field-height);
}
[data-cb-ui] .is-modal.imageedit div.is-modal-content {
  width: auto;
  padding-top: 7px;
}
[data-cb-ui] .is-modal.imageedit .imageedit-crop button {
  margin: 0 20px 0 0;
  border: 1px solid var(--cb-line-4);
  background-color: transparent !important;
}
[data-cb-ui] .is-modal.imagelink div.is-modal-content {
  max-width: 460px;
}
[data-cb-ui] .is-modal.imagelink .image-src {
  display: flex;
}
[data-cb-ui] .is-modal.imagelink .image-src button {
  width: 50px;
  height: var(--cb-field-height);
}
[data-cb-ui] .is-modal.imagelink .image-src .image-larger1 {
  width: 50px;
  height: var(--cb-field-height);
}
[data-cb-ui] .is-modal.imagelink .image-link {
  display: flex;
}
[data-cb-ui] .is-modal.imagelink .image-link button {
  width: 50px;
  height: var(--cb-field-height);
}
[data-cb-ui] .is-modal.imagelink .image-link .image-larger2 {
  width: 50px;
  height: var(--cb-field-height);
}
[data-cb-ui] .is-modal.iframelink div.is-modal-content {
  max-width: 550px;
}
[data-cb-ui] .is-modal.videolink div.is-modal-content {
  max-width: 550px;
}
[data-cb-ui] .is-modal.videolink .video-url {
  position: relative;
  height: var(--cb-field-height);
  display: flex;
  flex-direction: row;
}
[data-cb-ui] .is-modal.videolink .video-url .inpVideoLinkSource {
  width: 100%;
}
[data-cb-ui] .is-modal.videolink .input-select {
  width: 50px;
  height: var(--cb-field-height);
  font-size: 20px;
  height: var(--cb-field-height);
  width: 50px;
  border-left: none;
  flex: none;
}
[data-cb-ui] .is-modal.videolink .input-upload {
  width: 50px;
  height: var(--cb-field-height);
}
[data-cb-ui] .is-modal.svgsettings div.is-modal-content {
  max-width: 550px;
}
[data-cb-ui] .is-modal.svgsettings div.is-modal-content #inpSvgCode {
  width: 100%;
  height: 300px;
  line-height: 1.4;
  font-size: 16px;
  font-family: var(--mono);
  resize: none;
}
[data-cb-ui] .is-modal.audiolink div.is-modal-content {
  max-width: 550px;
}
[data-cb-ui] .is-modal.audiolink .audio-url {
  position: relative;
  height: var(--cb-field-height);
  display: flex;
  flex-direction: row;
}
[data-cb-ui] .is-modal.audiolink .audio-url .inpAudioLinkSource {
  width: 100%;
}
[data-cb-ui] .is-modal.audiolink .input-select {
  width: 50px;
  height: var(--cb-field-height);
  font-size: 20px;
  height: var(--cb-field-height);
  width: 50px;
  border-left: none;
  flex: none;
}
[data-cb-ui] .is-modal.audiolink .input-upload {
  width: 50px;
  height: var(--cb-field-height);
}
[data-cb-ui] .is-modal.createlink div.is-modal-content {
  max-width: 460px;
}
[data-cb-ui] .is-modal.createlink .link-src {
  position: relative;
  height: var(--cb-field-height);
  display: flex;
  flex-direction: row;
}
[data-cb-ui] .is-modal.createlink .link-src .input-url {
  width: 100%;
}
[data-cb-ui] .is-modal.createlink .input-select {
  width: 60px;
  font-size: 20px;
  height: var(--cb-field-height);
  width: 50px;
  border-left: none;
  flex: none;
}
[data-cb-ui] .is-modal.viewconfig .div-themes {
  display: flex;
  flex-flow: wrap;
  width: 198px;
  box-sizing: content-box;
}
[data-cb-ui] .is-modal.viewconfig button.input-setcolor {
  width: 27px;
  height: 21px;
  border: transparent 2px solid;
  border-radius: 0px;
}
[data-cb-ui] .is-modal.viewconfig button.input-setcolor:focus {
  outline-offset: -2px;
}
[data-cb-ui] .is-modal .div-anyfile-upload,
[data-cb-ui] .is-modal [class^=image-larger] {
  flex: none;
}
[data-cb-ui] .is-tool#divImageTool, [data-cb-ui] .is-tool.is-video-tool, [data-cb-ui] .is-tool.is-audio-tool, [data-cb-ui] .is-tool.is-plugin-tool, [data-cb-ui] .is-tool.is-iframe-tool {
  background: var(--cb-tool-surface) !important;
  border: transparent 1px solid;
  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}
[data-cb-ui] .is-tool#divImageTool > div, [data-cb-ui] .is-tool#divImageTool > button, [data-cb-ui] .is-tool.is-video-tool > div, [data-cb-ui] .is-tool.is-video-tool > button, [data-cb-ui] .is-tool.is-audio-tool > div, [data-cb-ui] .is-tool.is-audio-tool > button, [data-cb-ui] .is-tool.is-plugin-tool > div, [data-cb-ui] .is-tool.is-plugin-tool > button, [data-cb-ui] .is-tool.is-iframe-tool > div, [data-cb-ui] .is-tool.is-iframe-tool > button {
  width: 35px;
  height: 35px;
  background: transparent;
}
[data-cb-ui] .is-tool#divImageTool svg, [data-cb-ui] .is-tool.is-video-tool svg, [data-cb-ui] .is-tool.is-audio-tool svg, [data-cb-ui] .is-tool.is-plugin-tool svg, [data-cb-ui] .is-tool.is-iframe-tool svg {
  width: 17px;
  height: 17px;
  fill: var(--cb-tool-icon) !important;
  color: var(--cb-tool-icon) !important;
}
[data-cb-ui] .is-tool.is-video-tool > button, [data-cb-ui] .is-tool.is-audio-tool > button, [data-cb-ui] .is-tool.is-plugin-tool > button, [data-cb-ui] .is-tool.is-iframe-tool > button {
  width: 35px !important;
  height: 35px !important;
}
[data-cb-ui] .is-tool#divImageResizer {
  background: rgba(0, 0, 0, 0.01);
  width: 1px;
  height: 1px;
  z-index: 10;
  touch-action: none;
}
[data-cb-ui] .is-tool#divImageResizerOverlay {
  background: rgba(0, 0, 0, 0.01);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9;
  display: none;
}
[data-cb-ui] .is-tool.is-spacer-tool {
  border: none;
  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  overflow: hidden;
}
[data-cb-ui] .is-tool.is-spacer-tool > button {
  width: 40px;
  height: 35px;
  background: var(--cb-tool-surface) !important;
}
[data-cb-ui] .is-tool.is-spacer-tool > button svg {
  fill: var(--cb-tool-icon) !important;
  color: var(--cb-tool-icon) !important;
}
[data-cb-ui] .is-tool.is-table-tool {
  border: none;
  background: none;
  border-radius: 20px;
  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
}
[data-cb-ui] .is-tool.is-table-tool:hover {
  z-index: 10001 !important;
}
[data-cb-ui] .is-tool.is-table-tool > button {
  width: 35px;
  height: 35px;
  background: var(--cb-tool-surface) !important;
}
[data-cb-ui] .is-tool.is-table-tool > button svg {
  width: 17px !important;
  height: 17px !important;
  fill: var(--cb-tool-icon) !important;
  color: var(--cb-tool-icon) !important;
}
[data-cb-ui] .is-tool.is-code-tool, [data-cb-ui] .is-tool.is-module-tool, [data-cb-ui] .is-tool.is-svg-tool {
  border: none;
  background: none;
  border-radius: 20px;
  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
[data-cb-ui] .is-tool.is-code-tool > button, [data-cb-ui] .is-tool.is-module-tool > button, [data-cb-ui] .is-tool.is-svg-tool > button {
  width: 35px;
  height: 35px;
  background: var(--cb-tool-surface) !important;
}
[data-cb-ui] .is-tool.is-code-tool > button svg, [data-cb-ui] .is-tool.is-module-tool > button svg, [data-cb-ui] .is-tool.is-svg-tool > button svg {
  width: 17px !important;
  height: 17px !important;
  fill: var(--cb-tool-icon) !important;
  color: var(--cb-tool-icon) !important;
}
[data-cb-ui] .is-tool#divLinkTool, [data-cb-ui] .is-tool#divButtonTool {
  background: var(--cb-tool-surface) !important;
  box-shadow: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
  margin-top: -10px;
  margin-left: 7px;
}
[data-cb-ui] .is-tool#divLinkTool button, [data-cb-ui] .is-tool#divButtonTool button {
  width: 37px;
  height: 37px;
  background: transparent !important;
}
[data-cb-ui] .is-tool#divLinkTool button svg, [data-cb-ui] .is-tool#divButtonTool button svg {
  fill: var(--cb-tool-icon) !important;
  color: var(--cb-tool-icon) !important;
}
[data-cb-ui] #divImageResizer {
  z-index: -1;
}
[data-cb-ui] .dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  display: inline-block;
  margin: 25px 2px 0;
  -webkit-animation: jump 1.5s linear infinite;
}
@-webkit-keyframes jump {
  0%, 100% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-10px);
  }
  40% {
    transform: translateY(0px);
  }
}
[data-cb-ui] .dot:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
}
[data-cb-ui] .dot:nth-of-type(3) {
  -webkit-animation-delay: 0.4s;
}
[data-cb-ui] #divImageProgress {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.15);
  transition: none;
}
[data-cb-ui] #divImageProgress > div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
[data-cb-ui] #divImageProgress .dot {
  background-color: var(--cb-tool-oncolor);
  margin: 10px 2px 0;
}
[data-cb-ui] .is-side {
  display: block;
  position: fixed;
  top: 0;
  right: -367px;
  left: auto;
  width: 365px;
  height: 100%;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 16px 0px;
  box-sizing: border-box;
  background: var(--cb-surface);
  transition: all ease 0.3s;
  font-family: var(--sans);
  font-size: 13px;
  z-index: 10003;
  outline: none;
}
[data-cb-ui] .is-side button {
  background: var(--cb-fill);
  color: var(--cb-text-2);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .is-side button:hover {
  background: var(--cb-fill-hover);
  color: var(--cb-text);
}
[data-cb-ui] .is-side button.on {
  background: var(--cb-fill-active);
  color: var(--cb-text);
}
[data-cb-ui] .is-side.active {
  right: 0;
}
[data-cb-ui] .is-side.fromleft {
  left: -367px;
  right: auto;
  border: none;
  border-right: 1px solid var(--cb-line-3);
}
[data-cb-ui] .is-side.fromleft.active {
  left: 0;
}
[data-cb-ui] .is-side > div {
  width: 100%;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
[data-cb-ui] button,
[data-cb-ui] .is-btn {
  color: var(--cb-text);
  background: var(--cb-fill);
  width: auto;
  height: var(--cb-field-height);
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  opacity: 1;
  line-height: 1;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-transform: none;
  text-align: center;
  position: relative;
  border-radius: 6px;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] button:hover,
[data-cb-ui] .is-btn:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] button:focus,
[data-cb-ui] .is-btn:focus {
  outline-offset: 0;
}
[data-cb-ui] button.fullwidth,
[data-cb-ui] .is-btn.fullwidth {
  width: 100%;
}
[data-cb-ui] button.classic,
[data-cb-ui] .is-btn.classic {
  width: 100%;
  height: var(--cb-btn-height);
  display: block;
  background: transparent;
  box-shadow: var(--cb-shadow-3);
}
[data-cb-ui] button.classic:hover,
[data-cb-ui] .is-btn.classic:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] button.classic-primary, [data-cb-ui] button.classic-secondary,
[data-cb-ui] .is-btn.classic-primary,
[data-cb-ui] .is-btn.classic-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 88px;
  height: var(--cb-btn-height);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  border: none;
  border-radius: var(--cb-btn-radius);
  box-shadow: none;
}
[data-cb-ui] button.classic-primary,
[data-cb-ui] .is-btn.classic-primary {
  background: var(--cb-btn-bg);
  color: var(--cb-text-2);
}
[data-cb-ui] button.classic-primary:hover,
[data-cb-ui] .is-btn.classic-primary:hover {
  background: var(--cb-btn-bg-hover);
}
[data-cb-ui] button.classic-secondary,
[data-cb-ui] .is-btn.classic-secondary {
  background: transparent;
  color: var(--cb-text-2);
}
[data-cb-ui] button.classic-secondary:hover,
[data-cb-ui] .is-btn.classic-secondary:hover {
  background: transparent;
  color: color-mix(in srgb, var(--cb-text-2), var(--cb-text) 30%);
}
[data-cb-ui] textarea:not(.monaco-mouse-cursor-text) {
  font-family: courier;
  font-size: 15px;
  line-height: 2;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid var(--cb-line);
  background-color: var(--cb-field-bg);
  color: var(--cb-text);
  border-radius: 6px;
}
[data-cb-ui] textarea:not(.monaco-mouse-cursor-text):focus {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: 0;
  box-shadow: none;
}
[data-cb-ui] .find-part .monaco-inputbox textarea,
[data-cb-ui] .replace-part .monaco-inputbox textarea {
  padding: 0 !important;
  line-height: 1.4 !important;
}
[data-cb-ui] select {
  font-size: var(--cb-field-font-size);
  letter-spacing: var(--cb-field-tracking);
  height: var(--cb-field-height);
  line-height: 1.7;
  color: var(--cb-text);
  border-radius: var(--cb-field-radius);
  border: var(--cb-field-border);
  background-color: var(--cb-field-bg);
  width: auto;
  display: inline-block;
  background-image: none;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
  padding: 0 5px;
}
[data-cb-ui] select option {
  background: var(--cb-surface);
}
[data-cb-ui] select:focus {
  outline: var(--cb-field-focus-outline);
  outline-offset: var(--cb-field-focus-offset);
  box-shadow: none;
}
[data-cb-ui] input[type=text],
[data-cb-ui] input[type=number],
[data-cb-ui] input[type=email],
[data-cb-ui] input[type=url],
[data-cb-ui] input[type=tel],
[data-cb-ui] input[type=search],
[data-cb-ui] input[type=password],
[data-cb-ui] input[type=date],
[data-cb-ui] input[type=time],
[data-cb-ui] input[type=datetime-local],
[data-cb-ui] input[type=month],
[data-cb-ui] input[type=week] {
  width: 100%;
  height: var(--cb-field-height);
  box-sizing: border-box;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--cb-field-font-size);
  letter-spacing: var(--cb-field-tracking);
  padding: 0;
  padding-left: 8px;
  color: var(--cb-text);
  display: inline-block;
  border: var(--cb-field-border);
  border-bottom: var(--cb-field-border);
  border-radius: var(--cb-field-radius);
  background-color: var(--cb-field-bg);
}
[data-cb-ui] input[type=text]:focus,
[data-cb-ui] input[type=number]:focus,
[data-cb-ui] input[type=email]:focus,
[data-cb-ui] input[type=url]:focus,
[data-cb-ui] input[type=tel]:focus,
[data-cb-ui] input[type=search]:focus,
[data-cb-ui] input[type=password]:focus,
[data-cb-ui] input[type=date]:focus,
[data-cb-ui] input[type=time]:focus,
[data-cb-ui] input[type=datetime-local]:focus,
[data-cb-ui] input[type=month]:focus,
[data-cb-ui] input[type=week]:focus {
  outline: var(--cb-field-focus-outline);
  outline-offset: var(--cb-field-focus-offset);
  box-shadow: none;
}
[data-cb-ui] input[type=text] [type=checkbox], [data-cb-ui] input[type=text] [type=radio],
[data-cb-ui] input[type=number] [type=checkbox],
[data-cb-ui] input[type=number] [type=radio],
[data-cb-ui] input[type=email] [type=checkbox],
[data-cb-ui] input[type=email] [type=radio],
[data-cb-ui] input[type=url] [type=checkbox],
[data-cb-ui] input[type=url] [type=radio],
[data-cb-ui] input[type=tel] [type=checkbox],
[data-cb-ui] input[type=tel] [type=radio],
[data-cb-ui] input[type=search] [type=checkbox],
[data-cb-ui] input[type=search] [type=radio],
[data-cb-ui] input[type=password] [type=checkbox],
[data-cb-ui] input[type=password] [type=radio],
[data-cb-ui] input[type=date] [type=checkbox],
[data-cb-ui] input[type=date] [type=radio],
[data-cb-ui] input[type=time] [type=checkbox],
[data-cb-ui] input[type=time] [type=radio],
[data-cb-ui] input[type=datetime-local] [type=checkbox],
[data-cb-ui] input[type=datetime-local] [type=radio],
[data-cb-ui] input[type=month] [type=checkbox],
[data-cb-ui] input[type=month] [type=radio],
[data-cb-ui] input[type=week] [type=checkbox],
[data-cb-ui] input[type=week] [type=radio] {
  position: relative;
  opacity: 1;
  margin-top: 0;
  margin-bottom: 0;
}
[data-cb-ui] input[type=checkbox],
[data-cb-ui] input[type=radio] {
  accent-color: var(--cb-control-accent);
}
[data-cb-ui] input[type=radio]:focus {
  outline: var(--focus-outline-color) 1px solid;
}
[data-cb-ui] label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.4;
  color: var(--cb-label-color);
  margin: 0 0 var(--cb-label-gap);
  padding: 0;
}
[data-cb-ui] label.label-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--cb-label-color);
  margin-bottom: 0;
  cursor: pointer;
}
[data-cb-ui] label.label-checkbox input {
  margin: 0;
  flex: none;
  width: 15px;
  height: 15px;
}
[data-cb-ui] .cb-grouplabel {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.4;
  color: var(--cb-label-color);
  margin: 0 0 var(--cb-label-gap);
}
[data-cb-ui] .cb-field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--cb-field-gap);
}
[data-cb-ui] .cb-field > label {
  margin: 0 0 var(--cb-label-gap);
}
[data-cb-ui] .cb-field > .label-checkbox {
  margin: 0;
}
[data-cb-ui] .cb-field > .label-checkbox + .label-checkbox {
  margin-top: 8px;
}
[data-cb-ui] label.cb-field {
  align-items: flex-start;
  gap: var(--cb-label-gap);
}
[data-cb-ui] .cb-form > .label-checkbox {
  margin-bottom: var(--cb-field-gap);
}
[data-cb-ui] .cb-row {
  display: flex;
  gap: var(--cb-row-gap);
  align-items: flex-end;
  margin-bottom: var(--cb-field-gap);
}
[data-cb-ui] .cb-row > .cb-field {
  margin-bottom: 0;
}
[data-cb-ui] .cb-row > .cb-grow {
  flex: 1 1 0;
  min-width: 0;
}
[data-cb-ui] .cb-form > :last-child,
[data-cb-ui] .cb-field:last-child {
  margin-bottom: 0;
}
[data-cb-ui] .cb-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: var(--cb-field-gap);
}
[data-cb-ui] .is-rangeslider {
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  background: var(--cb-slider-track);
  outline: none;
  border: none !important;
  opacity: 1;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin: 2px !important;
  border-radius: 3px !important;
}
[data-cb-ui] .is-rangeslider:hover {
  opacity: 1;
}
[data-cb-ui] .is-rangeslider:focus {
  outline: var(--cb-field-focus-color) 2px solid;
  outline-offset: 2px;
}
[data-cb-ui] .is-rangeslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px !important;
  height: 24px !important;
  border-radius: 3px !important;
  background: var(--cb-slider-thumb);
  cursor: pointer;
  margin: 0 !important;
}
[data-cb-ui] .is-rangeslider::-moz-range-thumb {
  width: 25px !important;
  height: 24px !important;
  border-radius: 3px !important;
  background: var(--cb-slider-thumb);
  cursor: pointer;
  margin: 0 !important;
}
[data-cb-ui] .is-rangeslider::-webkit-slider-runnable-track {
  height: auto !important;
  background: none !important;
  border: none !important;
}
[data-cb-ui] .rangeSlider, [data-cb-ui] .rangeSlider__fill {
  display: block;
}
[data-cb-ui] .rangeSlider {
  position: relative;
  background-color: transparent;
  outline: 1px solid var(--cb-line);
}
[data-cb-ui] .rangeSlider__horizontal {
  height: 24px;
  width: 100%;
}
[data-cb-ui] .rangeSlider__vertical {
  height: 100%;
  width: 20px;
}
[data-cb-ui] .rangeSlider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}
[data-cb-ui] .rangeSlider__fill {
  background-color: transparent;
  position: absolute;
}
[data-cb-ui] .rangeSlider__fill__horizontal {
  height: 100%;
  top: 0;
  left: 0;
}
[data-cb-ui] .rangeSlider__fill__vertical {
  width: 100%;
  bottom: 0;
  left: 0;
}
[data-cb-ui] .rangeSlider__handle {
  cursor: pointer;
  display: inline-block;
  width: 25px;
  height: 24px;
  position: absolute;
  border: 1px solid transparent;
  background: rgba(15, 86, 222, 0.8) linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.04));
  z-index: 1;
}
[data-cb-ui] .rangeSlider__handle__horizontal {
  top: -1px;
}
[data-cb-ui] .rangeSlider__handle__vertical {
  left: -10px;
  bottom: 0;
}
[data-cb-ui] .rangeSlider__handle:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}
[data-cb-ui] input[type=range]:focus + .rangeSlider .rangeSlider__handle {
  box-shadow: 0 0 8px rgba(142, 68, 173, 0.9);
}
[data-cb-ui] .rangeSlider__buffer {
  position: absolute;
  top: 3px;
  height: 14px;
  border-radius: 10px;
}
[data-cb-ui] .dot-1 {
  background: var(--cb-fill-hover);
  width: 7px;
  height: 8px;
}
[data-cb-ui] .dot-2 {
  background: var(--cb-surface);
  width: 7px;
  height: 8px;
}
[data-cb-ui] .dot-3 {
  background: var(--cb-fill-hover);
  width: 7px;
  height: 7px;
}
[data-cb-ui] .dot-4 {
  background: var(--cb-surface);
  width: 7px;
  height: 7px;
}
[data-cb-ui] .is-tabs {
  white-space: nowrap;
  padding: 20px;
  padding-bottom: 5px;
  padding-top: 10px;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.8 !important;
  text-transform: uppercase;
  background: var(--cb-field-bg);
  display: flex;
  flex-flow: wrap;
}
[data-cb-ui] .is-tabs a {
  display: inline-block;
  padding: 3px 1px 0;
  color: var(--cb-text-2);
  border-bottom: transparent 1px solid;
  margin: 0 15px 13px 0;
  text-decoration: none;
  transition: box-shadow ease 0.3s;
  outline: none;
}
[data-cb-ui] .is-tabs a.active {
  background: transparent;
  box-shadow: none;
  cursor: default;
  border-bottom: var(--cb-text) 1px solid;
}
[data-cb-ui] .is-tabs a:focus {
  outline: none;
  background: rgba(0, 0, 0, 0.05);
}
[data-cb-ui] .is-tab-content {
  display: none;
  padding: 20px;
  flex-direction: column;
}
[data-cb-ui] .is-tab-content[tabindex="-1"]:focus {
  outline: none;
}
[data-cb-ui] .is-tabs-more {
  box-sizing: border-box;
  width: 150px;
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  background: var(--cb-surface);
  display: none;
  z-index: 1;
  border: 1px solid var(--cb-line-2);
  box-shadow: 3px 4px 9px 0px rgba(0, 0, 0, 0.06);
  outline: none;
}
[data-cb-ui] .is-tabs-more li {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--cb-text-2);
  padding: 10px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  outline: none;
}
[data-cb-ui] .is-tabs-more li:hover, [data-cb-ui] .is-tabs-more li:focus, [data-cb-ui] .is-tabs-more li.active {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .snippet-cathead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
[data-cb-ui] .inp-snippets.custom-select {
  width: 100%;
}
[data-cb-ui] .inp-snippets.custom-select .select-styled {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cb-line);
  border-radius: 0;
  padding: 0 10px 0 16px;
}
[data-cb-ui] .inp-snippets.custom-select .select-styled:hover {
  background: var(--cb-fill);
}
[data-cb-ui] .inp-snippets.custom-select .select-options {
  max-height: 320px;
}
[data-cb-ui] #divSnippetList {
  right: -230px;
  width: 230px;
  background: var(--cb-surface);
  border-left: 1px solid var(--cb-line);
  box-shadow: rgba(0, 0, 0, 0.03) 0 0 10px 0px;
}
[data-cb-ui] #divSnippetList.active {
  right: 0;
}
[data-cb-ui] #divSnippetList #divSnippetHandle {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 170px;
  left: -40px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-line-3);
  border-right: none;
  line-height: 39px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.025) -4px 2px 5px 0px;
  cursor: pointer;
}
[data-cb-ui] #divSnippetList.fromleft {
  left: -230px;
}
[data-cb-ui] #divSnippetList.fromleft.active {
  left: 0;
}
[data-cb-ui] #divSnippetList.fromleft #divSnippetHandle {
  border-left: none;
  border-right: 1px solid var(--cb-line);
  left: auto;
  right: -41px;
  box-shadow: none !important;
}
[data-cb-ui] .is-design-list {
  height: 100%;
  margin: 0;
  padding: 0 0 20px !important;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  border-top: transparent 43px solid !important;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
[data-cb-ui] .is-design-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-cb-ui] .is-design-list::-webkit-scrollbar-track {
  background: transparent;
}
[data-cb-ui] .is-design-list::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-cb-ui] .is-design-list::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}
[data-cb-ui] .is-design-list .snippet-item {
  width: 178px;
  margin: 22px 22px 0;
  display: inline-block;
}
[data-cb-ui] .is-design-list .snippet-item.hide {
  display: none;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
}
[data-cb-ui] .is-selectbox {
  height: 40px;
  box-sizing: border-box;
  padding: 0 0 0 20px;
  color: var(--cb-text);
  background: var(--cb-field-bg);
  box-shadow: none;
  line-height: 40px !important;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
[data-cb-ui] .is-selectbox:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .is-selectbox svg {
  fill: var(--cb-text);
}
[data-cb-ui] .is-selectbox-options {
  width: 100%;
  height: 350px;
  border: 1px solid var(--cb-line);
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--cb-surface);
  display: none;
}
[data-cb-ui] .is-selectbox-options > div {
  color: var(--cb-text);
  height: 35px;
  padding: 0 0 0 20px;
  line-height: 35px !important;
  font-size: 13px;
  font-weight: normal;
  cursor: pointer;
}
[data-cb-ui] .is-selectbox-options > div:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .is-selectbox-options > div.selected {
  background: var(--cb-fill-active);
}
[data-cb-ui] .is-dropdown {
  width: 100%;
  position: relative;
  cursor: pointer;
}
[data-cb-ui] .is-dropdown .dropdown-toggle {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0 0 0 15px;
  color: var(--cb-text);
  background: var(--cb-field-bg);
  box-shadow: none;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  display: flex;
  justify-content: flex-start;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
[data-cb-ui] .is-dropdown .dropdown-toggle:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .is-dropdown .dropdown-toggle svg {
  fill: var(--cb-text);
}
[data-cb-ui] .is-dropdown .dropdown-toggle.no-outline {
  outline: none !important;
}
[data-cb-ui] .is-dropdown .dropdown-toggle::after {
  content: "";
  border-width: 5px;
  border-radius: 3px;
  border-style: solid;
  border-color: transparent;
  border-top-color: var(--cb-text);
  position: absolute;
  right: 12px;
  top: calc(50% + 3px);
  transform: translateY(-50%);
}
[data-cb-ui] .is-dropdown .dropdown-toggle.active::after {
  border-color: transparent;
  border-bottom-color: var(--cb-text);
  top: calc(50% - 3px);
}
[data-cb-ui] .is-dropdown .dropdown-menu {
  width: 100%;
  height: 250px;
  border: 1px solid var(--cb-line);
  background-color: var(--cb-surface);
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 2px;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-cb-ui] .is-dropdown .dropdown-menu li {
  background-color: var(--cb-surface);
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cb-text);
  padding: 0 0 0 15px;
  font-size: 13px;
}
[data-cb-ui] .is-dropdown .dropdown-menu li:hover, [data-cb-ui] .is-dropdown .dropdown-menu li:focus {
  outline: none;
  background: var(--cb-fill-hover);
}
[data-cb-ui] .is-dropdown .dropdown-menu li.selected {
  background: var(--cb-fill-active);
}
[data-cb-ui] .is-dropdown .dropdown-menu[aria-expanded=true] {
  display: block;
}
[data-cb-ui] .div-target {
  gap: 2px;
}
[data-cb-ui] .div-visibility {
  gap: 3px;
}
[data-cb-ui] .elementstyles {
  width: 300px;
  font-size: 13px;
  z-index: 10004;
}
[data-cb-ui] .elementstyles .elm-list {
  z-index: 1;
  width: 100%;
  position: absolute;
  top: 36px;
  left: 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.3;
}
[data-cb-ui] .elementstyles .elm-list a {
  font-size: 13px;
  color: var(--cb-accent);
  text-decoration: none;
  padding: 0 3px;
}
[data-cb-ui] .elementstyles .elm-list a.active {
  color: var(--cb-accent);
  background: var(--cb-fill-active);
}
[data-cb-ui] .elementstyles div.is-separator {
  width: 100%;
  border-top: var(--cb-line) 1px solid;
  margin-bottom: 10px;
  margin-top: 10px;
}
[data-cb-ui] .elementstyles .is-settings {
  margin-top: 7px;
}
[data-cb-ui] .elementstyles .is-settings > div {
  display: flex;
  align-items: center;
  min-height: 35px;
}
[data-cb-ui] .elementstyles .is-settings > div.is-label {
  height: auto;
  font-size: 13px;
  font-weight: normal;
  margin: 10px 0 3px;
}
[data-cb-ui] .elementstyles .is-settings button {
  width: auto;
  height: 35px;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  padding: 1px 20px;
  box-sizing: border-box;
  border: none;
}
[data-cb-ui] .elementstyles .is-settings button.is-btn-color {
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--cb-field-bg);
  border: 1px solid var(--cb-line);
}
[data-cb-ui] .elementstyles .is-settings button span {
  margin-left: 5px;
}
[data-cb-ui] .elementstyles .is-settings input[type=text] {
  margin-right: 2px;
}
[data-cb-ui] .elementstyles .is-settings select {
  margin: 0;
}
[data-cb-ui] .elementstyles .is-settings .elm-bgimage-preview {
  max-width: 120px;
  min-height: unset;
}
[data-cb-ui] .elementstyles .is-settings .elm-bgimage-preview img {
  max-width: 100%;
  max-height: 100%;
}
[data-cb-ui] .pickgradientcolor {
  width: 380px;
  flex-direction: column;
  padding: 10px 10px 11px;
  box-sizing: border-box;
  color: var(--cb-text);
}
[data-cb-ui] .pickgradientcolor .div-presets {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}
[data-cb-ui] .pickgradientcolor .div-presets .btn-graditem {
  width: 82px;
  height: 82px;
  border-radius: 5px;
}
[data-cb-ui] .pickgradientcolor .label-saved {
  margin-top: 20px;
}
[data-cb-ui] .pickgradientcolor .label-gradient-colors {
  margin-top: 20px;
  margin-bottom: 10px;
}
[data-cb-ui] .pickgradientcolor .div-saved {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
  margin-top: 20px;
}
[data-cb-ui] .pickgradientcolor .div-saved div {
  width: 82px;
  height: 82px;
  position: relative;
}
[data-cb-ui] .pickgradientcolor .div-saved div .btn-graditem {
  width: 82px;
  height: 82px;
  border-radius: 5px;
}
[data-cb-ui] .pickgradientcolor .div-saved div .btn-remove {
  width: 19px;
  height: 19px;
  position: absolute;
  top: -8px;
  right: -8px;
  background: #fff;
  border-radius: 50%;
  border: rgba(0, 0, 0, 0.6705882353) 1px solid;
}
[data-cb-ui] .pickgradientcolor .div-saved div .btn-remove svg {
  color: #000;
}
[data-cb-ui] .pickgradientcolor .div-sort {
  display: flex;
  gap: 28px;
  flex-flow: wrap;
  margin-top: 20px;
}
[data-cb-ui] .pickgradientcolor .div-sort div {
  width: 44px;
  height: 44px;
  position: relative;
}
[data-cb-ui] .pickgradientcolor .div-sort div .btn-colorstop {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid var(--cb-line-4);
}
[data-cb-ui] .pickgradientcolor .div-sort div .btn-remove {
  width: 19px;
  height: 19px;
  position: absolute;
  top: -8px;
  right: -8px;
  background: #fff;
  border-radius: 50%;
  border: rgba(0, 0, 0, 0.6705882353) 1px solid;
}
[data-cb-ui] .pickgradientcolor .div-sort div .btn-remove svg {
  color: #000;
}
[data-cb-ui] .pickgradientcolor .div-add {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
[data-cb-ui] .pickgradientcolor .div-add .btn-clear {
  width: 44px;
  height: 44px;
  border-radius: 4px;
}
[data-cb-ui] .pickgradientcolor .div-add .btn-clear svg {
  width: 17px;
  height: 17px;
}
[data-cb-ui] .pickgradientcolor .div-add .btn-addstop {
  width: 44px;
  height: 44px;
  border-radius: 4px;
}
[data-cb-ui] .pickgradientcolor .div-add .btn-addstop svg {
  width: 17px;
  height: 17px;
}
[data-cb-ui] .pickgradientcolor .div-save {
  width: 100%;
  margin-top: 20px;
}
[data-cb-ui] .pickgradientcolor .div-save .btn-save {
  width: 100%;
  height: 44px;
  border-radius: 4px;
  background: var(--cb-field-bg);
}
[data-cb-ui] .roundslider-container {
  width: 60px;
  height: 60px;
  position: relative;
  flex: none;
}
[data-cb-ui] .roundslider-container .roundslider {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}
[data-cb-ui] .roundslider-container .knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #007bff;
  position: absolute;
  cursor: pointer;
}
[data-cb-ui] .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  padding: 0;
  white-space: nowrap;
  /* added for ensuring the text doesn't wrap */
}
[data-cb-ui] .gradient-slider-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 15px;
  margin: 20px 0 15px -2px;
  width: calc(100% - 28px);
}
[data-cb-ui] .gradient-slider-container .gradient-slider-container-shadow {
  position: absolute;
  background-color: #ddd;
  width: 100%;
  height: 100%;
  left: 12px;
  border-radius: 4px;
}
[data-cb-ui] .gradient-slider-container .slider-point {
  position: absolute;
  top: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  border: #ffffff 3px solid;
}
[data-cb-ui] .color-swatch {
  width: 100%;
  height: 315px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
[data-cb-ui] .color-swatch > * {
  display: flex;
  height: 100%;
}
[data-cb-ui] .color-swatch > * > * {
  width: 100%;
  height: 100%;
  border: transparent 1px solid;
  cursor: pointer;
  transition: all ease 0.3s;
}
[data-cb-ui] .color-swatch [data-color] {
  width: 35px;
  height: 31.5px;
  margin: 0;
  transition: none;
  outline: none;
  border-radius: 0px;
}
[data-cb-ui] .color-swatch [data-color]:focus {
  border: rgba(255, 255, 255, 0.7) 2px solid;
}
[data-cb-ui] .pickcolor button {
  float: left;
  width: 45px;
  height: 45px;
  cursor: pointer;
  border-radius: 0px;
}
[data-cb-ui] .pickcolor button:focus {
  outline-offset: -2px;
}
[data-cb-ui] .pickcolor input[type=text]:focus {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: -2px;
}
[data-cb-ui] .pickcolor button.clear {
  font-size: 10px;
}
[data-cb-ui] .is-color-preview {
  border: var(--cb-line) 1px solid;
}
[data-cb-ui] .is-locked-indicator {
  display: none;
  width: 28px;
  height: 28px;
  position: absolute;
  align-items: center;
  justify-content: center;
  background: var(--cb-tool-bg);
  border-radius: 500px;
  pointer-events: none;
}
[data-cb-ui] .size-12,
[data-cb-ui] .size-13,
[data-cb-ui] .size-14,
[data-cb-ui] .size-15,
[data-cb-ui] .size-16,
[data-cb-ui] .size-17,
[data-cb-ui] .size-18,
[data-cb-ui] .size-19,
[data-cb-ui] .size-20,
[data-cb-ui] .size-21,
[data-cb-ui] .size-24,
[data-cb-ui] .size-28,
[data-cb-ui] .size-32 {
  width: initial;
  height: initial;
}

.is-tool {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 10001;
  background: var(--cb-tool-bg);
  box-sizing: border-box;
  padding: 0;
  outline: none;
  border-radius: 3px;
  overflow: hidden;
}
.is-tool.active {
  display: flex;
}
.is-tool button {
  width: 100%;
  height: 25px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  color: var(--cb-tool-icon);
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  line-height: unset;
  position: relative;
  border-radius: 1px;
  transition: all ease 0.3s;
}
.is-tool button:focus {
  outline: none !important;
  outline-offset: 0;
}
.is-tool button svg {
  fill: var(--cb-tool-icon);
}

[data-cb-ui] .is-tool.is-element-tool {
  overflow: hidden;
  margin-top: 10px;
  margin-left: 0px;
  border-radius: 100px;
  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
  background-color: rgba(255, 255, 255, 0.9) !important;
}
[data-cb-ui] .is-tool.is-element-tool button {
  width: 32px;
  height: 31px;
  background: transparent;
  color: #111;
}
[data-cb-ui] .is-tool.is-element-tool svg {
  width: 14px;
  height: 14px;
  fill: #111 !important;
  color: #111 !important;
}
[data-cb-ui] .is-tool.is-element-tool .elm-more svg {
  width: 11px;
  height: 11px;
}

.row-outline .is-row-tool,
.row-active .is-row-tool {
  display: flex;
}

.row-active .is-col-tool {
  display: flex;
  width: auto;
  padding: 0 !important;
}

.is-builder[rowoutline] .row-active .is-col-tool {
  display: none;
}

.is-builder[hidecolumntool] .row-active .is-col-tool {
  display: none;
}

.is-tool.is-row-tool {
  flex-direction: column;
  width: auto;
  left: auto;
  right: -40px;
  box-shadow: none;
  border-radius: 4px;
  overflow: hidden;
}
.is-tool.is-row-tool button {
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.is-tool.is-row-tool svg {
  fill: #fff;
  color: #fff;
}
.is-tool.is-row-tool svg * {
  fill: #fff;
  color: #fff;
}
.is-tool.is-row-tool .row-handle {
  display: flex;
  height: 25px;
  justify-content: center;
  align-items: center;
  background: var(--cb-tool-move);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
}
.is-tool.is-row-tool .row-handle svg {
  width: 13px;
  height: 13px;
}
.is-tool.is-row-tool .row-grideditor {
  background: var(--cb-tool-more);
}
.is-tool.is-row-tool .row-grideditor svg {
  width: 14px;
  height: 14px;
  margin-top: -1px;
}
.is-tool.is-row-tool .row-more {
  background: var(--cb-tool-more);
}
.is-tool.is-row-tool .row-more svg {
  width: 14px;
  height: 14px;
}
.is-tool.is-row-tool .row-remove {
  background: var(--cb-tool-remove);
}
.is-tool.is-row-tool .row-remove svg {
  width: 23px;
  height: 23px;
}
.is-tool.is-col-tool {
  flex-direction: row;
  margin-top: 0px;
  margin-left: -1px;
  box-shadow: none;
  border-radius: 4px;
  overflow: hidden;
  top: -3px !important;
}
.is-tool.is-col-tool button {
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.is-tool.is-col-tool .cell-add {
  background: var(--cb-tool-add);
}
.is-tool.is-col-tool .cell-more {
  background: var(--cb-tool-more);
}
.is-tool.is-col-tool .cell-remove {
  background: var(--cb-tool-remove);
}
.is-tool.is-col-tool svg {
  fill: #fff;
  /* var(--cb-tool-oncolor) */
  color: #fff;
}
.is-tool.is-col-tool svg * {
  fill: #fff;
  /* var(--cb-tool-oncolor) */
  color: #fff;
}
.is-tool.is-col-tool .cell-more svg {
  width: 14px;
  height: 14px;
}
.is-tool.is-canvas-tool {
  display: flex;
  flex-direction: column;
  width: auto;
  left: auto;
  right: -40px;
  box-shadow: none;
  border-radius: 2px;
  overflow: hidden;
}
.is-tool.is-canvas-tool button {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.is-tool.is-canvas-tool button.box-up svg, .is-tool.is-canvas-tool button.box-down svg {
  width: 12px;
  height: 12px;
}
.is-tool.is-canvas-tool button.box-settings svg {
  width: 12px;
  height: 12px;
}
.is-tool.is-canvas-tool button.box-remove svg {
  width: 14px;
  height: 14px;
}
.is-tool.is-canvasadd-tool {
  display: flex;
  flex-direction: column;
  width: auto;
  top: auto;
  bottom: -37px;
  left: calc(50% - 15px);
  box-shadow: none;
  border-radius: 2px;
  overflow: hidden;
}
.is-tool.is-canvasadd-tool button {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.is-tool.is-canvasadd-tool button.box-add svg {
  width: 14px;
  height: 14px;
}

.page-web .is-tool.is-canvas-tool {
  top: 10vh;
  right: 5px;
}
.page-web .is-tool.is-canvasadd-tool {
  bottom: 5px;
}

.page-web-container .is-tool.is-canvasadd-tool {
  bottom: 5px;
}

.is-page:not(.page-web):not(.page-web-container) .is-canvasadd-tool {
  background-color: #ffffffa3;
  box-shadow: 2px 3px 9px #62626212;
}

.is-page:not(.page-web) .is-canvas-tool {
  background-color: #ffffffa3;
  box-shadow: 2px 3px 9px #62626212;
}

.is-builder[gray] .is-tool.is-row-tool {
  background: var(--cb-tool-bg);
}
.is-builder[gray] .is-tool.is-row-tool button {
  width: 27px;
  height: 27px;
}
.is-builder[gray] .is-tool.is-row-tool svg {
  fill: var(--cb-tool-icon);
  color: var(--cb-tool-icon);
}
.is-builder[gray] .is-tool.is-row-tool svg * {
  fill: var(--cb-tool-icon);
  color: var(--cb-tool-icon);
}
.is-builder[gray] .is-tool.is-row-tool .row-handle {
  display: flex;
  height: 27px;
  justify-content: center;
  align-items: center;
  background: transparent;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
}
.is-builder[gray] .is-tool.is-row-tool .row-handle svg {
  width: 11px;
  height: 11px;
}
.is-builder[gray] .is-tool.is-row-tool .row-grideditor {
  background: transparent;
}
.is-builder[gray] .is-tool.is-row-tool .row-grideditor svg {
  width: 13px;
  height: 13px;
}
.is-builder[gray] .is-tool.is-row-tool .row-more {
  background: transparent;
}
.is-builder[gray] .is-tool.is-row-tool .row-more svg {
  width: 12px;
  height: 12px;
}
.is-builder[gray] .is-tool.is-row-tool .row-remove {
  background: transparent;
}
.is-builder[gray] .is-tool.is-row-tool .row-remove svg {
  width: 19px;
  height: 19px;
}
.is-builder[gray] .is-tool.is-col-tool {
  background: var(--cb-tool-bg);
  flex-direction: row;
  top: -2px;
  margin-top: 0px;
  margin-left: -1px;
}
.is-builder[gray] .is-tool.is-col-tool button {
  width: 27px;
  height: 27px;
}
.is-builder[gray] .is-tool.is-col-tool .cell-add {
  background: transparent;
}
.is-builder[gray] .is-tool.is-col-tool .cell-more {
  background: transparent;
}
.is-builder[gray] .is-tool.is-col-tool .cell-remove {
  background: transparent;
}
.is-builder[gray] .is-tool.is-col-tool svg {
  width: 18px;
  height: 18px;
  fill: #000;
  /* var(--cb-tool-icon) */
  color: #000;
}
.is-builder[gray] .is-tool.is-col-tool svg * {
  fill: #000;
  color: #000;
}
.is-builder[gray] .is-tool.is-col-tool .cell-more svg {
  width: 12px;
  height: 12px;
}

.is-rowadd-tool {
  display: none;
  position: absolute;
  bottom: -1px;
  left: 0px;
  width: 100%;
  height: 1px;
  border: none;
  z-index: 1;
  background: transparent;
  transition: none;
}
.is-rowadd-tool button {
  position: absolute;
  top: -9px;
  left: calc(50% - 10px);
  border: 1px solid var(--cb-tool-addborder);
  border-radius: 500px;
  height: auto;
}

.row-outline .is-rowadd-tool,
.row-active .is-rowadd-tool {
  display: block;
}

.is-builder[gray] .is-rowadd-tool {
  border-bottom: 1px solid var(--cb-line);
}
.is-builder[gray] .is-rowadd-tool button {
  border: 1px solid var(--cb-line);
}

.row-add-initial {
  width: 100%;
  height: 120px;
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  color: var(--cb-text);
  border: 1px dashed var(--cb-text-4);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all ease 0.3s;
  outline: none !important;
}
.row-add-initial:hover {
  background: rgba(248, 248, 248, 0.35);
}
.row-add-initial:focus {
  outline: none;
}
.row-add-initial span {
  text-transform: none;
  display: block;
  margin-top: 5px;
  font-size: 13px;
  opacity: 0.5;
  color: var(--cb-text);
}

.is-builder .row-active.row-add-initial {
  outline: none;
}

.is-tool.is-row-tool .row-grideditor {
  display: none;
}

.is-builder {
  /*
  &[grideditor] {
      & > div > div.cell-active {
          outline: 1px solid var(--cb-outline-active) !important;
      }
      .row-active {
          outline: 1px solid var(--cb-outline-active) !important;
          z-index: 1;
      }
      .row-active.row-outline {
          outline: 1px solid var(--cb-line) !important;
      }
  }
  */
}
.is-builder[minimal] .is-tool.is-row-tool .row-grideditor {
  display: block;
}
.is-builder[minimal] .is-tool.is-row-tool .row-more {
  display: none;
}
.is-builder[clean] .is-tool.is-row-tool {
  background: var(--cb-tool-bg);
  outline: none;
}
.is-builder[clean] .is-tool.is-row-tool .row-grideditor {
  display: block;
  background: rgba(216, 200, 6, 0.9);
}
.is-builder[clean] .is-tool.is-row-tool .row-grideditor svg {
  fill: var(--cb-tool-icon) !important;
  width: 13px;
  height: 13px;
  margin-left: -1px;
}
.is-builder[clean] .is-tool.is-row-tool .row-more {
  display: none;
}
.is-builder[clean] .is-tool.is-row-tool .row-handle {
  display: none;
}
.is-builder[clean] .is-tool.is-row-tool .row-remove {
  display: none;
}
.is-builder[clean] .row-outline {
  outline: none;
}
.is-builder[clean] .cell-active {
  outline: none;
}
.is-builder[clean] .row-active:not([data-protected]) {
  outline: 1px solid rgba(0, 0, 0, 0.09);
}
.is-builder[clean][gray] .is-tool.is-row-tool .row-grideditor {
  background: transparent;
}
.is-builder[leftrowtool] .is-tool.is-row-tool {
  right: auto;
  left: -40px;
}
.is-builder[rowoutline] .row-outline {
  outline: none;
}
.is-builder[rowoutline] > div > div.cell-active {
  outline: none !important;
}
.is-builder[rowoutline] .row-active:not([data-protected]) {
  outline: 1px solid var(--cb-outline-active);
}
.is-builder[grayoutline] .row-outline {
  outline: none;
}
.is-builder[grayoutline] .cell-active:not([data-protected]) {
  outline: 1px solid rgba(0, 0, 0, 0.09);
}
.is-builder[grayoutline] .row-active:not([data-protected]) {
  outline: 1px solid rgba(0, 0, 0, 0.09);
}
.is-builder[rowoutline][grayoutline] .row-outline {
  outline: none;
}
.is-builder[rowoutline][grayoutline] .cell-active {
  outline: none !important;
}
.is-builder[rowoutline][grayoutline] .row-active:not([data-protected]) {
  outline: 1px solid rgba(0, 0, 0, 0.09);
}
.is-builder[hideoutline] .row-outline {
  outline: none !important;
}
.is-builder[hideoutline] .cell-active {
  outline: none !important;
}
.is-builder[hideoutline] .row-active {
  outline: none !important;
}
.is-builder[hideoutline] .row-active.row-outline {
  outline: none !important;
}
.is-builder[hidesnippetaddtool] .row-outline .is-rowadd-tool,
.is-builder[hidesnippetaddtool] .row-active .is-rowadd-tool {
  display: none;
}
.is-builder[hideelementhighlight] .cell-active .elm-active {
  background-color: transparent;
}
.is-builder[minimal] .is-tool.is-col-tool .cell-more {
  display: none;
}
.is-builder[clean] .is-tool.is-col-tool {
  display: none;
}

[data-cb-ui][hideelementtool] .is-tool.is-element-tool {
  display: none !important;
}
[data-cb-ui] .is-element-tool .elm-settings {
  display: none;
}
[data-cb-ui][emailmode] .is-element-tool .elm-add,
[data-cb-ui][emailmode] .is-element-tool .elm-more,
[data-cb-ui][emailmode] .is-element-tool .elm-remove {
  display: none !important;
}
[data-cb-ui][emailmode] .is-element-tool .elm-settings {
  display: block;
}

.is-tooltip {
  position: absolute;
  display: none;
  line-height: 1;
  padding: 5px 8px;
  font-size: 11px;
  background: var(--cb-tooltip-bg);
  border-radius: 4px;
  color: var(--cb-tooltip-fg);
  z-index: 100005;
  -webkit-font-smoothing: auto;
}

/*!
 * Cropper.js v1.5.12
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2021-06-12T08:00:11.623Z
 */
.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {
  image-orientation: 0deg;
  display: block;
  height: 100%;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-canvas, .cropper-wrap-box {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.33333%;
  left: 0;
  top: 33.33333%;
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.33333%;
  top: 0;
  width: 33.33333%;
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center:after, .cropper-center:before {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}

.cropper-center:before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center:after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face, .cropper-line, .cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}
.cropper-point.point-se:before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
  cursor: not-allowed;
}

[data-cb-ui] .is-lightbox {
  display: none;
  z-index: 100000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: black;
  opacity: 0;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7) translateZ(150px);
  transition: all 450ms ease-in-out;
  outline: none;
}
[data-cb-ui] .is-lightbox.light {
  background-color: rgba(255, 255, 255, 0.97);
}
[data-cb-ui] .is-lightbox > div {
  width: 100%;
  height: 100%;
}
[data-cb-ui] .is-lightbox > div.lightbox-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px;
  box-sizing: border-box;
}
[data-cb-ui] .is-lightbox > div.lightbox-content > img {
  cursor: default;
  opacity: unset !important;
}
[data-cb-ui] .is-lightbox.active {
  opacity: 1;
  transform: scale(1) translateZ(150px);
}
[data-cb-ui] .is-lightbox iframe {
  opacity: 0;
  filter: blur(30px);
  transition: all 600ms ease-in-out;
}
[data-cb-ui] .is-lightbox.active iframe {
  filter: blur(0);
  opacity: 1;
}
[data-cb-ui] .is-lightbox video {
  outline: none;
  width: 100%;
  height: 100%;
}
[data-cb-ui] .is-lightbox img {
  max-width: 100%;
  max-height: 100%;
}
[data-cb-ui] .is-lightbox .cmd-lightbox-close {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 60px !important;
  height: 60px !important;
  color: #fff !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .is-lightbox .cmd-lightbox-close svg {
  width: 35px;
  height: 35px;
  fill: #000 !important;
}
[data-cb-ui] .is-lightbox.light .cmd-lightbox-close {
  color: #000 !important;
}
[data-cb-ui] .is-lightbox .cmd-lightbox-prev,
[data-cb-ui] .is-lightbox .cmd-lightbox-next {
  flex: none;
  position: absolute !important;
  width: 80px !important;
  height: 80px !important;
  margin-top: -40px;
  color: #fff !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .is-lightbox .cmd-lightbox-prev svg,
[data-cb-ui] .is-lightbox .cmd-lightbox-next svg {
  width: 55px;
  height: 55px;
  fill: #000 !important;
}
[data-cb-ui] .is-lightbox.light .cmd-lightbox-prev, [data-cb-ui] .is-lightbox.light .cmd-lightbox-next {
  color: #000 !important;
}

.block-click[data-noedit] {
  cursor: pointer;
}
.block-click[data-noedit] > * {
  pointer-events: none;
  user-select: none;
}

.block-click[contenteditable=true] {
  cursor: unset;
}
.block-click[contenteditable=true] > * {
  pointer-events: unset;
  user-select: unset;
}

/* Editable-region affordance (editor mode only).
   Every .edit region gets a subtle hover tint and an offset focus outline, so
   plugins don't each have to restyle the default (tight) browser outline.
   Editor-only via body.data-editor; a plugin can still override locally. */
body.data-editor .edit {
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

body.data-editor .edit:hover {
  background-color: rgba(62, 147, 247, 0.06);
}

body.data-editor .edit:focus {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 3px;
}

/* Prevent css framework overide (Materialize) */
[data-cb-ui] [type=checkbox]:not(:checked), [data-cb-ui] [type=checkbox]:checked {
  position: unset !important;
}

[data-cb-ui] input[type=range] {
  border: none;
}

[data-cb-ui] form {
  background: unset;
  margin: unset;
  padding: unset;
  border: unset;
}

[data-cb-ui] svg {
  max-width: unset;
}

/* Prevent css framework overide (Tailwind) */
[data-cb-ui] svg {
  display: initial !important;
}

.is-section-tool svg,
.is-box-tool svg,
.is-row-tool svg,
.is-col-tool svg {
  display: initial !important;
}

/* Make slider block resizable */
.is-builder > div > div[data-module=slider-builder].cell-active {
  z-index: 1 !important;
}

/* Row Lock will hide row tool */
.row-lock .is-row-tool,
.row-lock .is-rowadd-tool {
  display: none !important;
}

/* Adjustment */
@media (max-height: 700px) {
  [data-cb-ui] .is-modal.buttoneditor {
    height: 500px;
    margin-top: -250px;
  }
}
@media (max-height: 600px) {
  [data-cb-ui] .is-modal.buttoneditor {
    height: 400px;
    margin-top: -200px;
  }
}
.relative {
  position: relative;
}

.is-row-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

div[data-html] {
  min-height: 70px;
}

[data-module=slider-builder] *,
[data-module=text-builder] * {
  outline: none !important;
}

/* Make slider block resizable */
.padding-0[data-module=slider-builder],
.padding-0[data-module=text-builder] {
  padding: 0 2px 4px !important;
}

[data-cb-ui] .custom-select {
  --cs-height: 44px;
  position: relative;
  display: inline-block;
  width: 100%;
  height: var(--cs-height);
  font-size: 14px;
}
[data-cb-ui] .custom-select .select-styled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--cs-height);
  padding: 0 10px 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--cb-line-3);
  border-radius: 7px;
  background: var(--cb-field-bg);
  color: var(--cb-text);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
  outline: none;
}
[data-cb-ui] .custom-select .select-styled:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .custom-select .select-styled > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-cb-ui] .custom-select .select-styled > span:first-child img {
  height: 24px;
  vertical-align: middle;
}
[data-cb-ui] .custom-select .select-styled > span:nth-child(2) {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--cb-text-3);
  transition: transform 0.2s ease;
}
[data-cb-ui] .custom-select .select-styled svg {
  width: 16px;
  height: 16px;
}
[data-cb-ui] .custom-select .select-styled:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: -1px;
}
[data-cb-ui] .custom-select .select-styled[aria-expanded=true] > span:nth-child(2) {
  transform: rotate(-180deg);
}
[data-cb-ui] .custom-select input {
  display: none;
  position: absolute;
  top: calc(var(--cs-height) + 6px);
  left: 0;
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px;
  z-index: 2;
  font-size: 14px;
  color: var(--cb-text);
  background: var(--cb-surface);
  border: 1px solid var(--cb-line-3);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  outline: none;
}
[data-cb-ui] .custom-select input::placeholder {
  color: var(--cb-text-3);
}
[data-cb-ui] .custom-select input:focus {
  outline: none;
}
[data-cb-ui] .custom-select .select-options {
  display: none;
  position: absolute;
  top: calc(var(--cs-height) - 1px);
  left: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 5px;
  z-index: 1;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--cb-surface);
  border: 1px solid var(--cb-line-3);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-2);
}
[data-cb-ui] .custom-select.has-search .select-options {
  top: calc(var(--cs-height) + 44px);
  padding-top: 0;
  border-top: none;
  border-radius: 0 0 8px 8px;
}
[data-cb-ui] .custom-select .select-options.active {
  display: block;
}
[data-cb-ui] .custom-select .select-options li {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  color: var(--cb-text);
  cursor: pointer;
  white-space: nowrap;
}
[data-cb-ui] .custom-select .select-options li img {
  margin: 6px 0;
  height: 24px;
}
[data-cb-ui] .custom-select .select-options li:hover {
  background: var(--cb-fill);
}
[data-cb-ui] .custom-select .select-options li.selected,
[data-cb-ui] .custom-select .select-options li[aria-selected=true] {
  background: var(--cb-fill-active);
}

/* Switch */
[data-cb-ui] .switch, .builder-ui .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
[data-cb-ui] .switch input, .builder-ui .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
[data-cb-ui] .switch .slider, .builder-ui .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cb-switch-track);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}
[data-cb-ui] .switch .slider:before, .builder-ui .switch .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--cb-switch-handle);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}
[data-cb-ui] .switch input:checked + .slider, .builder-ui .switch input:checked + .slider {
  background-color: var(--cb-control-accent);
  border-radius: 34px;
}
[data-cb-ui] .switch input:focus + .slider, .builder-ui .switch input:focus + .slider {
  box-shadow: 0 0 1px var(--cb-control-accent);
}
[data-cb-ui] .switch input:checked + .slider:before, .builder-ui .switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.dark [data-cb-ui] .switch .slider,
.dark .builder-ui .switch .slider {
  background-color: var(--cb-switch-track);
}
.dark [data-cb-ui] .switch .slider:before,
.dark .builder-ui .switch .slider:before {
  background-color: var(--cb-switch-handle);
}
.dark [data-cb-ui] .switch input:checked + .slider,
.dark .builder-ui .switch input:checked + .slider {
  background-color: var(--cb-control-accent);
}
.dark [data-cb-ui] .switch input:focus + .slider,
.dark .builder-ui .switch input:focus + .slider {
  box-shadow: 0 0 1px var(--cb-control-accent);
}

.dark .div-font-list > button img,
.colored-dark .div-font-list > button img,
.colored .div-font-list > button img {
  mix-blend-mode: screen;
  filter: invert(1);
}

.dark .is-design-list .snippet-item {
  opacity: 0.95;
}

.dark [data-cb-ui] .elementstyles .elm-list, .colored [data-cb-ui] .elementstyles .elm-list {
  color: var(--cb-text-2);
}
.dark [data-cb-ui] .elementstyles .elm-list a, .colored [data-cb-ui] .elementstyles .elm-list a {
  color: var(--cb-text-2);
}
.dark [data-cb-ui] .elementstyles .elm-list a.active, .colored [data-cb-ui] .elementstyles .elm-list a.active {
  color: var(--cb-text);
  background: var(--cb-fill-active);
}

i.bi, i.icon {
  display: inline-flex;
}

/* block tool */
/*
.is-block-tool {
    border-radius: 3px;
    overflow: hidden;
    top: 3px;
    right: 3px;
    left: auto;
    width: 25px;

    button {
        width: 25px;
        height: 25px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    svg {
        width: 14px;
        height: 14px;
        fill: #000;
    }
}
.is-block.active:not(.multi):not(.editable) .is-block-tool {
    display: flex;
}
*/
/* Lightbox */
.glightbox-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999 !important;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: none;
}

.glightbox-container.inactive {
  display: none;
}

.glightbox-container .gcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: hidden;
}

.glightbox-container .gslider {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.glightbox-container .gslide {
  width: 100%;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
}

.glightbox-container .gslide.current {
  opacity: 1;
  z-index: 99999;
  position: relative;
}

.glightbox-container .gslide.prev {
  opacity: 1;
  z-index: 9999;
}

.glightbox-container .gslide-inner-content {
  width: 100%;
}

.glightbox-container .ginner-container {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 100%;
  margin: auto;
  height: 100vh;
}

.glightbox-container .ginner-container.gvideo-container {
  width: 100%;
}

.glightbox-container .ginner-container.desc-bottom,
.glightbox-container .ginner-container.desc-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.glightbox-container .ginner-container.desc-left,
.glightbox-container .ginner-container.desc-right {
  max-width: 100% !important;
}

.gslide iframe,
.gslide video {
  outline: none !important;
  border: none;
  min-height: 165px;
  -webkit-overflow-scrolling: touch;
  -ms-touch-action: auto;
  touch-action: auto;
}

.gslide:not(.current) {
  pointer-events: none;
}

.gslide-image {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.gslide-image img {
  max-height: 100vh;
  display: block;
  padding: 0;
  float: none;
  outline: none;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  max-width: 100vw;
  width: auto;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  -ms-touch-action: none;
  touch-action: none;
  margin: auto;
  min-width: 200px;
}

.desc-top .gslide-image img,
.desc-bottom .gslide-image img {
  width: auto;
}

.desc-left .gslide-image img,
.desc-right .gslide-image img {
  width: auto;
  max-width: 100%;
}

.gslide-image img.zoomable {
  position: relative;
}

.gslide-image img.dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  -webkit-transition: none;
  transition: none;
}

.gslide-video {
  position: relative;
  max-width: 100vh;
  width: 100% !important;
}

.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster {
  display: none;
}

.gslide-video .gvideo-wrapper {
  width: 100%;
  /* max-width: 160vmin; */
  margin: auto;
}

.gslide-video::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.34);
  display: none;
}

.gslide-video.playing::before {
  display: none;
}

.gslide-video.fullscreen {
  max-width: 100% !important;
  min-width: 100%;
  height: 75vh;
}

.gslide-video.fullscreen video {
  max-width: 100% !important;
  width: 100% !important;
}

.gslide-inline {
  background: #fff;
  text-align: left;
  max-height: calc(100vh - 40px);
  overflow: auto;
  max-width: 100%;
  margin: auto;
}

.gslide-inline .ginlined-content {
  padding: 20px;
  width: 100%;
}

.gslide-inline .dragging {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  -webkit-transition: none;
  transition: none;
}

.ginlined-content {
  overflow: auto;
  display: block !important;
  opacity: 1;
}

.gslide-external {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-width: 100%;
  background: #fff;
  padding: 0;
  overflow: auto;
  max-height: 75vh;
  height: 100%;
}

.gslide-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
}

.zoomed .gslide-media {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.desc-top .gslide-media,
.desc-bottom .gslide-media {
  margin: 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.gslide-description {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

.gslide-description.description-left,
.gslide-description.description-right {
  max-width: 100%;
}

.gslide-description.description-bottom,
.gslide-description.description-top {
  margin: 0 auto;
  width: 100%;
}

.gslide-description p {
  margin-bottom: 12px;
}

.gslide-description p:last-child {
  margin-bottom: 0;
}

.zoomed .gslide-description {
  display: none;
}

.glightbox-button-hidden {
  display: none;
}

.glightbox-mobile .glightbox-container .gslide-description {
  height: auto !important;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 19px 11px;
  max-width: 100vw !important;
  -webkit-box-ordinal-group: 3 !important;
  -ms-flex-order: 2 !important;
  order: 2 !important;
  max-height: 78vh;
  overflow: auto !important;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
  padding-bottom: 50px;
}

.glightbox-mobile .glightbox-container .gslide-title {
  color: #fff;
  font-size: 1em;
}

.glightbox-mobile .glightbox-container .gslide-desc {
  color: #a1a1a1;
}

.glightbox-mobile .glightbox-container .gslide-desc a {
  color: #fff;
  font-weight: bold;
}

.glightbox-mobile .glightbox-container .gslide-desc * {
  color: inherit;
}

.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
  color: #fff;
  opacity: 0.4;
}

.gdesc-open .gslide-media {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 0.4;
}

.gdesc-open .gdesc-inner {
  padding-bottom: 30px;
}

.gdesc-closed .gslide-media {
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.greset {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.gabsolute {
  position: absolute;
}

.grelative {
  position: relative;
}

.glightbox-desc {
  display: none !important;
}

.glightbox-open {
  overflow: hidden;
}

.gloader {
  height: 25px;
  width: 25px;
  -webkit-animation: lightboxLoader 0.8s infinite linear;
  animation: lightboxLoader 0.8s infinite linear;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  display: block;
  z-index: 9999;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 47%;
}

.goverlay {
  width: 100%;
  height: calc(100vh + 1px);
  position: fixed;
  top: -1px;
  left: 0;
  background: #000;
  will-change: opacity;
}

.glightbox-mobile .goverlay {
  background: #000;
}

.gprev,
.gnext,
.gclose {
  z-index: 99999;
  cursor: pointer;
  width: 26px;
  height: 44px;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.gprev svg,
.gnext svg,
.gclose svg {
  display: block;
  width: 25px;
  height: auto;
  margin: 0;
  padding: 0;
}

.gprev.disabled,
.gnext.disabled,
.gclose.disabled {
  opacity: 0.1;
}

.gprev .garrow,
.gnext .garrow,
.gclose .garrow {
  stroke: #fff;
}

.gbtn.focused {
  outline: 2px solid #0f3d81;
}

iframe.wait-autoplay {
  opacity: 0;
}

.glightbox-closing .gnext,
.glightbox-closing .gprev,
.glightbox-closing .gclose {
  opacity: 0 !important;
}

/*Skin */
.glightbox-clean .gslide-description {
  background: #fff;
}

.glightbox-clean .gdesc-inner {
  padding: 22px 20px;
}

.glightbox-clean .gslide-title {
  font-size: 1em;
  font-weight: normal;
  font-family: arial;
  color: #000;
  margin-bottom: 19px;
  line-height: 1.4em;
}

.glightbox-clean .gslide-desc {
  font-size: 0.86em;
  margin-bottom: 0;
  font-family: arial;
  line-height: 1.4em;
}

.glightbox-clean .gslide-video {
  background: #000;
}

.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
}

.glightbox-clean .gprev path,
.glightbox-clean .gnext path,
.glightbox-clean .gclose path {
  fill: #fff;
}

.glightbox-clean .gprev {
  position: absolute;
  top: -100%;
  left: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-clean .gnext {
  position: absolute;
  top: -100%;
  right: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-clean .gclose {
  width: 35px;
  height: 35px;
  top: 15px;
  right: 10px;
  position: absolute;
}

.glightbox-clean .gclose svg {
  width: 18px;
  height: auto;
}

.glightbox-clean .gclose:hover {
  opacity: 1;
}

/*CSS Animations*/
.gfadeIn {
  -webkit-animation: gfadeIn 0.5s ease;
  animation: gfadeIn 0.5s ease;
}

.gfadeOut {
  -webkit-animation: gfadeOut 0.5s ease;
  animation: gfadeOut 0.5s ease;
}

.gslideOutLeft {
  -webkit-animation: gslideOutLeft 0.3s ease;
  animation: gslideOutLeft 0.3s ease;
}

.gslideInLeft {
  -webkit-animation: gslideInLeft 0.3s ease;
  animation: gslideInLeft 0.3s ease;
}

.gslideOutRight {
  -webkit-animation: gslideOutRight 0.3s ease;
  animation: gslideOutRight 0.3s ease;
}

.gslideInRight {
  -webkit-animation: gslideInRight 0.3s ease;
  animation: gslideInRight 0.3s ease;
}

.gzoomIn {
  -webkit-animation: gzoomIn 0.5s ease;
  animation: gzoomIn 0.5s ease;
}

.gzoomOut {
  -webkit-animation: gzoomOut 0.5s ease;
  animation: gzoomOut 0.5s ease;
}

@-webkit-keyframes lightboxLoader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes lightboxLoader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes gslideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-60%, 0, 0);
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}
@-webkit-keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}
@keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(60%, 0, 0);
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}
@-webkit-keyframes gzoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}
@keyframes gzoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@media (min-width: 769px) {
  .glightbox-container .ginner-container {
    width: auto;
    height: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .glightbox-container .ginner-container.desc-top .gslide-description {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }

  .glightbox-container .ginner-container.desc-top .gslide-image,
.glightbox-container .ginner-container.desc-top .gslide-image img {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .glightbox-container .ginner-container.desc-left .gslide-description {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }

  .glightbox-container .ginner-container.desc-left .gslide-image {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  .gslide-image img {
    max-height: 97vh;
    max-width: 100%;
  }

  .gslide-image img.zoomable {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
  }

  .zoomed .gslide-image img.zoomable {
    cursor: -webkit-grab;
    cursor: grab;
  }

  .gslide-inline {
    max-height: 95vh;
  }

  .gslide-external {
    max-height: 100vh;
  }

  .gslide-description.description-left,
.gslide-description.description-right {
    max-width: 275px;
  }

  .glightbox-open {
    height: auto;
  }

  .goverlay {
    background: rgba(0, 0, 0, 0.92);
  }

  .glightbox-clean .gslide-media {
    -webkit-box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
    box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
  }

  .glightbox-clean .description-left .gdesc-inner,
.glightbox-clean .description-right .gdesc-inner {
    position: absolute;
    height: 100%;
    overflow-y: auto;
  }

  .glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose {
    background-color: rgba(0, 0, 0, 0.32);
  }

  .glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gclose:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .glightbox-clean .gprev {
    top: 45%;
  }

  .glightbox-clean .gnext {
    top: 45%;
  }
}
@media (min-width: 992px) {
  .glightbox-clean .gclose {
    opacity: 0.7;
    right: 20px;
  }
}
@media screen and (max-height: 420px) {
  .goverlay {
    background: #000;
  }
}
/* skin */
/* Light */
.glightbox-light .gslide-description {
  background: #fff;
}

.glightbox-light .gdesc-inner {
  padding: 22px 20px;
}

.glightbox-light .gslide-title {
  font-size: 1em;
  font-weight: normal;
  font-family: arial;
  color: #000;
  margin-bottom: 19px;
  line-height: 1.4em;
}

.glightbox-light .gslide-desc {
  font-size: 0.86em;
  margin-bottom: 0;
  font-family: arial;
  line-height: 1.4em;
}

.glightbox-light .gslide-video {
  background: #000;
}

.glightbox-light .gprev,
.glightbox-light .gnext,
.glightbox-light .gclose {
  background-color: rgba(255, 255, 255, 0);
  border-radius: 4px;
}

.glightbox-light .gprev path,
.glightbox-light .gnext path,
.glightbox-light .gclose path {
  fill: #000;
}

.glightbox-light .gprev {
  position: absolute;
  top: -100%;
  left: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-light .gnext {
  position: absolute;
  top: -100%;
  right: 30px;
  width: 40px;
  height: 50px;
}

.glightbox-light .gclose {
  width: 35px;
  height: 35px;
  top: 15px;
  right: 10px;
  position: absolute;
}

.glightbox-light .gclose svg {
  width: 18px;
  height: auto;
}

.glightbox-light .gclose:hover {
  opacity: 1;
}

/**/
.glightbox-light .gslide-media {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.glightbox-light .description-left .gdesc-inner,
.glightbox-light .description-right .gdesc-inner {
  position: absolute;
  height: 100%;
  overflow-y: auto;
}

.glightbox-light .gprev,
.glightbox-light .gnext,
.glightbox-light .gclose {
  background-color: rgba(255, 255, 255, 0);
}

.glightbox-light .gprev:hover,
.glightbox-light .gnext:hover,
.glightbox-light .gclose:hover {
  background-color: rgba(255, 255, 255, 0);
}

.glightbox-light .gprev {
  top: 45%;
}

.glightbox-light .gnext {
  top: 45%;
}

@media (min-width: 992px) {
  .glightbox-light .gclose {
    opacity: 0.7;
    right: 20px;
  }
}
/**/
.glightbox-light .goverlay {
  background: white !important;
}

@media screen and (max-height: 420px) {
  .goverlay {
    background: white;
  }
}
/* override (light) */
.glightbox-light .gprev,
.glightbox-light .gnext {
  width: 55px !important;
  height: 70px !important;
}

.gclose svg, .gnext svg, .gprev svg {
  width: 50px !important;
}

.glightbox-light .gclose {
  width: 55px !important;
  height: 55px !important;
}

.glightbox-light .gclose svg {
  width: 30px !important;
}

.glightbox-light .gslide-title {
  font-size: 1.2em !important;
  font-family: var(--sans) !important;
}

.glightbox-light .gslide-desc {
  font-size: 1em !important;
  font-family: var(--sans) !important;
}

/* override (clean) */
.glightbox-clean .gprev,
.glightbox-clean .gnext {
  width: 55px !important;
  height: 70px !important;
}

.gclose svg, .gnext svg, .gprev svg {
  width: 50px !important;
}

.glightbox-clean .gclose {
  width: 55px !important;
  height: 55px !important;
}

.glightbox-clean .gclose svg {
  width: 30px !important;
}

.glightbox-clean .gslide-title {
  font-size: 1.2em !important;
  font-family: var(--sans) !important;
}

.glightbox-clean .gslide-desc {
  font-size: 1em !important;
  font-family: var(--sans) !important;
}

/* other override */
.gclose.disabled, .gnext.disabled, .gprev.disabled {
  opacity: 0;
}

/* Kelir colorpicker */
/* ============================================================
 * Kelir color picker — base library styles + editor integration
 *
 * The base stylesheet is imported AS-IS from the library so Kelir
 * stays drop-in on upgrade (never edit kelir.css). Everything below
 * only adapts Kelir to ContentBuilder's existing pop chrome — no
 * library rules are copied.
 *
 * WHY the [data-cb-ui] wrapper: ContentBuilder's global button reset
 * (`[data-cb-ui] button { ... }`) leaks into Kelir's buttons/swatches. Wrapping
 * the import lifts every Kelir rule to [data-cb-ui]+class so the library's own
 * styling wins. It MUST share the same scope as that reset (and the RTE
 * `.rte-color-picker button` rules) — otherwise a specificity mismatch lets
 * them beat Kelir.
 * ============================================================ */
[data-cb-ui] {
  /*!
   * Kelir v1.1.0 — stylesheet
   * All rules are scoped under [data-kelir]. Max specificity kept low
   * so host pages can override with a single class.
   * (c) 2026 InnovaStudio. Commercial license.
   */
  /* --kelir-* token DEFAULTS removed for ContentBuilder: they are supplied by the
   * editor integration layer (src/scss/kelir/_kelir.scss), mapped to the editor's
   * --cb-* theme tokens, so the picker follows the ContentBuilder theme instead of
   * the OS prefers-color-scheme these blocks defaulted to. (Kelir's [data-theme]
   * attribute is left inert — no CSS reads it now.) */
  /* ---------- trigger button ---------- */
  /* ---------- panel ---------- */
  /* ---------- saturation / brightness area ---------- */
  /* ---------- controls row ---------- */
  /* ---------- format / input / save ---------- */
  /* .kelir-btn:hover { color: var(--kelir-fg); border-color: var(--kelir-border-strong); } */
  /* ---------- swatch grids ---------- */
  /* ---------- saved colors ---------- */
  /* ---------- "no color" (cleared) state ---------- */
  /* ---------- screen reader only ---------- */
  /* ---------- reduced motion ---------- */
  /* --- Frame: let .is-pop / .is-rte-pop be the single visible frame,
   * strip Kelir's own panel border/shadow/bg so it blends in. --- */
  /* --- Popup shell: size to Kelir's panel, no extra padding. --- */
  /* --- RTE shell: drop the fixed-height slide animation (Kelir's height is
   * dynamic — saved colors add rows), so nothing gets clipped. The base
   * .rte-color-picker is now width:auto, so no width override is needed. --- */
  /* --- Undo the editor button-reset properties Kelir doesn't declare
   * (so they'd otherwise leak): box-shadow on all controls, and the
   * forced height/display on swatches (Kelir sizes them via
   * aspect-ratio). Scoped through the marker classes so this also beats
   * the RTE-specific `.rte-color-picker button` rules (1,2,1). --- */
  /* Save (+) / eyedropper buttons: 30px, neutralize the editor button reset. */
  /* Saved-color remove (×): 15px round chip. Scoping under the marker classes
   * gives specificity (0,2,0) / (0,3,0), which beats BOTH the global
   * `[data-cb-ui] button` reset (0,1,1) and the RTE `.rte-color-picker button`
   * rule (0,2,1) — so no !important is needed, and the background stays
   * correct in dark mode (it just tracks --kelir-bg). */
}
[data-cb-ui] .kelir-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font: inherit;
  color: var(--kelir-fg);
  background: var(--kelir-bg);
  border: 1px solid var(--kelir-border);
  border-radius: 8px;
  cursor: pointer;
}
[data-cb-ui] .kelir-trigger:hover {
  border-color: var(--kelir-border-strong);
}
[data-cb-ui] .kelir-trigger:focus-visible {
  outline: 2px solid var(--kelir-focus);
  outline-offset: 2px;
}
[data-cb-ui] .kelir-trigger[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
[data-cb-ui] .kelir-preview {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--kelir-border);
  background: repeating-conic-gradient(var(--kelir-check-a) 0% 25%, var(--kelir-check-b) 0% 50%) 0 0/10px 10px;
  flex: none;
}
[data-cb-ui] .kelir-preview-fill {
  position: absolute;
  inset: 0;
}
[data-cb-ui] .kelir-panel {
  box-sizing: border-box;
  width: 264px;
  padding: 12px;
  background: var(--kelir-bg);
  color: var(--kelir-fg);
  border: 1px solid var(--kelir-border);
  border-radius: var(--kelir-radius);
  box-shadow: var(--kelir-shadow);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  z-index: 9999;
  user-select: none;
  -webkit-user-select: none;
}
[data-cb-ui] .kelir-panel *, [data-cb-ui] .kelir-panel *::before, [data-cb-ui] .kelir-panel *::after {
  box-sizing: border-box;
}
[data-cb-ui] .kelir-panel.kelir-inline {
  position: static;
  box-shadow: none;
  z-index: auto;
}
[data-cb-ui] .kelir-area {
  position: relative;
  height: 150px;
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--kelir-hue, #f00);
}
[data-cb-ui] .kelir-area:focus-visible {
  outline: 2px solid var(--kelir-focus);
  outline-offset: 2px;
}
[data-cb-ui] .kelir-area-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
[data-cb-ui] .kelir-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
[data-cb-ui] .kelir-current {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--kelir-border);
  background: repeating-conic-gradient(var(--kelir-check-a) 0% 25%, var(--kelir-check-b) 0% 50%) 0 0/12px 12px;
  flex: none;
}
[data-cb-ui] .kelir-current-fill {
  position: absolute;
  inset: 0;
}
[data-cb-ui] .kelir-sliders {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
[data-cb-ui] .kelir-slider {
  position: relative;
  height: 14px;
  border-radius: 7px;
  cursor: pointer;
  touch-action: none;
}
[data-cb-ui] .kelir-slider:focus-visible {
  outline: 2px solid var(--kelir-focus);
  outline-offset: 2px;
}
[data-cb-ui] .kelir-slider-track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-cb-ui] .kelir-slider-hue .kelir-slider-track {
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
[data-cb-ui] .kelir-slider-alpha .kelir-slider-track {
  background: linear-gradient(to right, transparent, var(--kelir-alpha-color, #f00)), repeating-conic-gradient(var(--kelir-check-a) 0% 25%, var(--kelir-check-b) 0% 50%) 0 0/10px 10px;
}
[data-cb-ui] .kelir-slider-thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
[data-cb-ui] .kelir-io {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 12px;
}
[data-cb-ui] .kelir-format {
  font: inherit;
  color: var(--kelir-fg);
  background: var(--kelir-field-bg);
  border: 1px solid var(--kelir-border);
  border-radius: 6px;
  padding: 0 4px;
  height: 30px;
}
[data-cb-ui] .kelir-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--kelir-fg);
  background: var(--kelir-field-bg);
  border: 1px solid var(--kelir-border);
  border-radius: 6px;
  padding: 0 8px;
  height: 30px;
  user-select: text;
  -webkit-user-select: text;
}
[data-cb-ui] .kelir-format:focus-visible,
[data-cb-ui] .kelir-input:focus-visible {
  outline: 2px solid var(--kelir-focus);
  outline-offset: 1px;
}
[data-cb-ui] .kelir-input.kelir-invalid {
  border-color: #e5484d;
  outline-color: #e5484d;
}
[data-cb-ui] .kelir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--kelir-fg-muted);
  background: var(--kelir-field-bg);
  border: 1px solid var(--kelir-border);
  border-radius: 6px;
  cursor: pointer;
}
[data-cb-ui] .kelir-btn:focus-visible {
  outline: 2px solid var(--kelir-focus);
  outline-offset: 1px;
}
[data-cb-ui] .kelir-dropper {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
[data-cb-ui] .kelir-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 12px;
}
[data-cb-ui] .kelir-swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--kelir-border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: repeating-conic-gradient(var(--kelir-check-a) 0% 25%, var(--kelir-check-b) 0% 50%) 0 0/10px 10px;
}
[data-cb-ui] .kelir-swatch:hover {
  border-color: var(--kelir-border-strong);
}
[data-cb-ui] .kelir-swatch:focus-visible {
  outline: 2px solid var(--kelir-focus);
  outline-offset: 1px;
}
[data-cb-ui] .kelir-swatch-fill {
  position: absolute;
  inset: 0;
}
[data-cb-ui] .kelir-saved {
  margin-top: 12px;
}
[data-cb-ui] .kelir-saved-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kelir-fg-muted);
  margin-bottom: 6px;
}
[data-cb-ui] .kelir-saved-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
[data-cb-ui] .kelir-saved-item {
  position: relative;
  display: block;
}
[data-cb-ui] .kelir-saved-item .kelir-swatch {
  display: block;
}
[data-cb-ui] .kelir-swatch-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--kelir-border-strong);
  background: var(--kelir-bg);
  color: var(--kelir-fg);
  cursor: pointer;
  z-index: 1;
}
[data-cb-ui] .kelir-swatch-remove svg {
  width: 9px;
  height: 9px;
}
[data-cb-ui] .kelir-saved-item:hover .kelir-swatch-remove,
[data-cb-ui] .kelir-saved-item:focus-within .kelir-swatch-remove {
  display: inline-flex;
}
[data-cb-ui] .kelir-swatch-remove:focus-visible {
  outline: 2px solid var(--kelir-focus);
  outline-offset: 1px;
}
[data-cb-ui] .kelir-preview.kelir-none,
[data-cb-ui] .kelir-current.kelir-none {
  background: var(--kelir-bg);
}
[data-cb-ui] .kelir-preview.kelir-none::after,
[data-cb-ui] .kelir-current.kelir-none::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), #e5484d calc(50% - 1px), #e5484d calc(50% + 1px), transparent calc(50% + 1px));
}
[data-cb-ui] .kelir-panel[data-cleared] .kelir-area-thumb {
  display: none;
}
[data-cb-ui] .kelir-panel[data-cleared] .kelir-slider-thumb {
  opacity: 0.4;
}
[data-cb-ui] .kelir-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: no-preference) {
  [data-cb-ui] .kelir-trigger, [data-cb-ui] .kelir-btn, [data-cb-ui] .kelir-swatch {
    transition: border-color 120ms ease;
  }
}
[data-cb-ui] .pop-picker-kelir .kelir-panel,
[data-cb-ui] .rte-color-picker.is-kelir .kelir-panel {
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
[data-cb-ui] .pop-picker.pop-picker-kelir {
  width: auto;
  height: auto;
  padding: 0;
}
[data-cb-ui] .rte-color-picker.is-kelir.active,
[data-cb-ui] .rte-color-picker.is-kelir.deactive,
[data-cb-ui] .rte-color-picker.is-kelir._4lines.active,
[data-cb-ui] .rte-color-picker.is-kelir._4lines.deactive,
[data-cb-ui] .rte-color-picker.is-kelir._5lines.active,
[data-cb-ui] .rte-color-picker.is-kelir._5lines.deactive {
  animation: none;
  height: auto;
}
[data-cb-ui] .pop-picker-kelir .kelir-swatch,
[data-cb-ui] .rte-color-picker.is-kelir .kelir-swatch {
  box-shadow: none;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
[data-cb-ui] .pop-picker-kelir .kelir-btn,
[data-cb-ui] .rte-color-picker.is-kelir .kelir-btn {
  box-shadow: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
}
[data-cb-ui] .pop-picker-kelir .kelir-swatch-remove,
[data-cb-ui] .rte-color-picker.is-kelir .kelir-swatch-remove {
  box-shadow: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--kelir-bg);
}
[data-cb-ui] .pop-picker-kelir .kelir-swatch-remove:hover,
[data-cb-ui] .rte-color-picker.is-kelir .kelir-swatch-remove:hover {
  background: var(--kelir-bg);
}
[data-cb-ui] .rte-color-picker button.kelir-btn.kelir-dropper {
  border-radius: 50%;
}
[data-cb-ui] input[type=text].kelir-input {
  height: 30px;
  border: 1px solid var(--kelir-border);
}
[data-cb-ui] .kelir-format:focus-visible, [data-cb-ui] .kelir-input:focus-visible {
  outline-offset: -2px;
}
[data-cb-ui] ._rte-colpick_container {
  position: relative;
}
[data-cb-ui] .is-pop-tabs {
  margin-bottom: 0;
}
[data-cb-ui] .is-rte-pop.rte-color-picker .rte-color-picker-area > div {
  padding-top: 0 !important;
}
[data-cb-ui] .kelir-swatches,
[data-cb-ui] .rte-color-picker.is-kelir .kelir-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
}
[data-cb-ui] .kelir-swatches button.kelir-swatch,
[data-cb-ui] .rte-color-picker.is-kelir .kelir-swatches button.kelir-swatch {
  flex: none;
  width: 34.2px;
  border: none;
  border-radius: 0;
}

/* Kanvas image editor (imageEditor: 'kanvas') */
/* ============================================================
 * Kanvas image editor — base library styles + editor integration
 *
 * The base stylesheet is imported AS-IS from the vendored library
 * (src/contentbuilder/kanvas/ui/kanvas-editor.css) so Kanvas stays
 * drop-in on upgrade — never edit that file. Everything below only
 * adapts it to ContentBuilder: the --cb-* token map (which is what
 * makes light/dark follow the editor theme), the focus outline, the
 * dialog's own top bar, and the modal fit.
 *
 * WHY the import is wrapped in `.cb-ike-host`: ContentBuilder's generic
 * control styling — `[data-cb-ui] button`, `[data-cb-ui] .is-modal button`,
 * `[data-cb-ui] select` — leaks into Kanvas's controls. Wrapping lifts every
 * Kanvas rule above those, and the `button, input, select` reset after it
 * catches the properties Kanvas leaves to the browser. The host is the
 * Kanvas mount point ONLY, so the reset can never reach the dialog's own
 * top bar (whose Cancel/Apply are ordinary .classic-* editor buttons).
 *
 * Only loaded shape: the dialog built by imageedit-kanvas.js
 * (`imageEditor: 'kanvas'`). The classic crop dialog is untouched.
 * ============================================================ */
[data-cb-ui] .is-modal.imageedit-kanvas {
  /* The dialog IS the editor: no modal padding, fixed working size.
   * `div.` is required — the backward-compatibility rule
   * `.is-modal:not(.is-modal-content) > div:not(.is-modal-overlay)` carries
   * an element in its selector and would otherwise win on specificity
   * (the shell block uses the same trick for the same reason). */
  /* ---- top bar: Compare | Undo Redo Reset ......... Cancel Apply ---- */
  /* Cancel / Apply sit apart from the tool group next to them. */
  /* ---- the Kanvas mount ---- */
  /* Narrow screens: Kanvas stacks its panel under the stage (its own media
   * query), so let the dialog take the room it needs. */
}
[data-cb-ui] .is-modal.imageedit-kanvas > div.is-modal-content {
  width: 92vw;
  max-width: none;
  height: 90vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--cb-modal-bg);
  border-bottom: 1px solid var(--cb-line);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-spacer {
  flex: 1;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-bar .input-cancel {
  margin-left: 12px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--cb-line);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-i {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-i use {
  stroke: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-compare,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-hist button {
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--cb-text-2);
  background: transparent;
  border-radius: var(--cb-btn-radius);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-compare:hover,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-hist button:hover {
  background: var(--cb-fill-hover);
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-compare:focus-visible,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-hist button:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: -2px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-compare[disabled],
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-hist button[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-compare.on {
  background: var(--cb-fill-active);
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-hist {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-hist button {
  width: 32px;
  padding: 0;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host {
  flex: 1;
  min-height: 0;
  display: flex;
  /*
    Kanvas Editor — default theme.
    Neutral, light-first, dark via [data-kanvas-theme="dark"] on the editor
    root (or any ancestor). Every color/size routes through a --kanvas-* var
    so integrators can retheme without touching the markup.
  */
  /* ---------------- shared controls ---------------- */
  /* ---------------- header (modal Ok / Cancel bar) ---------------- */
  /* ---------------- body: stage + panel ---------------- */
  /* ---------------- floating tools bar ---------------- */
  /* ---------------- panel: tabs + panes ---------------- */
  /* ---------------- sliders ---------------- */
  /* ---------------- WB pad ---------------- */
  /* ---------------- my looks (chips + inline forms) ---------------- */
  /* the look currently applied to the photo */
  /* ---------------- look reel ---------------- */
  /* Category chips. A wrapping row, never a horizontal scroller: in a
     ~290px panel a scrolled strip hides categories behind an edge with no
     affordance. Six categories take two lines, ten take three.
     (Named -cat, not -chip: .kanvas-chip is the "My looks" pill.) */
  /* LUT still on its way: the plain photo, dimmed, until the file lands. */
  /* ---------------- modal ---------------- */
  /* ---------------- narrow layouts ---------------- */
  /* --- Kanvas palette -> editor tokens. Kanvas ships its own light
   * values on .kanvas-editor and a dark block behind
   * [data-kanvas-theme]; this block ties on specificity and wins on
   * source order, so the editor's own light/dark flip drives the whole
   * image editor and the theme attribute is never set. --- */
  /* Focus ring: the editor's own focus token (Kanvas outlines with its ink). */
  /* Take back what ContentBuilder's generic button/input/select rules
   * set. Bare elements here score below every .kanvas-* component rule,
   * so the library keeps ownership of anything it styles itself. */
  /* Flex-related resets are for BUTTONS ONLY. ContentBuilder makes every
   * button a centred flex box; Kanvas lays its buttons out itself (a look
   * chip is a canvas ABOVE its label, not beside it). A <select> must
   * keep the browser's own `align-items: center` — that is what centres
   * its text, and normalising it pushes the label to the top. */
  /* The dialog always opens with the image already chosen, so the
   * "Click or drop an image to start" screen would only flash while it
   * decodes — and its Open-image button has no place here. */
  /* ---- selected / active states: the editor's own neutral treatment ----
   * The library paints a selected control with its ink colour (a solid
   * black pill in light mode). ContentBuilder has ONE active style for
   * ordinary buttons — a neutral fill, never a heavy block — and reserves
   * the accent for sliders and spatial markers. See
   * docs/modal-redesign-guide.md §5. */
  /* Solid button (the Save-look form's OK) = the dialog primary button. */
  /* A saved look that is applied: the same neutral fill, not an ink ring. */
  /* Sliders follow the form kit: accent thumb on a neutral track. */
  /* A selected look is a picture, so it cannot take a fill — it gets the
   * accent ring the panel's preset swatches use (accent is reserved for
   * exactly this: a selected indicator), not a heavy ink border. */
  /* Transient message — the editor's tooltip tokens. */
  /* Scroll areas use the editor's own thin scrollbar, so the panel
   * matches every other modal (asset picker, settings dialogs). The
   * library ships a heavier one; these rules tie on specificity and
   * win on source order. */
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor {
  /* ---- palette (light) ---- */
  --kanvas-bg: #e9eaec;
  --kanvas-panel: #fbfbfc;
  --kanvas-sunk: #f1f2f4;
  --kanvas-ctl: #ffffff;
  --kanvas-ctl-h: #f4f5f7;
  --kanvas-edge: #dcdee2;
  --kanvas-edge-2: #e7e8ec;
  --kanvas-ink: #18181b;
  --kanvas-ink-2: #5c6169;
  --kanvas-ink-3: #9096a0;
  --kanvas-ink-4: #c3c7cd;
  --kanvas-stage: #c8cbd0;
  --kanvas-sel: #18181b;
  --kanvas-sel-contrast: #fbfbfc;
  --kanvas-danger: #dc2626;
  /* ---- shape / type ---- */
  --kanvas-r: 7px;
  --kanvas-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kanvas-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --kanvas-panel-width: 292px;
  font: 13px/1.45 var(--kanvas-font);
  -webkit-font-smoothing: antialiased;
  color: var(--kanvas-ink);
  background: var(--kanvas-bg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 640px;
  min-height: 420px;
  position: relative;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host [data-kanvas-theme=dark] .kanvas-editor,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor[data-kanvas-theme=dark] {
  --kanvas-bg: #1a1b1e;
  --kanvas-panel: #202124;
  --kanvas-sunk: #26272b;
  --kanvas-ctl: #26272b;
  --kanvas-ctl-h: #2d2e33;
  --kanvas-edge: #35363c;
  --kanvas-edge-2: #2b2c31;
  --kanvas-ink: #ececef;
  --kanvas-ink-2: #a0a3ab;
  --kanvas-ink-3: #6e727c;
  --kanvas-ink-4: #45474e;
  --kanvas-stage: #101113;
  --kanvas-sel: #fafafa;
  --kanvas-sel-contrast: #1a1b1e;
  --kanvas-danger: #f87171;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor *,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor *::before,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor *::after {
  box-sizing: border-box;
  margin: 0;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor [hidden] {
  display: none !important;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor button,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor select,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor input {
  font: inherit;
  color: inherit;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor button {
  background: none;
  border: 0;
  cursor: pointer;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor :focus-visible {
  outline: 2px solid var(--kanvas-sel);
  outline-offset: 2px;
  border-radius: 4px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor svg.kanvas-i {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-btn {
  height: 30px;
  padding: 0 11px;
  border-radius: var(--kanvas-r);
  background: var(--kanvas-ctl);
  border: 1px solid var(--kanvas-edge);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.12s;
  font-size: 12.5px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-btn:hover {
  background: var(--kanvas-ctl-h);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-btn.kanvas-solid {
  background: var(--kanvas-sel);
  border-color: var(--kanvas-sel);
  color: var(--kanvas-sel-contrast);
  font-weight: 600;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-btn.kanvas-solid:hover {
  filter: brightness(1.25);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host select.kanvas-sel {
  height: 30px;
  padding: 0 25px 0 10px;
  border-radius: var(--kanvas-r);
  background: var(--kanvas-ctl);
  border: 1px solid var(--kanvas-edge);
  appearance: none;
  font-size: 12.5px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--kanvas-ink-3) 50%), linear-gradient(135deg, var(--kanvas-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 13px, calc(100% - 10px) 13px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-header {
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--kanvas-panel);
  border-bottom: 1px solid var(--kanvas-edge);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-header .kanvas-title {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin-right: auto;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-stage {
  flex: 1;
  position: relative;
  background: var(--kanvas-stage);
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-stage.kanvas-dropping::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed var(--kanvas-panel);
  border-radius: 10px;
  pointer-events: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-viewwrap {
  position: relative;
  margin-bottom: 48px;
  /* keep clear of the tools bar */
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-view {
  /* display size is set by the editor (aspect-correct fit to the stage) */
  display: block;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.22);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-empty h2 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-empty p {
  margin: 0 0 18px;
  color: var(--kanvas-ink-2);
  font-size: 12.5px;
  max-width: 300px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-compare-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--kanvas-panel);
  border: 1px solid var(--kanvas-edge);
  padding: 3px 11px;
  border-radius: 99px;
  color: var(--kanvas-ink-2);
  font: 11px/1.5 var(--kanvas-mono);
  pointer-events: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--kanvas-panel);
  border: 1px solid var(--kanvas-edge);
  padding: 3px 11px;
  border-radius: 99px;
  color: var(--kanvas-ink-2);
  font: 11px/1.5 var(--kanvas-mono);
  cursor: pointer;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-zoom:hover {
  color: var(--kanvas-ink);
  border-color: var(--kanvas-ink-3);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-overlay2 {
  cursor: move;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--kanvas-stage) 65%, transparent);
  color: var(--kanvas-ink-2);
  font-size: 13px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-toast {
  position: absolute;
  left: 50%;
  bottom: 108px;
  transform: translate(-50%, 8px);
  background: var(--kanvas-sel);
  color: var(--kanvas-sel-contrast);
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: 0.18s;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  max-width: 80%;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-toast.kanvas-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  background: var(--kanvas-panel);
  border: 1px solid var(--kanvas-edge);
  border-radius: 11px;
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.16);
  max-width: calc(100% - 24px);
  overflow-x: auto;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools button {
  height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  color: var(--kanvas-ink-2);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools button:hover {
  background: var(--kanvas-ctl-h);
  color: var(--kanvas-ink);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools button[aria-pressed=true] {
  background: var(--kanvas-sel);
  color: var(--kanvas-sel-contrast);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools .kanvas-div {
  width: 1px;
  height: 18px;
  background: var(--kanvas-edge);
  margin: 0 4px;
  flex: 0 0 auto;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools select.kanvas-sel {
  height: 28px;
  font-size: 12px;
  flex: 0 0 auto;
  background-position: calc(100% - 14px) 12px, calc(100% - 10px) 12px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-cropset {
  display: none;
  align-items: center;
  gap: 3px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-cropset.kanvas-on {
  display: flex;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-cropset .kanvas-apply {
  font-weight: 600;
  color: var(--kanvas-ink);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-straight {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 0 6px;
  color: var(--kanvas-ink-2);
  font-size: 12.5px;
  flex: 0 0 auto;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-straight b {
  font: 11px/1 var(--kanvas-mono);
  font-weight: 500;
  color: var(--kanvas-ink);
  width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack {
  position: relative;
  width: 96px;
  height: 16px;
  display: flex;
  align-items: center;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack .kanvas-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kanvas-ink-4);
  border-radius: 2px;
  opacity: 0.55;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack .kanvas-fill {
  position: absolute;
  height: 3px;
  background: var(--kanvas-sel);
  border-radius: 2px;
  pointer-events: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack .kanvas-tick {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--kanvas-ink-4);
  pointer-events: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  appearance: none;
  background: none;
  height: 16px;
  cursor: pointer;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack input::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--kanvas-sel);
  border: 0;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack input::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--kanvas-sel);
  border: 0;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-panel {
  width: var(--kanvas-panel-width);
  flex: 0 0 auto;
  background: var(--kanvas-panel);
  border-left: 1px solid var(--kanvas-edge);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tabs {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--kanvas-edge);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tabs button {
  flex: 1;
  height: 40px;
  font-size: 12.5px;
  color: var(--kanvas-ink-3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tabs button:hover {
  color: var(--kanvas-ink-2);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tabs button[aria-selected=true] {
  color: var(--kanvas-ink);
  font-weight: 500;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tabs button[aria-selected=true]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--kanvas-sel);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tabs .kanvas-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kanvas-sel);
  opacity: 0;
  transition: opacity 0.15s;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tabs .kanvas-dot.kanvas-on {
  opacity: 1;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 22px;
  display: none;
  scrollbar-width: thin;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane.kanvas-on {
  display: block;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane::-webkit-scrollbar {
  width: 9px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane::-webkit-scrollbar-thumb {
  background: var(--kanvas-ink-4);
  border-radius: 5px;
  border: 3px solid var(--kanvas-panel);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-grp {
  margin: 0 0 13px;
  font: 10px/1 var(--kanvas-font);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--kanvas-ink-3);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-grp.kanvas-mt {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--kanvas-edge-2);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-hint {
  font-size: 11.5px;
  color: var(--kanvas-ink-3);
  line-height: 1.55;
  margin: 18px 0 0;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-hint kbd {
  font: 10px/1 var(--kanvas-mono);
  background: var(--kanvas-sunk);
  border: 1px solid var(--kanvas-edge);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 4px;
  color: var(--kanvas-ink-2);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl {
  margin-bottom: 13px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl:last-child {
  margin-bottom: 0;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl .kanvas-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl label {
  font-size: 12.5px;
  color: var(--kanvas-ink-2);
  cursor: pointer;
  user-select: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl.kanvas-dirty label {
  color: var(--kanvas-ink);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl .kanvas-val {
  font: 11px/1 var(--kanvas-mono);
  color: var(--kanvas-ink-3);
  font-variant-numeric: tabular-nums;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl.kanvas-dirty .kanvas-val {
  color: var(--kanvas-ink);
  font-weight: 500;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-track {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-track .kanvas-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kanvas-ink-4);
  border-radius: 2px;
  opacity: 0.55;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-track .kanvas-fill {
  position: absolute;
  height: 3px;
  background: var(--kanvas-sel);
  border-radius: 2px;
  pointer-events: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-track .kanvas-tick {
  position: absolute;
  width: 1px;
  height: 8px;
  background: var(--kanvas-ink-4);
  pointer-events: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-track input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  appearance: none;
  background: none;
  height: 16px;
  cursor: pointer;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-track input::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--kanvas-panel);
  border: 1.5px solid var(--kanvas-ink-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl.kanvas-dirty .kanvas-track input::-webkit-slider-thumb {
  background: var(--kanvas-sel);
  border-color: var(--kanvas-sel);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-track input::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--kanvas-panel);
  border: 1.5px solid var(--kanvas-ink-3);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl.kanvas-dirty .kanvas-track input::-moz-range-thumb {
  background: var(--kanvas-sel);
  border-color: var(--kanvas-sel);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pad {
  position: relative;
  width: 100%;
  aspect-ratio: 1/0.66;
  border-radius: 7px;
  cursor: crosshair;
  overflow: hidden;
  border: 1px solid var(--kanvas-edge);
  touch-action: none;
  background: radial-gradient(125% 125% at 0% 0%, #9a8ede 0%, transparent 62%), radial-gradient(125% 125% at 100% 0%, #e08c9a 0%, transparent 62%), radial-gradient(125% 125% at 0% 100%, #57bdb0 0%, transparent 62%), radial-gradient(125% 125% at 100% 100%, #cfc055 0%, transparent 62%), #8f949b;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pad .kanvas-cx {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pad .kanvas-cy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.28);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pad .kanvas-knob {
  position: absolute;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-wbrow {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-wbrow .kanvas-rd {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--kanvas-ink-2);
  background: var(--kanvas-sunk);
  border: 1px solid var(--kanvas-edge-2);
  padding: 0 9px;
  height: 30px;
  border-radius: var(--kanvas-r);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-wbrow .kanvas-rd b {
  font: 11px/1 var(--kanvas-mono);
  font-weight: 500;
  color: var(--kanvas-ink);
  font-variant-numeric: tabular-nums;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-wbrow .kanvas-btn {
  padding: 0 10px;
  font-size: 12px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-focusrow {
  display: flex;
  gap: 6px;
  margin: 2px 0 13px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-focusrow .kanvas-btn {
  height: 28px;
  font-size: 12px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-focusrow .kanvas-btn[aria-pressed=true] {
  background: var(--kanvas-sel);
  border-color: var(--kanvas-sel);
  color: var(--kanvas-sel-contrast);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chips-empty {
  font-size: 11.5px;
  color: var(--kanvas-ink-3);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chip {
  display: inline-flex;
  align-items: center;
  background: var(--kanvas-sunk);
  border: 1px solid var(--kanvas-edge);
  border-radius: 99px;
  overflow: hidden;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chip button {
  height: 26px;
  color: var(--kanvas-ink-2);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chip button:hover {
  /* background: var(--kanvas-ctl-h);  */
  color: var(--kanvas-ink);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chip-name {
  padding: 0 4px 0 11px;
  font-size: 12px;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chip-icon {
  width: 24px;
  font-size: 12px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chip:has(.kanvas-chip-name[aria-pressed=true]) {
  border-color: var(--kanvas-sel);
  box-shadow: inset 0 0 0 1px var(--kanvas-sel);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chip-name[aria-pressed=true] {
  color: var(--kanvas-ink);
  font-weight: 500;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chip-icon:last-child {
  padding-right: 4px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-inline-form {
  display: flex;
  gap: 6px;
  margin: 0 0 13px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-inline-form .kanvas-btn {
  height: 30px;
  flex: 0 0 auto;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-field {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--kanvas-r);
  background: var(--kanvas-ctl);
  border: 1px solid var(--kanvas-edge);
  font-size: 12.5px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-field:focus {
  outline: 2px solid var(--kanvas-sel);
  outline-offset: 1px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-cat {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  line-height: 1.4;
  border: 1px solid var(--kanvas-edge);
  background: none;
  color: var(--kanvas-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-cat:hover {
  border-color: var(--kanvas-ink-3);
  color: var(--kanvas-ink);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-cat[aria-pressed=true] {
  background: var(--kanvas-ink);
  border-color: var(--kanvas-ink);
  color: var(--kanvas-bg);
  font-weight: 500;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-catn {
  margin-left: 5px;
  font-size: 9.5px;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-reel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 16px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look {
  padding: 0;
  background: none;
  text-align: left;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look canvas {
  width: 100%;
  aspect-ratio: 3/2;
  display: block;
  border-radius: 5px;
  background: var(--kanvas-sunk);
  border: 1px solid var(--kanvas-edge);
  box-shadow: 0 0 0 0 var(--kanvas-sel);
  transition: box-shadow 0.12s, border-color 0.12s;
  object-fit: cover;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look:hover canvas {
  border-color: var(--kanvas-ink-3);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--kanvas-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look[aria-pressed=true] canvas {
  border-color: var(--kanvas-sel);
  box-shadow: 0 0 0 2px var(--kanvas-sel);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look[aria-pressed=true] span {
  color: var(--kanvas-ink);
  font-weight: 500;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look canvas.kanvas-pending {
  opacity: 0.45;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look:disabled {
  cursor: default;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look:disabled canvas {
  opacity: 0.3;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look:disabled span {
  text-decoration: line-through;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-modal-backdrop > .kanvas-editor {
  width: min(1180px, 100%);
  height: min(780px, 100%);
  border: 1px solid var(--kanvas-edge);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
@media (max-width: 920px) {
  [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor {
    --kanvas-panel-width: 262px;
  }
}
@media (max-width: 760px) {
  [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor {
    min-width: 0;
  }
  [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-body {
    flex-direction: column;
  }
  [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-panel {
    width: auto;
    border-left: none;
    border-top: 1px solid var(--kanvas-edge);
    max-height: 46%;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor * {
    transition: none !important;
  }
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor {
  --kanvas-bg: var(--cb-modal-bg);
  --kanvas-panel: var(--cb-modal-bg);
  --kanvas-sunk: var(--cb-surface-2);
  --kanvas-ctl: var(--cb-btn-bg);
  --kanvas-ctl-h: var(--cb-btn-bg-hover);
  --kanvas-edge: var(--cb-line-3);
  --kanvas-edge-2: var(--cb-line-2);
  --kanvas-ink: var(--cb-text);
  --kanvas-ink-2: var(--cb-text-2);
  --kanvas-ink-3: var(--cb-text-3);
  --kanvas-ink-4: var(--cb-text-4);
  --kanvas-stage: var(--cb-backdrop);
  --kanvas-sel: var(--cb-text);
  --kanvas-sel-contrast: var(--cb-modal-bg);
  --kanvas-danger: var(--cb-danger);
  --kanvas-r: var(--cb-btn-radius);
  --kanvas-font: var(--sans);
  --kanvas-mono: var(--mono);
  flex: 1;
  min-width: 0;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor :focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: 2px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host button, [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host input, [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host select {
  position: static;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host button {
  display: inline-block;
  align-items: normal;
  justify-content: normal;
  gap: 0;
  white-space: normal;
  text-align: center;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-empty {
  display: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-cat[aria-pressed=true],
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools button[aria-pressed=true] {
  background: var(--cb-fill-active);
  border-color: transparent;
  color: var(--cb-text);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-cat:hover,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools button:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-btn.kanvas-solid {
  background: var(--cb-btn-bg);
  border-color: transparent;
  color: var(--cb-text-2);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-btn.kanvas-solid:hover {
  background: var(--cb-btn-bg-hover);
  filter: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-chip:has(.kanvas-chip-name[aria-pressed=true]) {
  background: var(--cb-fill-active);
  border-color: transparent;
  box-shadow: none;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-track .kanvas-fill,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack .kanvas-fill {
  background: var(--cb-control-accent);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl.kanvas-dirty .kanvas-track input::-webkit-slider-thumb,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack input::-webkit-slider-thumb {
  background: var(--cb-slider-thumb);
  border-color: var(--cb-slider-thumb);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-ctl.kanvas-dirty .kanvas-track input::-moz-range-thumb,
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-strack input::-moz-range-thumb {
  background: var(--cb-slider-thumb);
  border-color: var(--cb-slider-thumb);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-look[aria-pressed=true] canvas {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 2px var(--cb-accent);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-toast {
  background: var(--cb-tooltip-bg);
  color: var(--cb-tooltip-fg);
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane {
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane::-webkit-scrollbar-track {
  background: transparent;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools {
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools::-webkit-scrollbar-track {
  background: transparent;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}
@media (max-width: 760px) {
  [data-cb-ui] .is-modal.imageedit-kanvas > div.is-modal-content {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-compare span {
    display: none;
  }
}

.pop-picker {
  /* color pop must sit above other pops/panels it can be opened from */
  z-index: 10050 !important;
}

.hide-drag-class {
  opacity: 0;
}

.drag-over-image {
  outline: #a2f0ce 3px solid;
}

[data-cb-ui] {
  /* reset */
  /* New Plugin Features */
}
[data-cb-ui] *,
[data-cb-ui] *::before,
[data-cb-ui] *::after {
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
[data-cb-ui] .flex {
  display: flex;
}
[data-cb-ui] .flex-row {
  flex-direction: row;
}
[data-cb-ui] .flex-col {
  flex-direction: column;
}
[data-cb-ui] .flex-wrap {
  flex-wrap: wrap;
}
[data-cb-ui] .border-solid {
  border-style: solid;
}
[data-cb-ui] .border-none {
  border-style: none;
}
[data-cb-ui] .border {
  border-width: 1px;
}
[data-cb-ui] .border-0 {
  border-width: 0px;
}
[data-cb-ui] .border-2 {
  border-width: 2px;
}
[data-cb-ui] .border-transparent {
  border-color: transparent;
}
[data-cb-ui] .border-current {
  border-color: currentColor;
}
[data-cb-ui] .hover\:border-transparent:hover {
  border-color: transparent !important;
}
[data-cb-ui] .hover\:border-current:hover {
  border-color: currentColor !important;
}
[data-cb-ui] .is-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
[data-cb-ui] .is-accordion > div {
  border: 1px solid #dddddd;
  border-radius: 8px;
}
[data-cb-ui] .is-accordion > div > div:first-child {
  /* header */
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-weight: 500;
  cursor: pointer;
}
[data-cb-ui] .is-outline {
  border: 1px solid #ddd;
}
[data-cb-ui] .is-tips {
  margin-top: 16px;
  padding: 12px;
  background: #eff6ff;
  font-size: 12px;
  color: #1e40af;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
}
[data-cb-ui] .is-rte-tool,
[data-cb-ui] .is-elementrte-tool {
  top: 25px;
}
[data-cb-ui] .is-rte-tool > div:not(.is-draggable),
[data-cb-ui] .is-elementrte-tool > div:not(.is-draggable) {
  padding: 8px 10px 8px 10px;
}
[data-cb-ui] .is-rte-tool,
[data-cb-ui] .is-elementrte-tool,
[data-cb-ui] .is-rte-pop.rte-more-options,
[data-cb-ui] .is-rte-pop.elementrte-more-options {
  z-index: 10001;
  padding: 0;
  color: var(--cb-rte-text);
  background: var(--cb-rte-surface);
  box-shadow: var(--cb-shadow);
  border-radius: 7px;
  overflow: hidden;
}
[data-cb-ui] .is-rte-tool div[role=button],
[data-cb-ui] .is-elementrte-tool div[role=button],
[data-cb-ui] .is-rte-pop.rte-more-options div[role=button],
[data-cb-ui] .is-rte-pop.elementrte-more-options div[role=button] {
  background-color: transparent;
  color: var(--cb-rte-text);
  width: 45px;
  height: 40px;
  margin: 0;
  box-shadow: none;
}
[data-cb-ui] .is-rte-tool div[role=button].on,
[data-cb-ui] .is-elementrte-tool div[role=button].on,
[data-cb-ui] .is-rte-pop.rte-more-options div[role=button].on,
[data-cb-ui] .is-rte-pop.elementrte-more-options div[role=button].on {
  background: var(--cb-rte-fill-active);
}
[data-cb-ui] .is-rte-tool div[role=button]:hover,
[data-cb-ui] .is-elementrte-tool div[role=button]:hover,
[data-cb-ui] .is-rte-pop.rte-more-options div[role=button]:hover,
[data-cb-ui] .is-rte-pop.elementrte-more-options div[role=button]:hover {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-tool div[role=button]:focus,
[data-cb-ui] .is-elementrte-tool div[role=button]:focus,
[data-cb-ui] .is-rte-pop.rte-more-options div[role=button]:focus,
[data-cb-ui] .is-rte-pop.elementrte-more-options div[role=button]:focus {
  outline: none;
}
[data-cb-ui] .is-rte-tool div[role=button] svg:not([fill]),
[data-cb-ui] .is-elementrte-tool div[role=button] svg:not([fill]),
[data-cb-ui] .is-rte-pop.rte-more-options div[role=button] svg:not([fill]),
[data-cb-ui] .is-rte-pop.elementrte-more-options div[role=button] svg:not([fill]) {
  fill: var(--cb-rte-text);
}
[data-cb-ui] .is-rte-tool button,
[data-cb-ui] .is-elementrte-tool button,
[data-cb-ui] .is-rte-pop.rte-more-options button,
[data-cb-ui] .is-rte-pop.elementrte-more-options button {
  background-color: transparent;
  color: var(--cb-rte-text);
  width: 44px;
  height: 40px;
  margin: 0 2px 0 0;
  border-radius: 5px;
  box-shadow: none;
  /*
  Legacy icons need this:
      svg {
          fill: var(--cb-rte-text);
      }
  However, new icons have fill="none". With this:
      svg {
          fill: var(--cb-rte-text);
      }
  the new icons will be filled and appear as solid black, which is not what we want.
  Therefore, we apply fill only when there is no fill attribute (i.e. for legacy icons).
  */
}
[data-cb-ui] .is-rte-tool button.on,
[data-cb-ui] .is-elementrte-tool button.on,
[data-cb-ui] .is-rte-pop.rte-more-options button.on,
[data-cb-ui] .is-rte-pop.elementrte-more-options button.on {
  background: var(--cb-rte-fill-active);
}
[data-cb-ui] .is-rte-tool button:hover,
[data-cb-ui] .is-elementrte-tool button:hover,
[data-cb-ui] .is-rte-pop.rte-more-options button:hover,
[data-cb-ui] .is-rte-pop.elementrte-more-options button:hover {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-tool button:focus,
[data-cb-ui] .is-elementrte-tool button:focus,
[data-cb-ui] .is-rte-pop.rte-more-options button:focus,
[data-cb-ui] .is-rte-pop.elementrte-more-options button:focus {
  outline: none;
}
[data-cb-ui] .is-rte-tool button svg:not([fill]),
[data-cb-ui] .is-elementrte-tool button svg:not([fill]),
[data-cb-ui] .is-rte-pop.rte-more-options button svg:not([fill]),
[data-cb-ui] .is-rte-pop.elementrte-more-options button svg:not([fill]) {
  fill: var(--cb-rte-text);
}
[data-cb-ui] .is-rte-tool .rte-separator,
[data-cb-ui] .is-elementrte-tool .rte-separator,
[data-cb-ui] .is-rte-pop.rte-more-options .rte-separator,
[data-cb-ui] .is-rte-pop.elementrte-more-options .rte-separator {
  height: 30px;
  width: 1px;
  background: var(--cb-rte-line);
  margin: 7px 3px 0;
}
[data-cb-ui] [toolbarleft] .is-rte-tool,
[data-cb-ui] [toolbarleft] .is-elementrte-tool {
  left: 25px;
  box-shadow: var(--cb-shadow);
}
[data-cb-ui] [toolbarright] .is-rte-tool,
[data-cb-ui] [toolbarright] .is-elementrte-tool {
  right: 35px;
  left: auto;
  box-shadow: var(--cb-shadow);
}
[data-cb-ui] [toolbarleft] .is-rte-tool > div:not(.is-draggable),
[data-cb-ui] [toolbarleft] .is-elementrte-tool > div:not(.is-draggable), [data-cb-ui] [toolbarright] .is-rte-tool > div:not(.is-draggable),
[data-cb-ui] [toolbarright] .is-elementrte-tool > div:not(.is-draggable) {
  flex-direction: column;
  padding: 8px 9px 8px 9px;
}
[data-cb-ui] [toolbarleft] .is-rte-tool .rte-separator,
[data-cb-ui] [toolbarleft] .is-elementrte-tool .rte-separator,
[data-cb-ui] [toolbarleft] .rte-more-options .rte-separator,
[data-cb-ui] [toolbarleft] .elementrte-more-options .rte-separator, [data-cb-ui] [toolbarright] .is-rte-tool .rte-separator,
[data-cb-ui] [toolbarright] .is-elementrte-tool .rte-separator,
[data-cb-ui] [toolbarright] .rte-more-options .rte-separator,
[data-cb-ui] [toolbarright] .elementrte-more-options .rte-separator {
  height: 1px;
  width: 34px;
  margin: 3px 0 3px 7px;
}
[data-cb-ui] [toolbarfull] .is-rte-tool,
[data-cb-ui] [toolbarfull] .is-elementrte-tool {
  top: 0;
  left: 0;
  width: 100vw;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.07) -1px 1px 0px 0px;
}
[data-cb-ui] [toolbarfull] .is-rte-pop {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 1px;
}
[data-cb-ui] .is-rte-pop {
  z-index: 10002;
  display: none;
  position: fixed;
  height: 0;
  border: none;
  color: var(--cb-rte-text);
  background: var(--cb-rte-surface);
  box-shadow: var(--cb-shadow);
  box-sizing: border-box;
  overflow: hidden;
  outline: none;
  border-radius: 2px;
  overflow: hidden;
}
[data-cb-ui] .is-rte-pop > div {
  display: flex;
  padding: 1px 9px 9px 9px;
}
[data-cb-ui] .is-rte-pop button {
  width: 46px;
  height: 40px;
  margin: 0;
  color: var(--cb-rte-text);
  background-color: transparent;
  box-shadow: none;
}
[data-cb-ui] .is-rte-pop button.on {
  background: var(--cb-rte-fill-active);
}
[data-cb-ui] .is-rte-pop button:hover {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-pop button svg:not([fill]),
[data-cb-ui] .is-rte-pop div[role=button] svg:not([fill]) {
  fill: var(--cb-rte-text);
}
[data-cb-ui] .is-rte-pop input[type=text] {
  color: var(--cb-rte-text);
  background: var(--cb-rte-field-bg);
  border-bottom-color: var(--cb-rte-line);
}
[data-cb-ui] .is-rte-pop input[type=text]::placeholder {
  color: var(--cb-rte-text);
  opacity: 0.6;
}
[data-cb-ui] .is-rte-pop select {
  color: var(--cb-rte-text);
  background: var(--cb-rte-field-bg);
}
[data-cb-ui] .is-rte-pop .is-rangeslider {
  background: var(--cb-rte-slider-track);
}
[data-cb-ui] .is-rte-pop .is-rangeslider::-webkit-slider-thumb {
  background: var(--cb-rte-slider-thumb);
}
[data-cb-ui] .is-rte-pop .is-rangeslider::-moz-range-thumb {
  background: var(--cb-rte-slider-thumb);
}
[data-cb-ui] .is-rte-pop .is-label {
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 2;
  padding: 6px 0 1px;
  text-align: center;
}
[data-cb-ui] .is-rte-pop .is-label.separator {
  margin-top: 5px;
  border-top: var(--cb-rte-line) 1px solid;
}
[data-cb-ui] .is-rte-pop.active {
  animation-name: formatting-slide-out;
  animation-duration: 100ms;
  animation-fill-mode: forwards;
}
@keyframes formatting-slide-out {
  from {
    height: 0px;
  }
  to {
    height: 49px;
  }
}
[data-cb-ui] .is-rte-pop.deactive {
  animation-name: formatting-slide-in;
  animation-duration: 100ms;
  animation-fill-mode: forwards;
}
@keyframes formatting-slide-in {
  from {
    height: 49px;
  }
  to {
    height: 0px;
  }
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options {
  overflow: hidden;
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options.active {
  animation-name: paragraph-slide-out;
}
@keyframes paragraph-slide-out {
  from {
    height: 0;
  }
  to {
    height: 277px;
  }
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options.deactive {
  animation-name: paragraph-slide-in;
}
@keyframes paragraph-slide-in {
  from {
    height: 277px;
  }
  to {
    height: 0;
  }
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul {
  width: 242px;
  padding: 1px 9px 9px;
  box-sizing: border-box;
  overflow: hidden;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li {
  cursor: pointer;
  overflow: hidden;
  padding: 5px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li.on {
  background: var(--cb-rte-fill-active);
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li:hover, [data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li:focus {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li > * {
  text-transform: none !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li > *:not(p) {
  transform: scale(0.8);
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li h1 {
  font-size: 2.5rem !important;
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li h2 {
  font-size: 2rem !important;
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li h3 {
  font-size: 1.73rem !important;
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li h4 {
  font-size: 1.5rem !important;
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li h5 {
  font-size: 1.25rem !important;
}
[data-cb-ui] .is-rte-pop.rte-paragraph-options > ul > li h6 {
  font-size: 1rem !important;
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options > div {
  width: 233px;
  flex-direction: column;
  padding: 1px 10px 12px 13px;
  box-sizing: border-box;
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options button {
  width: 39px;
  height: 28.2px;
  margin: 1px;
  box-shadow: none;
  background: transparent;
  font-size: 12px;
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options button.on {
  background: var(--cb-rte-fill-active);
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options button:hover {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options button:focus {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options.active {
  animation-name: textsetting-slide-out;
}
@keyframes textsetting-slide-out {
  from {
    height: 0;
  }
  to {
    height: 372px;
  }
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options.deactive {
  animation-name: textsetting-slide-in;
}
@keyframes textsetting-slide-in {
  from {
    height: 372px;
  }
  to {
    height: 0;
  }
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options.simple > div {
  width: 224px;
  padding: 1px 12px 12px 12px;
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options.simple button {
  width: 38px;
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options.simple .label-fontweight,
[data-cb-ui] .is-rte-pop.rte-textsetting-options.simple .rte-fontweight-options {
  display: none !important;
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options.simple .is-label {
  padding: 8px 0 2px;
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options.simple .is-label.separator {
  margin-top: 5px;
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options.simple.active {
  animation-name: textsetting2-slide-out;
}
[data-cb-ui] .is-rte-pop.rte-textsetting-options.simple.deactive {
  animation-name: textsetting2-slide-in;
}
@keyframes textsetting2-slide-out {
  from {
    height: 0;
  }
  to {
    height: 288px;
  }
}
@keyframes textsetting2-slide-in {
  from {
    height: 288px;
  }
  to {
    height: 0;
  }
}
[data-cb-ui] .is-rte-pop.rte-formatting-options button {
  box-shadow: none;
  background: transparent;
}
[data-cb-ui] .is-rte-pop.rte-formatting-options button.on {
  background: var(--cb-rte-fill-active);
}
[data-cb-ui] .is-rte-pop.rte-formatting-options button:hover {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-pop.rte-list-options button {
  box-shadow: none;
  background: transparent;
}
[data-cb-ui] .is-rte-pop.rte-list-options button.on {
  background: var(--cb-rte-fill-active);
}
[data-cb-ui] .is-rte-pop.rte-list-options button:hover {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-pop.rte-align-options button {
  box-shadow: none;
  background: transparent;
}
[data-cb-ui] .is-rte-pop.rte-align-options button.on {
  background: var(--cb-rte-fill-active);
}
[data-cb-ui] .is-rte-pop.rte-align-options button:hover {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-pop.rte-color-picker {
  width: auto;
  flex-direction: column;
}
[data-cb-ui] .is-rte-pop.rte-color-picker > div {
  padding: 0;
}
[data-cb-ui] .is-rte-pop.rte-color-picker .is-pop-tabs > div {
  background: var(--cb-rte-field-bg);
  color: var(--cb-rte-text);
}
[data-cb-ui] .is-rte-pop.rte-color-picker .is-pop-tabs > div.active {
  background: transparent;
}
[data-cb-ui] .is-rte-pop.rte-color-picker button {
  background-color: transparent;
  box-shadow: var(--cb-shadow);
  border-radius: 0px;
}
[data-cb-ui] .is-rte-pop.rte-color-picker button:hover {
  background: transparent;
}
[data-cb-ui] .is-rte-pop.rte-color-picker button:focus {
  outline-offset: -2px;
}
[data-cb-ui] .is-rte-pop.rte-color-picker input[type=text]:focus {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: -2px;
}
[data-cb-ui] .is-rte-pop.rte-color-picker .is-pop-tabs {
  padding: 3px 12px 0;
  box-sizing: border-box;
}
[data-cb-ui] .is-rte-pop.rte-color-picker .rte-color-picker-area > div {
  padding-top: 5px !important;
}
[data-cb-ui] .is-rte-pop.rte-icon-options {
  width: 270px;
}
[data-cb-ui] .is-rte-pop.rte-icon-options #inpRteIconSearch {
  height: 40px;
  flex: none;
}
[data-cb-ui] .is-rte-pop.rte-icon-options > div {
  flex-direction: column;
  width: 100%;
  padding: 0;
}
[data-cb-ui] .is-rte-pop.rte-icon-options > div .div-icon-list {
  width: 100%;
  height: 100%;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-cb-ui] .is-rte-pop.rte-icon-options > div .div-icon-list button {
  font-size: 16px;
  width: 50px;
  height: 40px;
  outline-offset: -2px;
}
[data-cb-ui] .is-rte-pop.rte-icon-options.active {
  animation-name: icon-slide-out;
}
@keyframes icon-slide-out {
  from {
    height: 0;
  }
  to {
    height: 280px;
  }
}
[data-cb-ui] .is-rte-pop.rte-icon-options.deactive {
  animation-name: icon-slide-in;
}
@keyframes icon-slide-in {
  from {
    height: 280px;
  }
  to {
    height: 0;
  }
}
[data-cb-ui] .is-rte-pop.rte-fontfamily-options {
  width: 260px;
}
[data-cb-ui] .is-rte-pop.rte-fontfamily-options .div-font-list {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
[data-cb-ui] .is-rte-pop.rte-fontfamily-options iframe {
  margin: 1px 0 0;
  width: 100%;
  max-width: 260px;
  height: 100%;
  border: none;
}
[data-cb-ui] .is-rte-pop.rte-fontfamily-options.active {
  animation-name: fontfamily-slide-out;
}
@keyframes fontfamily-slide-out {
  from {
    height: 0;
  }
  to {
    height: 263px;
  }
}
[data-cb-ui] .is-rte-pop.rte-fontfamily-options.deactive {
  animation-name: fontfamily-slide-in;
}
@keyframes fontfamily-slide-in {
  from {
    height: 263px;
  }
  to {
    height: 0;
  }
}
[data-cb-ui] .is-rte-pop.rte-customtag-options.active {
  animation-name: customtag-slide-out;
}
@keyframes customtag-slide-out {
  from {
    height: 0;
  }
  to {
    height: 125px;
  }
}
[data-cb-ui] .is-rte-pop.rte-customtag-options.deactive {
  animation-name: customtag-slide-in;
}
@keyframes customtag-slide-in {
  from {
    height: 125px;
  }
  to {
    height: 0;
  }
}
[data-cb-ui] .is-rte-pop.rte-customtag-options > div {
  width: 180px;
  padding: 1px 9px 9px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  flex-direction: column;
}
[data-cb-ui] .is-rte-pop.rte-customtag-options > div button {
  font-size: 11px;
  width: 100%;
  box-shadow: none;
  background: transparent;
  flex: none;
}
[data-cb-ui] .is-rte-pop.rte-customtag-options > div button:hover {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-pop.rte-customtag-options > div button:focus {
  background: var(--cb-rte-fill-hover);
}
[data-cb-ui] .is-rte-pop.rte-zoom-options > div {
  width: 224px;
  flex-direction: column;
  padding: 1px 12px 12px 12px;
  box-sizing: border-box;
}
[data-cb-ui] .is-rte-pop.rte-zoom-options.active {
  animation-name: zoomsetting-slide-out;
}
@keyframes zoomsetting-slide-out {
  from {
    height: 0;
  }
  to {
    height: 95px;
  }
}
[data-cb-ui] .is-rte-pop.rte-zoom-options.deactive {
  animation-name: zoomsetting-slide-in;
}
@keyframes zoomsetting-slide-in {
  from {
    height: 78px;
  }
  to {
    height: 0;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop {
  height: auto;
  width: 0;
  flex-direction: column;
  box-shadow: var(--cb-shadow);
}
[data-cb-ui] [toolbarleft] .is-rte-pop > div {
  flex-direction: column;
  padding: 9px 9px 9px 1px;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.active {
  animation-name: formatting-leftslide-out;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
}
@keyframes formatting-leftslide-out {
  from {
    width: 0;
  }
  to {
    width: 55px;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.deactive {
  animation-name: formatting-leftslide-in;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
}
@keyframes formatting-leftslide-in {
  from {
    width: 55px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-paragraph-options.active {
  animation-name: paragraph-leftslide-out;
}
@keyframes paragraph-leftslide-out {
  from {
    width: 0;
  }
  to {
    width: 250px;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-paragraph-options.deactive {
  animation-name: paragraph-leftslide-in;
}
@keyframes paragraph-leftslide-in {
  from {
    width: 250px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-paragraph-options > div {
  width: 245px;
  padding: 9px;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-textsetting-options.active {
  animation-name: textsetting-leftslide-out;
}
@keyframes textsetting-leftslide-out {
  from {
    width: 0;
  }
  to {
    width: 213px;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-textsetting-options.deactive {
  animation-name: textsetting-leftslide-in;
}
@keyframes textsetting-leftslide-in {
  from {
    width: 213px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options {
  height: 260px;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options #inpRteFontSearch {
  height: 40px;
  flex: none;
  text-align: center;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options > div {
  flex-direction: column;
  width: 100%;
  height: 320px;
  padding: 0;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list {
  width: 100%;
  height: 220px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list button {
  font-size: 16px;
  width: 100%;
  height: 40px;
  outline-offset: -2px;
  flex: none;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list button img {
  height: 24px;
  pointer-events: none;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list button.hidden {
  display: none;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options iframe {
  margin: 9px 0 9px 0;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options.active {
  animation-name: fontfamily-leftslide-out;
}
@keyframes fontfamily-leftslide-out {
  from {
    width: 0;
  }
  to {
    width: 260px;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-fontfamily-options.deactive {
  animation-name: fontfamily-leftslide-in;
}
@keyframes fontfamily-leftslide-in {
  from {
    width: 260px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-customtag-options > div {
  width: 180px;
  height: 125px;
  padding: 9px 9px 9px;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-customtag-options.active {
  animation-name: customtag-leftslide-out;
}
@keyframes customtag-leftslide-out {
  from {
    width: 0;
  }
  to {
    width: 180px;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-customtag-options.deactive {
  animation-name: customtag-leftslide-in;
}
@keyframes customtag-leftslide-in {
  from {
    width: 180px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-color-picker {
  height: 452px;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-color-picker .is-pop-tabs {
  flex-direction: row;
  padding: 11px 12px 0;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-color-picker .rte-color-picker-area {
  padding: 0;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-icon-options {
  height: 320px;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-icon-options #inpRteIconSearch {
  height: 40px;
  flex: none;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-icon-options > div {
  flex-direction: column;
  width: 100%;
  height: 320px;
  padding: 0;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-icon-options > div .div-icon-list {
  width: 100%;
  height: 100%;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-icon-options > div .div-icon-list button {
  font-size: 16px;
  width: 50px;
  height: 40px;
  outline-offset: -2px;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-icon-options iframe {
  margin: 9px 0 9px 0;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-icon-options.active {
  animation-name: icon-leftslide-out;
}
@keyframes icon-leftslide-out {
  from {
    width: 0;
  }
  to {
    width: 280px;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-icon-options.deactive {
  animation-name: icon-leftslide-in;
}
@keyframes icon-leftslide-in {
  from {
    width: 280px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-zoom-options > div {
  width: 224px;
  flex-direction: column;
  padding: 1px 12px 12px 12px;
  box-sizing: border-box;
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-zoom-options.active {
  animation-name: zoomsetting-leftslide-out;
}
@keyframes zoomsetting-leftslide-out {
  from {
    width: 0;
  }
  to {
    width: 225px;
  }
}
[data-cb-ui] [toolbarleft] .is-rte-pop.rte-zoom-options.deactive {
  animation-name: zoomsetting-leftslide-in;
}
@keyframes zoomsetting-leftslide-in {
  from {
    width: 225px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop {
  height: auto;
  width: 0;
  flex-direction: column;
  box-shadow: var(--cb-shadow);
}
[data-cb-ui] [toolbarright] .is-rte-pop > div {
  flex-direction: column;
  padding: 9px 2px 9px 9px;
}
[data-cb-ui] [toolbarright] .is-rte-pop.active {
  animation-name: formatting-rightslide-out;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
}
@keyframes formatting-rightslide-out {
  from {
    width: 0;
  }
  to {
    width: 55px;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.deactive {
  animation-name: formatting-rightslide-in;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
}
@keyframes formatting-rightslide-in {
  from {
    width: 55px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-paragraph-options.active {
  animation-name: paragraph-rightslide-out;
}
@keyframes paragraph-rightslide-out {
  from {
    width: 0;
  }
  to {
    width: 250px;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-paragraph-options.deactive {
  animation-name: paragraph-rightslide-in;
}
@keyframes paragraph-rightslide-in {
  from {
    width: 250px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-paragraph-options > div {
  width: 245px;
  padding: 9px;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-textsetting-options.active {
  animation-name: textsetting-rightslide-out;
}
@keyframes textsetting-rightslide-out {
  from {
    width: 0;
  }
  to {
    width: 225px;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-textsetting-options.deactive {
  animation-name: textsetting-rightslide-in;
}
@keyframes textsetting-rightslide-in {
  from {
    width: 225px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options {
  height: 260px;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options #inpRteFontSearch {
  height: 40px;
  flex: none;
  text-align: center;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options > div {
  flex-direction: column;
  width: 100%;
  height: 320px;
  padding: 0;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list {
  width: 100%;
  height: 220px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list button {
  font-size: 16px;
  width: 100%;
  height: 40px;
  outline-offset: -2px;
  flex: none;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list button img {
  height: 24px;
  pointer-events: none;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list button.hidden {
  display: none;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options iframe {
  margin: 9px 0 9px 0;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options.active {
  animation-name: fontfamily-leftslide-out;
}
@keyframes fontfamily-leftslide-out {
  from {
    width: 0;
  }
  to {
    width: 260px;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-fontfamily-options.deactive {
  animation-name: fontfamily-leftslide-in;
}
@keyframes fontfamily-leftslide-in {
  from {
    width: 260px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-customtag-options > div {
  width: 180px;
  height: 125px;
  padding: 9px 9px 9px;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-customtag-options.active {
  animation-name: customtag-rightslide-out;
}
@keyframes customtag-rightslide-out {
  from {
    width: 0;
  }
  to {
    width: 180px;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-customtag-options.deactive {
  animation-name: customtag-rightslide-in;
}
@keyframes customtag-rightslide-in {
  from {
    width: 180px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-icon-options {
  height: 320px;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-icon-options > div {
  flex-direction: column;
  width: 100%;
  height: 320px;
  padding: 0;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-icon-options > div .div-icon-list {
  width: 100%;
  height: 100%;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-icon-options > div .div-icon-list button {
  font-size: 16px;
  width: 50px;
  height: 40px;
  outline-offset: -2px;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-icon-options iframe {
  margin: 9px 0 9px 0;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-icon-options.active {
  animation-name: icon-rightslide-out;
}
@keyframes icon-rightslide-out {
  from {
    width: 0;
  }
  to {
    width: 280px;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-icon-options.deactive {
  animation-name: icon-rightslide-in;
}
@keyframes icon-rightslide-in {
  from {
    width: 280px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-color-picker {
  height: 452px;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-color-picker .is-pop-tabs {
  flex-direction: row;
  padding: 11px 12px 0;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-color-picker .rte-color-picker-area {
  padding: 0;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-zoom-options > div {
  width: 224px;
  flex-direction: column;
  padding: 1px 12px 12px 12px;
  box-sizing: border-box;
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-zoom-options.active {
  animation-name: zoomsetting-rightslide-out;
}
@keyframes zoomsetting-rightslide-out {
  from {
    width: 0;
  }
  to {
    width: 225px;
  }
}
[data-cb-ui] [toolbarright] .is-rte-pop.rte-zoom-options.deactive {
  animation-name: zoomsetting-rightslide-in;
}
@keyframes zoomsetting-rightslide-in {
  from {
    width: 225px;
  }
  to {
    width: 0;
  }
}
[data-cb-ui] .is-rte-tool button:empty {
  display: none;
}
[data-cb-ui] .is-pop-tabs {
  display: flex;
  width: 100%;
  margin-bottom: 5px;
}
[data-cb-ui] .is-pop-tabs > div {
  background: var(--cb-field-bg);
  width: 50%;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--cb-text);
}
[data-cb-ui] .is-pop-tabs > div.is-pop-tab-item {
  cursor: pointer;
}
[data-cb-ui] .is-pop-tabs > div.active {
  background: transparent;
  cursor: auto;
}
[data-cb-ui] .is-pop-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
}
[data-cb-ui] .is-pop-overlay.pop1 {
  z-index: 10005 !important;
}
[data-cb-ui] .is-pop-overlay.pop2 {
  z-index: 10006 !important;
}
[data-cb-ui] .is-pop-overlay.pop3 {
  z-index: 10007 !important;
}
[data-cb-ui] .is-pop-overlay.pop4 {
  z-index: 10008 !important;
}
[data-cb-ui] .is-pop {
  display: none;
  z-index: 10003;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--cb-surface);
  border: 1px solid var(--cb-line-3);
  box-shadow: var(--cb-shadow-2);
  outline: none;
  border-radius: 10px;
  overflow: hidden;
}
[data-cb-ui] .is-pop:hover {
  z-index: 10003;
}
[data-cb-ui] .is-pop.arrow-top:after, [data-cb-ui] .is-pop.arrow-top:before {
  bottom: 100%;
  left: 25px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  top: auto;
}
[data-cb-ui] .is-pop.arrow-top:after {
  border-color: transparent;
  border-bottom-color: var(--cb-surface);
  border-width: 7px;
  margin-left: -7px;
}
[data-cb-ui] .is-pop.arrow-top:before {
  border-color: transparent;
  border-bottom-color: var(--cb-line-3);
  border-width: 8px;
  margin-left: -8px;
}
[data-cb-ui] .is-pop.arrow-top.right:after, [data-cb-ui] .is-pop.arrow-top.right:before {
  left: auto;
}
[data-cb-ui] .is-pop.arrow-top.right:after {
  right: 19px;
}
[data-cb-ui] .is-pop.arrow-top.right:before {
  right: 18px;
}
[data-cb-ui] .is-pop.arrow-top.left:after, [data-cb-ui] .is-pop.arrow-top.left:before {
  right: auto;
}
[data-cb-ui] .is-pop.arrow-top.left:after {
  left: 18px;
}
[data-cb-ui] .is-pop.arrow-top.left:before {
  left: 18px;
}
[data-cb-ui] .is-pop.arrow-top.center:after, [data-cb-ui] .is-pop.arrow-top.center:before {
  left: calc(50% + 3px);
}
[data-cb-ui] .is-pop.arrow-left:after, [data-cb-ui] .is-pop.arrow-left:before {
  right: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
[data-cb-ui] .is-pop.arrow-left:after {
  border-color: transparent;
  border-right-color: var(--cb-surface);
  border-width: 7px;
  margin-top: -7px;
}
[data-cb-ui] .is-pop.arrow-left:before {
  border-color: transparent;
  border-right-color: var(--cb-line-3);
  border-width: 8px;
  margin-top: -8px;
}
[data-cb-ui] .is-pop.arrow-left.bottom:after, [data-cb-ui] .is-pop.arrow-left.bottom:before {
  top: calc(100% - 28px);
}
[data-cb-ui] .is-pop.arrow-right:after, [data-cb-ui] .is-pop.arrow-right:before {
  left: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
[data-cb-ui] .is-pop.arrow-right:after {
  border-color: transparent;
  border-left-color: var(--cb-surface);
  border-width: 7px;
  margin-top: -7px;
}
[data-cb-ui] .is-pop.arrow-right:before {
  border-color: transparent;
  border-left-color: var(--cb-line-3);
  border-width: 8px;
  margin-top: -8px;
}
[data-cb-ui] .is-pop.arrow-bottom:after, [data-cb-ui] .is-pop.arrow-bottom:before {
  top: 100%;
  left: calc(100% - 28px);
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
[data-cb-ui] .is-pop.arrow-bottom:after {
  border-color: transparent;
  border-top-color: var(--cb-surface);
  border-width: 7px;
  margin-left: -7px;
}
[data-cb-ui] .is-pop.arrow-bottom:before {
  border-color: transparent;
  border-top-color: var(--cb-line-3);
  border-width: 8px;
  margin-left: -8px;
}
[data-cb-ui] .is-pop.arrow-bottom.center:after, [data-cb-ui] .is-pop.arrow-bottom.center:before {
  left: calc(50% + 3px);
}
[data-cb-ui] .is-pop.pop1 {
  z-index: 10006 !important;
}
[data-cb-ui] .is-pop.pop2 {
  z-index: 10007 !important;
}
[data-cb-ui] .is-pop.pop2 {
  z-index: 10008 !important;
}
[data-cb-ui] .is-pop.pop2 {
  z-index: 10009 !important;
}
[data-cb-ui] .is-pop svg:not([fill]) {
  fill: var(--cb-text);
}
[data-cb-ui] .is-pop button {
  background-color: transparent;
}
[data-cb-ui] .is-pop button:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .is-pop button:disabled {
  opacity: 0.4;
  cursor: default;
}
[data-cb-ui] .is-pop button:disabled:hover {
  background: transparent;
}
[data-cb-ui] .is-pop.columnmore {
  flex-direction: column;
  /*
  button.cell-settings {
      width: 100px;
      height: 45px;
      margin-top: 10px;
      flex-direction: initial;
      justify-items: center;
      align-items: center;
      margin-bottom: 0px;
      margin-left: 7px;
      svg {
          width: 14px;
          height: 14px;
      }
      span {
          width: auto;
          height: auto;
          margin-left: 5px;
          margin-top: 1px;
          line-height: 12px;
      }
  }
  button.cell-locking {
      width: 70px;
      height: 45px;
      margin-top: 10px;
      flex-direction: initial;
      justify-items: center;
      align-items: center;
      margin-bottom: 0px;
      margin-left: 10px;
      svg {
          width: 14px;
          height: 14px;
          pointer-events: none;
          user-select: none;
      }
      span {
          width: auto;
          height: auto;
          margin-left: 5px;
          margin-top: 1px;
          line-height: 12px;
      }
  }
  button.cell-locking.on {
      background: rgb(0 0 0 / 5%) !important;
  }
  */
}
[data-cb-ui] .is-pop.columnmore > div {
  max-width: 190px;
  margin: 12px;
}
[data-cb-ui] .is-pop.columnmore button {
  width: 95px;
  height: 60px;
  text-align: center;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  flex-direction: column;
  box-shadow: none;
  border-radius: 6px;
}
[data-cb-ui] .is-pop.columnmore button span {
  display: inline-block;
  width: 95px;
  height: 24px;
}
[data-cb-ui] .is-pop.columnmore div.is-separator {
  width: 100%;
  border-top: var(--cb-line) 1px solid;
  margin-bottom: 10px;
  margin-top: 10px;
}
[data-cb-ui] .is-pop.rowmore {
  flex-direction: column;
}
[data-cb-ui] .is-pop.rowmore > div {
  width: 190px;
  margin: 12px;
}
[data-cb-ui] .is-pop.rowmore button {
  width: 95px;
  height: 60px;
  text-align: center;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  flex-direction: column;
  box-shadow: none;
  border-radius: 6px;
}
[data-cb-ui] .is-pop.rowmore button span {
  display: inline-block;
  width: 95px;
  height: 24px;
}
[data-cb-ui] .is-pop.rowmore div.is-separator {
  width: 100%;
  border-top: var(--cb-line) 1px solid;
  margin-bottom: 10px;
  margin-top: 10px;
}
[data-cb-ui] .is-pop.elmmore {
  flex-direction: column;
}
[data-cb-ui] .is-pop.elmmore > div {
  width: 190px;
  margin: 12px;
}
[data-cb-ui] .is-pop.elmmore button {
  width: 95px;
  height: 60px;
  text-align: center;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  flex-direction: column;
  box-shadow: none;
  border-radius: 6px;
}
[data-cb-ui] .is-pop.elmmore button span {
  display: inline-block;
  width: 95px;
  height: 24px;
}
[data-cb-ui] .is-pop.quickadd {
  width: 430px;
  box-sizing: border-box;
  transition: none;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
}
[data-cb-ui] .is-pop.quickadd button {
  float: left;
  width: 100px;
  height: 60px;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  flex-direction: column;
  box-shadow: none;
  border-radius: 6px;
}
[data-cb-ui] .is-pop.quickadd .pop-separator {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: var(--cb-line-2) 1px solid;
}
[data-cb-ui] .is-pop.quickadd button.add-more {
  width: 100%;
  height: 50px;
  flex-direction: initial;
  padding: 5px;
}
[data-cb-ui] .is-pop.quickadd.simple .add-headline {
  display: none;
}
[data-cb-ui] .is-pop.quickadd.simple .add-quote {
  display: none;
}
[data-cb-ui] .is-pop.quickadd.simple .add-table {
  display: none;
}
[data-cb-ui] .is-pop.quickadd.simple .add-code {
  display: none;
}
[data-cb-ui] .is-pop.quickadd.simple .add-form {
  display: none;
}
[data-cb-ui] .is-pop.quickadd.simple .add-map {
  display: none;
}
[data-cb-ui] .is-pop.quickadd.simple .add-youtube {
  display: none;
}
[data-cb-ui] .is-pop.quickadd.simple .add-video {
  display: none;
}
[data-cb-ui] .is-pop.quickadd.simple .add-more {
  display: none;
}
[data-cb-ui] .is-pop.quickadd.simple .pop-separator {
  display: none;
}
[data-cb-ui] .is-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  z-index: 10004;
  background: var(--cb-modal-overlay);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: var(--sans);
  font-weight: normal;
  outline: none;
}
[data-cb-ui] .pluginsettings {
  /* Spacing scale for the .cbx-* custom-editor helpers. Single source of
      truth — every helper derives its spacing from these, so plugin code
      never needs to set a margin/padding (and never should). */
  --cbx-space: 14px;
  /* between fields / rows inside a form or card */
  --cbx-card-gap: 9px;
  /* between cards (.cbx-item) in a list */
  --cbx-row-gap: 8px;
  /* between rows in a sub-stack (a stack of .cbx-row) */
  --cbx-label-gap: 5px;
  /* a label and the control directly under it */
  /* ── Plugin custom-editor (openContentEditor) layout helpers ──
      cbx = "ContentBuilder eXtension". Use these classes instead of inline
      styles so custom editors stay visually consistent. Nested here, each
      selector carries the .is-modal.pluginsettings weight, so it beats the
      panel's default full-width input/button rules without !important. */
  /* The item body is itself a stack, so its fields/rows/buttons space
      themselves — no per-element margins needed. */
  /* A labelled control (label + input/select/textarea) as one unit. The
      label→control gap is owned here, so every field — standalone or inside
      a .cbx-row — is spaced identically. */
  /* When a field's control is a nested stack (a labelled sub-group, e.g. a
      "Video Sources" section wrapping several source fields), the section
      label needs more room so it doesn't crowd the first sub-field's label.
      Use the standard vertical-rhythm space instead of the tight label gap. */
  /* Horizontal group (e.g. two prices side by side, or checkbox+field+delete).
      Children keep their natural width; add .cbx-grow to the one that expands. */
  /* Vertical stack with even spacing (repeatable items, or a whole form).
      Use this instead of hand-setting margins between children. */
  /* A stack that directly holds cards uses the tighter card gap (cards and
      fields want different spacing). Automatic — no modifier class to remember. */
  /* A stack whose children are ALL rows is a tight "sub-stack" (e.g. a list
      of feature rows). The :not(:has(> :not(.cbx-row))) guard means a normal
      form that merely contains one side-by-side .cbx-row field is NOT tightened
      — only an all-rows stack is. */
  /* .cbx-item is self-spacing (has its own margin-bottom so it works
      standalone). Inside a stack, the stack's gap owns the spacing instead,
      so we zero the item margin here — no doubling either way. This makes
      "every vertical list is a .cbx-stack" safe with no exceptions. */
  /* Drag-and-drop placeholder (pair with a sortable lib's ghostClass) */
  /* Drag handle for sortable items */
  /* Small thumbnail in an item head (media plugins) */
  /* Media preview inside an item body (media plugins) */
  /* Square box that renders an emoji / SVG / icon-font at size (icon plugins) */
  /* Compact square button — undoes the panel's button { width:100% } */
  /* Later in source than the panel's button:hover rule, so this ties on
      specificity and wins on order (keeps icon buttons from going gray). */
  /* A toggled icon button (e.g. an active format) — a neutral highlight to
      match the built-in toolbar's active state, not the accent color. The
      `button` prefix ties specificity with the :hover rule so the active
      state stays visible on hover too. */
  /* ── Rich-text field helpers (label + hint + toolbar + editable box) ──
      For custom editors that need a small formatting area. Reusable, so a
      plugin never inline-styles a contenteditable. */
  /* A quiet "remove" action pinned to the top-right of a panel */
  /* ── Auto-generated settings form (uigenerator.js, .cb-settings-*) ──
      Bring it onto the same --cbx-* spacing as the custom editor above so
      both halves of the panel match. uigenerator sets spacing/size inline,
      so a couple of !important are needed only to neutralise those; all
      actual spacing comes from the shared tokens + gap (container owns it). */
}
[data-cb-ui] .pluginsettings select {
  width: 100%;
  height: var(--cb-field-height);
}
[data-cb-ui] .pluginsettings input[type=text], [data-cb-ui] .pluginsettings input[type=number], [data-cb-ui] .pluginsettings input[type=email], [data-cb-ui] .pluginsettings input[type=url],
[data-cb-ui] .pluginsettings input[type=tel], [data-cb-ui] .pluginsettings input[type=search], [data-cb-ui] .pluginsettings input[type=password], [data-cb-ui] .pluginsettings input[type=date],
[data-cb-ui] .pluginsettings input[type=time], [data-cb-ui] .pluginsettings input[type=datetime-local], [data-cb-ui] .pluginsettings input[type=month], [data-cb-ui] .pluginsettings input[type=week] {
  font-size: 13px;
}
[data-cb-ui] .pluginsettings textarea {
  width: 100%;
  line-height: 1.4;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 13px;
}
[data-cb-ui] .pluginsettings button {
  background-color: var(--cb-btn-bg);
  /* #efefef */
  width: 100%;
  height: var(--cb-btn-height);
  margin: 0px;
}
[data-cb-ui] .pluginsettings button svg {
  width: 17px;
  height: 17px;
}
[data-cb-ui] .pluginsettings button.is-btn-color {
  width: 35px;
  height: 35px;
  padding: 0;
  margin: 4px 0 6px;
}
[data-cb-ui] .pluginsettings button:not(.is-btn-color):hover {
  background-color: var(--cb-btn-bg-hover);
  /* #ededed */
}
[data-cb-ui] .pluginsettings label {
  font-size: 13px;
  font-weight: 500;
  /* Stack the label text above its control with the shared gap. This
      covers the auto-generated form, where uigenerator puts the text and
      the control inside one <label> (no gap otherwise). */
  display: flex;
  flex-direction: column;
  gap: var(--cbx-label-gap);
  margin: 0;
}
[data-cb-ui] .pluginsettings label.checkbox {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  /* opt back into an inline checkbox + text row */
  gap: 3px;
  align-items: center;
}
[data-cb-ui] .pluginsettings .cbx-item {
  border: 1px solid var(--cb-item-border);
  border-radius: 6px;
  margin-bottom: var(--cbx-card-gap);
  background: var(--cb-item);
  overflow: hidden;
}
[data-cb-ui] .pluginsettings .cbx-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  box-sizing: border-box;
  min-height: 46px;
  background: var(--cb-item-head);
  cursor: pointer;
}
[data-cb-ui] .pluginsettings .cbx-item-head:hover {
  background: var(--cb-item-head-hover);
}
[data-cb-ui] .pluginsettings .cbx-item-head .cbx-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-cb-ui] .pluginsettings .cbx-item-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--cbx-space);
}
[data-cb-ui] .pluginsettings .cbx-field {
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .pluginsettings .cbx-field > label {
  margin: 0 0 var(--cbx-label-gap);
}
[data-cb-ui] .pluginsettings .cbx-field:has(> .cbx-stack) > label {
  margin-bottom: var(--cbx-space);
}
[data-cb-ui] .pluginsettings .cbx-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
[data-cb-ui] .pluginsettings .cbx-row > .cbx-grow {
  flex: 1;
  min-width: 0;
}
[data-cb-ui] .pluginsettings .cbx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cbx-space);
}
[data-cb-ui] .pluginsettings .cbx-stack:has(> .cbx-item) {
  gap: var(--cbx-card-gap);
}
[data-cb-ui] .pluginsettings .cbx-stack:has(> .cbx-row):not(:has(> :not(.cbx-row))) {
  gap: var(--cbx-row-gap);
}
[data-cb-ui] .pluginsettings .cbx-stack > .cbx-item {
  margin-bottom: 0;
}
[data-cb-ui] .pluginsettings .cbx-sortable-ghost {
  opacity: 0.4;
}
[data-cb-ui] .pluginsettings .cbx-drag {
  flex: 0 0 auto;
  cursor: move;
  color: var(--cb-text-3);
  /* #999 */
  font-size: 18px;
  line-height: 1;
  user-select: none;
}
[data-cb-ui] .pluginsettings .cbx-thumb {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
}
[data-cb-ui] .pluginsettings .cbx-preview {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
}
[data-cb-ui] .pluginsettings .cbx-iconpreview {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  border: 1px solid var(--cb-line-2);
  /* #eee */
  border-radius: 6px;
  background: var(--cb-content-preview);
  /* stays white on a colored dialog */
  overflow: hidden;
}
[data-cb-ui] .pluginsettings .cbx-iconpreview svg, [data-cb-ui] .pluginsettings .cbx-iconpreview i {
  max-width: 40px;
  max-height: 40px;
  font-size: 32px;
}
[data-cb-ui] .pluginsettings .cbx-iconbtn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
}
[data-cb-ui] .pluginsettings .cbx-iconbtn svg {
  width: 16px;
  height: 16px;
}
[data-cb-ui] .pluginsettings .cbx-iconbtn.is-danger {
  color: var(--cb-danger);
  /* was #dc2626; unifies with the editor delete red */
}
[data-cb-ui] .pluginsettings button.cbx-iconbtn:hover {
  background: var(--cb-fill-hover);
  /* rgba(0,0,0,.06) */
}
[data-cb-ui] .pluginsettings button.cbx-iconbtn.is-active {
  background: var(--cb-fill-active);
  /* ~rgba(0,0,0,.09) */
}
[data-cb-ui] .pluginsettings .cbx-hint {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cb-text-3);
  /* #888 */
}
[data-cb-ui] .pluginsettings .cbx-rte-field {
  display: flex;
  flex-direction: column;
  gap: var(--cbx-label-gap);
}
[data-cb-ui] .pluginsettings .cbx-rte-field > label {
  margin: 0;
  /* gap owns spacing */
}
[data-cb-ui] .pluginsettings .cbx-rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
[data-cb-ui] .pluginsettings .cbx-rte {
  min-height: 160px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px 13px;
  border: 1px solid var(--cb-line-4);
  /* #d1d1d1 */
  border-radius: 6px;
  background: var(--cb-content-preview);
  /* editable surface, white on any dialog */
  font-size: 14px;
  line-height: 1.6;
}
[data-cb-ui] .pluginsettings .cbx-rte.cbx-rte-code {
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
}
[data-cb-ui] .pluginsettings .cbx-stack:has(> .cbx-removebtn) {
  position: relative;
}
[data-cb-ui] .pluginsettings .cbx-removebtn {
  position: absolute;
  top: -12px;
  right: 0;
  width: auto;
  height: auto;
  padding: 6px;
  background: none;
  color: var(--cb-danger);
  /* was #dc2626 */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 1;
}
[data-cb-ui] .pluginsettings .cbx-removebtn svg {
  width: 15px;
  height: 15px;
}
[data-cb-ui] .pluginsettings button.cbx-removebtn:hover {
  background: var(--cb-danger-fill);
  /* was rgba(220,38,38,.09) */
}
[data-cb-ui] .pluginsettings .cb-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--cbx-space);
  /* flat form: gap between fields */
  margin-top: 0;
}
[data-cb-ui] .pluginsettings * ~ .cb-settings-form {
  margin-top: 20px;
}
[data-cb-ui] .pluginsettings .cb-settings-form:has(> .cb-settings-group) {
  gap: 24px;
  /* grouped form: more air between sections */
}
[data-cb-ui] .pluginsettings .cb-settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--cbx-space);
  /* group title + its fields */
}
[data-cb-ui] .pluginsettings .cb-settings-group-title {
  margin: 0;
  /* drop default <h3> margins; gap owns spacing */
}
[data-cb-ui] .pluginsettings .cb-settings-field {
  margin-bottom: 0 !important;
  /* kill uigenerator's inline 20px; gap owns spacing */
}
[data-cb-ui] .pluginsettings .cb-settings-field input[type=number] {
  width: 100% !important;
  /* kill inline 100px; match the full-width fields */
}
[data-cb-ui] .pluginsettings div[contenteditable=true]:focus-visible {
  outline: var(--focus-outline-color) 2px solid;
}
[data-cb-ui] .cb-colorbtn {
  width: var(--cb-field-height);
  height: var(--cb-field-height);
  padding: 0;
  border: 0;
  box-sizing: border-box;
  flex: none;
  overflow: hidden;
  border-radius: var(--cb-field-radius);
  background: transparent;
  cursor: pointer;
  box-shadow: none;
}
[data-cb-ui] .cb-colorbtn:hover {
  background: transparent;
}
[data-cb-ui] .cb-colorbtn > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}
[data-cb-ui] .cb-colorbtn.is-empty > span {
  background-color: #fff;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
[data-cb-ui] .cb-gradientbtn {
  width: var(--cb-field-height);
  height: var(--cb-field-height);
  padding: 0;
  border: 0;
  box-sizing: border-box;
  flex: none;
  border-radius: var(--cb-field-radius);
  border: 1px solid var(--cb-line-4);
  background-color: transparent !important;
  cursor: pointer;
}
[data-cb-ui] .cb-gradientbtn:hover {
  background: none;
}
[data-cb-ui] .cb-dim {
  display: flex;
  align-items: center;
  height: var(--cb-field-height);
  background: var(--cb-field-bg);
  border-radius: var(--cb-field-radius);
  overflow: hidden;
}
[data-cb-ui] .cb-dim input[type=text]:focus, [data-cb-ui] .cb-dim select:focus {
  outline: none;
}
[data-cb-ui] .cb-dim input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--cb-text);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 0 4px 0 11px;
  outline: none;
}
[data-cb-ui] .cb-dim input::placeholder {
  color: var(--cb-text-3);
  font-family: var(--sans);
}
[data-cb-ui] .cb-dim .cb-dim-sep {
  width: 1px;
  height: 18px;
  flex: none;
  background: var(--cb-line-4);
  opacity: 0.6;
}
[data-cb-ui] .cb-dim select {
  border: 0;
  background: transparent;
  color: var(--cb-text-2);
  font-size: 12px;
  height: 100%;
  padding: 0 6px;
  outline: none;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
[data-cb-ui] .cb-dim .cb-dim-u {
  color: var(--cb-text-3);
  font-size: 11px;
  padding: 0 9px;
  flex: none;
}
[data-cb-ui] .cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: var(--cb-field-height);
  padding: 5px 7px;
  border-radius: var(--cb-field-radius);
  background: var(--cb-field-bg);
  cursor: text;
}
[data-cb-ui] .cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 23px;
  padding: 0 3px 0 9px;
  border-radius: 5px;
  background: var(--cb-fill-hover);
  color: var(--cb-text);
  font-family: var(--mono);
  font-size: 11.5px;
}
[data-cb-ui] .cb-chip b {
  font-weight: 400;
}
[data-cb-ui] .cb-chip button {
  border: 0;
  background: transparent;
  color: var(--cb-text-3);
  cursor: pointer;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
[data-cb-ui] .cb-chip button:hover {
  background: rgba(0, 0, 0, 0.12);
  color: var(--cb-text);
}
[data-cb-ui] .cb-chips input.cb-chipinput {
  flex: 1;
  min-width: 64px;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--cb-text);
  font-family: var(--mono);
  font-size: 12px;
  height: 23px;
  padding: 0;
}
[data-cb-ui] .cb-chips input.cb-chipinput::placeholder {
  color: var(--cb-text-4);
  font-family: var(--sans);
}
[data-cb-ui] .cb-chips input.cb-chipinput:focus {
  outline: none;
}
[data-cb-ui] .cb-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--cb-field-bg);
  border-radius: 8px;
}
[data-cb-ui] .cb-seg > button {
  flex: 1;
  height: 30px;
  border-radius: 6px;
  background: transparent;
  color: var(--cb-text-2);
  font-size: 12.5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-seg > button:hover {
  color: var(--cb-text);
}
[data-cb-ui] .cb-seg > button.on {
  background: var(--cb-surface);
  color: var(--cb-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
[data-cb-ui] .cb-seg svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
[data-cb-ui] .cb-seg.is-inline {
  display: inline-flex;
  align-self: flex-start;
}
[data-cb-ui] .cb-seg.is-inline > button {
  flex: none;
  height: 26px;
  padding: 0 12px;
}
[data-cb-ui] .cb-sel {
  position: relative;
}
[data-cb-ui] .cb-sel select {
  width: 100%;
  height: var(--cb-field-height);
  border: 0;
  border-radius: var(--cb-field-radius);
  background: var(--cb-field-bg);
  color: var(--cb-text);
  font-size: 12.5px;
  padding: 0 28px 0 11px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-cb-ui] .cb-sel:after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  pointer-events: none;
  border-right: 1.5px solid var(--cb-text-3);
  border-bottom: 1.5px solid var(--cb-text-3);
  transform: translateY(-65%) rotate(45deg);
}
[data-cb-ui] .cb-tabs {
  display: flex;
  gap: 22px;
  padding: 6px 20px 0;
  border-bottom: 1px solid var(--cb-line);
  flex: 0 0 auto;
}
[data-cb-ui] .cb-tabs[role=tablist] > [role=tab] {
  display: inline-block;
  position: relative;
  width: auto;
  height: auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
  color: var(--cb-text-2);
  text-decoration: none;
  padding: 6px 1px 11px;
  margin: 0;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  outline-offset: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
[data-cb-ui] .cb-tabs[role=tablist] > [role=tab]:hover {
  color: var(--cb-text);
  background: none;
}
[data-cb-ui] .cb-tabs[role=tablist] > [role=tab][aria-selected=true] {
  color: var(--cb-text);
  border-bottom-color: var(--cb-text);
  background: none;
}
[data-cb-ui] .cb-tabs[role=tablist] > [role=tab]:focus-visible {
  outline: 2px solid var(--cb-accent-line);
  outline-offset: 2px;
  border-radius: 3px;
}
[data-cb-ui] .cb-tabs-scroller {
  position: relative;
  border-bottom: 1px solid var(--cb-line);
}
[data-cb-ui] .cb-tabs-scroller .cb-tabs {
  border: none;
}
[data-cb-ui] .cb-tabs.cb-tabs-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: -1px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-cb-ui] .cb-tabs.cb-tabs-scroll::-webkit-scrollbar {
  height: 0;
  width: 0;
}
[data-cb-ui] .cb-tabs.cb-tabs-scroll > [role=tab] {
  flex: 0 0 auto;
}
[data-cb-ui] .cb-tabs-scroller::before,
[data-cb-ui] .cb-tabs-scroller::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 58px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
[data-cb-ui] .cb-tabs-scroller::before {
  left: 0;
  background: linear-gradient(to right, var(--cb-surface) 40%, transparent);
}
[data-cb-ui] .cb-tabs-scroller::after {
  right: 0;
  background: linear-gradient(to left, var(--cb-surface) 40%, transparent);
}
[data-cb-ui] .cb-tabs-scroller.can-prev::before,
[data-cb-ui] .cb-tabs-scroller.can-next::after {
  opacity: 1;
}
[data-cb-ui] .cb-tabs-scroller > .cb-tabs-arrow {
  position: absolute;
  top: 0;
  bottom: 1px;
  height: auto;
  width: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--cb-text-2);
  cursor: pointer;
  z-index: 2;
  transition: color 0.15s ease;
}
[data-cb-ui] .cb-tabs-scroller.can-prev > .cb-tabs-arrow--prev,
[data-cb-ui] .cb-tabs-scroller.can-next > .cb-tabs-arrow--next {
  display: flex;
}
[data-cb-ui] .cb-tabs-scroller > .cb-tabs-arrow:hover {
  color: var(--cb-text);
}
[data-cb-ui] .cb-tabs-scroller > .cb-tabs-arrow svg {
  width: 17px;
  height: 17px;
}
[data-cb-ui] .cb-tabs-scroller > .cb-tabs-arrow--prev {
  left: 0;
}
[data-cb-ui] .cb-tabs-scroller > .cb-tabs-arrow--next {
  right: 0;
}
[data-cb-ui] .cb-symbols {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
[data-cb-ui] .cb-symbols-search {
  padding: 12px 20px 10px;
  flex: 0 0 auto;
}
[data-cb-ui] .cb-symbols-input {
  width: 100%;
  box-sizing: border-box;
}
[data-cb-ui] .cb-symbols-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 14px 16px;
}
[data-cb-ui] .cb-symbols-label {
  padding: 12px 6px 6px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cb-text-3);
}
[data-cb-ui] .cb-symbols-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 1px;
}
[data-cb-ui] .cb-symbols-grid > button {
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--cb-text);
  font-size: 19px;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-symbols-grid > button:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .cb-symbols-grid > button:active {
  background: var(--cb-fill-active);
}
[data-cb-ui] .cb-symbols-grid > button:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: -2px;
}
[data-cb-ui] .cb-symbols-empty {
  padding: 34px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--cb-text-3);
}
[data-cb-ui] .is-modal.symbols div.is-modal-content {
  width: 600px;
  padding: 0;
}
[data-cb-ui] .is-modal.symbols .cb-symbols {
  height: 460px;
}
[data-cb-ui] .is-modal.snippets .is-modal-content {
  overflow: hidden;
}
[data-cb-ui] .is-modal.snippets .is-modal-close {
  z-index: 1;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 0px;
  right: 0px;
  box-sizing: border-box;
  padding: 0;
  line-height: 32px;
  font-size: 12px;
  color: var(--cb-modal-bar-close);
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  background-color: transparent !important;
  border: none;
}
[data-cb-ui] .is-modal.snippets .snippet-cats {
  flex: none;
  border-bottom: 1px solid var(--cb-line);
  padding: 4px 30px 0;
  box-sizing: border-box;
  margin-top: 28px;
}
[data-cb-ui] .is-modal.snippets .cb-tabs {
  padding: 6px 5px 0;
}
[data-cb-ui] .is-modal.snippets .snippet-grid {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 28px 30px 40px;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 32px 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
[data-cb-ui] .is-modal.snippets .snippet-grid::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-cb-ui] .is-modal.snippets .snippet-grid::-webkit-scrollbar-track {
  background: transparent;
}
[data-cb-ui] .is-modal.snippets .snippet-grid::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-cb-ui] .is-modal.snippets .snippet-grid::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}
[data-cb-ui] .is-modal.snippets .snippet-item {
  width: 230px;
  min-height: 120px;
  cursor: pointer;
}
[data-cb-ui] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
[data-cb-ui] #chatPanel {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 500px;
  height: 600px;
  background: var(--cb-modal-bg);
  color: var(--cb-text);
  border: var(--cb-modal-border);
  border-radius: 12px;
  box-shadow: var(--cb-modal-shadow);
  display: flex;
  flex-direction: column;
  z-index: 10004;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-cb-ui] #chatPanel.hidden {
  opacity: 0;
  pointer-events: none;
}
[data-cb-ui] #chatPanel *:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 2px;
}
[data-cb-ui] #chatPanel .chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cb-line);
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
[data-cb-ui] #chatPanel .chat-header-content {
  flex: 1;
}
[data-cb-ui] #chatPanel .chat-header h1 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 2px;
  pointer-events: none;
}
[data-cb-ui] #chatPanel .chat-header p {
  font-size: 12px;
  opacity: 0.7;
  margin: 0;
  pointer-events: none;
}
[data-cb-ui] #chatPanel .header-actions {
  display: flex;
  gap: 4px;
}
[data-cb-ui] #chatPanel .close-button, [data-cb-ui] #chatPanel .settings-button {
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
  color: var(--cb-text);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
[data-cb-ui] #chatPanel .close-button:hover, [data-cb-ui] #chatPanel .settings-button:hover,
[data-cb-ui] #chatPanel .close-button:focus-visible, [data-cb-ui] #chatPanel .settings-button:focus-visible {
  background: var(--cb-fill-hover);
}
[data-cb-ui] #chatPanel .messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
[data-cb-ui] #chatPanel .messages::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-cb-ui] #chatPanel .messages::-webkit-scrollbar-track {
  background: transparent;
}
[data-cb-ui] #chatPanel .messages::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-cb-ui] #chatPanel .messages::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}
[data-cb-ui] #chatPanel .message {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-cb-ui] #chatPanel .message-header {
  font-size: 12px;
  font-weight: 500;
  color: var(--cb-text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
[data-cb-ui] #chatPanel .message-content {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}
[data-cb-ui] #chatPanel .message.user .message-content {
  background: var(--cb-fill);
  color: var(--cb-text);
}
[data-cb-ui] #chatPanel .message.assistant .message-content {
  background: var(--cb-chat-bubble-bg);
  color: var(--cb-chat-bubble-text);
}
[data-cb-ui] #chatPanel .message.assistant .message-content.streaming::after {
  content: "▊";
  animation: blink 1s infinite;
  margin-left: 2px;
}
[data-cb-ui] #chatPanel .message.assistant .message-content h1, [data-cb-ui] #chatPanel .message.assistant .message-content h2, [data-cb-ui] #chatPanel .message.assistant .message-content h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: 600;
}
[data-cb-ui] #chatPanel .message.assistant .message-content h1 {
  font-size: 18px;
}
[data-cb-ui] #chatPanel .message.assistant .message-content h2 {
  font-size: 16px;
}
[data-cb-ui] #chatPanel .message.assistant .message-content h3 {
  font-size: 14px;
}
[data-cb-ui] #chatPanel .message.assistant .message-content p {
  margin: 8px 0;
}
[data-cb-ui] #chatPanel .message.assistant .message-content ul, [data-cb-ui] #chatPanel .message.assistant .message-content ol {
  margin: 8px 0;
  padding-left: 24px;
}
[data-cb-ui] #chatPanel .message.assistant .message-content li {
  margin: 4px 0;
}
[data-cb-ui] #chatPanel .message.assistant .message-content code {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 13px;
}
[data-cb-ui] #chatPanel .message.assistant .message-content pre {
  background: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 8px 0;
}
[data-cb-ui] #chatPanel .message.assistant .message-content pre code {
  background: transparent;
  padding: 0;
}
[data-cb-ui] #chatPanel .message.assistant .message-content blockquote {
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  padding-left: 12px;
  margin: 8px 0;
  font-style: italic;
  opacity: 0.9;
}
[data-cb-ui] #chatPanel .message.assistant .message-content a {
  color: #fff;
  text-decoration: underline;
}
[data-cb-ui] #chatPanel .message.assistant .message-content strong {
  font-weight: 600;
}
[data-cb-ui] #chatPanel .input-area {
  padding: 16px 20px;
  border-top: 1px solid var(--cb-line);
  background: var(--cb-modal-bg);
  border-radius: 0 0 12px 12px;
}
[data-cb-ui] #chatPanel .input-wrapper {
  display: flex;
  gap: 5px;
  align-items: flex-end;
}
[data-cb-ui] #chatPanel .input-area textarea {
  flex: 1;
  border-radius: 8px;
  font-size: 14px;
  font-family: system-ui;
  line-height: 1.4;
  letter-spacing: 0;
  resize: none;
  min-height: 58px;
  max-height: 120px;
  padding: 8px 10px;
  box-sizing: border-box;
  background: var(--cb-field-bg);
  color: var(--cb-text);
  border: 1px solid var(--cb-line);
  transition: border-color 0.2s;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
[data-cb-ui] #chatPanel .input-area textarea::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-cb-ui] #chatPanel .input-area textarea::-webkit-scrollbar-track {
  background: transparent;
}
[data-cb-ui] #chatPanel .input-area textarea::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-cb-ui] #chatPanel .input-area textarea::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}
[data-cb-ui] #chatPanel .input-area textarea::placeholder {
  color: var(--cb-text-3);
  opacity: 1;
}
[data-cb-ui] #chatPanel .input-area button {
  width: 48px;
  height: 48px;
  background: var(--cb-fill);
  color: var(--cb-text);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
[data-cb-ui] #chatPanel .input-area button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
[data-cb-ui] #chatPanel .input-area button:hover:not(:disabled) {
  background: var(--cb-fill-hover);
}
[data-cb-ui] #chatPanel .loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--cb-fill);
  border-radius: 8px;
  font-size: 14px;
  color: var(--cb-text-2);
}
[data-cb-ui] #chatPanel .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--cb-line);
  border-top-color: var(--cb-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
[data-cb-ui] #chatPanel .error-message {
  padding: 12px 16px;
  background: var(--cb-danger-fill);
  border: 1px solid var(--cb-danger);
  border-radius: 8px;
  color: var(--cb-danger);
  font-size: 13px;
  margin-top: 8px;
}
[data-cb-ui] #chatPanel .task-indicator {
  font-size: 11px;
  color: var(--cb-text-2);
  font-style: italic;
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--cb-surface-2);
  border-radius: 4px;
  display: inline-block;
}
[data-cb-ui] #chatPanel .copy-button {
  position: absolute;
  top: 3px;
  right: 3px;
  background: var(--cb-fill);
  border: none;
  border-radius: 4px;
  padding: 0 8px;
  height: 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  font-size: 11px;
  color: inherit;
}
[data-cb-ui] #chatPanel .message:hover .copy-button, [data-cb-ui] #chatPanel .copy-button.copied {
  opacity: 1;
}
[data-cb-ui] #chatPanel .copy-button:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] #chatPanel .quick-image-size-button {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-fill);
  color: var(--cb-text);
}
[data-cb-ui] #chatPanel .quick-image-size-button:hover:not(:disabled) {
  background: var(--cb-fill-hover);
}
[data-cb-ui] #chatPanel .quick-image-size-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
[data-cb-ui] #chatPanel .image-size-popover {
  position: absolute;
  bottom: 72px;
  right: 68px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-line-3);
  border-radius: 8px;
  box-shadow: var(--cb-shadow-2);
  z-index: 10006;
  min-width: 160px;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
[data-cb-ui] #chatPanel .image-size-popover::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-cb-ui] #chatPanel .image-size-popover::-webkit-scrollbar-track {
  background: transparent;
}
[data-cb-ui] #chatPanel .image-size-popover::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-cb-ui] #chatPanel .image-size-popover::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}
[data-cb-ui] #chatPanel .size-options {
  padding: 8px;
}
[data-cb-ui] #chatPanel .size-option {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
  font-size: 14px;
}
[data-cb-ui] #chatPanel .size-option label, [data-cb-ui] #chatPanel .size-option input {
  cursor: pointer;
}
[data-cb-ui] #chatPanel .size-option input[type=radio] {
  margin-right: 8px;
}
[data-cb-ui] #chatPanel .size-option:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] #chatPanel .size-option.selected {
  background: var(--cb-accent-fill);
  font-weight: 500;
}
[data-cb-ui] #chatPanel .attach-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
[data-cb-ui] #chatPanel .attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
[data-cb-ui] #chatPanel .attachment-chips:empty {
  display: none;
}
[data-cb-ui] #chatPanel .attachment-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 200px;
  padding: 6px 8px;
  background: var(--cb-fill);
  border: 1px solid var(--cb-line);
  border-radius: 8px;
  font-size: 12px;
}
[data-cb-ui] #chatPanel .attachment-chip img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 auto;
}
[data-cb-ui] #chatPanel .attachment-chip .attachment-doc {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e11d2a;
  color: #fff;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  flex: 0 0 auto;
}
[data-cb-ui] #chatPanel .attachment-chip .attachment-doc.is-text {
  background: #4b5563;
}
[data-cb-ui] #chatPanel .attachment-chip .attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-cb-ui] #chatPanel .attachment-chip .attachment-remove {
  background: var(--cb-fill);
  border: none;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
  color: inherit;
}
[data-cb-ui] #chatPanel .attachment-chip .attachment-remove:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] #chatPanel.attach-dragover {
  outline: 2px dashed var(--focus-outline-color);
  outline-offset: -6px;
}
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
[data-cb-ui] #settingsOverlay {
  position: fixed;
  inset: 0;
  background: var(--cb-modal-overlay);
  z-index: 10004;
  display: none;
}
[data-cb-ui] #settingsOverlay.open {
  display: block;
}
[data-cb-ui] #settingsDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 480px;
  background: var(--cb-modal-bg);
  color: var(--cb-text);
  border: var(--cb-modal-border);
  border-radius: 12px;
  box-shadow: var(--cb-modal-shadow);
  z-index: 10005;
  display: none;
  pointer-events: auto;
}
[data-cb-ui] #settingsDialog.open {
  display: block;
}
[data-cb-ui] #settingsDialog .settings-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--cb-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
[data-cb-ui] #settingsDialog .settings-header h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  color: var(--cb-text);
}
[data-cb-ui] #settingsDialog .settings-content {
  padding: 24px;
  max-height: 450px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
[data-cb-ui] #settingsDialog .settings-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-cb-ui] #settingsDialog .settings-content::-webkit-scrollbar-track {
  background: transparent;
}
[data-cb-ui] #settingsDialog .settings-content::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
[data-cb-ui] #settingsDialog .settings-content::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}
[data-cb-ui] #settingsDialog .setting-group {
  margin-bottom: 24px;
}
[data-cb-ui] #settingsDialog .setting-group:last-child {
  margin-bottom: 0;
}
[data-cb-ui] #settingsDialog .setting-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--cb-text);
  margin-bottom: 8px;
}
[data-cb-ui] #settingsDialog .setting-description {
  font-size: 12px;
  color: var(--cb-text-2);
  margin-bottom: 12px;
  line-height: 1.5;
}
[data-cb-ui] #settingsDialog .cb-sel + .cb-sel {
  margin-top: 10px;
}
[data-cb-ui] #settingsDialog .settings-footer {
  padding: 16px 24px;
}
@media (max-width: 1024px) {
  [data-cb-ui] #chatPanel {
    width: calc(100% - 32px);
    height: 500px;
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
}
@media (max-width: 640px) {
  [data-cb-ui] #chatPanel {
    width: calc(100% - 16px);
    height: 400px;
    bottom: 8px;
    right: 8px;
    left: 8px;
  }
  [data-cb-ui] #settingsDialog {
    width: calc(100% - 32px);
  }
}
[data-cb-ui] .cb-searchreplace {
  padding: 18px 20px 20px;
}
[data-cb-ui] .cb-searchreplace input[type=text] {
  width: 100%;
  box-sizing: border-box;
}
[data-cb-ui] .cb-searchreplace .cb-sr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 16px;
}
[data-cb-ui] .cb-searchreplace .cb-sr-count {
  font-size: 11.5px;
  color: var(--cb-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-cb-ui] .cb-searchreplace .cb-sr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-cb-ui] .cb-searchreplace .cb-sr-spacer {
  flex: 1 1 auto;
}
[data-cb-ui] .cb-searchreplace .cb-sr-prev, [data-cb-ui] .cb-searchreplace .cb-sr-next {
  width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-searchreplace .cb-sr-prev svg, [data-cb-ui] .cb-searchreplace .cb-sr-next svg {
  width: 16px;
  height: 16px;
}
[data-cb-ui] .is-modal.searchreplace div.is-modal-content {
  width: 420px;
  padding: 0;
}
[data-cb-ui] .is-modal.cb-preview-modal div.is-modal-content {
  width: 100vw;
  height: 100vh;
  max-width: none;
  padding: 0;
  border-radius: 0;
}
[data-cb-ui] .is-modal.cb-preview-modal > .is-modal-content > .is-modal-close {
  width: 40px;
  height: 40px;
  min-width: 0;
  padding: 0;
  top: 0 !important;
  right: 0 !important;
  line-height: 32px;
  font-size: 16px;
  text-align: center;
  background: transparent;
  box-shadow: none;
  border: none;
  color: var(--cb-text-2);
}
[data-cb-ui] .is-modal.cb-preview-modal > .is-modal-content > .is-modal-close:hover {
  background: transparent;
}
[data-cb-ui] .is-modal.cb-preview-modal > .is-modal-content > .is-modal-close:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: -2px;
}
[data-cb-ui] .cb-preview {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--cb-surface);
}
[data-cb-ui] .cb-preview .cb-preview-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 42px 0 10px;
  border-bottom: 1px solid var(--cb-line-2);
}
[data-cb-ui] .cb-preview .cb-preview-spacer {
  flex: 1 1 auto;
}
[data-cb-ui] .cb-preview .cb-preview-ruler {
  flex: 0 0 auto;
  height: 30px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--cb-backdrop);
}
[data-cb-ui] .cb-preview .cb-preview-band {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
  background: var(--cb-segment);
  border-left: var(--cb-segment-line) 2px solid;
  border-right: var(--cb-segment-line) 2px solid;
  box-sizing: content-box;
}
[data-cb-ui] .cb-preview .cb-preview-band[data-w="1440"] {
  width: 1440px;
  border-left: none;
  border-right: none;
}
[data-cb-ui] .cb-preview .cb-preview-band[data-w="1024"] {
  width: 1024px;
}
[data-cb-ui] .cb-preview .cb-preview-band[data-w="768"] {
  width: 768px;
}
[data-cb-ui] .cb-preview .cb-preview-band[data-w="425"] {
  width: 425px;
}
[data-cb-ui] .cb-preview .cb-preview-band[data-w="375"] {
  width: 375px;
}
[data-cb-ui] .cb-preview .cb-preview-band[data-w="320"] {
  width: 320px;
}
[data-cb-ui] .cb-preview .cb-preview-band.is-selected {
  background: var(--cb-segment-selected);
}
[data-cb-ui] .cb-preview .cb-preview-band.is-hover {
  background: var(--cb-segment-hover);
}
[data-cb-ui] .cb-preview .cb-preview-band:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: -2px;
}
[data-cb-ui] .cb-preview .cb-preview-readout {
  flex: 0 0 auto;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}
[data-cb-ui] .cb-preview .cb-preview-stage {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--cb-backdrop);
}
[data-cb-ui] .cb-preview .cb-preview-viewport {
  position: relative;
  height: 100%;
  margin: 0 auto;
  max-width: var(--cb-preview-w, 100%);
  background: var(--cb-surface);
  transition: max-width 0.18s cubic-bezier(0.32, 0.72, 0.3, 1);
}
[data-cb-ui] .cb-preview .cb-preview-viewport iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: var(--cb-content-preview);
}
[data-cb-ui] .cb-preview .cb-preview-viewport.is-dragging {
  transition: none;
}
[data-cb-ui] .cb-preview .cb-preview-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11px;
  z-index: 3;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
[data-cb-ui] .cb-preview .cb-preview-grip.is-left {
  left: 0;
}
[data-cb-ui] .cb-preview .cb-preview-grip.is-right {
  right: 0;
}
[data-cb-ui] .cb-preview .cb-preview-grip::after {
  content: "";
  width: 3px;
  height: 36px;
  border-radius: 2px;
  background: var(--cb-text-4);
}
[data-cb-ui] .cb-preview .cb-preview-grip:hover::after {
  background: var(--cb-accent);
}
[data-cb-ui] .cb-preview .cb-preview-grip:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: -1px;
  border-radius: 3px;
}
[data-cb-ui] .cb-preview .cb-preview-grip:focus-visible::after {
  background: var(--cb-accent);
}
[data-cb-ui] .cb-preview .cb-preview-tab, [data-cb-ui] .cb-preview .cb-preview-refresh {
  padding: 0 10px;
}
[data-cb-ui] .cb-preview .cb-preview-tab:hover, [data-cb-ui] .cb-preview .cb-preview-refresh:hover {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  [data-cb-ui] .cb-preview .cb-preview-viewport {
    transition: none;
  }
}
[data-cb-ui] .cb-field-label {
  display: block;
  font-size: 11.5px;
  color: var(--cb-text-2);
  margin-bottom: 6px;
}
[data-cb-ui] .cb-fhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
[data-cb-ui] .cb-fhead .cb-field-label, [data-cb-ui] .cb-fhead .cb-grouplabel {
  margin: 0;
  flex: none;
}
[data-cb-ui] .cb-readout {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--cb-text-2);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-cb-ui] .cb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
[data-cb-ui] .cb-subnote {
  font-size: 11px;
  color: var(--cb-text-3);
}
[data-cb-ui] .cb-cs-fill {
  margin-top: 12px;
}
[data-cb-ui] .cb-switchrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--cb-field-gap);
}
[data-cb-ui] .cb-switchrow .lbl {
  font-size: 13px;
  color: var(--cb-text);
}
[data-cb-ui] .cb-switchrow .lbl small {
  display: block;
  color: var(--cb-text-3);
  font-size: 11px;
  margin-top: 1px;
}
[data-cb-ui] .cb-switchrow .switch {
  flex: none;
  width: 38px;
  height: 22px;
  margin: 0;
}
[data-cb-ui] .cb-switchrow .switch .slider:before {
  width: 18px;
  height: 18px;
  left: 2px;
  bottom: 2px;
}
[data-cb-ui] .cb-switchrow .switch input:checked + .slider:before {
  transform: translateX(16px);
}
[data-cb-ui] .cb-devrow {
  display: flex;
  gap: 6px;
  margin: 4px 0;
}
[data-cb-ui] .cb-devrow .input-device {
  flex: 1;
  height: 38px;
  border-radius: 7px;
  background: var(--cb-field-bg);
  color: var(--cb-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-devrow .input-device:hover {
  color: var(--cb-text-2);
}
[data-cb-ui] .cb-devrow .input-device.on {
  background: var(--cb-fill-active);
  color: var(--cb-text);
}
[data-cb-ui] .cb-devrow .input-device svg {
  width: 17px;
  height: 17px;
}
[data-cb-ui] .cb-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 3px;
  background: var(--cb-slider-track);
  outline: none;
  cursor: pointer;
  margin: 0;
  width: 100%;
}
[data-cb-ui] .cb-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cb-slider-thumb);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-cb-ui] .cb-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--cb-slider-thumb);
  cursor: pointer;
}
[data-cb-ui] .cb-elmgeneral button:not(.cb-colorbtn):not(.cb-gradientbtn),
[data-cb-ui] .cb-elmbox button:not(.cb-colorbtn):not(.cb-gradientbtn),
[data-cb-ui] .cb-elmspacing button:not(.cb-colorbtn):not(.cb-gradientbtn),
[data-cb-ui] .cb-elmtext button:not(.cb-colorbtn):not(.cb-gradientbtn),
[data-cb-ui] .cb-elmborder button:not(.cb-colorbtn):not(.cb-gradientbtn),
[data-cb-ui] .cb-elmcorner button:not(.cb-colorbtn):not(.cb-gradientbtn),
[data-cb-ui] .cb-elmshadow button:not(.cb-colorbtn):not(.cb-gradientbtn),
[data-cb-ui] .cb-elmlayout button:not(.cb-colorbtn):not(.cb-gradientbtn) {
  font-size: 13px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  border: none;
  border-radius: var(--cb-field-radius);
  color: var(--cb-text-2);
  cursor: pointer;
}
[data-cb-ui] .cb-elmgeneral {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmgeneral .cb-field {
  margin-bottom: var(--cb-field-gap);
}
[data-cb-ui] .cb-elmgeneral .cb-grouplabel {
  display: block;
  margin-bottom: 8px;
}
[data-cb-ui] .cb-elmgeneral div.is-separator {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--cb-line);
  margin: 6px 0 18px;
}
[data-cb-ui] .cb-elmgeneral .elm-bgimage-preview {
  max-width: 120px;
}
[data-cb-ui] .cb-elmgeneral .elm-bgimage-preview img {
  max-width: 100%;
  border-radius: var(--cb-field-radius);
}
[data-cb-ui] .cb-elmgeneral .elm-bgimage-preview:not(:empty) {
  margin-bottom: 2px;
}
[data-cb-ui] .cb-elmgeneral .cb-cs-imagerow {
  display: flex;
  gap: 6px;
}
[data-cb-ui] .cb-elmgeneral .cb-cs-imagerow .input-elm-bgimage {
  flex: 1;
}
[data-cb-ui] .cb-elmgeneral .cb-cs-imagerow button {
  height: 34px;
  background: var(--cb-field-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
[data-cb-ui] .cb-elmgeneral .cb-cs-imagerow button:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .cb-elmgeneral .cb-cs-imagerow button svg {
  width: 14px;
  height: 14px;
}
[data-cb-ui] .cb-elmgeneral .cb-cs-imagerow .input-select, [data-cb-ui] .cb-elmgeneral .cb-cs-imagerow .input-elm-bgremove, [data-cb-ui] .cb-elmgeneral .cb-cs-imagerow .input-elm-bgimageadjust {
  width: 40px;
  flex: none;
}
[data-cb-ui] .cb-elmbox {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmbox .cb-field {
  margin-bottom: 20px;
}
[data-cb-ui] .cb-elmbox .cb-field:last-child {
  margin-bottom: 2px;
}
[data-cb-ui] .cb-elmbox .cb-grouplabel {
  display: block;
  margin-bottom: 9px;
}
[data-cb-ui] .cb-elmbox .cb-eb-reveal {
  margin-top: 8px;
}
[data-cb-ui] .cb-elmbox .cb-eb-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
}
[data-cb-ui] .cb-elmbox .cb-eb-fld {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
[data-cb-ui] .cb-elmspacing {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmspacing .cb-field {
  margin-bottom: 22px;
}
[data-cb-ui] .cb-elmspacing .cb-grouplabel {
  display: block;
  margin-bottom: 10px;
}
[data-cb-ui] .cb-elmspacing .cb-sp-pad {
  display: grid;
  grid-template-columns: 66px 1fr 66px;
  grid-template-rows: 32px 1fr 32px;
  gap: 6px;
  width: 100%;
  max-width: 244px;
  height: 150px;
}
[data-cb-ui] .cb-elmspacing .cb-sp-pad.scrubbing {
  user-select: none;
  cursor: ns-resize;
}
[data-cb-ui] .cb-elmspacing .cb-sp-field {
  display: flex;
}
[data-cb-ui] .cb-elmspacing .cb-sp-field[data-side=top] {
  grid-area: 1/2/2/3;
}
[data-cb-ui] .cb-elmspacing .cb-sp-field[data-side=left] {
  grid-area: 2/1/3/2;
}
[data-cb-ui] .cb-elmspacing .cb-sp-field[data-side=right] {
  grid-area: 2/3/3/4;
}
[data-cb-ui] .cb-elmspacing .cb-sp-field[data-side=bottom] {
  grid-area: 3/2/4/3;
}
[data-cb-ui] .cb-elmspacing .cb-sp-value {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--cb-field-bg);
  color: var(--cb-text);
  border-radius: var(--cb-field-radius);
  text-align: center;
  font-size: 13.5px;
  cursor: ns-resize;
  outline: none;
}
[data-cb-ui] .cb-elmspacing .cb-sp-value:focus {
  cursor: text;
}
[data-cb-ui] .cb-elmspacing .cb-sp-value::placeholder {
  color: var(--cb-text-4);
}
[data-cb-ui] .cb-elmspacing .cb-sp-pad.is-auto .cb-sp-value {
  color: var(--cb-text-3);
  cursor: default;
  pointer-events: none;
}
[data-cb-ui] .cb-elmspacing .cb-sp-pad.linked .cb-sp-value {
  box-shadow: inset 0 0 0 1px var(--cb-accent-line);
}
[data-cb-ui] .cb-elmspacing .cb-sp-box {
  grid-area: 2/2/3/3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--cb-line-4);
  border-radius: 6px;
}
[data-cb-ui] .cb-elmspacing .cb-sp-caption {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--cb-text-3);
  pointer-events: none;
}
[data-cb-ui] .cb-elmspacing .cb-sp-link {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  color: var(--cb-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-elmspacing .cb-sp-link:hover {
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmspacing .cb-sp-link svg {
  width: 15px;
  height: 15px;
}
[data-cb-ui] .cb-elmspacing .cb-sp-box .cb-sp-link.active {
  background: var(--cb-accent-fill);
  color: var(--cb-accent);
}
[data-cb-ui] .cb-elmspacing .cb-sp-unit {
  margin-top: 12px;
}
[data-cb-ui] .cb-elmspacing .cb-sp-note {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--cb-text-3);
  margin: 6px 0 0;
}
[data-cb-ui] .cb-elmtext {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmtext .cb-field {
  margin-bottom: 16px;
}
[data-cb-ui] .cb-elmtext .cb-grouplabel {
  display: block;
  margin-bottom: 8px;
}
[data-cb-ui] .cb-elmtext .cb-tx-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
[data-cb-ui] .cb-elmtext .cb-tx-fld {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
[data-cb-ui] .cb-elmtext .cb-tx-fld .cb-colorbtn {
  margin-top: 0;
}
[data-cb-ui] .cb-elmtext .cb-tx-sel {
  position: relative;
}
[data-cb-ui] .cb-elmtext .cb-tx-sel select {
  width: 100%;
  height: var(--cb-field-height);
  border: 0;
  border-radius: var(--cb-field-radius);
  background: var(--cb-field-bg);
  color: var(--cb-text);
  font-size: 12.5px;
  padding: 0 26px 0 11px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-cb-ui] .cb-elmtext .cb-tx-sel:after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  pointer-events: none;
  border-right: 1.5px solid var(--cb-text-3);
  border-bottom: 1.5px solid var(--cb-text-3);
  transform: translateY(-65%) rotate(45deg);
}
[data-cb-ui] .cb-elmtext .cb-tx-toggles {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
[data-cb-ui] .cb-elmtext .cb-tx-tg {
  width: 32px;
  height: 32px;
  flex: none;
  background: var(--cb-fill);
  color: var(--cb-text-2);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-elmtext .cb-tx-tg:hover {
  background: var(--cb-fill-hover);
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmtext .cb-tx-tg.on {
  background: var(--cb-fill-active);
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmtext .cb-tx-b {
  font-weight: 800;
}
[data-cb-ui] .cb-elmtext .cb-tx-i {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
}
[data-cb-ui] .cb-elmtext .cb-tx-u {
  text-decoration: underline;
}
[data-cb-ui] .cb-elmtext .cb-tx-s {
  text-decoration: line-through;
}
[data-cb-ui] .cb-elmtext .cb-tx-case {
  width: auto;
  min-width: 30px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 600;
}
[data-cb-ui] .cb-elmtext .cb-tx-divider {
  width: 1px;
  align-self: stretch;
  margin: 3px 1px;
  background: var(--cb-line);
}
[data-cb-ui] .cb-elmborder {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmborder .cb-field {
  margin-bottom: 16px;
}
[data-cb-ui] .cb-elmborder .cb-grouplabel {
  display: block;
}
[data-cb-ui] .cb-elmborder .cb-bd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2px;
}
[data-cb-ui] .cb-elmborder .cb-bd-now {
  font-size: 11px;
  color: var(--cb-text-3);
}
[data-cb-ui] .cb-elmborder .cb-bd-sbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
}
[data-cb-ui] .cb-elmborder .cb-bd-rect {
  position: relative;
  width: 186px;
  height: 62px;
  border: 5px solid var(--cb-line-4);
  border-radius: 9px;
  transition: border-color 0.12s;
}
[data-cb-ui] .cb-elmborder .cb-bd-rect[data-sel=all] {
  border-color: var(--cb-text-2);
}
[data-cb-ui] .cb-elmborder .cb-bd-rect[data-sel=top] {
  border-top-color: var(--cb-text-2);
}
[data-cb-ui] .cb-elmborder .cb-bd-rect[data-sel=bottom] {
  border-bottom-color: var(--cb-text-2);
}
[data-cb-ui] .cb-elmborder .cb-bd-rect[data-sel=left] {
  border-left-color: var(--cb-text-2);
}
[data-cb-ui] .cb-elmborder .cb-bd-rect[data-sel=right] {
  border-right-color: var(--cb-text-2);
}
[data-cb-ui] .cb-elmborder .cb-bd-ez {
  position: absolute;
  cursor: pointer;
}
[data-cb-ui] .cb-elmborder .cb-bd-ez.t {
  top: -10px;
  left: 0;
  right: 0;
  height: 18px;
}
[data-cb-ui] .cb-elmborder .cb-bd-ez.b {
  bottom: -10px;
  left: 0;
  right: 0;
  height: 18px;
}
[data-cb-ui] .cb-elmborder .cb-bd-ez.l {
  left: -10px;
  top: 0;
  bottom: 0;
  width: 18px;
}
[data-cb-ui] .cb-elmborder .cb-bd-ez.r {
  right: -10px;
  top: 0;
  bottom: 0;
  width: 18px;
}
[data-cb-ui] .cb-elmborder .cb-bd-all {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 28px;
  padding: 0 15px;
  border-radius: 7px;
  background: transparent;
  color: var(--cb-text-2);
  font-size: 12px;
}
[data-cb-ui] .cb-elmborder .cb-bd-all:hover {
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmborder .cb-bd-all.on {
  background: var(--cb-surface);
  color: var(--cb-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
[data-cb-ui] .cb-elmborder .cb-bd-none {
  font-size: 11.5px;
}
[data-cb-ui] .cb-elmborder .cb-bd-line {
  width: 22px;
  border-top: 2px solid currentColor;
}
[data-cb-ui] .cb-elmborder .cb-bd-line.is-dashed {
  border-top-style: dashed;
}
[data-cb-ui] .cb-elmborder .cb-bd-line.is-dotted {
  border-top-style: dotted;
  border-top-width: 3px;
}
[data-cb-ui] .cb-elmborder .cb-bd-wcgrid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
[data-cb-ui] .cb-elmborder .cb-bd-fld {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
[data-cb-ui] .cb-elmborder .cb-bd-wc.is-off {
  opacity: 0.4;
  pointer-events: none;
}
[data-cb-ui] .cb-elmcorner {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmcorner .cb-field {
  margin-bottom: 16px;
}
[data-cb-ui] .cb-elmcorner .cb-grouplabel {
  display: block;
}
[data-cb-ui] .cb-elmcorner .cb-head {
  margin-bottom: 2px;
}
[data-cb-ui] .cb-elmcorner .cb-cn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
}
[data-cb-ui] .cb-elmcorner .cb-cn-rect {
  position: relative;
  width: 186px;
  height: 82px;
  border: 2.5px solid var(--cb-line-4);
  transition: border-radius 0.1s;
}
[data-cb-ui] .cb-elmcorner .cb-cn-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-elmcorner .cb-cn-handle:before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--cb-line-4);
  transition: background 0.12s;
}
[data-cb-ui] .cb-elmcorner .cb-cn-handle:hover:before {
  background: var(--cb-text-3);
}
[data-cb-ui] .cb-elmcorner .cb-cn-handle.on:before {
  background: var(--cb-text-2);
}
[data-cb-ui] .cb-elmcorner .cb-cn-handle.tl {
  top: -11px;
  left: -11px;
}
[data-cb-ui] .cb-elmcorner .cb-cn-handle.tr {
  top: -11px;
  right: -11px;
}
[data-cb-ui] .cb-elmcorner .cb-cn-handle.bl {
  bottom: -11px;
  left: -11px;
}
[data-cb-ui] .cb-elmcorner .cb-cn-handle.br {
  bottom: -11px;
  right: -11px;
}
[data-cb-ui] .cb-elmcorner .cb-cn-all {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 28px;
  padding: 0 15px;
  border-radius: 7px;
  background: transparent;
  color: var(--cb-text-2);
  font-size: 12px;
}
[data-cb-ui] .cb-elmcorner .cb-cn-all:hover {
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmcorner .cb-cn-all.on {
  background: var(--cb-surface);
  color: var(--cb-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
[data-cb-ui] .cb-elmcorner .cb-cn-radiusrow {
  display: flex;
  align-items: center;
  gap: 13px;
}
[data-cb-ui] .cb-elmcorner .cb-cn-dim {
  width: 96px;
  flex: none;
}
[data-cb-ui] .cb-elmcorner .cb-cn-slider {
  flex: 1;
  min-width: 0;
}
[data-cb-ui] .cb-elmshadow {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmshadow .cb-field {
  margin-bottom: 14px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-preview {
  height: 92px;
  border-radius: 10px;
  margin-bottom: 16px;
  background: var(--cb-content-preview);
  border: 1px solid rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
[data-cb-ui] .cb-elmshadow .cb-sh-card {
  width: 120px;
  height: 52px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.08s;
}
[data-cb-ui] .cb-elmshadow .cb-sh-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px 10px;
  padding: 11px 10px;
  border-radius: 9px;
  background: var(--cb-content-preview);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
[data-cb-ui] .cb-elmshadow .cb-sh-preset {
  height: 27px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  padding: 0;
}
[data-cb-ui] .cb-elmshadow .cb-sh-preset:hover {
  outline: 2px solid var(--cb-accent);
  outline-offset: 1px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-lhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-lhead > span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmshadow .cb-sh-lactions {
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-add {
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: 6px;
  background: var(--cb-fill);
  color: var(--cb-text-2);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-add:hover {
  background: var(--cb-fill-hover);
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmshadow .cb-sh-add .cb-sh-plus {
  font-size: 14px;
  line-height: 1;
}
[data-cb-ui] .cb-elmshadow .cb-sh-clear {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--cb-fill);
  color: var(--cb-text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-elmshadow .cb-sh-clear:hover {
  background: var(--cb-fill-hover);
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmshadow .cb-sh-clear svg {
  width: 14px;
  height: 14px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-empty {
  font-size: 12px;
  color: var(--cb-text-3);
  padding: 4px 2px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-layer {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 6px 0 10px;
  border-radius: 7px;
  background: var(--cb-field-bg);
  cursor: pointer;
}
[data-cb-ui] .cb-elmshadow .cb-sh-layer:hover {
  background: var(--cb-fill-hover);
}
[data-cb-ui] .cb-elmshadow .cb-sh-layer.on {
  background: var(--cb-fill-active);
  box-shadow: inset 0 0 0 1px var(--cb-line-4);
}
[data-cb-ui] .cb-elmshadow .cb-sh-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
[data-cb-ui] .cb-elmshadow .cb-sh-ltype {
  font-size: 12.5px;
  color: var(--cb-text);
  min-width: 42px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-lvals {
  font-size: 11px;
  color: var(--cb-text-3);
  font-family: var(--mono);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-cb-ui] .cb-elmshadow .cb-sh-del {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 5px;
  background: transparent;
  color: var(--cb-text-3);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-elmshadow .cb-sh-del:hover {
  background: var(--cb-fill);
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmshadow .cb-sh-sep {
  height: 1px;
  background: var(--cb-line);
  margin: 15px 0;
}
[data-cb-ui] .cb-elmshadow .cb-sh-editor.is-off {
  opacity: 0.4;
  pointer-events: none;
}
[data-cb-ui] .cb-elmshadow .cb-sh-reset {
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  background: transparent;
  color: var(--cb-text-3);
  font-size: 11.5px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-reset:hover {
  background: var(--cb-fill);
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmshadow .cb-sh-colorrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-cb-ui] .cb-elmshadow .cb-sh-bsrow {
  display: flex;
  align-items: center;
  gap: 13px;
}
[data-cb-ui] .cb-elmshadow .cb-sh-bsdim {
  width: 96px;
  flex: none;
}
[data-cb-ui] .cb-elmshadow .cb-sh-slider {
  flex: 1;
  min-width: 0;
}
[data-cb-ui] .cb-elmlayout {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmlayout .cb-field {
  margin-bottom: 15px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-sel {
  position: relative;
}
[data-cb-ui] .cb-elmlayout .cb-lo-sel select {
  width: 100%;
  height: var(--cb-field-height);
  border: 0;
  border-radius: var(--cb-field-radius);
  background: var(--cb-field-bg);
  color: var(--cb-text);
  font-size: 12.5px;
  padding: 0 26px 0 11px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-cb-ui] .cb-elmlayout .cb-lo-sel:after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  pointer-events: none;
  border-right: 1.5px solid var(--cb-text-3);
  border-bottom: 1.5px solid var(--cb-text-3);
  transform: translateY(-65%) rotate(45deg);
}
[data-cb-ui] .cb-elmlayout .cb-lo-reveal {
  border-left: 2px solid var(--cb-line);
  padding-left: 12px;
  margin: 0 0 15px 2px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-seclabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cb-text-3);
  margin: 2px 0 11px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-sep {
  height: 1px;
  background: var(--cb-line);
  margin: 5px 0 16px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-arrow {
  font-size: 15px;
  line-height: 1;
}
[data-cb-ui] .cb-elmlayout .cb-lo-gj {
  display: flex;
  width: 27px;
  height: 12px;
  gap: 2px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-gj i {
  width: 3px;
  height: 100%;
  background: currentColor;
  border-radius: 1px;
  flex: none;
}
[data-cb-ui] .cb-elmlayout .cb-lo-ga {
  display: flex;
  width: 20px;
  height: 15px;
  gap: 2px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-ga i {
  width: 3px;
  background: currentColor;
  border-radius: 1px;
  flex: none;
}
[data-cb-ui] .cb-elmlayout .cb-lo-ga i:nth-child(1) {
  height: 7px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-ga i:nth-child(2) {
  height: 12px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-ga i:nth-child(3) {
  height: 9px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-ga.is-stretch i {
  height: 100%;
}
[data-cb-ui] .cb-elmlayout .cb-lo-cross {
  display: grid;
  grid-template-columns: 66px 1fr 66px;
  grid-template-rows: 32px 1fr 32px;
  gap: 6px;
  width: 100%;
  max-width: 244px;
  height: 132px;
}
[data-cb-ui] .cb-elmlayout .cb-lo-cross.is-scrubbing {
  user-select: none;
  cursor: ns-resize;
}
[data-cb-ui] .cb-elmlayout .cb-lo-field {
  display: flex;
}
[data-cb-ui] .cb-elmlayout .cb-lo-field[data-side=top] {
  grid-area: 1/2/2/3;
}
[data-cb-ui] .cb-elmlayout .cb-lo-field[data-side=left] {
  grid-area: 2/1/3/2;
}
[data-cb-ui] .cb-elmlayout .cb-lo-field[data-side=right] {
  grid-area: 2/3/3/4;
}
[data-cb-ui] .cb-elmlayout .cb-lo-field[data-side=bottom] {
  grid-area: 3/2/4/3;
}
[data-cb-ui] .cb-elmlayout .cb-lo-value {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--cb-field-bg);
  color: var(--cb-text);
  border-radius: var(--cb-field-radius);
  text-align: center;
  font-size: 13.5px;
  cursor: ns-resize;
  outline: none;
}
[data-cb-ui] .cb-elmlayout .cb-lo-value:focus {
  cursor: text;
}
[data-cb-ui] .cb-elmlayout .cb-lo-value::placeholder {
  color: var(--cb-text-4);
}
[data-cb-ui] .cb-elmlayout .cb-lo-box {
  grid-area: 2/2/3/3;
  border: 1px dashed var(--cb-line-4);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-cb-ui] .cb-elmlayout .cb-lo-box .cb-lo-caption {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--cb-text-3);
}
[data-cb-ui] .cb-elmlayout .cb-lo-unit {
  margin-top: 11px;
}
[data-cb-ui] .cb-elmeffect {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmeffect .cb-fx-field {
  margin-bottom: 6px;
}
[data-cb-ui] .cb-elmeffect .cb-fx-sep {
  height: 1px;
  background: var(--cb-line);
  margin: 15px 0;
}
[data-cb-ui] .cb-elmeffect .cb-fx-seclabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cb-text-3);
  margin: 2px 0 14px;
}
[data-cb-ui] .cb-elmeffect .cb-fx-reset {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  border: none;
  border-radius: 5px;
  padding: 3px 8px;
  background: transparent;
  color: var(--cb-text-3);
  cursor: pointer;
}
[data-cb-ui] .cb-elmeffect .cb-fx-reset:hover {
  background: var(--cb-fill);
  color: var(--cb-text);
}
[data-cb-ui] .cb-elmeffect .cb-fx-rows {
  display: flex;
  flex-direction: column;
  gap: 21px;
}
[data-cb-ui] .cb-elmeffect .cb-fx-row {
  display: grid;
  grid-template-columns: 70px 1fr 42px;
  align-items: center;
  gap: 11px;
}
[data-cb-ui] .cb-elmeffect .cb-fx-rlabel {
  font-size: 12px;
  color: var(--cb-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-cb-ui] .cb-elmeffect .cb-fx-rval {
  font-size: 11px;
  font-weight: 600;
  color: var(--cb-text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}
[data-cb-ui] .cb-elmeffect .cb-fx-row.is-active .cb-fx-rval {
  color: var(--cb-accent);
}
[data-cb-ui] .cb-elmmore {
  width: 100%;
  display: flex;
  flex-direction: column;
}
[data-cb-ui] .cb-elmmore .cb-field {
  margin-bottom: 20px;
}
[data-cb-ui] .cb-elmmore .cb-field-label {
  display: block;
  margin-bottom: 7px;
}
[data-cb-ui] .cb-elmmore .cb-mo-hint {
  font-size: 11px;
  color: var(--cb-text-3);
  margin-top: 7px;
  line-height: 1.45;
}
[data-cb-ui] .cb-elmmore .cb-mo-id {
  position: relative;
  display: flex;
  align-items: center;
}
[data-cb-ui] .cb-elmmore .cb-mo-hash {
  position: absolute;
  left: 11px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cb-text-3);
  pointer-events: none;
}
[data-cb-ui] .cb-elmmore #inpElmId {
  width: 100%;
  height: var(--cb-field-height);
  border: 0;
  border-radius: var(--cb-field-radius);
  background: var(--cb-field-bg);
  color: var(--cb-text);
  font-size: 13px;
  font-family: var(--mono);
  padding: 0 11px 0 24px;
  outline: none;
}
[data-cb-ui] .cb-elmmore #inpElmId::placeholder {
  color: var(--cb-text-4);
  font-family: var(--sans);
}
[data-cb-ui] .cb-dim:focus-within,
[data-cb-ui] .cb-chips.is-focus,
[data-cb-ui] .cb-sp-value:focus,
[data-cb-ui] .cb-lo-value:focus,
[data-cb-ui] .cb-tx-sel select:focus,
[data-cb-ui] .cb-lo-sel select:focus,
[data-cb-ui] .cb-sel select:focus,
[data-cb-ui] #inpElmId:focus {
  outline: var(--cb-field-focus-outline);
  outline-offset: var(--cb-field-focus-offset);
}
[data-cb-ui] .cb-slider:focus-visible,
[data-cb-ui] .switch input:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: 2px;
}
[data-cb-ui] [class^=cb-elm] button:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: -2px;
}
[data-cb-ui] .is-modal.edittablestyle {
  z-index: 10002;
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 318px;
  top: 50%;
  left: auto;
  right: 30%;
  margin-top: -205px;
  box-sizing: content-box;
  flex-direction: row;
  align-items: flex-start;
  /* Content controls only — redesigned to match Column/Row. The shell rules
      above (.edittablestyle sizing/position, .ts-body) are untouched. */
  /* !important: a base modal-button rule otherwise paints these white and doesn't adapt to dark. */
}
[data-cb-ui] .is-modal.edittablestyle .ts-body {
  background: var(--cb-surface) !important;
  padding: 52px 22px 0 !important;
  width: 100%;
  height: 100%;
}
[data-cb-ui] .is-modal.edittablestyle .ts-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--cb-label-color);
  margin-bottom: 8px;
}
[data-cb-ui] .is-modal.edittablestyle .ts-row {
  display: flex;
  gap: 20px;
}
[data-cb-ui] .is-modal.edittablestyle .ts-sep {
  height: 1px;
  background: var(--cb-line);
  margin: 17px 0;
}
[data-cb-ui] .is-modal.edittablestyle .ts-borderrow {
  display: flex;
  gap: 10px;
  align-items: center;
}
[data-cb-ui] .is-modal.edittablestyle .ts-seg {
  display: flex;
  flex: 1;
  gap: 2px;
  padding: 3px;
  background: var(--cb-field-bg);
  border-radius: 8px;
}
[data-cb-ui] .is-modal.edittablestyle .ts-seg .tbw-seg {
  flex: 1;
  height: 30px;
  border: 0 !important;
  background: transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--cb-text-2) !important;
  font-size: 12px;
  cursor: pointer;
}
[data-cb-ui] .is-modal.edittablestyle .ts-seg .tbw-seg:hover {
  background: transparent !important;
  color: var(--cb-text) !important;
}
[data-cb-ui] .is-modal.edittablestyle .ts-seg .tbw-seg.on {
  background: var(--cb-surface) !important;
  color: var(--cb-text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
[data-cb-ui] .is-modal.edittablestyle select {
  width: 100%;
  height: 34px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: var(--cb-field-radius) !important;
  background: var(--cb-field-bg) !important;
  color: var(--cb-text) !important;
  font-size: 12.5px;
}

.dark [data-cb-ui] .pluginsettings {
  /* Dark overrides for the .cbx-* custom-editor helpers.
     (.cbx-item + .cbx-item-head are fully token-driven now via --cb-item*.) */
}
.dark [data-cb-ui] .pluginsettings button:not(.is-btn-color):hover {
  background-color: rgba(113, 113, 113, 0.55);
}
.dark [data-cb-ui] .pluginsettings .cbx-iconbtn.is-danger {
  color: #fafafa;
}
.dark [data-cb-ui] .pluginsettings button.cbx-iconbtn:hover {
  background: rgba(255, 255, 255, 0.07);
}
.dark [data-cb-ui] .pluginsettings button.cbx-iconbtn.is-active {
  background: rgba(255, 255, 255, 0.14);
}
.dark [data-cb-ui] .pluginsettings .cbx-hint {
  color: #9a9a9a;
}
.dark [data-cb-ui] .pluginsettings .cbx-rte {
  border-color: #6e6e6e;
  background: transparent;
}
.dark [data-cb-ui] .pluginsettings .cbx-removebtn {
  color: #f87171;
}
.dark [data-cb-ui] .pluginsettings button.cbx-removebtn:hover {
  background: rgba(248, 113, 113, 0.14);
}

.dark [data-cb-ui] .is-accordion > div {
  border: 1px solid #6e6e6e;
}
.dark [data-cb-ui] .is-accordion > div > div:first-child {
  /* header */
  background: transparent;
}
.dark [data-cb-ui] .is-outline {
  border: 1px solid #767676;
}
.dark [data-cb-ui] .is-tips {
  background: #424242;
  color: inherit;
}
.dark [data-cb-ui] .cb-elmcorner .cb-cn-all, .dark [data-cb-ui] .cb-elmborder .cb-bd-all {
  background: transparent;
  box-shadow: none;
}
.dark [data-cb-ui] .cb-elmcorner .cb-cn-all:hover, .dark [data-cb-ui] .cb-elmborder .cb-bd-all:hover {
  color: var(--cb-text);
}
.dark [data-cb-ui] .cb-elmcorner .cb-cn-all.on, .dark [data-cb-ui] .cb-elmborder .cb-bd-all.on {
  background: rgba(255, 255, 255, 0.14);
  color: var(--cb-text);
  box-shadow: none;
}
.dark [data-cb-ui] .cb-elmshadow .cb-sh-preset, .dark [data-cb-ui] .cb-elmshadow .cb-sh-preset:hover {
  background: #fff;
}
.dark [data-cb-ui] .cb-elmshadow .cb-sh-add, .dark [data-cb-ui] .cb-elmshadow .cb-sh-clear {
  background: var(--cb-fill);
  box-shadow: none;
}
.dark [data-cb-ui] .cb-elmshadow .cb-sh-add:hover, .dark [data-cb-ui] .cb-elmshadow .cb-sh-clear:hover {
  background: var(--cb-fill-hover);
}
.dark [data-cb-ui] .cb-elmshadow .cb-sh-reset {
  background: transparent;
  box-shadow: none;
}
.dark [data-cb-ui] .cb-elmshadow .cb-sh-reset:hover {
  background: var(--cb-fill);
}
.dark [data-cb-ui] .cb-elmshadow .cb-sh-del {
  background: transparent;
  box-shadow: none;
}
.dark [data-cb-ui] .cb-elmshadow .cb-sh-del:hover {
  background: var(--cb-fill);
}
.dark [data-cb-ui] .cb-elmeffect .cb-fx-reset {
  background: transparent;
  box-shadow: none;
}
.dark [data-cb-ui] .cb-elmeffect .cb-fx-reset:hover {
  background: var(--cb-fill);
}
.dark [data-cb-ui] .cb-chip button {
  background: transparent;
  box-shadow: none;
}
.dark [data-cb-ui] .cb-chip button:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--cb-text);
}

/* New nested grid support */
.is-builder .row,
.is-builder .column {
  position: relative;
}

.is-builder .row > .column {
  outline: none;
}

.is-builder .row > .column.cell-active:not([data-protected]) {
  outline: 1px solid #00da89;
}

.row-active > .is-row-tool {
  display: flex;
}

.row-active > div .is-row-tool {
  display: none;
}

.row-active > .is-col-tool {
  display: flex;
}

.row-active > div .is-col-tool {
  display: none;
}

.iframe-overlay {
  position: relative;
}
.iframe-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.iframe-overlay.iframe-active::after {
  z-index: -1;
}

[data-cb-ui] .pluginsettings input[type=text], [data-cb-ui] .pluginsettings input[type=number], [data-cb-ui] .pluginsettings input[type=email], [data-cb-ui] .pluginsettings input[type=url],
[data-cb-ui] .pluginsettings input[type=tel], [data-cb-ui] .pluginsettings input[type=search], [data-cb-ui] .pluginsettings input[type=password], [data-cb-ui] .pluginsettings input[type=date],
[data-cb-ui] .pluginsettings input[type=time], [data-cb-ui] .pluginsettings input[type=datetime-local], [data-cb-ui] .pluginsettings input[type=month],
[data-cb-ui] .pluginsettings input[type=week], [data-cb-ui] .pluginsettings select, [data-cb-ui] .pluginsettings textarea {
  height: var(--cb-field-height);
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 13px;
  letter-spacing: var(--cb-field-tracking);
  color: var(--cb-text);
  background: var(--cb-field-bg);
  border: var(--cb-field-border);
  border-radius: var(--cb-field-radius);
  box-shadow: none;
}
[data-cb-ui] .pluginsettings textarea {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  line-height: 1.4;
}
[data-cb-ui] .pluginsettings input:focus, [data-cb-ui] .pluginsettings select:focus, [data-cb-ui] .pluginsettings textarea:focus {
  outline: var(--cb-field-focus-outline);
  outline-offset: var(--cb-field-focus-offset);
  border-color: var(--cb-line);
  box-shadow: none;
}
[data-cb-ui] .pluginsettings button:not(.is-btn-color) {
  height: var(--cb-field-height);
  background: var(--cb-btn-bg);
  color: var(--cb-text);
  border: 1px solid transparent;
  border-radius: var(--cb-btn-radius);
  box-shadow: none;
  font-size: 12px;
}
[data-cb-ui] .pluginsettings button:not(.is-btn-color):hover {
  background: var(--cb-btn-bg-hover);
}
[data-cb-ui] .pluginsettings button:not(.is-btn-color):active {
  background: var(--cb-btn-bg-active);
}
[data-cb-ui] .pluginsettings button:not(.is-btn-color):focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: -2px;
}

.cb-fontselect {
  position: relative;
  display: block;
}

.cb-fontselect .cb-fs-control {
  position: relative;
}

/* .builder-ui button is (0,1,1); two classes clear it. */
.cb-fontselect .cb-fs-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 46px 0 10px;
  border: 1px solid var(--cb-line);
  border-radius: 3px;
  background: var(--cb-surface);
  color: var(--cb-text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.cb-fontselect .cb-fs-trigger:hover {
  background: var(--cb-fill);
}

.cb-fontselect .cb-fs-trigger:focus-visible {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: -1px;
}

/* min-width:0 is what lets the ellipsis happen inside a flex item. */
.cb-fontselect .cb-fs-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.cb-fontselect .cb-fs-caret {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 15px;
  height: 15px;
  margin-top: -7px;
  pointer-events: none;
  color: var(--cb-text-3);
}

.cb-fontselect .cb-fs-caret svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: baseline;
}

.cb-fontselect .cb-fs-trigger[aria-expanded=true] ~ .cb-fs-caret {
  transform: rotate(180deg);
}

.cb-fontselect .cb-fs-clear {
  position: absolute;
  top: 50%;
  right: 26px;
  width: 22px;
  height: 22px;
  margin: -11px 0 0;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--cb-text-3);
  cursor: pointer;
}

.cb-fontselect.has-value .cb-fs-clear {
  display: flex;
}

.cb-fontselect .cb-fs-clear:hover {
  background: var(--cb-fill-hover);
  color: var(--cb-text);
}

.cb-fontselect .cb-fs-clear svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cb-fontselect .cb-fs-pop {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid var(--cb-line);
  border-radius: 4px;
  /* --cb-surface, not --cb-fill: this floats over content. */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.cb-fontselect .cb-fs-pop[hidden] {
  display: none;
}

/* The colour here is the whole reason the old search box was invisible
   in dark mode: it set a background and left the text at the UA default. */
.cb-fontselect .cb-fs-search {
  width: 100% !important;
  height: 38px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border: none !important;
  border-bottom: 1px solid var(--cb-line) !important;
  border-radius: 0 !important;
  background: var(--cb-surface) !important;
  color: var(--cb-text) !important;
  font-size: 14px !important;
}

.cb-fontselect .cb-fs-search::placeholder {
  color: var(--cb-text-3);
}

.cb-fontselect .cb-fs-search:focus {
  outline: none !important;
}

.cb-fontselect .cb-fs-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
.cb-fontselect .cb-fs-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.cb-fontselect .cb-fs-list::-webkit-scrollbar-track {
  background: transparent;
}
.cb-fontselect .cb-fs-list::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.cb-fontselect .cb-fs-list::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}

.cb-fontselect .cb-fs-list:focus {
  outline: none;
}

.cb-fontselect .cb-fs-group[hidden] {
  display: none;
}

.cb-fontselect .cb-fs-header {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cb-text-3);
}

.cb-fontselect .cb-fs-opt {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 15px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--cb-text);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cb-fontselect .cb-fs-opt[hidden] {
  display: none;
}

.cb-fontselect .cb-fs-opt:hover {
  background: var(--cb-fill-hover);
}

/* Keyboard position and current value are different things and have to
   look different: one moves as you arrow, the other does not. */
.cb-fontselect .cb-fs-opt.active {
  background: var(--cb-fill-active);
}

/* .cb-fontselect .cb-fs-opt.selected { color: var(--cb-accent); font-weight: 600; } DO NOT RE_ENABLE THIS */
.cb-fontselect .cb-fs-empty {
  padding: 14px 10px;
  font-size: 13px;
  color: var(--cb-text-3);
}

.cb-fontselect .cb-fs-empty[hidden] {
  display: none;
}

/* Image mode. Every rule here is behind .cb-fs-images, so the default
   text rendering keeps exactly the stylesheet it already had. */
.cb-fontselect.cb-fs-images .cb-fs-opt img,
.cb-fontselect.cb-fs-images .cb-fs-value img {
  height: 24px;
  width: auto;
  max-width: 100%;
  pointer-events: none;
}

/* The thumbnails are black artwork on transparency, so a dark panel
   inverts them. Not a token: this is an image treatment, not a colour. */
body.dark .cb-fontselect.cb-fs-images .cb-fs-opt img,
body.dark .cb-fontselect.cb-fs-images .cb-fs-value img,
body.colored .cb-fontselect.cb-fs-images .cb-fs-opt img,
body.colored .cb-fontselect.cb-fs-images .cb-fs-value img,
body.colored-dark .cb-fontselect.cb-fs-images .cb-fs-opt img,
body.colored-dark .cb-fontselect.cb-fs-images .cb-fs-value img {
  filter: invert(1);
  opacity: 0.85;
}

/* Inline: the host supplies the button and the panel, so this fills
   whatever box it is dropped into instead of floating over one. */
.cb-fontselect.cb-fs-inline {
  height: 100%;
}

.cb-fontselect.cb-fs-inline .cb-fs-pop {
  position: static;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.cb-fontselect.cb-fs-inline .cb-fs-search {
  flex: none;
}

/* min-height:0 so the list can shrink inside the flex column. */
.cb-fontselect.cb-fs-inline .cb-fs-list {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-inline .cb-fs-pop {
  background: var(--cb-rte-surface);
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-search {
  background: var(--cb-rte-surface) !important;
  color: var(--cb-rte-text) !important;
  border-bottom-color: var(--cb-rte-line) !important;
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-search::placeholder {
  color: var(--cb-rte-text-2);
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-header {
  color: var(--cb-rte-text-2);
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-empty {
  color: var(--cb-rte-text-2);
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-opt {
  color: var(--cb-rte-text);
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-opt:hover {
  background: var(--cb-rte-fill-hover);
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-opt.active {
  background: var(--cb-rte-fill-active);
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-list {
  scrollbar-width: thin;
  scrollbar-color: var(--cb-rte-line) transparent;
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-list::-webkit-scrollbar-track {
  background: transparent;
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-list::-webkit-scrollbar-thumb {
  background: var(--cb-rte-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.is-rte-pop.rte-fontfamily-options .cb-fontselect .cb-fs-list::-webkit-scrollbar-thumb:hover {
  background: var(--cb-rte-text-2);
  background-clip: padding-box;
}

.div-icon-list,
.div-font-list,
.rte-customtag-options > div {
  scrollbar-width: thin;
  scrollbar-color: var(--cb-rte-line) transparent;
}
.div-icon-list::-webkit-scrollbar,
.div-font-list::-webkit-scrollbar,
.rte-customtag-options > div::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.div-icon-list::-webkit-scrollbar-track,
.div-font-list::-webkit-scrollbar-track,
.rte-customtag-options > div::-webkit-scrollbar-track {
  background: transparent;
}
.div-icon-list::-webkit-scrollbar-thumb,
.div-font-list::-webkit-scrollbar-thumb,
.rte-customtag-options > div::-webkit-scrollbar-thumb {
  background: var(--cb-rte-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.div-icon-list::-webkit-scrollbar-thumb:hover,
.div-font-list::-webkit-scrollbar-thumb:hover,
.rte-customtag-options > div::-webkit-scrollbar-thumb:hover {
  background: var(--cb-rte-text-2);
  background-clip: padding-box;
}

.div-page-sizes,
.buttoneditor-panels,
.is-selectbox-options,
.select-options,
.dropdown-menu,
.cb-symbols-list,
.cbx-rte,
.is-modal-controls {
  scrollbar-width: thin;
  scrollbar-color: var(--cb-line) transparent;
}
.div-page-sizes::-webkit-scrollbar,
.buttoneditor-panels::-webkit-scrollbar,
.is-selectbox-options::-webkit-scrollbar,
.select-options::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.cb-symbols-list::-webkit-scrollbar,
.cbx-rte::-webkit-scrollbar,
.is-modal-controls::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.div-page-sizes::-webkit-scrollbar-track,
.buttoneditor-panels::-webkit-scrollbar-track,
.is-selectbox-options::-webkit-scrollbar-track,
.select-options::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,
.cb-symbols-list::-webkit-scrollbar-track,
.cbx-rte::-webkit-scrollbar-track,
.is-modal-controls::-webkit-scrollbar-track {
  background: transparent;
}
.div-page-sizes::-webkit-scrollbar-thumb,
.buttoneditor-panels::-webkit-scrollbar-thumb,
.is-selectbox-options::-webkit-scrollbar-thumb,
.select-options::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.cb-symbols-list::-webkit-scrollbar-thumb,
.cbx-rte::-webkit-scrollbar-thumb,
.is-modal-controls::-webkit-scrollbar-thumb {
  background: var(--cb-line);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.div-page-sizes::-webkit-scrollbar-thumb:hover,
.buttoneditor-panels::-webkit-scrollbar-thumb:hover,
.is-selectbox-options::-webkit-scrollbar-thumb:hover,
.select-options::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.cb-symbols-list::-webkit-scrollbar-thumb:hover,
.cbx-rte::-webkit-scrollbar-thumb:hover,
.is-modal-controls::-webkit-scrollbar-thumb:hover {
  background: var(--cb-text-3);
  background-clip: padding-box;
}