html[data-theme="light"],
:root {
  --project-bg: #f7f7f2;
  --project-fg: #1f2933;
  --project-primary: #244c5a;
  --project-secondary: #4f6f52;
  --project-border: color-mix(in srgb, var(--project-fg) 18%, var(--project-bg));
  --project-panel-bg: color-mix(in srgb, var(--project-secondary) 88%, black);
  --project-panel-fg: #ffffff;
  --project-shadow: rgba(20, 26, 32, 0.08);
  --project-nav-bg: color-mix(in srgb, var(--project-primary) 86%, black);
  --project-nav-hover-bg: color-mix(in srgb, var(--project-primary) 72%, black);

  --primary: var(--project-primary);
  --secondary: var(--project-secondary);
  --accent: var(--project-primary);
  --primary-fg: #ffffff;

  --body-fg: var(--project-fg);
  --body-bg: var(--project-bg);
  --body-quiet-color: color-mix(in srgb, var(--project-fg) 70%, var(--project-bg));
  --body-medium-color: color-mix(in srgb, var(--project-fg) 84%, var(--project-bg));
  --body-loud-color: color-mix(in srgb, var(--project-fg) 94%, black);

  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: var(--project-primary);
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #ffffff;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: var(--project-secondary);

  --link-fg: var(--project-primary);
  --link-hover-color: color-mix(in srgb, var(--project-primary) 76%, black);
  --link-selected-fg: var(--project-primary);

  --hairline-color: var(--project-border);
  --border-color: var(--project-border);

  --error-fg: #8b2f2f;

  --message-debug-bg: color-mix(in srgb, var(--project-bg) 86%, var(--project-fg));
  --message-info-bg: color-mix(in srgb, var(--project-bg) 88%, var(--project-primary));
  --message-success-bg: #dde8dd;
  --message-warning-bg: #f0e3c8;
  --message-error-bg: #f1dfdc;

  --darkened-bg: color-mix(in srgb, var(--project-bg) 92%, var(--project-fg));
  --selected-bg: color-mix(in srgb, var(--project-bg) 84%, var(--project-primary));
  --selected-row: color-mix(in srgb, var(--project-bg) 82%, var(--project-secondary));

  --button-fg: #ffffff;
  --button-bg: var(--project-secondary);
  --button-hover-bg: var(--project-primary);
  --default-button-bg: var(--project-primary);
  --default-button-hover-bg: color-mix(in srgb, var(--project-primary) 72%, black);
  --close-button-bg: color-mix(in srgb, var(--project-fg) 46%, var(--project-bg));
  --close-button-hover-bg: var(--project-primary);
  --delete-button-bg: #7c3a32;
  --delete-button-hover-bg: #642d26;

  --object-tools-fg: #ffffff;
  --object-tools-bg: var(--project-primary);
  --object-tools-hover-bg: color-mix(in srgb, var(--project-primary) 72%, black);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #ffffff;
    --secondary: color-mix(in srgb, var(--project-bg) 82%, white);
    --accent: #ffffff;
    --primary-fg: var(--project-fg);

    --body-fg: #ffffff;
    --body-bg: color-mix(in srgb, var(--project-primary) 56%, black);
    --body-quiet-color: color-mix(in srgb, var(--project-bg) 80%, white);
    --body-medium-color: color-mix(in srgb, var(--project-bg) 90%, white);
    --body-loud-color: #ffffff;

    --header-color: #ffffff;
    --header-branding-color: #ffffff;
    --header-bg: color-mix(in srgb, var(--project-primary) 66%, black);
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #ffffff;
    --breadcrumbs-link-fg: #ffffff;
    --breadcrumbs-bg: color-mix(in srgb, var(--project-secondary) 58%, black);

    --link-fg: #ffffff;
    --link-hover-color: #ffffff;
    --link-selected-fg: #ffffff;

    --hairline-color: color-mix(in srgb, var(--project-bg) 32%, var(--project-fg));
    --border-color: color-mix(in srgb, var(--project-bg) 28%, var(--project-fg));
    --project-nav-bg: color-mix(in srgb, var(--project-primary) 55%, black);
    --project-nav-hover-bg: color-mix(in srgb, var(--project-primary) 44%, black);
    --project-panel-bg: color-mix(in srgb, var(--project-primary) 52%, black);
    --project-panel-fg: #ffffff;

    --error-fg: #ffb9ab;

    --message-debug-bg: color-mix(in srgb, var(--project-primary) 36%, black);
    --message-info-bg: color-mix(in srgb, var(--project-primary) 46%, black);
    --message-success-bg: #465145;
    --message-warning-bg: #665846;
    --message-error-bg: #693f39;

    --darkened-bg: color-mix(in srgb, var(--project-primary) 54%, black);
    --selected-bg: color-mix(in srgb, var(--project-primary) 44%, white);
    --selected-row: color-mix(in srgb, var(--project-primary) 40%, white);

    --button-fg: var(--project-fg);
    --button-bg: #ffffff;
    --button-hover-bg: color-mix(in srgb, var(--project-bg) 90%, white);
    --default-button-bg: #ffffff;
    --default-button-hover-bg: color-mix(in srgb, var(--project-bg) 90%, white);
    --close-button-bg: color-mix(in srgb, var(--project-bg) 78%, white);
    --close-button-hover-bg: #ffffff;
    --delete-button-bg: #efb1a6;
    --delete-button-hover-bg: #f5c1b7;

    --object-tools-fg: var(--project-fg);
    --object-tools-bg: #ffffff;
    --object-tools-hover-bg: color-mix(in srgb, var(--project-bg) 90%, white);

    color-scheme: dark;
  }
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  --primary: #ffffff;
  --secondary: color-mix(in srgb, var(--project-bg) 82%, white);
  --accent: #ffffff;
  --primary-fg: var(--project-fg);
  --body-fg: #ffffff;
  --body-bg: color-mix(in srgb, var(--project-primary) 56%, black);
  --body-quiet-color: color-mix(in srgb, var(--project-bg) 80%, white);
  --body-medium-color: color-mix(in srgb, var(--project-bg) 90%, white);
  --body-loud-color: #ffffff;
  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: color-mix(in srgb, var(--project-primary) 66%, black);
  --header-link-color: #ffffff;
  --breadcrumbs-fg: #ffffff;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: color-mix(in srgb, var(--project-secondary) 58%, black);
  --link-fg: #ffffff;
  --link-hover-color: #ffffff;
  --link-selected-fg: #ffffff;
  --hairline-color: color-mix(in srgb, var(--project-bg) 32%, var(--project-fg));
  --border-color: color-mix(in srgb, var(--project-bg) 28%, var(--project-fg));
  --project-nav-bg: color-mix(in srgb, var(--project-primary) 55%, black);
  --project-nav-hover-bg: color-mix(in srgb, var(--project-primary) 44%, black);
  --project-panel-bg: color-mix(in srgb, var(--project-primary) 52%, black);
  --project-panel-fg: #ffffff;
  --error-fg: #ffb9ab;
  --message-debug-bg: color-mix(in srgb, var(--project-primary) 36%, black);
  --message-info-bg: color-mix(in srgb, var(--project-primary) 46%, black);
  --message-success-bg: #465145;
  --message-warning-bg: #665846;
  --message-error-bg: #693f39;
  --darkened-bg: color-mix(in srgb, var(--project-primary) 54%, black);
  --selected-bg: color-mix(in srgb, var(--project-primary) 44%, white);
  --selected-row: color-mix(in srgb, var(--project-primary) 40%, white);
  --button-fg: var(--project-fg);
  --button-bg: #ffffff;
  --button-hover-bg: color-mix(in srgb, var(--project-bg) 90%, white);
  --default-button-bg: #ffffff;
  --default-button-hover-bg: color-mix(in srgb, var(--project-bg) 90%, white);
  --close-button-bg: color-mix(in srgb, var(--project-bg) 78%, white);
  --close-button-hover-bg: #ffffff;
  --delete-button-bg: #efb1a6;
  --delete-button-hover-bg: #f5c1b7;
  --object-tools-fg: var(--project-fg);
  --object-tools-bg: #ffffff;
  --object-tools-hover-bg: color-mix(in srgb, var(--project-bg) 90%, white);
  color-scheme: dark;
}

