/*
 * ItemBits color-mode overrides for Roundcube's Elastic skin.
 *
 * Dark mode uses Stalwart's neutral palette. Light mode keeps Elastic's
 * structure and neutral surfaces, but replaces its blue accent system with
 * the ItemBits ember palette.
 */

html.dark-mode {
  color-scheme: dark;

  /* Stalwart dark tokens */
  --itembits-background: oklch(14.1% 0.005 285.823);
  --itembits-content: oklch(11.5% 0.005 285.823);
  --itembits-card: oklch(20.5% 0.007 285.823);
  --itembits-muted: oklch(27.4% 0.009 285.823);
  --itembits-border: oklch(27.4% 0.009 285.823);
  --itembits-foreground: oklch(98.5% 0.002 285.823);
  --itembits-muted-foreground: oklch(70.8% 0.015 285.823);
  --itembits-ring: oklch(55.3% 0.013 285.823);
  --itembits-accent: #fe9a00;
  --itembits-accent-hover: #ffad33;
  --itembits-accent-foreground: #171719;

  scrollbar-color: var(--itembits-muted-foreground) var(--itembits-content) !important;
}

html.dark-mode body,
html.dark-mode button,
html.dark-mode input,
html.dark-mode optgroup,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .popover {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

html.dark-mode body {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background: #232326 !important;
  background: var(--itembits-background) !important;
}

html.dark-mode #layout-content,
html.dark-mode #layout-list,
html.dark-mode #layout-sidebar {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background-color: #1b1b1d !important;
  background-color: var(--itembits-content) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode #layout-menu,
html.dark-mode.layout-phone #layout-menu {
  background: #1b1b1d !important;
  background: var(--itembits-content) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu .special-buttons,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
html.dark-mode .popup .listbox .footer,
html.dark-mode .menu.pagenav.pagenav-list,
html.dark-mode .menu.pagenav.pagenav-list + .navlist,
html.dark-mode .menu.pagenav.pagenav-list.expanded + .navlist {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background: #303033 !important;
  background: var(--itembits-card) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode #layout-menu .popover-header {
  background: #171719 !important;
  background: var(--itembits-content) !important;
}

#layout-menu .popover-header img {
  width: 50px !important;
  max-width: 50px !important;
  max-height: 58px;
  padding: 0.25rem;
  object-fit: contain;
}

/*
 * Center the logo and form as one unit. Elastic positions both with viewport
 * offsets by default, which becomes unbalanced with a near-square logo.
 */
.task-login #layout-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vh, 2rem);
  min-height: 100%;
  padding: clamp(1.25rem, 4vh, 3rem) 1rem;
  overflow-y: auto;
}

.task-login #logo {
  position: static !important;
  top: auto !important;
  display: block;
  flex: 0 0 auto;
  width: clamp(150px, 16vw, 190px) !important;
  height: auto !important;
  max-width: min(48vw, 190px) !important;
  max-height: 190px !important;
  margin: 0 !important;
  object-fit: contain;
}

.task-login #login-form {
  position: static !important;
  top: auto !important;
  flex: 0 0 auto;
  width: min(95%, 320px);
  max-width: 320px;
  margin: 0 auto !important;
}

@media screen and (max-width: 480px), screen and (max-height: 600px) {
  .task-login #layout-content {
    gap: 1rem;
    padding-block: 0.75rem;
  }

  .task-login #logo {
    width: clamp(110px, 24vh, 150px) !important;
    max-width: 42vw !important;
    max-height: 150px !important;
  }
}

html.dark-mode #logo {
  opacity: 1 !important;
}

html.dark-mode a,
html.dark-mode #taskmenu .action-buttons a,
html.dark-mode .menu.toolbar a.selected,
html.dark-mode .nav-tabs .nav-link.active,
html.dark-mode .ui-datepicker .ui-state-highlight,
html.dark-mode .tox .tox-dialog__body-nav-item--active {
  color: #fe9a00 !important;
  color: var(--itembits-accent) !important;
}

html.dark-mode a:hover,
html.dark-mode a:focus {
  color: #ffad33 !important;
  color: var(--itembits-accent-hover) !important;
}

html.dark-mode #taskmenu a,
html.dark-mode .menu.toolbar a,
html.dark-mode .header a.button,
html.dark-mode .listing li a,
html.dark-mode .listing tbody td,
html.dark-mode .listing tbody td a,
html.dark-mode .proplist li.with-sublist > a.dropdown,
html.dark-mode .table,
html.dark-mode .popover-body,
html.dark-mode .ui-dialog .ui-dialog-title,
html.dark-mode .ui-dialog .ui-dialog-titlebar-close {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
}

