@charset "UTF-8";
/* 
@import url("../ionicons/css/ionicons.min.css"); 
@import url("../icons/bootstrap-icons.min.css");  
*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.0/css/ionicons.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
body {
  --cb-surface: #fff;
  --cb-chat-bubble-bg: #171717;
  --cb-chat-bubble-text: #ffffff;
  --cb-surface-2: rgba(0,0,0,.04);
  --cb-surface-3: rgba(250,250,250,1);
  --cb-float-surface: rgba(255,255,255,.95);
  --cb-text: rgba(0,0,0,.92);
  --cb-text-2: rgba(0,0,0,.7);
  --cb-text-3: rgba(0,0,0,.56);
  --cb-text-4: rgba(0,0,0,.45);
  --cb-line: rgba(0,0,0,.09);
  --cb-line-2: rgba(0,0,0,.05);
  --cb-line-4: rgba(0,0,0,.18);
  --cb-fill: rgba(0,0,0,.05);
  --cb-fill-hover: rgba(0,0,0,.08);
  --cb-fill-active: rgba(0,0,0,.09);
  --cb-accent: #2c6fdb;
  --cb-accent-fill: rgba(44,111,219,.12);
  --cb-tool-focus-ring: #111;
  --cb-tool-focus-ring-edge: #fff;
  --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-accent-ink: color-mix(in srgb, var(--cb-accent) 80%, #000);
  --cb-danger: #e84949;
  --cb-danger-fill: rgba(232,73,73,.16);
  --cb-success: #3aa76d;
  --cb-shadow: -1px 5px 8px 0px rgba(0,0,0,.08);
  --cb-shadow-2: 3px 11px 24px 0px rgba(0,0,0,.05);
  --cb-on-accent: #fff;
}

body.dark, body.colored, body.colored-dark {
  --cb-surface: #2b2b2b;
  --cb-chat-bubble-bg: #181818;
  --cb-chat-bubble-text: #f0f0f0;
  --cb-surface-2: rgba(255,255,255,.07);
  --cb-surface-3: rgba(78,78,78,1);
  --cb-float-surface: rgba(38,38,40,.96);
  --cb-text: rgba(255,255,255,.92);
  --cb-text-2: rgba(255,255,255,.82);
  --cb-text-3: rgba(255,255,255,.45);
  --cb-text-4: rgba(255,255,255,.45);
  --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,.2);
  --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,.09);
  --cb-accent-line: rgba(91,157,255,.55);
  --cb-accent-ink: var(--cb-accent);
  --cb-danger: #ff6b6b;
  --cb-danger-fill: rgba(255,107,107,.2);
  --cb-success: #57c993;
  --cb-shadow: -1px 5px 14px 0px rgba(0,0,0,.55);
  --cb-shadow-2: 3px 11px 24px 0px rgba(0,0,0,.45);
}

body.dark .motion-dock, body.dark .cascade-dock, body.dark .is-controlpanel, body.dark .is-modal, body.dark .is-sidebar, body.colored .motion-dock, body.colored .cascade-dock, body.colored .is-controlpanel, body.colored .is-modal, body.colored .is-sidebar, body.colored-dark .motion-dock, body.colored-dark .cascade-dock, body.colored-dark .is-controlpanel, body.colored-dark .is-modal, body.colored-dark .is-sidebar {
  color-scheme: dark;
}
body.dark .motion-dock iframe, body.dark .cascade-dock iframe, body.dark .is-controlpanel iframe, body.dark .is-modal iframe, body.dark .is-sidebar iframe, body.colored .motion-dock iframe, body.colored .cascade-dock iframe, body.colored .is-controlpanel iframe, body.colored .is-modal iframe, body.colored .is-sidebar iframe, body.colored-dark .motion-dock iframe, body.colored-dark .cascade-dock iframe, body.colored-dark .is-controlpanel iframe, body.colored-dark .is-modal iframe, body.colored-dark .is-sidebar iframe {
  color-scheme: light;
}

:root {
  --focus-outline-color: #3e93f7;
  --rangeslider-thumb-color: #0e75de;
}

/* IFRAME */
@media (max-width: 1366px) {
  button[data-device=desktop-lg] {
    display: none !important;
  }

  button[data-device=desktop] svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
  }
}
/* The canvas: the device-mode frame the page is edited in.
 *
 * Sized and scaled by iframepanel.applyCanvasScale(), which measures the workspace
 * and publishes the result as the custom properties below. See canvas-size.js for
 * why this cannot be media queries: what overflows is height, the tiers keyed on
 * width, and a fit-to-box factor is a ratio of two lengths, which CSS cannot form.
 *
 * The sizes here are the pre-script state and the fallback. They match CANVAS_SIZES.
 */
.is-content-view.desktop-lg {
  width: 1920px;
  height: 1080px;
}
.is-content-view.desktop {
  width: 1366px;
  height: 853px;
}
.is-content-view.tablet-landscape {
  width: 1120px;
  height: 820px;
}
.is-content-view.tablet {
  width: 768px;
  height: 1024px;
}
.is-content-view.mobile {
  width: 390px;
  height: 844px;
}

