/* =============================================================================
   Midnight TinyMCE (classic mce-* + tox) — CRM + SaaS
   Premium dark chrome; iframe body themed via boot.js content_style patch
   ============================================================================= */

:is(html.midnight, html[data-bs-theme="midnight"], html.app-admin.midnight, html.app-admin[data-bs-theme="midnight"]) {
  --nx-mce-bg: #1a1a1a;
  --nx-mce-chrome: #141414;
  --nx-mce-toolbar: #161616;
  --nx-mce-border: rgba(255, 255, 255, 0.12);
  --nx-mce-icon: rgba(197, 205, 216, 0.88);
  --nx-mce-icon-hover: #fff;
  --nx-mce-hover: rgba(197, 205, 216, 0.14);
  --nx-mce-radius: 0.75rem;
}

/* Shell */
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce.mce-container,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce.mce-panel,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox.tox-tinymce {
  border: 1px solid var(--nx-mce-border) !important;
  border-radius: var(--nx-mce-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
  background: var(--nx-mce-chrome) !important;
  background-color: var(--nx-mce-chrome) !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce .mce-container,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce .mce-container-body,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce .mce-panel,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce .mce-stack-layout,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce .mce-stack-layout-item,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce table,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce td,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tinymce tr {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Toolbar */
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-toolbar,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-toolbar-grp,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-container-body .mce-toolbar,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-top-part,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-top-part::before,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-editor-header,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-toolbar-overlord,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-toolbar,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-toolbar__primary,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-toolbar__overflow {
  background: var(--nx-mce-toolbar) !important;
  background-color: var(--nx-mce-toolbar) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nx-mce-border) !important;
  box-shadow: none !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-btn,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-btn button,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-flow-layout-item,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-tbtn {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--nx-mce-icon) !important;
  border-radius: 0.45rem !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-btn:hover,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-btn:hover button,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-btn.mce-active,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-btn.mce-active button,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-tbtn:hover,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-tbtn--enabled,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-tbtn--enabled:hover {
  background: var(--nx-mce-hover) !important;
  background-color: var(--nx-mce-hover) !important;
  color: var(--nx-mce-icon-hover) !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-toolbar button i,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-ico,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-caret,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-tbtn svg,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-icon svg {
  color: var(--nx-mce-icon) !important;
  fill: currentColor !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-btn:hover .mce-ico,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-btn.mce-active .mce-ico,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-tbtn:hover svg {
  color: #fff !important;
  fill: #fff !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-splitbtn .mce-open,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-menubtn button {
  background: transparent !important;
}

/* Edit area (iframe chrome) */
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-edit-area,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-edit-area.mce-container,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-edit-area iframe,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-edit-area,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-edit-area__iframe {
  background: var(--nx-mce-bg) !important;
  background-color: var(--nx-mce-bg) !important;
  border: 0 !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-statusbar,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-path,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-resizehandle,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-statusbar {
  background: var(--nx-mce-chrome) !important;
  border: 0 !important;
  border-top: 1px solid var(--nx-mce-border) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Dropdowns / menus / dialogs (body-level) */
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-menu,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-floatpanel,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-panel.mce-floatpanel,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-window,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-popover,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox-tinymce-aux .tox-menu,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox-tinymce-aux .tox-dialog,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-menu {
  background: #161616 !important;
  background-color: #161616 !important;
  border: 1px solid var(--nx-mce-border) !important;
  border-radius: 0.65rem !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
  color: #e8eaed !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-menu-item,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-menu-item .mce-text,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-collection__item {
  color: rgba(245, 248, 255, 0.88) !important;
  background: transparent !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-menu-item:hover,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-menu-item.mce-selected,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-menu-item:focus,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-collection__item--active,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-collection__item--enabled {
  background: rgba(197, 205, 216, 0.16) !important;
  color: #fff !important;
}

/* Tooltip: only style the inner bubble — outer .mce-tooltip must stay transparent */
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  padding: 0 !important;
}
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-inner,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-tooltip__body {
  background: #1c1c1c !important;
  background-color: #1c1c1c !important;
  color: #f3f5f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.45rem !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 0.4rem 0.65rem !important;
}
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-arrow {
  border-color: transparent !important;
}
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-n .mce-tooltip-arrow,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-nw .mce-tooltip-arrow,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-ne .mce-tooltip-arrow {
  border-bottom-color: #1c1c1c !important;
}
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-s .mce-tooltip-arrow,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-sw .mce-tooltip-arrow,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-se .mce-tooltip-arrow {
  border-top-color: #1c1c1c !important;
}
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-e .mce-tooltip-arrow {
  border-left-color: #1c1c1c !important;
}
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-tooltip-w .mce-tooltip-arrow {
  border-right-color: #1c1c1c !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-window-head,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-window-body,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-foot,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-dialog__header,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-dialog__body,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-dialog__footer {
  background: #161616 !important;
  color: #e8eaed !important;
  border-color: var(--nx-mce-border) !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-textbox,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-combobox input,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-textfield,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-listboxfield .tox-listbox--select,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-textarea {
  background: #1a1a1a !important;
  border: 1px solid var(--nx-mce-border) !important;
  color: #f3f5f7 !important;
  border-radius: 0.5rem !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-primary,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-primary button,
:is(html.midnight, html[data-bs-theme="midnight"]) .tox .tox-button:not(.tox-button--secondary):not(.tox-button--icon) {
  background: rgba(197, 205, 216, 0.22) !important;
  border: 1px solid rgba(197, 205, 216, 0.35) !important;
  color: #fff !important;
  border-radius: 0.55rem !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .mce-abs-end,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-abs-layout-item {
  border-color: transparent !important;
}

/* Kill light skin white flashes on separators */
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-toolbar .mce-separator,
:is(html.midnight, html[data-bs-theme="midnight"]) .mce-toolbar-grp .mce-flow-layout-item.mce-last {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* =============================================================================
   Canon upload wells + Summernote — 1:1 with TinyMCE chrome
   Shop dark: html[data-bs-theme="dark"]  |  CRM/SaaS: html.midnight
   ============================================================================= */
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) {
  --nx-mce-bg: #1a1a1a;
  --nx-mce-chrome: #141414;
  --nx-mce-toolbar: #161616;
  --nx-mce-border: rgba(255, 255, 255, 0.12);
  --nx-mce-icon: rgba(197, 205, 216, 0.88);
  --nx-mce-icon-hover: #fff;
  --nx-mce-hover: rgba(197, 205, 216, 0.14);
  --nx-mce-radius: 0.75rem;
  --nx-mce-text: #e8eaed;
  --nx-drop-fill: #141414;
  --nx-drop-hover: #1a1a1a;
  --nx-drop-line: rgba(197, 205, 216, 0.4);
  --nx-drop-plus: 4.25rem;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor.note-frame,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor.note-airframe {
  background: var(--nx-mce-chrome) !important;
  border: 1px solid var(--nx-mce-border) !important;
  border-radius: var(--nx-mce-radius) !important;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
  color: var(--nx-mce-text) !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-toolbar,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-popover .popover-content,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-toolbar {
  background: var(--nx-mce-toolbar) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nx-mce-border) !important;
  box-shadow: none !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-btn-group .note-btn,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-toolbar button.note-btn,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-toolbar .note-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--nx-mce-icon) !important;
  border-radius: 0.45rem !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-btn:hover,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-btn:focus,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-btn.active,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-toolbar button.note-btn:hover,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-toolbar button.note-btn.active {
  background: var(--nx-mce-hover) !important;
  color: var(--nx-mce-icon-hover) !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-editing-area,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-editing-area .note-editable,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-editing-area .note-codable {
  background: var(--nx-mce-bg) !important;
  color: var(--nx-mce-text) !important;
  border: 0 !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-statusbar,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor.note-frame .note-statusbar {
  background: var(--nx-mce-chrome) !important;
  border: 0 !important;
  border-top: 1px solid var(--nx-mce-border) !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-editor .note-dropdown-menu,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-modal-content,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .note-modal .modal-content {
  background: #161616 !important;
  border: 1px solid var(--nx-mce-border) !important;
  border-radius: 0.65rem !important;
  color: var(--nx-mce-text) !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop.nx-media-image-drop,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .dropzone,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .file-upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1.75rem 1.25rem 1.5rem !important;
  min-height: 11rem;
  text-align: center;
  color: rgba(197, 205, 216, 0.7) !important;
  border: 1.5px dashed var(--nx-drop-line) !important;
  border-radius: var(--nx-mce-radius) !important;
  background:
    linear-gradient(180deg, rgba(197, 205, 216, 0.08), transparent 70%),
    var(--nx-drop-fill) !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop:hover,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop:focus-within,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .dropzone:hover,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .dropzone.dz-drag-hover,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .file-upload-box:hover {
  background:
    linear-gradient(180deg, rgba(197, 205, 216, 0.12), transparent 72%),
    var(--nx-drop-hover) !important;
  border-color: rgba(197, 205, 216, 0.7) !important;
  box-shadow: inset 0 0 0 1px rgba(197, 205, 216, 0.18);
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop .tt-product-thumb {
  margin-top: 0.75rem !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem;
  width: 100%;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop .avatar.avatar-xl,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop .avatar.avatar-xl.choose-media,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .nx-media-image-drop .avatar.avatar-xl {
  width: var(--nx-drop-plus) !important;
  height: var(--nx-drop-plus) !important;
  min-width: var(--nx-drop-plus) !important;
  min-height: var(--nx-drop-plus) !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  line-height: 1 !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop .avatar .no-avatar,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .nx-media-image-drop .avatar.avatar-xl .no-avatar,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .dropzone .dz-message i,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .file-upload-box .dz-message i {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(197, 205, 216, 0.35) !important;
  background: rgba(197, 205, 216, 0.1) !important;
  color: #c5cdd8 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  box-sizing: border-box !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .dropzone .dz-message,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .file-upload-box .dz-message {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 !important;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .dropzone .dz-message i,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .file-upload-box .dz-message i {
  position: relative !important;
  inset: unset !important;
  top: auto;
  left: auto;
  transform: none;
  width: var(--nx-drop-plus) !important;
  height: var(--nx-drop-plus) !important;
  font-size: 1.35rem !important;
  order: 2;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .dropzone .dz-message span,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .file-upload-box .dz-message span {
  order: 1;
}

:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .dropzone .dz-message span,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .file-upload-box .dz-message span,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop .text-muted,
:is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop > .fw-semibold {
  color: rgba(197, 205, 216, 0.55) !important;
}

@media (max-width: 575.98px) {
  :is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) {
    --nx-drop-plus: 3.75rem;
  }
  :is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .tt-image-drop,
  :is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .dropzone,
  :is(html.midnight, html[data-bs-theme="midnight"], html[data-bs-theme="dark"]) .file-upload-box {
    min-height: 9.5rem;
    padding: 1.25rem 0.85rem 1.1rem !important;
  }
}