html.dark-mode #login-footer,
html.dark-mode .contactlist span.email,
html.dark-mode .file-upload .hint,
html.dark-mode .formcontent .hint,
html.dark-mode .listing span.secondary,
html.dark-mode .listing-info,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
html.dark-mode ::placeholder {
  color: #a4a4aa !important;
  color: var(--itembits-muted-foreground) !important;
  font-weight: 400 !important;
}

html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a.selected,
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .header a.button.icon:not(.disabled):focus,
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):focus,
html.dark-mode .menu a:not(.disabled):hover,
html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover,
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .listing tr:hover td,
html.dark-mode .ui-menu .ui-state-active,
html.dark-mode .tox .tox-collection__item--active,
html.dark-mode .tox .tox-collection__item--enabled {
  background-color: #414145 !important;
  background-color: var(--itembits-muted) !important;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .messagelist tr.selected td.subject a,
html.dark-mode .messagelist tr.selected td.subject span.msgicon.status {
  color: #fe9a00 !important;
  color: var(--itembits-accent) !important;
}

html.dark-mode .listing li,
html.dark-mode .listing li ul,
html.dark-mode .listing tbody td,
html.dark-mode .table td,
html.dark-mode .table th,
html.dark-mode .table thead th,
html.dark-mode .table-widget,
html.dark-mode .table-widget > .footer,
html.dark-mode .nav-tabs,
html.dark-mode .nav-tabs .nav-link,
html.dark-mode .message-part,
html.dark-mode .ui-widget,
html.dark-mode .ui-dialog .ui-dialog-titlebar,
html.dark-mode .ui-dialog .ui-dialog-buttonpane {
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode .popover,
html.dark-mode .popupmenu,
html.dark-mode .ui-menu,
html.dark-mode .ui-widget-content,
html.dark-mode .ui-widget-header,
html.dark-mode .ui-dialog,
html.dark-mode .tox .tox-dialog,
html.dark-mode .tox .tox-dialog__body,
html.dark-mode .tox .tox-dialog__footer,
html.dark-mode .tox .tox-dialog__header,
html.dark-mode .tox .tox-dialog__title {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background: #303033 !important;
  background: var(--itembits-card) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
  box-shadow: none !important;
}

html.dark-mode .custom-file-label,
html.dark-mode .form-control,
html.dark-mode .multi-input > .content,
html.dark-mode .recipient-input,
html.dark-mode .tox .tox-textfield,
html.dark-mode .tox .tox-selectfield select,
html.dark-mode .formcontent.raweditor .CodeMirror {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background-color: #303033 !important;
  background-color: var(--itembits-card) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode .custom-file-label:focus,
html.dark-mode .form-control:focus,
html.dark-mode .multi-input > .content.focused,
html.dark-mode .recipient-input.focus,
html.dark-mode .formcontent.raweditor .CodeMirror-focused {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background-color: #414145 !important;
  background-color: var(--itembits-muted) !important;
  border-color: #fe9a00 !important;
  border-color: var(--itembits-accent) !important;
  box-shadow: 0 0 0 0.2rem rgb(254 154 0 / 20%) !important;
}

html.dark-mode .input-group a:focus {
  border-color: #fe9a00 !important;
  border-color: var(--itembits-accent) !important;
  box-shadow: 0 0 0 0.2rem rgb(254 154 0 / 20%) !important;
}

html.dark-mode .input-group-text,
html.dark-mode .custom-file-label::after,
html.dark-mode .recipient-input .recipient,
html.dark-mode .attachmentslist,
html.dark-mode .message-partheaders,
html.dark-mode .html-editor .editor-toolbar,
html.dark-mode .tox .tox-toolbar,
html.dark-mode .CodeMirror-gutters {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background-color: #414145 !important;
  background-color: var(--itembits-muted) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode .btn-primary,
html.dark-mode .floating-action-buttons a.button,
html.dark-mode .tox .tox-dialog__footer .tox-button:not(.tox-button--secondary) {
  color: #171719 !important;
  color: var(--itembits-accent-foreground) !important;
  background: #fe9a00 !important;
  background: var(--itembits-accent) !important;
  border-color: #fe9a00 !important;
  border-color: var(--itembits-accent) !important;
  box-shadow: none !important;
}

html.dark-mode .btn-primary:hover:not(:disabled),
html.dark-mode .btn-primary:focus:not(:disabled),
html.dark-mode .floating-action-buttons a.button:hover,
html.dark-mode .tox .tox-dialog__footer .tox-button:not(.tox-button--secondary):hover {
  color: #171719 !important;
  color: var(--itembits-accent-foreground) !important;
  background: #ffad33 !important;
  background: var(--itembits-accent-hover) !important;
  border-color: #ffad33 !important;
  border-color: var(--itembits-accent-hover) !important;
}

html.dark-mode .btn-secondary,
html.dark-mode .tox .tox-dialog__footer .tox-button.tox-button--secondary {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background: #414145 !important;
  background: var(--itembits-muted) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode .folderlist li.mailbox .unreadcount {
  color: #171719 !important;
  color: var(--itembits-accent-foreground) !important;
  background-color: #fe9a00 !important;
  background-color: var(--itembits-accent) !important;
  font-weight: 600 !important;
}

html.dark-mode .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before,
html.dark-mode .quota-widget .value {
  background-color: #fe9a00 !important;
  background-color: var(--itembits-accent) !important;
  border-color: #fe9a00 !important;
  border-color: var(--itembits-accent) !important;
}

html.dark-mode input[type="checkbox"],
html.dark-mode input[type="radio"] {
  accent-color: #fe9a00;
  accent-color: var(--itembits-accent);
}

html.dark-mode :focus-visible {
  outline-color: #fe9a00 !important;
  outline-color: var(--itembits-accent) !important;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-track {
  background-color: #1b1b1d !important;
  background-color: var(--itembits-content) !important;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb {
  background-color: #a4a4aa !important;
  background-color: var(--itembits-muted-foreground) !important;
}

html.dark-mode .searchbar {
  background-color: #303033 !important;
  background-color: var(--itembits-card) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode .searchbar a.selected,
html.dark-mode .searchbar a:focus,
html.dark-mode .searchbar a:hover {
  color: #fe9a00 !important;
  color: var(--itembits-accent) !important;
}

html.dark-mode #messagestack .alert-info,
html.dark-mode .ui.alert.boxinformation {
  background-color: #6b4500 !important;
}

html.dark-mode .message-part blockquote {
  color: #ffad33 !important;
  color: var(--itembits-accent-hover) !important;
  background-color: #1b1b1d !important;
  background-color: var(--itembits-content) !important;
  border-color: #fe9a00 !important;
  border-color: var(--itembits-accent) !important;
}

html.dark-mode .message-part blockquote span.blockquote-link {
  color: currentColor !important;
  background: #1b1b1d !important;
  background: var(--itembits-content) !important;
  border-color: currentColor !important;
}

html.dark-mode .image-tools {
  background-color: rgb(254 154 0 / 40%) !important;
}

html.dark-mode .image-tools a:focus,
html.dark-mode .image-tools a:hover {
  background-color: rgb(254 154 0 / 55%) !important;
}

html.dark-mode .ui-slider .ui-slider-range {
  background: #ad6900 !important;
}

html.dark-mode .ui-slider .ui-slider-handle.ui-state-active,
html.dark-mode .ui-datepicker a.ui-state-active {
  color: #171719 !important;
  color: var(--itembits-accent-foreground) !important;
  background: #fe9a00 !important;
  background: var(--itembits-accent) !important;
  border-color: #ad6900 !important;
}

html.dark-mode .iframe-loader {
  background-color: rgb(27 27 29 / 92%) !important;
}

html.dark-mode .iframe-loader .spinner-border {
  color: #fe9a00 !important;
  color: var(--itembits-accent) !important;
  border-color: currentColor #414145 currentColor currentColor !important;
}

html.dark-mode ::selection {
  color: #171719;
  color: var(--itembits-accent-foreground);
  background: #fe9a00;
  background: var(--itembits-accent);
}

/*
 * Displayed HTML messages are intentionally normalized in both modes. This
 * overrides sender-supplied foreground/background colors without changing
 * message structure, images, spacing, or the stored message.
 */

html.dark-mode .message-htmlpart {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background: #303033 !important;
  background: var(--itembits-card) !important;
  padding: clamp(0.75rem, 2vw, 1.25rem) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
  border-radius: 0.25rem;
}

html.dark-mode .message-part {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background: #303033 !important;
  background: var(--itembits-card) !important;
  padding: clamp(0.75rem, 2vw, 1.25rem) !important;
}

html.dark-mode .message-htmlpart .rcmBody,
html.dark-mode .message-htmlpart .rcmBody *:not(img) {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background-color: transparent !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode .message-htmlpart .rcmBody a,
html.dark-mode .message-htmlpart .rcmBody a * {
  color: #fe9a00 !important;
  color: var(--itembits-accent) !important;
}

html.dark-mode p.image-attachment {
  color: #fafafa !important;
  color: var(--itembits-foreground) !important;
  background: #303033 !important;
  background: var(--itembits-card) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode p.image-attachment span,
html.dark-mode fieldset.image-attachment legend {
  color: #a4a4aa !important;
  color: var(--itembits-muted-foreground) !important;
  border-color: #414145 !important;
  border-color: var(--itembits-border) !important;
}

html.dark-mode #messagepartframe {
  background: #1b1b1d !important;
  background: var(--itembits-content) !important;
}

/*
 * Light mode: preserve Elastic's light neutral surfaces, but replace every
 * common blue interaction state with an accessible ember equivalent.
 */

html:not(.dark-mode) {
  --itembits-light-accent: #fe9a00;
  --itembits-light-accent-hover: #e08700;
  --itembits-light-accent-text: #b45309;
  --itembits-light-accent-text-hover: #92400e;
  --itembits-light-accent-surface: #fff3d6;
  --itembits-light-accent-surface-strong: #ffe0a3;
  --itembits-light-foreground: #202124;
  --itembits-light-muted-foreground: #6b7280;
  --itembits-light-border: #d4d4d8;

  accent-color: var(--itembits-light-accent);
}

html:not(.dark-mode) a,
html:not(.dark-mode) .btn-link,
html:not(.dark-mode) .ui.alert a:not(.btn) {
  color: #b45309 !important;
  color: var(--itembits-light-accent-text) !important;
}

html:not(.dark-mode) a:hover,
html:not(.dark-mode) a:focus,
html:not(.dark-mode) .btn-link:hover,
html:not(.dark-mode) .btn-link:focus {
  color: #92400e !important;
  color: var(--itembits-light-accent-text-hover) !important;
}

html:not(.dark-mode) #taskmenu a {
  color: #fff !important;
}

/* Neutral replacements for Elastic's inherited #2f3a3f task-menu family. */
html:not(.dark-mode) #layout-menu {
  background-color: #434343 !important;
}

html:not(.dark-mode) #layout-menu .popover-header {
  background-color: #282828 !important;
}

html:not(.dark-mode) #taskmenu .special-buttons,
html:not(.dark-mode) #rcmdraglayer {
  background-color: #2b2b2b !important;
}

html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a:focus,
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.selected:hover,
html:not(.dark-mode) #taskmenu .action-buttons a:hover {
  background-color: #555 !important;
}

html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu .action-buttons a,
html:not(.dark-mode) #taskmenu .action-buttons a:hover {
  color: #fe9a00 !important;
  color: var(--itembits-light-accent) !important;
}

html:not(.dark-mode) .menu.toolbar a,
html:not(.dark-mode) .header a.button,
html:not(.dark-mode) .listing li a,
html:not(.dark-mode) .listing tbody td,
html:not(.dark-mode) .listing tbody td a,
html:not(.dark-mode) .proplist li.with-sublist > a.dropdown,
html:not(.dark-mode) .table {
  color: #202124 !important;
  color: var(--itembits-light-foreground) !important;
}

html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) .listing li.selected > div > a,
html:not(.dark-mode) .listing tr.selected td,
html:not(.dark-mode) ul.treelist li.selected > a,
html:not(.dark-mode) ul.treelist li.selected > div > a,
html:not(.dark-mode) .table-widget table.options-table tr.selected td,
html:not(.dark-mode) .image-selector .attachmentslist li:focus,
html:not(.dark-mode) .image-selector .attachmentslist li:hover {
  color: #202124 !important;
  color: var(--itembits-light-foreground) !important;
  background-color: #fff3d6 !important;
  background-color: var(--itembits-light-accent-surface) !important;
}

html:not(.dark-mode):not(.touch) .listing li > a:focus,
html:not(.dark-mode):not(.touch) .listing.focus tbody tr.focused > td:first-child,
html:not(.dark-mode):not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
  border-left-color: #fe9a00 !important;
  border-left-color: var(--itembits-light-accent) !important;
}

html:not(.dark-mode) .popover .menu li a:not(.disabled):hover,
html:not(.dark-mode) .popover .menu .dropbutton a.dropdown:hover,
html:not(.dark-mode) .popupmenu .listing li > a:not(.disabled):hover,
html:not(.dark-mode) .popupmenu .listing li.selected,
html:not(.dark-mode) .ui-menu .ui-state-active,
html:not(.dark-mode) .googie_list li.googie_list_onhover {
  color: #171719 !important;
  background-color: #fe9a00 !important;
  background-color: var(--itembits-light-accent) !important;
}

html:not(.dark-mode).layout-phone .popover-header,
html:not(.dark-mode).layout-small .popover-header {
  color: #171719 !important;
  background-color: #b96500 !important;
}

html:not(.dark-mode) .folderlist li.mailbox .unreadcount,
html:not(.dark-mode) .folderlist li.mailbox.recent > a > .unreadcount,
html:not(.dark-mode) .quota-widget .value {
  color: #171719 !important;
  background: #fe9a00 !important;
  background: var(--itembits-light-accent) !important;
}

html:not(.dark-mode) .folderlist li.mailbox.recent > a {
  color: #b45309 !important;
  color: var(--itembits-light-accent-text) !important;
}

html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) .floating-action-buttons a.button,
html:not(.dark-mode) div.tox .tox-dialog__footer .tox-button:not(.tox-button--secondary) {
  color: #171719 !important;
  background: #fe9a00 !important;
  background: var(--itembits-light-accent) !important;
  border-color: #fe9a00 !important;
  border-color: var(--itembits-light-accent) !important;
  box-shadow: none !important;
}