/* /IFRAME */
*, ::before, ::after {
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

/* UI */
.is-controlpanel[data-cb-ui] {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--cb-text);
  /* content.css */
  /* /content.css */
  /* 
  Compact copied version from contentbuilder.scss.
  This block will not needed after contentbuilder.scss update which uses
  .pluginsettings.pluginsettings { .. }
  */
}
.is-controlpanel[data-cb-ui] h1, .is-controlpanel[data-cb-ui] h2, .is-controlpanel[data-cb-ui] h3, .is-controlpanel[data-cb-ui] h4, .is-controlpanel[data-cb-ui] h5, .is-controlpanel[data-cb-ui] h6 {
  font-weight: 500;
  line-height: 1.17;
}
.is-controlpanel[data-cb-ui] h1 {
  font-size: 2.5rem;
  margin: 1.2rem 0 1.2rem;
}
.is-controlpanel[data-cb-ui] h2 {
  font-size: 2rem;
  margin: 1rem 0 1rem;
}
.is-controlpanel[data-cb-ui] h3 {
  font-size: 1.73rem;
  margin: 1rem 0 1rem;
}
.is-controlpanel[data-cb-ui] h4 {
  font-size: 1.5rem;
  margin: 0.5rem 0 0.5rem;
}
.is-controlpanel[data-cb-ui] h5 {
  font-size: 1.25rem;
  margin: 0.5rem 0 0.5rem;
}
.is-controlpanel[data-cb-ui] h6 {
  font-size: 1rem;
  margin: 0.5rem 0 0.5rem;
}
.is-controlpanel[data-cb-ui] p {
  margin: 0.8rem 0 0.8rem;
}
.is-controlpanel[data-cb-ui] a {
  color: var(--cb-text);
}
.is-controlpanel[data-cb-ui] .text-left {
  text-align: left;
}
.is-controlpanel[data-cb-ui] .text-center {
  text-align: center;
}
.is-controlpanel[data-cb-ui] .text-right {
  text-align: right;
}
.is-controlpanel[data-cb-ui] .text-justify {
  text-align: justify;
}
.is-controlpanel[data-cb-ui] .ml-0 {
  margin-left: 0px;
}
.is-controlpanel[data-cb-ui] .ml-1 {
  margin-left: 0.25rem;
}
.is-controlpanel[data-cb-ui] .ml-2 {
  margin-left: 0.5rem;
}
.is-controlpanel[data-cb-ui] .ml-3 {
  margin-left: 0.75rem;
}
.is-controlpanel[data-cb-ui] .ml-4 {
  margin-left: 1rem;
}
.is-controlpanel[data-cb-ui] .ml-5 {
  margin-left: 1.25rem;
}
.is-controlpanel[data-cb-ui] .ml-6 {
  margin-left: 1.5rem;
}
.is-controlpanel[data-cb-ui] .ml-8 {
  margin-left: 2rem;
}
.is-controlpanel[data-cb-ui] .ml-10 {
  margin-left: 2.5rem;
}
.is-controlpanel[data-cb-ui] .mr-0 {
  margin-right: 0px;
}
.is-controlpanel[data-cb-ui] .mr-1 {
  margin-right: 0.25rem;
}
.is-controlpanel[data-cb-ui] .mr-2 {
  margin-right: 0.5rem;
}
.is-controlpanel[data-cb-ui] .mr-3 {
  margin-right: 0.75rem;
}
.is-controlpanel[data-cb-ui] .mr-4 {
  margin-right: 1rem;
}
.is-controlpanel[data-cb-ui] .mr-5 {
  margin-right: 1.25rem;
}
.is-controlpanel[data-cb-ui] .mr-6 {
  margin-right: 1.5rem;
}
.is-controlpanel[data-cb-ui] .mr-8 {
  margin-right: 2rem;
}
.is-controlpanel[data-cb-ui] .mr-10 {
  margin-right: 2.5rem;
}
.is-controlpanel[data-cb-ui] .mt-0 {
  margin-top: 0px;
}
.is-controlpanel[data-cb-ui] .mt-1 {
  margin-top: 0.25rem;
}
.is-controlpanel[data-cb-ui] .mt-2 {
  margin-top: 0.5rem;
}
.is-controlpanel[data-cb-ui] .mt-3 {
  margin-top: 0.75rem;
}
.is-controlpanel[data-cb-ui] .mt-4 {
  margin-top: 1rem;
}
.is-controlpanel[data-cb-ui] .mt-5 {
  margin-top: 1.25rem;
}
.is-controlpanel[data-cb-ui] .mt-6 {
  margin-top: 1.5rem;
}
.is-controlpanel[data-cb-ui] .mt-8 {
  margin-top: 2rem;
}
.is-controlpanel[data-cb-ui] .mt-10 {
  margin-top: 2.5rem;
}
.is-controlpanel[data-cb-ui] .mb-0 {
  margin-bottom: 0px;
}
.is-controlpanel[data-cb-ui] .mb-1 {
  margin-bottom: 0.25rem;
}
.is-controlpanel[data-cb-ui] .mb-2 {
  margin-bottom: 0.5rem;
}
.is-controlpanel[data-cb-ui] .mb-3 {
  margin-bottom: 0.75rem;
}
.is-controlpanel[data-cb-ui] .mb-4 {
  margin-bottom: 1rem;
}
.is-controlpanel[data-cb-ui] .mb-5 {
  margin-bottom: 1.25rem;
}
.is-controlpanel[data-cb-ui] .mb-6 {
  margin-bottom: 1.5rem;
}
.is-controlpanel[data-cb-ui] .mb-8 {
  margin-bottom: 2rem;
}
.is-controlpanel[data-cb-ui] .mb-10 {
  margin-bottom: 2.5rem;
}
.is-controlpanel[data-cb-ui] .flex {
  display: flex;
}
.is-controlpanel[data-cb-ui] .block {
  display: block;
}
.is-controlpanel[data-cb-ui] .inline {
  display: inline;
}
.is-controlpanel[data-cb-ui] .inline-block {
  display: inline-block;
}
.is-controlpanel[data-cb-ui] .inline-flex {
  display: inline-flex;
}
.is-controlpanel[data-cb-ui] .flex-row {
  flex-direction: row;
}
.is-controlpanel[data-cb-ui] .flex-row-reverse {
  flex-direction: row-reverse;
}
.is-controlpanel[data-cb-ui] .flex-col {
  flex-direction: column;
}
.is-controlpanel[data-cb-ui] .flex-col-reverse {
  flex-direction: column-reverse;
}
.is-controlpanel[data-cb-ui] .flex-wrap {
  flex-wrap: wrap;
}
.is-controlpanel[data-cb-ui] .flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.is-controlpanel[data-cb-ui] .flex-nowrap {
  flex-wrap: nowrap;
}
.is-controlpanel[data-cb-ui] .justify-start {
  justify-content: flex-start;
}
.is-controlpanel[data-cb-ui] .justify-end {
  justify-content: flex-end;
}
.is-controlpanel[data-cb-ui] .justify-center {
  justify-content: center;
}
.is-controlpanel[data-cb-ui] .justify-between {
  justify-content: space-between;
}
.is-controlpanel[data-cb-ui] .justify-around {
  justify-content: space-around;
}
.is-controlpanel[data-cb-ui] .justify-evenly {
  justify-content: space-evenly;
}
.is-controlpanel[data-cb-ui] .items-start {
  align-items: flex-start;
}
.is-controlpanel[data-cb-ui] .items-end {
  align-items: flex-end;
}
.is-controlpanel[data-cb-ui] .items-center {
  align-items: center;
}
.is-controlpanel[data-cb-ui] .items-baseline {
  align-items: baseline;
}
.is-controlpanel[data-cb-ui] .items-stretch {
  align-items: stretch;
}
.is-controlpanel[data-cb-ui] .embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding: 0;
  overflow: hidden;
  margin-top: 1.4em;
  margin-bottom: 1em;
}
.is-controlpanel[data-cb-ui] .embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.is-controlpanel[data-cb-ui] .embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}
.is-controlpanel[data-cb-ui] .embed-responsive iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.is-controlpanel[data-cb-ui] svg {
  width: 16px;
  height: 16px;
}
.is-controlpanel[data-cb-ui] svg:not([fill]) {
  fill: currentColor;
}
.is-controlpanel[data-cb-ui] .tooltip {
  /* prevent overide by css framework */
  opacity: unset;
  padding: 0;
  color: inherit;
}
.is-controlpanel[data-cb-ui] button {
  width: 38px;
  height: 34px;
  color: var(--cb-text);
  background-color: transparent;
  box-shadow: none;
  margin: 2px;
  border-radius: 5px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  transition: all 0.15s ease;
}
.is-controlpanel[data-cb-ui] button.w-full {
  width: 100%;
}
.is-controlpanel[data-cb-ui] button.auto {
  width: auto;
  padding: 0 14px;
}
.is-controlpanel[data-cb-ui] button > span {
  margin-left: 5px;
}
.is-controlpanel[data-cb-ui] button.btn-editcode, .is-controlpanel[data-cb-ui] button.btn-editmodule {
  width: 100%;
  height: 39px;
}
.is-controlpanel[data-cb-ui] button.is-btn-color {
  width: 41px;
  height: 37px;
  border: 1px solid rgba(197, 197, 197, 0.2784313725);
}
.is-controlpanel[data-cb-ui] button.is-btn-color.nocolor {
  width: 37px;
  height: 35px;
}
.is-controlpanel[data-cb-ui] button:not(.is-btn-color):hover {
  background-color: var(--cb-fill-hover);
}
.is-controlpanel[data-cb-ui] button:not(.is-btn-color).on, .is-controlpanel[data-cb-ui] button:not(.is-btn-color).active, .is-controlpanel[data-cb-ui] button:not(.is-btn-color)[aria-pressed=true] {
  background-color: var(--cb-accent-fill);
  color: var(--cb-accent);
}
.is-controlpanel[data-cb-ui] .flex-unit {
  display: flex;
  gap: 15px;
}
.is-controlpanel[data-cb-ui] .flex-unit > * {
  width: 105px;
}
.is-controlpanel[data-cb-ui] .flex-unit > * > *:first-child {
  margin-bottom: 3px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.is-controlpanel[data-cb-ui] .flex-unit > * > *:first-child .label {
  margin: 0;
}
.is-controlpanel[data-cb-ui] .flex-unit label, .is-controlpanel[data-cb-ui] .flex-unit .label {
  white-space: nowrap;
}
.is-controlpanel[data-cb-ui] .flex-unit a, .is-controlpanel[data-cb-ui] .flex-unit span {
  font-size: 13px;
}
.is-controlpanel[data-cb-ui] .label {
  font-size: 14px;
  margin: 20px 0 3px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--cb-text-2);
  display: flex;
  flex-direction: column;
  background: transparent;
}
.is-controlpanel[data-cb-ui] .label.flex-row {
  flex-direction: row;
}
.is-controlpanel[data-cb-ui] .label input[type=checkbox] {
  margin: 0;
  /* prevent overide by css framework */
}
.is-controlpanel[data-cb-ui] .label.checkbox {
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  margin-left: 3px;
}
.is-controlpanel[data-cb-ui] .label.checkbox span {
  line-height: 1.2;
  margin-left: 7px;
  font-weight: 300;
}
.is-controlpanel[data-cb-ui] .label.unit > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}
.is-controlpanel[data-cb-ui] .label.unit > div .btn-unit {
  cursor: pointer;
}
.is-controlpanel[data-cb-ui] .label.mt-0 {
  margin-top: 0px;
}
.is-controlpanel[data-cb-ui] .label.mt-1 {
  margin-top: 6px;
}
.is-controlpanel[data-cb-ui] .label.mt-2 {
  margin-top: 10px;
}
.is-controlpanel[data-cb-ui] .label.mt-3 {
  margin-top: 14px;
}
.is-controlpanel[data-cb-ui] .label.mt-4 {
  margin-top: 20px;
}
.is-controlpanel[data-cb-ui] .label.mt-5 {
  margin-top: 24px;
}
.is-controlpanel[data-cb-ui] .label.mt-6 {
  margin-top: 28px;
}
.is-controlpanel[data-cb-ui] .label.mb-1 {
  margin-bottom: 6px;
}
.is-controlpanel[data-cb-ui] .label.mb-3 {
  margin-bottom: 14px;
}
.is-controlpanel[data-cb-ui] .label-note {
  width: 222px;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.6;
}
.is-controlpanel[data-cb-ui] input[type=text], .is-controlpanel[data-cb-ui] input[type=number], .is-controlpanel[data-cb-ui] input[type=url], .is-controlpanel[data-cb-ui] input[type=datetime-local], .is-controlpanel[data-cb-ui] textarea {
  width: 100%;
  height: 43px;
  box-sizing: border-box;
  margin: 0;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 1px;
  padding: 0;
  padding-left: 8px;
  color: var(--cb-text);
  display: inline-block;
  border: none;
  border-bottom: none;
  border-radius: 5px;
  background-color: var(--cb-fill);
  flex: none;
}
.is-controlpanel[data-cb-ui] textarea {
  height: 250px;
  padding: 12px 15px;
}
.is-controlpanel[data-cb-ui] select {
  font-size: 13px;
  letter-spacing: 1px;
  height: 43px;
  line-height: 1.7;
  color: var(--cb-text);
  border: none;
  background-color: var(--cb-fill);
  width: auto;
  display: inline-block;
  background-image: none;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
  padding: 0 5px;
  border-radius: 5px;
  cursor: pointer;
}
.is-controlpanel[data-cb-ui] div[contenteditable=true] {
  border-radius: 5px;
}
.is-controlpanel[data-cb-ui] input[type=text]:focus,
.is-controlpanel[data-cb-ui] input[type=number]:focus,
.is-controlpanel[data-cb-ui] input[type=datetime-local]:focus,
.is-controlpanel[data-cb-ui] textarea:focus,
.is-controlpanel[data-cb-ui] select:focus,
.is-controlpanel[data-cb-ui] div[contenteditable=true]:focus {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: 0;
  box-shadow: none;
}
.is-controlpanel[data-cb-ui] .group {
  border: 1px solid var(--cb-line);
  margin-bottom: 11px;
  border-radius: 7px;
  overflow: hidden;
  display: inline-flex;
  flex-wrap: wrap;
  padding: 2px;
  box-sizing: border-box;
}
.is-controlpanel[data-cb-ui] .group.inserts:has(> button:nth-child(6)) {
  max-width: 133px;
  margin-right: 7px;
}
.is-controlpanel[data-cb-ui] .group.single {
  border-color: transparent;
  padding: 0;
}
.is-controlpanel[data-cb-ui] .group.single > button {
  margin: 0;
  height: 38px;
  background-color: var(--cb-fill);
}
.is-controlpanel[data-cb-ui] .group.single > button:hover {
  background-color: var(--cb-fill-hover);
}
.is-controlpanel[data-cb-ui] button.btn-single {
  height: 38px;
  background-color: var(--cb-fill);
}
.is-controlpanel[data-cb-ui] button.btn-single:hover {
  background-color: var(--cb-fill-hover);
}
.is-controlpanel[data-cb-ui] .div-target {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 6px;
}
.is-controlpanel[data-cb-ui] .div-target button {
  width: 31px;
  height: 28px;
  margin: 0;
}
.is-controlpanel[data-cb-ui] .div-target button[data-device=xs] svg {
  width: 13px;
  height: 13px;
}
.is-controlpanel[data-cb-ui] .accordion-item {
  width: 100%;
  background-color: var(--cb-fill);
  justify-content: space-between;
  padding-left: 25px;
  height: 45px;
  margin: 0;
  border-radius: 0;
  outline-offset: -2px;
  flex: none;
}
.is-controlpanel[data-cb-ui] .accordion-item span {
  margin-right: 10px;
  transition: transform 0.15s ease;
}
.is-controlpanel[data-cb-ui] .accordion-item span svg {
  width: 15px;
  height: 15px;
}
.is-controlpanel[data-cb-ui] .accordion-item[aria-expanded=true] span {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.is-controlpanel[data-cb-ui] .accordion-item[aria-expanded=false] span {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.is-controlpanel[data-cb-ui] .accordion-content {
  display: flex;
  padding: 0 !important;
  transition: all 0.4s ease;
}
.is-controlpanel[data-cb-ui] .accordion-content[aria-hidden=true] {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}
.is-controlpanel[data-cb-ui] .accordion-content[aria-hidden=false] {
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}
.is-controlpanel[data-cb-ui] .accordion-content.last[aria-hidden=true] {
  transition: max-height 0.2s ease-out, opacity 0.1s ease-out;
}
.is-controlpanel[data-cb-ui] .accordion-content.last[aria-hidden=false] {
  transition: max-height 0.2s ease-out, opacity 0.1s ease-out;
}
.is-controlpanel[data-cb-ui] .custom-select .select-options {
  top: calc(var(--cs-height) + 3px);
}
.is-controlpanel[data-cb-ui] .pluginsettings input[type=text], .is-controlpanel[data-cb-ui] .pluginsettings input[type=number], .is-controlpanel[data-cb-ui] .pluginsettings input[type=email], .is-controlpanel[data-cb-ui] .pluginsettings input[type=url],
.is-controlpanel[data-cb-ui] .pluginsettings input[type=tel], .is-controlpanel[data-cb-ui] .pluginsettings input[type=search], .is-controlpanel[data-cb-ui] .pluginsettings input[type=password], .is-controlpanel[data-cb-ui] .pluginsettings input[type=date],
.is-controlpanel[data-cb-ui] .pluginsettings input[type=time], .is-controlpanel[data-cb-ui] .pluginsettings input[type=datetime-local], .is-controlpanel[data-cb-ui] .pluginsettings input[type=month],
.is-controlpanel[data-cb-ui] .pluginsettings input[type=week], .is-controlpanel[data-cb-ui] .pluginsettings select, .is-controlpanel[data-cb-ui] .pluginsettings textarea {
  height: var(--cb-field-height);
  font-size: 13px;
}
.is-controlpanel[data-cb-ui] .pluginsettings textarea {
  height: auto;
  min-height: 72px;
}
.is-controlpanel[data-cb-ui] .pluginsettings button {
  width: 100%;
  height: var(--cb-btn-height);
  margin: 0px;
}
.is-controlpanel[data-cb-ui] .pluginsettings button.is-btn-color {
  width: 35px;
  height: 35px;
}
.is-controlpanel[data-cb-ui] .pluginsettings .cbx-removebtn {
  width: auto;
  height: auto;
  gap: 2px;
}
.is-controlpanel[data-cb-ui] .pluginsettings .cbx-removebtn svg {
  width: 15px;
  height: 15px;
}
.is-controlpanel[data-cb-ui] .pluginsettings .cbx-iconbtn {
  width: 34px;
  height: 34px;
}
.is-controlpanel[data-cb-ui] .pluginsettings label {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}
.is-controlpanel[data-cb-ui] .pluginsettings .cbx-field > label {
  margin: 0 0 var(--cbx-label-gap);
}

.is-controlpanel[data-cb-ui] {
  background-color: #fff;
  position: fixed;
  width: 290px;
  height: 100vh;
  display: flex;
  top: 0;
  right: -290px;
  z-index: 1;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: none;
}
.is-controlpanel[data-cb-ui] > .is-devpanel {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  z-index: 0;
}
.is-controlpanel[data-cb-ui] > .is-devpanel > div button {
  width: 32px;
  height: 30px;
}
.is-controlpanel[data-cb-ui] > .is-devpanel > div button.btn-preferences svg {
  width: 15px;
  height: 15px;
}
.is-controlpanel[data-cb-ui] > .is-devpanel .btn-close {
  background: none;
}
.is-controlpanel[data-cb-ui] .panelnav {
  margin-top: 58px;
  padding: 8px 24px 8px;
  box-sizing: border-box;
}
.is-controlpanel[data-cb-ui] .panelnav .part-breadcrumb {
  display: flex;
  flex-direction: column;
  margin-left: -1px;
}
.is-controlpanel[data-cb-ui] .panelnav .part-breadcrumb div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 0 5px;
}
.is-controlpanel[data-cb-ui] .panelnav .part-breadcrumb a {
  font-size: 12px;
  text-decoration: none;
  margin: 0 2px;
}
.is-controlpanel[data-cb-ui] .panelnav .part-breadcrumb span {
  font-size: 10px;
  display: inline-block;
  margin: 0 2px;
}
.is-controlpanel[data-cb-ui] .panelnav .part-breadcrumb svg {
  width: 10px;
  height: 10px;
}
.is-controlpanel[data-cb-ui] .panelnav .part-sectionmove.group {
  width: auto;
  margin: 10px 0 6px;
  flex-wrap: nowrap;
}
.is-controlpanel[data-cb-ui] .panelnav .part-sectionmove.group button {
  width: 26px;
  height: 26px;
  margin: 1px;
  flex: none;
}
.is-controlpanel[data-cb-ui] .panelnav .part-sectionmove.group button svg {
  width: 13px;
  height: 13px;
}
.is-controlpanel[data-cb-ui] .panelnav .part-sectionmove.group .btn-sectiondup {
  margin-left: 6px;
}
.is-controlpanel[data-cb-ui] .panelnav h3 {
  font-family: sans-serif;
  font-weight: 300;
  font-size: 20px;
  margin: 15px 0 0;
}
.is-controlpanel[data-cb-ui] [class^=panel-] {
  display: none;
  flex-direction: column;
}
.is-controlpanel[data-cb-ui] [class^=panel-].active {
  display: flex;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-code .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-text .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-button .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-image .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-video .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-icon .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-svg .submain {
  padding: 7px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-audio .submain {
  padding: 16px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-iframe .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-spacer .submain {
  padding: 0 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-plugin .submain {
  padding: 15px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-overlay .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-column .submain {
  padding: 9px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-row .submain {
  padding: 9px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-container .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-block .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-box .submain {
  padding: 0 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-section .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-section .submain {
  padding: 14px 24px 20px;
}
.is-controlpanel[data-cb-ui] [class^=panel-] .submain {
  padding: 0 24px 16px;
}
.is-controlpanel[data-cb-ui] [class^=panel-] .submain > div:first-child {
  /* plugin custom settings */
  margin-top: 5px;
}
.is-controlpanel[data-cb-ui] [class^=panel-] .subpanel {
  padding: 14px 24px 15px;
  width: 100%;
  box-sizing: border-box;
}
.is-controlpanel[data-cb-ui] [class^=panel-] .last .subpanel {
  padding: 14px 24px 30px;
  width: 100%;
  box-sizing: border-box;
}
.is-controlpanel[data-cb-ui] [class^=panel-] .subtitle {
  font-weight: 600;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop {
  position: fixed;
  width: 132px;
  height: auto;
  background-color: #fff;
  display: none;
  border-radius: 4px;
  overflow: hidden;
  flex-wrap: wrap;
  padding: 2px;
  box-sizing: border-box;
  flex: none;
  flex-direction: row;
  border: 1px solid #d1d1d1;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.08);
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop button {
  flex: none;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.heightpop {
  width: auto;
  flex-direction: column;
  padding: 12px 12px 8px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.heightpop .label {
  font-size: 10px;
  line-height: 1.2;
  margin: 0 0 6px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.heightpop .group.sectionheight {
  width: 180px;
  border: none;
  padding: 0;
  margin-bottom: 0;
  gap: 3px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.heightpop .group.sectionheight button {
  width: 33.5px;
  height: 27px;
  margin: 0;
  font-size: 10px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.heightpop .group.sectionheight button svg {
  width: 12px;
  height: 12px;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.more {
  width: auto;
  flex-direction: column;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.more > button {
  padding: 0 20px;
  width: auto;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.more .label {
  margin: 6px 0 0 0;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.more div {
  display: flex;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.more div button {
  flex: none;
}
.is-controlpanel[data-cb-ui] [class^=panel-].panel-pop.more .plugins {
  justify-content: center;
}
.is-controlpanel[data-cb-ui] .panel-image .asset-preview img,
.is-controlpanel[data-cb-ui] .panel-overlay .asset-preview img,
.is-controlpanel[data-cb-ui] .panel-box .asset-preview img,
.is-controlpanel[data-cb-ui] .panel-block .asset-preview img,
.is-controlpanel[data-cb-ui] .panel-column .asset-preview img,
.is-controlpanel[data-cb-ui] .panel-row .asset-preview img {
  max-width: 130px;
  max-height: 130px;
}
.is-controlpanel[data-cb-ui] .panel-overlay .inp-text {
  box-sizing: border-box;
  width: 222px;
  min-height: 62px;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px 8px;
  font-family: sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 1.4;
  border-radius: 5px;
  background-color: #f6f6f6;
  color: #121212;
  outline: none;
}
.is-controlpanel[data-cb-ui] .panel-overlay .inp-text p {
  margin: 0;
}
.is-controlpanel[data-cb-ui] .panel-overlay .label-note {
  width: 222px;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.6;
}
.is-controlpanel[data-cb-ui] .panel-overlay .div-overlay-image.stacked,
.is-controlpanel[data-cb-ui] .panel-overlay .div-overlay-link.stacked {
  margin-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 16px;
}
.is-controlpanel[data-cb-ui] .panel-overlay .div-overlay-list {
  margin-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 14px;
}
.is-controlpanel[data-cb-ui] .panel-overlay .div-overlay-list .list-caption {
  margin-bottom: 8px;
}
.is-controlpanel[data-cb-ui] .panel-overlay .overlay-list {
  width: 222px;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.is-controlpanel[data-cb-ui] .panel-overlay .ovl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  box-sizing: border-box;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.is-controlpanel[data-cb-ui] .panel-overlay .ovl-row:hover {
  background-color: #f0f0f0;
}
.is-controlpanel[data-cb-ui] .panel-overlay .ovl-row.on {
  background-color: #e6e6e6;
}
.is-controlpanel[data-cb-ui] .panel-overlay .ovl-row-thumb {
  flex: none;
  width: 30px;
  height: 24px;
  border-radius: 3px;
  background-color: #e2e2e2;
  background-size: cover;
  background-position: center;
}
.is-controlpanel[data-cb-ui] .panel-overlay .ovl-row-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #4b4b4b;
}
.is-controlpanel[data-cb-ui] .panel-button .label-note {
  width: 222px;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.6;
}
.is-controlpanel[data-cb-ui] .panel-button .buttonsize button,
.is-controlpanel[data-cb-ui] .panel-button .borderstyle button,
.is-controlpanel[data-cb-ui] .panel-button .buttonwidth button {
  width: auto;
  min-width: 52px;
  padding: 0 12px;
  font-size: 13px;
}
.is-controlpanel[data-cb-ui] .panel-button .presettabs button,
.is-controlpanel[data-cb-ui] .panel-button .colorstate button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 0 12px;
  font-size: 13px;
}
.is-controlpanel[data-cb-ui] .panel-button .buttonradius,
.is-controlpanel[data-cb-ui] .panel-button .fontsizes,
.is-controlpanel[data-cb-ui] .panel-button .letterspacing {
  display: grid;
  gap: 4px;
}
.is-controlpanel[data-cb-ui] .panel-button .buttonradius button,
.is-controlpanel[data-cb-ui] .panel-button .fontsizes button,
.is-controlpanel[data-cb-ui] .panel-button .letterspacing button {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.is-controlpanel[data-cb-ui] .panel-button .buttonradius {
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
}
.is-controlpanel[data-cb-ui] .panel-button .letterspacing {
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}
.is-controlpanel[data-cb-ui] .panel-button .fontsizes {
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
}
.is-controlpanel[data-cb-ui] .panel-button .presettabs,
.is-controlpanel[data-cb-ui] .panel-button .colorstate,
.is-controlpanel[data-cb-ui] .panel-button .buttonradius,
.is-controlpanel[data-cb-ui] .panel-button .fontsizes,
.is-controlpanel[data-cb-ui] .panel-button .letterspacing {
  width: 222px;
}
.is-controlpanel[data-cb-ui] .panel-button .padx,
.is-controlpanel[data-cb-ui] .panel-button .pady {
  margin-bottom: 4px;
}
.is-controlpanel[data-cb-ui] .panel-button .btn-wide {
  width: 222px;
  height: 36px;
  margin: 8px 0 0 2px;
  border: 1px solid #e1e1e1;
  font-size: 13px;
}
.is-controlpanel[data-cb-ui] .panel-button .button-presets,
.is-controlpanel[data-cb-ui] .panel-button .button-saved {
  width: 222px;
  max-height: 232px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 2px;
  box-sizing: border-box;
}
.is-controlpanel[data-cb-ui] .panel-button .preset-swatch {
  width: auto;
  height: auto;
  max-width: 100%;
  padding: 4px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  overflow: hidden;
}
.is-controlpanel[data-cb-ui] .panel-button .preset-swatch > span:first-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-controlpanel[data-cb-ui] .panel-button .preset-swatch:hover {
  border-color: #d1d1d1;
  background-color: transparent !important;
}
.is-controlpanel[data-cb-ui] .panel-button .preset-remove {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
}
.is-controlpanel[data-cb-ui] .panel-button .preset-remove svg {
  width: 11px;
  height: 11px;
  stroke: #fff;
  color: #fff;
}
.is-controlpanel[data-cb-ui] .panel-button .preset-swatch:hover .preset-remove {
  display: flex;
}
.is-controlpanel[data-cb-ui] .panel-button .margin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  width: 222px;
}
.is-controlpanel[data-cb-ui] .panel-button .margin-grid .label {
  margin: 0;
}
.is-controlpanel[data-cb-ui] .panel-button .margin-grid input {
  width: 100%;
  box-sizing: border-box;
}
.is-controlpanel[data-cb-ui] .panel-audio .asset-preview,
.is-controlpanel[data-cb-ui] .panel-iframe .asset-preview {
  width: 100%;
  height: auto;
}
.is-controlpanel[data-cb-ui] .panel-audio .asset-preview div,
.is-controlpanel[data-cb-ui] .panel-iframe .asset-preview div {
  margin-top: 0 !important;
}
.is-controlpanel[data-cb-ui] .group.fontsizes, .is-controlpanel[data-cb-ui] .group.fontweight, .is-controlpanel[data-cb-ui] .group.linespacing, .is-controlpanel[data-cb-ui] .group.letterspacing, .is-controlpanel[data-cb-ui] .group.wordspacing, .is-controlpanel[data-cb-ui] .group.topspacing, .is-controlpanel[data-cb-ui] .group.bottomspacing {
  width: 217px;
}
.is-controlpanel[data-cb-ui] .group.listindent {
  width: 175px;
}
.is-controlpanel[data-cb-ui] .group.addcontent {
  width: 222px;
}
.is-controlpanel[data-cb-ui] .group.addcontent button {
  width: 100%;
}
.is-controlpanel[data-cb-ui] .group.removecontent {
  width: 222px;
}
.is-controlpanel[data-cb-ui] .group.removecontent button {
  width: 100%;
}
.is-controlpanel[data-cb-ui] .group.contentsize {
  width: 222px;
}
.is-controlpanel[data-cb-ui] .group.contentsize button {
  width: 50px;
  font-size: 12px;
}
.is-controlpanel[data-cb-ui] .group.contentheight {
  width: 222px;
  flex-flow: wrap;
}
.is-controlpanel[data-cb-ui] .group.contentheight > div:first-child {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.is-controlpanel[data-cb-ui] .group.contentheight > div:nth-child(2) {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.is-controlpanel[data-cb-ui] .group.contentheight button {
  width: 100%;
}
.is-controlpanel[data-cb-ui] .group.editmodule {
  /* For module as box overlay */
  width: 222px;
  margin-top: 8px;
}
.is-controlpanel[data-cb-ui] .group.editmodule button {
  width: 100%;
  height: 39px;
}
.is-controlpanel[data-cb-ui] .group.moreoptions, .is-controlpanel[data-cb-ui] .group.resetrotation {
  width: 222px;
}
.is-controlpanel[data-cb-ui] .group.moreoptions button, .is-controlpanel[data-cb-ui] .group.resetrotation button {
  width: 100%;
}
.is-controlpanel[data-cb-ui] .group.contentspacing {
  width: 218px;
}
.is-controlpanel[data-cb-ui] .group.contentposition {
  width: 112px;
  flex-flow: wrap;
}
.is-controlpanel[data-cb-ui] .group.contentposition button {
  width: 33px;
  height: 28px;
  font-size: 10px;
}
.is-controlpanel[data-cb-ui] .group.textcolor {
  width: 222px;
  flex-direction: row;
  flex-wrap: nowrap;
}
.is-controlpanel[data-cb-ui] .group.textcolor button {
  width: 100%;
}
.is-controlpanel[data-cb-ui] .group.sectionaction {
  width: 175px;
}
.is-controlpanel[data-cb-ui] .group.sectionheight {
  width: 232px;
}
.is-controlpanel[data-cb-ui] .group.sectionheight button {
  width: 41px;
  height: 34px;
  font-size: 11px;
}
.is-controlpanel[data-cb-ui] .group.sectionspacing {
  width: 230px;
}
.is-controlpanel[data-cb-ui] .group.sectionspacing button {
  width: 33px;
  height: 32px;
  font-size: 12px;
}
.is-controlpanel[data-cb-ui] .group.betweenbox {
  width: 215px;
}
.is-controlpanel[data-cb-ui] .group.betweenbox button {
  width: 100px;
}
.is-controlpanel[data-cb-ui] .group.boxesperline {
  width: 217px;
}
.is-controlpanel[data-cb-ui] .group.animstart {
  width: 225px;
}
.is-controlpanel[data-cb-ui] .group.animstart button {
  width: 105px;
}
.is-controlpanel[data-cb-ui] .group.animend {
  width: 225px;
}
.is-controlpanel[data-cb-ui] .group.animend button {
  width: 105px;
}
.is-controlpanel[data-cb-ui] .group.scrollbuttons {
  width: 218px;
}
.is-controlpanel[data-cb-ui] .group.colsperline {
  width: 175px;
}
.is-controlpanel[data-cb-ui] .group.colsperline button[data-colsperline=""] {
  width: 79px;
}
.is-controlpanel[data-cb-ui] .group.defaultparasize, .is-controlpanel[data-cb-ui] .group.defaultlinespacing {
  width: 175px;
}
.is-controlpanel[data-cb-ui] .group.contenttransparency {
  width: 132px;
}
.is-controlpanel[data-cb-ui] .group.flexjustify button svg {
  width: 18px;
  height: 18px;
}
.is-controlpanel[data-cb-ui] .group.clearflex button {
  width: auto;
  padding: 0 14px;
}
.is-controlpanel[data-cb-ui] .group.imageeffect, .is-controlpanel[data-cb-ui] .group.aspectratio, .is-controlpanel[data-cb-ui] .group.duration {
  width: 225px;
}
.is-controlpanel[data-cb-ui] .group.imageeffect button, .is-controlpanel[data-cb-ui] .group.aspectratio button, .is-controlpanel[data-cb-ui] .group.duration button {
  width: 50px;
  transition: all 0.15s ease;
}
.is-controlpanel[data-cb-ui] .group.imageeffect button {
  width: 105px;
}
.is-controlpanel[data-cb-ui] .group.duration button {
  width: 39px;
}
.is-controlpanel[data-cb-ui] button.toggle {
  width: 36px;
  transition: all 0.15s ease;
}
.is-controlpanel[data-cb-ui] .label.changedevice {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 217px;
}
.is-controlpanel[data-cb-ui] .label.changedevice .btn-device {
  width: 27px;
  height: 24px;
}
.is-controlpanel[data-cb-ui] .label.changedevice .btn-device svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.is-controlpanel[data-cb-ui] .customtags .group > div {
  width: 216px;
  height: 111px;
  overflow-y: auto;
  overflow-x: hidden;
}
.is-controlpanel[data-cb-ui] .customtags .group > div button {
  width: 100%;
  justify-content: flex-start;
  padding-left: 12px;
}
.is-controlpanel[data-cb-ui] .imagesource input[type=text] {
  font-size: 13px;
  height: 40px;
}
.is-controlpanel[data-cb-ui] .panel-dialog {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  width: 290px;
  height: 100%;
  display: none;
  background-color: #fff;
  overflow-y: auto;
}
.is-controlpanel[data-cb-ui] .panel-dialog button.btn-back {
  width: 43px;
  height: 40px;
}
.is-controlpanel[data-cb-ui] .panel-dialog button.btn-back svg {
  width: 22px;
  height: 22px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.symbols {
  flex-direction: column;
  overflow: hidden;
}
.is-controlpanel[data-cb-ui] .panel-dialog.symbols button.btn-back {
  flex: 0 0 auto;
}
.is-controlpanel[data-cb-ui] .panel-dialog.symbols .cb-symbols-host {
  flex: 1 1 auto;
  min-height: 0;
}
.is-controlpanel[data-cb-ui] .panel-dialog.icons input {
  outline-offset: -2px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.icons > div {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100% - 40px);
  overflow-y: auto;
}
.is-controlpanel[data-cb-ui] .panel-dialog.icons > div button {
  width: 63px;
  height: 60px;
  font-size: 24px;
  opacity: 0.9;
}
.is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks {
  width: 100%;
  height: calc(100vh - 90px);
  overflow-y: auto;
  position: absolute;
  top: 90px;
  border-top: #efefef 1px solid;
  box-sizing: border-box;
  padding-bottom: 35px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks > div {
  width: 212px;
  overflow: hidden;
  margin: 28px 0 0 34px;
  cursor: move;
  display: block;
  opacity: 1;
  outline: #d5d5d5 1px solid;
  box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.03);
  position: relative;
}
.is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks > div.hide {
  display: none;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
}
.is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks > div img {
  box-shadow: none;
  display: block;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  width: 100%;
}
.is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks > div .is-overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks > div .is-overlay:after {
  background: rgba(0, 0, 0, 0.04);
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease-in-out;
  opacity: 0;
}
.is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks > div:hover .is-overlay:after {
  opacity: 0.9;
}
.is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks .snippet-item.sortable-drag:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
.is-controlpanel[data-cb-ui] .panel-dialog.element, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions {
  overflow-y: auto;
  font-size: 13px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element button.btn-back, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions button.btn-back {
  flex: none;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .submain, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .submain {
  padding-bottom: 26px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .subpanel, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .subpanel {
  padding-bottom: 26px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .subtitle, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .subtitle {
  font-weight: 600;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .part-breadcrumb, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .part-breadcrumb {
  display: flex;
  flex-direction: row;
  margin-left: -1px;
  align-items: center;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .part-breadcrumb a, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .part-breadcrumb a {
  font-size: 12px;
  text-decoration: none;
  margin: 0 2px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .part-breadcrumb svg, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .part-breadcrumb svg {
  width: 10px;
  height: 10px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .part-element, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .part-element {
  font-size: 26px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .flex > *:first-child, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .flex > *:first-child {
  width: 105px;
  margin-right: 15px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .flex > * > *:first-child, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .flex > * > *:first-child {
  margin-bottom: 3px;
  margin-top: 16px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .unit > div, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .unit > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .unit .label, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .unit .label {
  margin: 0;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .group, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .group {
  margin-bottom: 5px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element input, .is-controlpanel[data-cb-ui] .panel-dialog.element select, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions input, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions select {
  width: 105px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element div, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions div {
  flex: none;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element label, .is-controlpanel[data-cb-ui] .panel-dialog.element .label, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions label, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .label {
  white-space: nowrap;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element a, .is-controlpanel[data-cb-ui] .panel-dialog.element span, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions a, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions span {
  font-size: 13px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.element .is-btn-color, .is-controlpanel[data-cb-ui] .panel-dialog.blockoptions .is-btn-color {
  width: 35px;
  height: 33px;
}
.is-controlpanel[data-cb-ui] .panel-dialog.shadow .div-shadow-list {
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  height: calc(100vh - 500px);
  max-height: 725px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 0 0 20px;
  margin: 30px 0 0;
  border: rgba(177, 177, 177, 0.38) 1px solid;
  width: 100%;
  box-sizing: border-box;
}
.is-controlpanel[data-cb-ui] .panel-dialog.shadow .div-shadow-list [data-shadow] {
  width: 75px;
  height: 70px;
  flex: none;
  margin: 0 20px 30px 0px;
  background: #fbfbfb;
  border-radius: 4px;
}

/*
.builder-ui {

    .panel-plugin {
        .is-accordion {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 10px;
            & > div {
                border: 1px solid rgb(221, 221, 221);
                border-radius: 8px;

                & > div:first-child { 
                    background: rgb(249, 249, 249);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 10px 12px;
                    font-weight: 500;
                    cursor: pointer;
                }
            }
        }
        .is-outline {
            border: 1px solid #ddd;
        }
        .is-tips {
            margin-top: 16px; padding: 12px; background: #eff6ff; font-size: 12px; color: #1e40af; border-left: 3px solid #3b82f6; border-radius: 4px;
        }


        div[contenteditable=true]:focus-visible {
            outline: var(--focus-outline-color) 2px solid; 
        }
        button {
            background-color: rgb(239, 239, 239);
            width: 100%;
            height: 43px;
            margin: 0px;
        }
        textarea {
            width: 100%;
            height: 200px;
            line-height: 1.4;
            font-family: inherit;
            font-size: 14px;
            padding: 10px 13px;
        }
        label {
            display: flex;
            font-size: 13px;
            line-height: 1.6;
        }
        // The gap belongs between the form and whatever sits above it -- a
        // plugin's custom editor UI. With nothing above, .submain's own padding
        // is the top spacing, and the extra margin only pushes the first group
        // heading away from the panel title. (Same rule ContentBuilder's
        // plugin-settings panel uses.)
        .cb-settings-form {
            margin-top: 0;
        }
        * ~ .cb-settings-form {
            margin-top: 20px;
        }
    }

    // Custom Select — an accessible combobox (customselect.js). Neutral field + a
    // floating listbox popup; everything token-driven so it flips light/dark cleanly.
    // Mirrors ContentBuilder's [data-cb-ui] .custom-select — keep the two in sync.
    .custom-select {
        --cs-height: 44px;

        position: relative;
        display: inline-block;
        width: 100%;
        height: var(--cs-height);
        font-size: 14px;

        // Closed trigger — a quiet neutral field.
        .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 .15s ease, border-color .15s ease;

            &:hover { background: var(--cb-fill-hover); }

            // label
            > span:first-child {
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                img { height: 24px; vertical-align: middle; }
            }
            // chevron
            > span:nth-child(2) {
                flex: none;
                display: flex;
                align-items: center;
                color: var(--cb-text-4);
                transition: transform .2s ease;
            }
            svg { width: 16px; height: 16px; }

            outline: none;
            &:focus-visible {
                outline: var(--cb-field-focus-outline);
                outline-offset: -1px;
            }
        }
        .select-styled[aria-expanded="true"] > span:nth-child(2) { transform: rotate(-180deg); }

        // Search box (only rendered/shown for .has-search) — docks to the popup top.
        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;
        }
        input::placeholder { color: var(--cb-text-3); }
        input:focus { outline: none; }

        // Popup listbox — floats over content, so it must be opaque.
        .select-options {
            display: none;
            position: absolute;
            top: calc(var(--cs-height) + 6px);
            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);
        }
        &.has-search .select-options {
            top: calc(var(--cs-height) + 44px);
            padding-top: 0;
            border-top: none;
            border-radius: 0 0 8px 8px;
        }
        .select-options.active { display: block; }

        .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;
            img { margin: 6px 0; height: 24px; }
        }
        .select-options li:hover { background: var(--cb-fill); }
        .select-options li.selected,
        .select-options li[aria-selected="true"] { background: var(--cb-fill-active); }
    }

    // Heading picker (panel-text) shows two-line option labels — a touch more vertical room.
    .inp-heading .select-options li {
        padding: 3px 10px;
    }

    // Snippets category picker — reads as the panel header (transparent, one bottom
    // hairline) rather than a boxed field; the popup keeps the shared look.
    .snippet-cathead {
        position: absolute;
        top: 0; left: 0; right: 0;
        z-index: 2;
    }
    .inp-snippets.custom-select {
        width: 100%;
        .select-styled {
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--cb-line);
            border-radius: 0;
            padding: 0 10px 0 16px;
            &:hover { background: var(--cb-fill); }
        }
        .select-options { max-height: 320px; }
    }

    .scroll-darker * {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) auto;
    }
    .scroll-darker *::-webkit-scrollbar {
        width: 12px;
    }
    .scroll-darker *::-webkit-scrollbar-track {
        background: rgba(200, 200, 200, 0.2);
    }
    .scroll-darker *::-webkit-scrollbar-thumb {
        background-color:rgba(0, 0, 0, 0.2); 
    }
} */
[data-cb-ui] .custom-select,
.inp-snippets.custom-select {
  background: var(--cb-surface);
}

/* /UI */
/* CONTROL PANEL */
body.controlpanel .is-controlpanel[data-cb-ui] {
  right: 0px;
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 16px 0px;
}
body.controlpanel [data-cb-ui] .is-modal.cbxsettings div.is-modal-content {
  width: 400px;
  max-width: 94vw;
  min-height: 0;
  padding: 0 !important;
}
body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-set-body {
  padding: 6px 18px 20px;
}
body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-set-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cb-seg button.inert {
  color: var(--cb-text-4);
  background-color: transparent !important;
  cursor: default;
}
body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cb-seg button.inert:hover {
  background-color: transparent !important;
}
body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-set-sep {
  height: 1px;
  background: var(--cb-line);
  margin: 16px 0;
}
body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-themes {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}
body.controlpanel [data-cb-ui] .is-modal.cbxsettings .cbx-themes button {
  width: 30px;
  height: 26px;
  border-radius: 5px;
}
body.controlpanel [data-cb-ui] .is-modal.elementstyles {
  right: 310px;
}
body.controlpanel .is-wrapper {
  width: calc(100% - 290px) !important;
  margin-left: 0 !important;
}

/* Typography Selection */
.typography-list {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 43px !important;
  padding-bottom: 25px !important;
}
.typography-list > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #000;
  border: rgba(205, 205, 205, 0.62) 1px solid;
  box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0.08);
  position: relative;
  cursor: pointer;
  aspect-ratio: 4/4.6;
}
.typography-list > div div:first-child {
  text-align: center;
  position: absolute;
  background: transparent;
  top: -28px;
  left: 0;
  width: 100%;
  font-size: 12px;
  line-height: 1.4;
  z-index: 1;
}
.typography-list > div img {
  width: 100%;
  height: auto;
  min-height: 200px;
  -webkit-transition: all 0.16s ease;
  transition: all 0.16s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.typography-list .is-overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.typography-list > div .is-overlay:after {
  background: rgba(0, 0, 0, 0.03);
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease-in-out;
  opacity: 0;
}
.typography-list > div:hover .is-overlay:after {
  opacity: 0.9;
}
.typography-list > div.active img {
  outline: var(--focus-outline-color) 2px solid;
  transition: none !important;
}

.is-design-list,
.typography-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}

.snippet-item.sortable-chosen {
  height: auto;
}
.snippet-item.sortable-chosen * {
  visibility: visible;
}
.snippet-item.sortable-chosen.sortable-drag * {
  visibility: hidden;
  transition: none !important;
}
.snippet-item.sortable-drag {
  outline: none !important;
}

.is-rangeslider {
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  background: #e3e3e3;
  outline: none;
  border: none !important;
  opacity: 1;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin: 2px !important;
  border-radius: 2px !important;
}
.is-rangeslider:hover {
  opacity: 1;
}
.is-rangeslider:focus {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: 2px;
}
.is-rangeslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px !important;
  height: 24px !important;
  border-radius: 3px !important;
  background: var(--rangeslider-thumb-color);
  cursor: pointer;
  margin: 0 !important;
}
.is-rangeslider::-moz-range-thumb {
  width: 25px !important;
  height: 24px !important;
  border-radius: 3px !important;
  background: var(--rangeslider-thumb-color);
  cursor: pointer;
  margin: 0 !important;
}
.is-rangeslider::-webkit-slider-runnable-track {
  height: auto !important;
  background: none !important;
  border: none !important;
}

/* Add top space of 55px */
:root {
  --topspace: 55px;
}

body.topspace .is-content-view {
  margin-top: calc(6vh + var(--topspace)) !important;
}

body.topspace .is-sidebar {
  height: calc(100vh - var(--topspace)) !important;
  top: var(--topspace) !important;
  border-right: #e7e7e7 1px solid;
}

body.topspace .is-sidebar-content {
  height: calc(100vh - var(--topspace)) !important;
  top: var(--topspace) !important;
  border: #e7e7e7 1px solid;
}

body.dark.topspace .is-sidebar {
  border-right: none;
}

body.dark.topspace .is-sidebar-content {
  border: none;
}

.custom-topbar {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--cb-text);
  display: none;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--topspace);
  background: #fff;
  z-index: 10;
}
.custom-topbar button {
  width: auto;
  height: 33px;
  padding: 0px 16px;
  border-radius: 30px;
  margin: 0 3px;
  color: var(--cb-text);
  background-color: transparent;
  box-shadow: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  transition: all 0.15s ease;
}
.custom-topbar button.w-full {
  width: 100%;
}
.custom-topbar button.auto {
  width: auto;
  padding: 0 14px;
}
.custom-topbar button > span {
  margin-left: 5px;
}
.custom-topbar button:hover {
  background-color: var(--cb-fill-hover);
}
.custom-topbar button.on, .custom-topbar button.active, .custom-topbar button[aria-pressed=true] {
  background-color: var(--cb-accent-fill);
  color: var(--cb-accent);
}
.custom-topbar svg {
  width: 16px;
  height: 16px;
}
.custom-topbar svg:not([fill]) {
  fill: currentColor;
}
.custom-topbar .tooltip {
  /* prevent overide by css framework */
  opacity: unset;
  padding: 0;
  color: inherit;
}

body.topspace .custom-topbar {
  display: flex;
}

/* Zoomed in far enough (or on a narrow screen) the bar's controls no longer fit
   across the width. Let the bar itself scroll so Back, Save and Publish stay
   reachable, instead of being cut off the edge with no way to get to them. */
@media (max-width: 760px) {
  .custom-topbar {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .custom-topbar > div {
    width: auto;
    flex: 0 0 auto;
  }
}
.custom-topbar div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-topbar > div:first-child {
  justify-content: flex-start;
  padding-left: 30px;
  height: var(--topspace);
}

@media all and (max-width: 1100px) {
  .custom-topbar > div:first-child {
    display: none;
  }

  .custom-topbar > div:nth-child(2) {
    margin-left: 0;
  }
}
.custom-topbar > div:nth-child(3) {
  justify-content: flex-end;
  padding-right: 20px;
  height: var(--topspace);
}

.custom-topbar > div:nth-child(2) {
  transition: all 0.3s ease;
}

body.controlpanel:not(.shift-off) .custom-topbar > div:nth-child(2) {
  margin-left: -245px;
}

.dark .custom-topbar {
  background: rgb(24, 24, 24);
}

.custom-topbar .separator {
  width: 2px;
  height: 35px;
  border-right: #cecece 1px solid;
  margin: 0 10px;
}

.dark .custom-topbar .separator {
  border-right: #898989 1px solid;
}

/* Centered IFrame */
body.frame-center #editPanel {
  justify-content: center !important;
}

/* The scaled canvas, out of flow.
 *
 * transform: scale() never shrinks the layout box, so a canvas left in the flex flow
 * reserves its unscaled height and the workspace scrolls even when the canvas visibly
 * fits. Absolute positioning takes it out of the reckoning; iframepanel.applyCanvasScale
 * computes where it goes. Same shape as the scaled-fullview rule further down.
 *
 * Placed after body.frame-center on purpose: that rule sets margin-top and
 * transform-origin with !important at the same specificity, so source order is what
 * settles it. Moving this block above it silently restores centre-origin scaling.
 */
body.canvas-scaled .is-content-view {
  position: absolute !important;
  top: var(--view-top) !important;
  left: var(--view-left) !important;
  margin: 0 !important;
  width: var(--view-width) !important;
  height: var(--view-height) !important;
  transform: scale(var(--view-scale)) !important;
  transform-origin: top left !important;
}

/* /CONTROL PANEL */
/* THEME */
.dark {
  /*
  .builder-ui {
      // Text, links and icons are token-driven in the base rules, so all that
      // is left here is what genuinely differs in dark.
      .part-breadcrumb svg {
          width:17px;
          height:17px;
      }

      .panel-plugin {
          .is-accordion {
              & > div {
                  border: 1px solid #6e6e6e;

                  & > div:first-child {
                      background: transparent;
                  }
              }
          }
          .is-outline {
              border: 1px solid rgb(118 118 118);
          }
          .is-tips {
              background: rgb(66 66 66); color: inherit;
          }

          button {
              background-color: rgb(64 64 64);
          }
      }

      // Labels, selects, group borders and accordion headers are token-driven
      // in the base rules now, so only the checkbox opacity is left.
      input[type=checkbox] {
          opacity: 0.7;
      }

      // Colours come from the --cs-* set, which is token-driven. Inverting the
      // option thumbnails is the only thing here that is genuinely dark-only.
      .custom-select {
          .select-styled span img,
          .select-options li img {
              filter: invert(1);
              opacity: 0.7;
          }
      }

      .scroll-darker * {
          scrollbar-width: thin;
          scrollbar-color: rgba(0, 0, 0, 0.2) auto;
      }
      .scroll-darker *::-webkit-scrollbar {
          width: 12px;
      }
      .scroll-darker *::-webkit-scrollbar-track {
          background: rgba(200, 200, 200, 0.2);
      }
      .scroll-darker *::-webkit-scrollbar-thumb {
          background-color:rgba(0, 0, 0, 0.4); 
      }
  }
  */
}
.dark [data-cb-ui] .is-sidebar.is-area {
  background: #181818 !important;
}
.dark [data-cb-ui] .is-sidebar.is-area button svg {
  fill: #d3d3d3 !important;
}
.dark [data-cb-ui] .is-rangeslider {
  background: #545454 !important;
}
.dark [data-cb-ui] .is-area-2nd, .dark [data-cb-ui] #divSidebarTypography {
  background: #535353 !important;
}
.dark [data-cb-ui] #divSidebarSnippets, .dark [data-cb-ui] #divStyles {
  background: #cacaca !important;
}
.dark #editPanel, .dark .is-content-view {
  background: #a3a3a3;
}
.dark .is-content-view > div {
  background: #5d5d5d;
}
.dark .is-content-view iframe {
  opacity: 0.97;
}
.dark .is-controlpanel[data-cb-ui] {
  background-color: rgb(24, 24, 24);
}
.dark .is-controlpanel[data-cb-ui] button.is-btn-color {
  border: 1px solid rgba(255, 255, 255, 0.3215686275);
}
.dark .is-controlpanel[data-cb-ui] [class^=panel-].panel-pop {
  background-color: rgb(24, 24, 24);
  border: #6f6f6f 1px solid;
}
.dark .is-controlpanel[data-cb-ui] .panel-dialog {
  background-color: rgb(24, 24, 24);
}
.dark .is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks {
  border-top: #efefef 1px solid;
}
.dark .is-controlpanel[data-cb-ui] .panel-dialog.blocks .div-blocks > div {
  outline: #d5d5d5 1px solid;
}

/* /THEME */
/*
// Box Tool (if  controlPanel: false)
*/
.is-box-tool {
  display: none;
  z-index: 1001;
  position: absolute;
  top: auto;
  bottom: 0;
  left: calc(50% - 80px);
  right: auto;
  box-sizing: border-box;
  line-height: 28px;
  outline: none;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  overflow: hidden;
}
.is-box-tool button {
  width: 32px !important;
  height: 32px !important;
  cursor: pointer;
}
.is-box-tool button svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: #fff !important;
}
.is-box-tool button.is-box-edit {
  background: rgb(0, 172, 214);
}
.is-box-tool button.is-module-edit {
  background: #FF9800;
}

[data-cb-ui] .is-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.97);
  color: rgba(0, 0, 0, 0.8);
  border-right: rgba(0, 0, 0, 0.05) 1px solid;
  z-index: 10004;
  opacity: 0.0001;
}
[data-cb-ui] .is-sidebar button.is-sidebar-button {
  width: 100%;
  height: 50px;
  background-color: transparent;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  cursor: pointer;
}
[data-cb-ui] .is-sidebar button.is-sidebar-button svg {
  width: 18px;
  height: 18px;
}
[data-cb-ui] .is-sidebar button.is-sidebar-button span {
  font-family: serif;
  font-size: 20px;
  display: inline-block;
  width: 50px;
}
[data-cb-ui] .is-sidebar button.is-sidebar-button:focus-visible {
  outline: var(--cb-field-focus-outline);
  outline-offset: -2px;
}
[data-cb-ui] .is-sidebar button.is-sidebar-button:hover, [data-cb-ui] .is-sidebar button.is-sidebar-button.active {
  background-color: rgba(133, 133, 133, 0.13);
}

.dark [data-cb-ui] .is-sidebar {
  background: #181818;
}

.is-sidebar-content {
  z-index: 10003;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding: 0;
  background: rgba(255, 255, 255, 0.96);
  color: rgba(0, 0, 0, 0.8);
  transition-property: transform;
  transition-duration: 0.3s;
  transform: translate3d(-120%, 0, 0);
  outline: none;
  display: none;
}

.is-sidebar-content.active {
  transform: translate3d(0, 0, 0);
}

.is-sidebar-content > div {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.is-sidebar-content textarea:focus {
  outline: none;
}

.is-sidebar-content select:focus {
  outline: none;
}

.is-sidebar-title {
  font-family: sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
}

/* 
    Sidebar Panels: 
        #divSidebarSections, 
        #divSidebarSnippets, 
        #divSidebarTypography, 
        #divSidebarSource
*/
#divSidebarSnippets {
  max-width: 300px !important;
  border-left: 60px solid transparent !important;
}

.snippet-item {
  width: 180px !important;
}

#divSidebarTypography {
  max-width: 320px;
}

#divSidebarSnippets > div:first-child {
  width: 100%;
  height: 40px;
  position: absolute;
  padding: 0;
  box-sizing: border-box;
}

#divSidebarSnippets > div:first-child > .is-selectbox {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
}

#divSidebarSections > div,
.sidebar-sections > div {
  padding: 0 0 0 60px;
  box-sizing: border-box;
}

#divSidebarSource > div {
  padding: 0 0 0 60px;
  box-sizing: border-box;
}

#divSidebarTypography > div {
  padding: 0 0 0 60px;
  box-sizing: border-box;
}

#divSidebarTypography label {
  margin: 0 20px 0 0;
  display: flex;
  align-items: center;
}
#divSidebarTypography label input {
  margin: 0;
}
#divSidebarTypography label span {
  margin-left: 5px;
  line-height: 1;
}
#divSidebarTypography #btnTypoClear {
  width: 40px;
  height: 35px;
  display: flex;
  background: transparent;
  box-shadow: none;
  margin-right: 5px;
}

#divSidebarSections {
  width: 100%;
  max-width: 460px;
}

@media all and (min-width: 690px) {
  #divSidebarSections {
    max-width: 650px;
  }
}
@media all and (min-width: 970px) {
  #divSidebarSections {
    max-width: 930px;
  }
}
#divSidebarSections.large {
  width: 100%;
}

@media all and (min-width: 765px) {
  #divSidebarSections.large {
    max-width: 615px;
  }
}
@media all and (min-width: 1260px) {
  #divSidebarSections.large {
    max-width: 1110px;
  }
}
@media all and (min-width: 1770px) {
  #divSidebarSections.large {
    max-width: 1620px;
  }
}
#divSidebarSections.medium {
  width: 100%;
  max-width: 1280px;
}

@media all and (max-width: 1400px) {
  #divSidebarSections.medium {
    max-width: 880px;
  }
}
#divSidebarSections.small {
  width: 100%;
  max-width: 930px;
}

#divSelector {
  position: absolute;
  top: 110px;
  right: 0;
  width: 100%;
  z-index: 2;
  padding: 0 0 0 60px;
  box-sizing: border-box;
}
#divSelector .inp-typolist.custom-select .select-styled {
  outline-offset: -2px;
  border: none;
  border-radius: 0;
}
#divSelector .inp-typolist.custom-select .select-options {
  max-height: 330px;
}

#divStyles {
  border-top: transparent 46px solid;
  padding: 35px 15px 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  top: 110px;
  left: 60px;
  width: calc(100% - 60px);
  height: calc(100% - 110px);
  position: absolute;
}

#divStyles > .typo-style {
  width: 100%;
  margin: 30px 0 70px;
  display: flex;
  /* a real button, styled as the tile it was before: a button centres its
     content by default, which collapses the tile to the caption's height */
  background: none;
  padding: 0;
  font: inherit;
  text-align: inherit;
  align-items: stretch;
  height: auto;
  color: #000;
  border: rgba(205, 205, 205, 0.75) 1px solid;
  box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0.08);
  position: relative;
  cursor: pointer;
}

#divStyles > .typo-style div:first-child {
  text-align: center;
  transition: all 0.3s ease;
  position: absolute;
  background: transparent;
  top: -45px;
  right: 0;
  width: 100%;
  padding: 3px 10px;
  box-sizing: border-box;
  border: none;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 1.4;
  z-index: 1;
  -webkit-transition: all 0.16s ease;
  transition: all 0.16s ease;
}

#divStyles > .typo-style img {
  width: 100%;
  height: auto;
  min-height: 200px;
  -webkit-transition: all 0.16s ease;
  transition: all 0.16s ease;
}

#divStyles .is-overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

#divStyles > .typo-style .is-overlay:after {
  background: rgba(0, 0, 0, 0.03);
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease-in-out;
  opacity: 0;
}

#divStyles > .typo-style:hover .is-overlay:after {
  opacity: 0.9;
}