/* Remove Add and Change links from the dashboard */
body.dashboard .addlink,
body.dashboard .changelink, .object-tools .historylink {
  display: none !important;
}

#header {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 14px 30px var(--project-shadow);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

#nav-sidebar,
.toggle-nav-sidebar {
  background-color: var(--project-nav-bg);
}

.toggle-nav-sidebar:hover,
.toggle-nav-sidebar:focus,
#nav-filter {
  background-color: var(--project-nav-hover-bg);
}

#nav-sidebar .current-model {
  background: color-mix(in srgb, var(--project-bg) 14%, transparent);
}

#site-name a {
  letter-spacing: 0;
  text-transform: none;
}

#branding {
  grid-column: 1;
  justify-self: start;
}

body.login #branding {
  grid-column: 2;
  justify-self: center;
}

.project-admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.project-admin-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, #ffffff 18%, transparent);
  color: #ffffff;
  font-weight: 700;
}

.project-admin-brand-name {
  color: #ffffff;
  font-weight: 700;
}

.project-header-controls {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

#user-tools,
#user-tools a,
#logout-form button {
  color: var(--header-link-color);
}

#logout-form button,
.theme-toggle {
  border-radius: 999px;
}

#header .theme-toggle,
#header .theme-toggle:hover,
#header .theme-toggle:focus,
#header .theme-toggle:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  margin-inline-start: 0;
  padding: 0;
  color: var(--header-link-color);
}