html:not(.dark-mode) .btn-primary:hover:not(:disabled),
html:not(.dark-mode) .btn-primary:focus:not(:disabled),
html:not(.dark-mode) .floating-action-buttons a.button:hover,
html:not(.dark-mode) div.tox .tox-dialog__footer .tox-button:not(.tox-button--secondary):hover,
html:not(.dark-mode) div.tox .tox-dialog__footer .tox-button:not(.tox-button--secondary):focus {
  color: #171719 !important;
  background: #e08700 !important;
  background: var(--itembits-light-accent-hover) !important;
  border-color: #e08700 !important;
  border-color: var(--itembits-light-accent-hover) !important;
  box-shadow: 0 0 0 0.2rem rgb(254 154 0 / 24%) !important;
}

html:not(.dark-mode) .btn:focus {
  box-shadow: 0 0 0 0.2rem rgb(254 154 0 / 24%) !important;
}

html:not(.dark-mode) .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus {
  background-color: #fff3d6 !important;
  background-color: var(--itembits-light-accent-surface) !important;
}

html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) .custom-file-input:focus ~ .custom-file-label,
html:not(.dark-mode) .formcontent.raweditor .CodeMirror-focused,
html:not(.dark-mode) .multi-input > .content.focused,
html:not(.dark-mode) .recipient-input.focus,
html:not(.dark-mode) .tagedit-list[tabindex="-1"],
html:not(.dark-mode) div.tox.focused,
html:not(.dark-mode) div.tox .tox-color-input > input:focus,
html:not(.dark-mode) div.tox .tox-listboxfield .tox-listbox--select:focus,
html:not(.dark-mode) div.tox .tox-textarea:focus,
html:not(.dark-mode) div.tox .tox-textfield:focus {
  border-color: #fe9a00 !important;
  border-color: var(--itembits-light-accent) !important;
  box-shadow: 0 0 0 0.2rem rgb(254 154 0 / 20%) !important;
}