.dark #divStyles > .typo-style .is-overlay:after {
  background: rgba(78, 78, 78, 0.09);
}

#divStyles > .typo-style:focus-visible {
  outline: var(--focus-outline-color) 2px solid;
  outline-offset: 2px;
}

#divStyles > .typo-style.active img {
  outline: var(--focus-outline-color) 2px solid;
  transition: none !important;
}

#divSidebarSource,
.sidebar-sections {
  width: 100%;
}

@media all and (min-width: 640px) {
  #divSidebarSource, .sidebar-sections {
    max-width: 550px;
  }
}
@media all and (min-width: 1024px) {
  #divSidebarSource, .sidebar-sections {
    max-width: 1005px;
  }
}
@media all and (min-width: 1440px) {
  #divSidebarSource, .sidebar-sections {
    max-width: 1005px;
  }
}
/*
- Modals for Edit Box & Edit Section (if controlPanel: false)
- Custom Model for openModal()
*/
[data-cb-ui] {
  /* Custom Model for openModal() */
}
[data-cb-ui] .editbox .is-tabs a {
  font-size: 11px;
  color: #000;
}
[data-cb-ui] .is-modal.editbox button,
[data-cb-ui] .is-modal.editsection 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.editbox button span {
  margin-left: 5px;
}
[data-cb-ui] .is-modal.editbox button svg {
  width: 12px;
  height: 12px;
  flex: none;
}
[data-cb-ui] .is-modal.editbox button.input-box-bgimage {
  margin-right: 1px;
}
[data-cb-ui] .is-modal.editbox button.input-box-bgimage svg {
  width: 14px;
  height: 14px;
}
[data-cb-ui] .is-modal.editbox button.input-box-bgimageadjust {
  width: 40px;
}
[data-cb-ui] .is-modal.editbox .box-bgimage-preview img {
  max-width: 120px;
  max-height: 120px;
}
[data-cb-ui] .is-modal.editbox button.cmd-box-content-pos {
  width: 40px;
}
[data-cb-ui] .is-modal.editbox label,
[data-cb-ui] .is-modal.editsection label {
  font-size: 13px;
}
[data-cb-ui] .is-modal.editsection button {
  width: auto;
}
[data-cb-ui] .is-modal.editsection button svg {
  flex: none;
  width: 10px;
  height: 10px;
}
[data-cb-ui] .is-modal.editsection button.cmd-section-height,
[data-cb-ui] .is-modal.editsection button.cmd-box-spacing,
[data-cb-ui] .is-modal.editsection button.cmd-scroll-preset,
[data-cb-ui] .is-modal.editsection button.cmd-section-duplicate {
  width: 45px;
}
[data-cb-ui] .is-modal.editsection button.cmd-section-duplicate {
  padding: 0 22px;
}
[data-cb-ui] .is-modal.editsection button.cmd-section-duplicate svg {
  margin-left: -4px;
}
[data-cb-ui] .is-modal.editsection button.cmd-section-duplicate span {
  margin-left: 5px;
  font-size: 12px;
  text-transform: none;
}
[data-cb-ui] .label-checkbox {
  margin: 0;
  display: flex;
  align-items: center;
}
[data-cb-ui] .is-modal.custom-modal button.modal-close {
  position: absolute;
  top: 4px;
  right: 10px;
  width: 30px;
  height: 30px;
  font-size: 23px;
  background: transparent !important;
}