.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
  fill: currentColor;
  color: currentColor;
  width: 1.2rem;
  height: 1.2rem;
}

div.breadcrumbs {
  position: sticky;
  top: 52px;
  z-index: 999;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.module,
.inline-related,
.selector,
.submit-row,
#changelist-filter,
.paginator,
.object-tools a:link,
.object-tools a:visited {
  border-radius: 8px;
}

.module,
.inline-related,
.selector,
.submit-row,
#changelist-filter {
  box-shadow: 0 10px 24px var(--project-shadow);
}

#changelist,
#changelist .results,
#changelist .paginator,
#changelist .changelist-footer {
  border-radius: 0;
  box-shadow: none;
}

#content-related {
  background: transparent;
}

#content-related .module,
#recent-actions-module {
  border-radius: 0;
  background: transparent;
  padding-bottom: 16px;
}

html[data-theme="light"] #content-related,
html[data-theme="light"] #content-related .module,
html[data-theme="light"] #recent-actions-module,
html[data-theme="auto"] #content-related,
html[data-theme="auto"] #content-related .module,
html[data-theme="auto"] #recent-actions-module {
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-theme="dark"] #content-related,
html[data-theme="dark"] #content-related .module,
html[data-theme="dark"] #recent-actions-module {
  background: var(--project-nav-bg) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #content-related,
  html[data-theme="auto"] #content-related .module,
  html[data-theme="auto"] #recent-actions-module {
    background: var(--project-nav-bg) !important;
  }
}

.module h2,
.module caption,
.inline-group h2,
.selector-chosen h2,
fieldset.module h2,
fieldset.collapse summary {
  background: var(--project-panel-bg);
  color: var(--project-panel-fg);
}

.selector-available-title,
.selector-chosen-title {
  background: var(--project-panel-bg);
  color: var(--project-panel-fg);
}

.selector-available-title label,
.selector-chosen-title label,
.selector-available-title .helptext,
.selector-chosen-title .helptext {
  color: var(--project-panel-fg);
}

html[data-theme="light"] .selector .selector-available-title,
html[data-theme="light"] .selector .selector-chosen-title,
html[data-theme="dark"] .selector .selector-available-title,
html[data-theme="dark"] .selector .selector-chosen-title,
html[data-theme="auto"] .selector .selector-available-title,
html[data-theme="auto"] .selector .selector-chosen-title {
  background: var(--project-panel-bg) !important;
  color: var(--project-panel-fg) !important;
}