html:not(.dark-mode) .input-group a:focus {
  background-color: #fff3d6 !important;
  background-color: var(--itembits-light-accent-surface) !important;
  border-color: #fe9a00 !important;
  border-color: var(--itembits-light-accent) !important;
  box-shadow: 0 0 0 0.2rem rgb(254 154 0 / 20%) !important;
}

html:not(.dark-mode) .input-group-text input:focus,
html:not(.dark-mode) .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #fe9a00 !important;
  border-color: var(--itembits-light-accent) !important;
}

html:not(.dark-mode) .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgb(254 154 0 / 20%) !important;
}

html:not(.dark-mode) .custom-control-input:checked ~ .custom-control-label::before,
html:not(.dark-mode) .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #fe9a00 !important;
  background-color: var(--itembits-light-accent) !important;
  border-color: #fe9a00 !important;
  border-color: var(--itembits-light-accent) !important;
}

html:not(.dark-mode) input[type="checkbox"],
html:not(.dark-mode) input[type="radio"] {
  accent-color: #fe9a00;
  accent-color: var(--itembits-light-accent);
}

html:not(.dark-mode) :focus-visible {
  outline-color: #fe9a00 !important;
  outline-color: var(--itembits-light-accent) !important;
}

html:not(.dark-mode) .ui.alert:not(.boxerror):not(.boxconfirmation):not(.boxwarning),
html:not(.dark-mode) .ui.alert.boxinformation {
  background-color: #fff3d6 !important;
  background-color: var(--itembits-light-accent-surface) !important;
}

