:root {
  --primary: #24303b;
  --secondary: #9e1a22;
  --accent: #fff;
  --primary-fg: #fff;

  --body-fg: #333;
  --body-bg: #fff;
  --body-quiet-color: #666;
  --body-loud-color: #000;

  --header-color: #ffefef;
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);

  --breadcrumbs-fg: #ccc;
  --breadcrumbs-link-fg: var(--body-bg);
  --breadcrumbs-bg: var(--primary);

  --link-fg: #9e1a22;
  --link-hover-color: #9e1a22;
  --link-selected-fg: #9e1a22;

  --hairline-color: #e8e8e8;
  --border-color: #ccc;

  --error-fg: #ba2121;

  --message-success-bg: #1faa33;
  --message-warning-bg: #f9aa00;
  --message-error-bg: #b81e27;

  --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
  --selected-bg: #e4e4e4; /* E.g. selected table cells */
  --selected-row: #ccc0c0;

  --button-fg: #fff;
  --button-bg: var(--primary);
  --button-hover-bg: #000;
  --default-button-bg: var(--secondary);
  --default-button-hover-bg: #93181f;
  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474;
  --delete-button-bg: var(--secondary);
  --delete-button-hover-bg: #93181f;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);
}

@media (prefers-color-scheme: dark) or (prefers-color-scheme: light) {
  :root {
    --primary: #24303b;
    --secondary: #9e1a22;
    --accent: #fff;
    --primary-fg: #fff;

    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;

    --header-color: #ffefef;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #ccc;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: var(--primary);

    --link-fg: #9e1a22;
    --link-hover-color: #9e1a22;
    --link-selected-fg: #9e1a22;

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;

    --message-success-bg: #1faa33;
    --message-warning-bg: #f9aa00;
    --message-error-bg: #b81e27;

    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ccc0c0;

    --button-fg: #fff;
    --button-bg: var(--primary);
    --button-hover-bg: #000;
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: #93181f;
    --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
    --close-button-hover-bg: #747474;
    --delete-button-bg: var(--secondary);
    --delete-button-hover-bg: #93181f;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);
  }
}

/* MPTT Admin */
.tree-node.children {
  background-image: url(/static/mptt/disclosure-down-black.png) !important;
}

.tree-node.closed {
  background-image: url(/static/mptt/disclosure-right-black.png) !important;
}

.drag-handle {
  background-image: url(/static/mptt/arrow-move-black.png) !important;
}

.tree-node.children,
.tree-node.closed,
.drag-handle {
  opacity: 0.7;
}

.tree-node.children:hover,
.tree-node.closed:hover,
.drag-handle:hover {
  opacity: 1;
}

/* forms */
fieldset .fieldBox {
  margin-right: 40px;
  width: 500px;
}

.aligned .vCheckboxLabel {
  padding-left: 8px;
  padding-top: 8px;
}

.aligned label + div.readonly {
  padding: 4px 0 0;
}

.aligned label + div.readonly::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 26px;
}

.aligned label + div.readonly details,
.aligned label + .treewidget-container {
  display: inline-block;
  min-width: 20em;
}

.aligned label + div.readonly details summary {
  height: 22px;
  margin-top: 4px;
}

.aligned label + div.readonly pre {
  margin: 0;
  padding: 0;
}

.form-row input[type="checkbox"] {
  height: 26px;
}

select {
  width: 260px;
}

.vTextField, .vUUIDField {
  width: 246px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="tel"], textarea, select, .vTextField {
  padding: 6px;
}

.select2-container {
  margin-right: 7px;
}

.inline-group .tabular tr td.original {
  visibility: hidden;
}

.inline-group .tabular tr.has_original td {
  padding-top: 8px;
}