/*
- Content (if controlPanel: false)
*/
.is-wrapper {
  opacity: 0.01;
  /* setting display=none makes initial script may not work properly */
  transform-origin: top;
}
.is-wrapper.is-edit {
  padding-left: 61px;
}
.is-wrapper.is-container-edit > div.section-select, .is-wrapper.is-clean-edit > div.section-select {
  overflow-x: unset !important;
  overflow-y: unset !important;
}
.is-wrapper .transition-edit.is-section {
  transition: all 0.2s ease !important;
}
.is-wrapper .transition-edit .is-box {
  transition: all 0.2s ease !important;
}
.is-wrapper .is-builder {
  transition: unset;
}

.page-overlay {
  background: rgba(0, 0, 0, 0.0001);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.waiting-indicator {
  background: rgba(0, 0, 0, 0.35);
  position: absolute;
  height: auto;
  padding: 10px 30px;
  box-sizing: border-box;
  width: auto;
  color: #fff;
  z-index: 10005;
}

.waiting-indicator-overlay {
  background: rgba(255, 255, 255, 0.3);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10005;
}

.waiting-indicator div {
  transform: scale(1, 1);
  animation-name: waiting-indicator-anim;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes waiting-indicator-anim {
  0% {
    transform: scale(1, 1);
    opacity: 0;
  }
  50% {
    transform: scale(1, 1);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
/* fullview & no topspace */
body.fullview .is-content-view.fullview iframe {
  width: 100%;
  height: 100%;
}

body.fullview #editPanel {
  left: 61px !important;
  right: 0px !important;
  transition: all 0.3s ease;
}

body.fullview.controlpanel #editPanel {
  left: 61px !important;
  right: 290px !important;
  height: 100vh !important;
  width: unset !important;
  transition: all 0.3s ease;
}

body.fullview .is-content-view {
  width: 100%;
  margin-top: 0 !important;
  height: 100vh !important;
  transform: scale(1);
}

body.fullview.controlpanel .is-content-view {
  width: 100%;
  margin-top: 0 !important;
  height: 100vh !important;
  margin-right: 0;
  transform: scale(1);
}

body.fullview .is-content-view > div:first-child {
  display: none !important;
}

/* fullview & topspace */
body.fullview.topspace .is-content-view.fullview iframe {
  height: calc(100vh - var(--topspace));
}

body.fullview.frame-center #editPanel {
  left: 61px !important;
  right: 0px !important;
  transition: all 0.3s ease;
}

body.fullview.controlpanel.frame-center:not(.shift-off) #editPanel {
  left: 61px !important;
  right: 290px !important;
  height: 100vh !important;
  width: unset !important;
}