html:not(.dark-mode) #messagestack .alert-info.information {
  color: #171719 !important;
  background-color: #fe9a00 !important;
  background-color: var(--itembits-light-accent) !important;
}

html:not(.dark-mode) .message-part blockquote {
  color: #b45309 !important;
  color: var(--itembits-light-accent-text) !important;
  background: #fffaf0 !important;
  border-color: #fe9a00 !important;
  border-color: var(--itembits-light-accent) !important;
}

html:not(.dark-mode) .image-tools {
  background-color: rgb(254 154 0 / 42%) !important;
}

html:not(.dark-mode) .image-tools a:focus,
html:not(.dark-mode) .image-tools a:hover {
  background-color: rgb(254 154 0 / 58%) !important;
}

html:not(.dark-mode) .ui-slider .ui-slider-range {
  background: #ffe0a3 !important;
  background: var(--itembits-light-accent-surface-strong) !important;
}

html:not(.dark-mode) .ui-slider .ui-slider-handle.ui-state-active,
html:not(.dark-mode) .ui-datepicker a.ui-state-active {
  color: #171719 !important;
  background: #fe9a00 !important;
  background: var(--itembits-light-accent) !important;
  border-color: #b96500 !important;
}

html:not(.dark-mode) .ui-datepicker .ui-datepicker-days-cell-over a,
html:not(.dark-mode) .ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,
html:not(.dark-mode) .ui-datepicker .ui-state-highlight,
html:not(.dark-mode) .ui-datepicker.ui-widget-content .ui-state-highlight {
  color: #b45309 !important;
  color: var(--itembits-light-accent-text) !important;
  background: #fff3d6 !important;
  background: var(--itembits-light-accent-surface) !important;
}