html[data-theme="light"] .selector .selector-available-title label,
html[data-theme="light"] .selector .selector-chosen-title label,
html[data-theme="light"] .selector .selector-available-title .helptext,
html[data-theme="light"] .selector .selector-chosen-title .helptext,
html[data-theme="dark"] .selector .selector-available-title label,
html[data-theme="dark"] .selector .selector-chosen-title label,
html[data-theme="dark"] .selector .selector-available-title .helptext,
html[data-theme="dark"] .selector .selector-chosen-title .helptext,
html[data-theme="auto"] .selector .selector-available-title label,
html[data-theme="auto"] .selector .selector-chosen-title label,
html[data-theme="auto"] .selector .selector-available-title .helptext,
html[data-theme="auto"] .selector .selector-chosen-title .helptext {
  color: var(--project-panel-fg) !important;
}

fieldset.collapse summary {
  border: 0;
}

a:link,
a:visited {
  text-underline-offset: 0.14em;
}

input, textarea, select, .vTextField {
  border-radius: 8px;
}

#nav-filter {
  border-radius: 4px;
}

html[data-theme="light"] .inline-related,
html[data-theme="light"] fieldset.module,
html[data-theme="light"] fieldset.module.aligned,
html[data-theme="light"] .module.aligned,
html[data-theme="light"] .selector,
html[data-theme="light"] .selector-available,
html[data-theme="light"] .selector-chosen,
html[data-theme="light"] .aligned fieldset {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

html[data-theme="light"] fieldset.module .form-row,
html[data-theme="light"] fieldset.module.aligned .form-row,
html[data-theme="light"] .module.aligned .form-row {
  background: transparent;
}

html[data-theme="light"] .selector .selector-filter,
html[data-theme="light"] .selector .list-footer-display {
  background: transparent;
}

html[data-theme="light"] body.login .submit-row {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.change-list #changelist .changelist-form-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 240px !important;
  column-gap: 30px;
  align-items: start;
}

.change-list #changelist .changelist-form-container > div {
  grid-column: 1;
  min-width: 0;
}

.change-list #changelist .changelist-form-container:has(#changelist-filter) > div {
  width: 100% !important;
  max-width: none !important;
}

.change-list #changelist-filter {
  grid-column: 2;
  width: 240px !important;
  margin: 0 !important;
  overflow: auto;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .inline-related,
  html[data-theme="auto"] fieldset.module,
  html[data-theme="auto"] fieldset.module.aligned,
  html[data-theme="auto"] .module.aligned,
  html[data-theme="auto"] .selector,
  html[data-theme="auto"] .selector-available,
  html[data-theme="auto"] .selector-chosen,
  html[data-theme="auto"] .aligned fieldset {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  html[data-theme="auto"] fieldset.module .form-row,
  html[data-theme="auto"] fieldset.module.aligned .form-row,
  html[data-theme="auto"] .module.aligned .form-row {
    background: transparent;
  }

  html[data-theme="auto"] .selector .selector-filter,
  html[data-theme="auto"] .selector .list-footer-display {
    background: transparent;
  }

  html[data-theme="auto"] body.login .submit-row {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  body:not(.login) #container {
    padding-top: 92px;
  }

  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  div.breadcrumbs {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
  }

  .main > #nav-sidebar,
  .toggle-nav-sidebar,
  #changelist-filter {
    top: 92px;
  }

  .main > #nav-sidebar,
  #changelist-filter {
    max-height: calc(100vh - 92px);
  }

  #toggle-nav-sidebar,
  #toggle-nav-sidebar.sticky,
  .toggle-nav-sidebar {
    position: fixed !important;
    top: 92px;
    left: 0;
    height: calc(100vh - 92px);
    z-index: 1005;
  }

  .main.shifted > #nav-sidebar {
    padding-left: 23px;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  div.breadcrumbs {
    top: 0;
  }

  #header {
    position: static;
    grid-template-columns: 1fr;
  }

  #branding,
  .project-header-controls {
    grid-column: 1;
  }

  #branding {
    justify-self: start;
  }

  body.login #branding {
    justify-self: center;
  }

  .project-header-controls {
    justify-self: end;
  }

  .change-list #changelist .changelist-form-container {
    grid-template-columns: 640px 220px !important;
    column-gap: 16px;
    overflow-x: auto;
  }

  .change-list #changelist .changelist-form-container > div,
  .change-list #changelist .changelist-form-container:has(#changelist-filter) > div {
    width: 640px !important;
    max-width: none !important;
  }

  .change-list #changelist-filter {
    width: 220px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }
}