body.fullview.topspace .is-content-view {
  width: 100%;
  margin-top: var(--topspace) !important;
  height: calc(100vh - var(--topspace)) !important;
  transform: scale(1);
}

body.fullview.controlpanel.topspace .is-content-view {
  width: 100%;
  margin-top: var(--topspace) !important;
  height: calc(100vh - var(--topspace)) !important;
  margin-right: 0;
  transform: scale(1);
}

body.fullview.topspace .is-content-view > div:first-child {
  display: none !important;
}

body.fullview.topspace .is-content-view iframe {
  height: 100%;
}

/* Scaled fullview.
   On a display too narrow to show a desktop viewport 1:1, fullview renders a fixed
   logical width scaled down to fit — the same approach as .desktop / .desktop-lg —
   so the iframe viewport stays in the desktop breakpoint band. The custom properties
   are set from IframePanel.applyFullviewScale().

   The canvas is taken out of the flex flow and anchored with position/top/left, with
   transform-origin at top left. The layout box is deliberately larger than #editPanel
   (the transform is what makes it fit), and both of the panel's centering mechanisms —
   justify-content:center from body.frame-center and transform-origin:center — position
   an overflowing box relative to its own size, which would make the visible geometry a
   function of the height being computed. Anchoring makes it deterministic: the scaled
   canvas occupies exactly 0..availableWidth by topOffset..panelHeight.

   Selectors carry four classes so they outrank the transform:scale(1) /
   height:100vh !important fullview rules above, the media-query transform ladder, and
   the transform-origin:center !important from body.frame-center. */