html:not(.dark-mode) div.tox .tox-dialog .tox-dialog__body-nav-item--active,
html:not(.dark-mode) div.tox .tox-dialog .tox-dialog__body-nav-item--active:hover {
  color: #b45309 !important;
  color: var(--itembits-light-accent-text) !important;
}

html:not(.dark-mode) .message-htmlpart {
  color: #202124 !important;
  color: var(--itembits-light-foreground) !important;
  background: #fff !important;
  padding: clamp(0.75rem, 2vw, 1.25rem) !important;
  border-color: #d4d4d8 !important;
  border-color: var(--itembits-light-border) !important;
  border-radius: 0.25rem;
}

html:not(.dark-mode) .message-part {
  color: #202124 !important;
  color: var(--itembits-light-foreground) !important;
  background: #fff !important;
  padding: clamp(0.75rem, 2vw, 1.25rem) !important;
}

html:not(.dark-mode) .message-htmlpart .rcmBody,
html:not(.dark-mode) .message-htmlpart .rcmBody *:not(img) {
  color: #202124 !important;
  color: var(--itembits-light-foreground) !important;
  background-color: transparent !important;
  border-color: #d4d4d8 !important;
  border-color: var(--itembits-light-border) !important;
}

html:not(.dark-mode) .message-htmlpart .rcmBody a,
html:not(.dark-mode) .message-htmlpart .rcmBody a * {
  color: #b45309 !important;
  color: var(--itembits-light-accent-text) !important;
}

html:not(.dark-mode) p.image-attachment {
  color: #202124 !important;
  color: var(--itembits-light-foreground) !important;
  background: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
  border-color: var(--itembits-light-border) !important;
}

html:not(.dark-mode) p.image-attachment span,
html:not(.dark-mode) fieldset.image-attachment legend {
  color: #6b7280 !important;
  color: var(--itembits-light-muted-foreground) !important;
  border-color: #d4d4d8 !important;
  border-color: var(--itembits-light-border) !important;
}

html:not(.dark-mode) #messagepartframe {
  background: #fff !important;
}