/* Editor only: thin dashed frame on div widgets (e.g. box) while not hovered or selected. */
.ck.ck-content .div-widget {
  outline-style: dashed;
}
.ck.ck-content .div-widget:not(.ck-widget_selected):not(:hover) {
  outline-width: 1px;
  outline-color: #94a3b8;
}
.ck.ck-content .div-widget.ck-widget_selected {
  outline-style: solid;
}
/* Inner spacing, so nested frames (box, item) do not merge into each other. */
.ck.ck-content .div-widget > .div-widget-inner {
  padding: 8px;
}

/* Items in a box: plain editable areas with a dotted frame. */
.ck.ck-content .div-widget-item {
  padding: 8px;
  outline: 1px dotted #94a3b8;
}

/* Custom class form in the balloon. */
.ck.ck-div-widget-class-form {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-spacing-standard);
  padding: var(--ck-spacing-standard);
}
.ck.ck-div-widget-class-form .ck-labeled-field-view {
  min-width: 260px;
}

/* The item with the cursor: solid frame. */
.ck.ck-content .div-widget-item.div-widget-item_active {
  outline: 1px solid #64748b;
}

/* The main toolbar and its dropdowns stay above the floating box toolbar. */
.ck.ck-editor__top {
  position: relative;
  z-index: calc(var(--ck-z-panel) + 1);
}