body.fullview.fullview-scaled .is-content-view,
body.fullview.fullview-scaled.controlpanel .is-content-view,
body.fullview.fullview-scaled.topspace .is-content-view,
body.fullview.fullview-scaled.controlpanel.topspace .is-content-view {
  position: absolute !important;
  top: var(--fullview-top) !important;
  left: 0 !important;
  margin-top: 0 !important;
  width: var(--fullview-width) !important;
  height: var(--fullview-height) !important;
  transform: scale(var(--fullview-scale)) !important;
  transform-origin: top left !important;
}

/* Unpin the iframe from the 100vh-based heights so it fills the logical canvas. */
body.fullview.fullview-scaled .is-content-view.fullview > div.iframe-wrapper,
body.fullview.fullview-scaled .is-content-view.fullview iframe {
  height: 100% !important;
}

/* Manual width dragging would break the logical-width invariant. */
body.fullview.fullview-scaled .is-content-view > div.iframe-resizer {
  display: none !important;
}

/* Iframe Resizer */
.is-content-view > div.iframe-resizer {
  position: absolute !important;
  background-color: rgb(222, 222, 222);
  width: 6px;
  height: 60px !important;
  top: calc(50% - 30px);
  right: -12px;
  z-index: 3;
  cursor: ew-resize;
  display: block !important;
}

.resizer-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  display: none;
  background-color: rgba(255, 255, 255, 0.0000001);
  z-index: 2;
  cursor: ew-resize;
}

.is-content-view.transition-none {
  transition: none !important;
}