:root {
  --primary: #1d68ed;
  --secondary: #1d68ed;
  --accent: #8ac6ea;
  --primary-fg: #fff;

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

  --header-color: rgba(255, 255, 255, 0.6);
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);

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

  --link-fg: #1d68ed;
  --link-hover-color: #036;
  --link-selected-fg: #1d68ed;

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

  --error-fg: #ba2121;

  --message-success-bg: #dfd;
  --message-warning-bg: #ffc;
  --message-error-bg: #ffefef;

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

  --button-fg: #fff;
  --button-bg: var(--primary);
  --button-hover-bg: rgba(29, 104, 237, .1);
  --default-button-bg: var(--secondary);
  --default-button-hover-bg: #205067;
  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: rgba(164, 21, 21, .1);

  --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) {
  --primary: #1d68ed;
  --secondary: #1d68ed;
  --accent: #8ac6ea;
  --primary-fg: #fff;

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

  --header-color: rgba(255, 255, 255, 0.6);
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);

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

  --link-fg: #1d68ed;
  --link-hover-color: #036;
  --link-selected-fg: #1d68ed;

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

  --error-fg: #ba2121;

  --message-success-bg: #dfd;
  --message-warning-bg: #ffc;
  --message-error-bg: #ffefef;

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

  --button-fg: #fff;
  --button-bg: var(--primary);
  --button-hover-bg: rgba(29, 104, 237, .1);
  --default-button-bg: var(--secondary);
  --default-button-hover-bg: #205067;
  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: rgba(164, 21, 21, .1);

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);
}
* {
  box-sizing: border-box !important;
  outline: none !important;
}
#header {
  background: linear-gradient(75deg, #1d68ed, #9055a9);
}
#branding {
  display: flex;
  align-items: center;
}
#branding .header-logo {
  width: 30px;
  height: 30px;
  transform: scale(1.25);
  margin-right: 24px;
}
#branding h1, #branding h1 a:link, #branding h1 a:visited {
  color: var(--body-bg);
  font-weight: 100;
}
#branding h1 a:link b, #branding h1 a:visited b {
  font-weight: 400;
}
#nav-sidebar .current-model {
  background: none;
}
#nav-sidebar .current-model {
  background: linear-gradient(75deg, rgba(29, 104, 237, .175), rgba(144, 85, 169, .075));
}

#user-tools a {
  transition: .25s;
}
#user-tools a:focus,
#user-tools a:hover {
  color: var(--body-bg);
  border-bottom-color: var(--body-bg);
}

#container>div.breadcrumbs {
  background: none;
  color: var(--body-fg);
  padding: 20px 40px;
}
#container>div.breadcrumbs a {
  color: var(--breadcrumbs-link-bg);
  font-weight: bold;
}

.module h2, .module caption, .inline-group h2 {
  background: none;
  color: var(--body-fg);
  font-weight: 300;
}
.module h3 {
  font-weight: 300;
}
a.section:link, a.section:visited {
  color: var(--body-fg);
}
#nav-sidebar .current-app .section:link, #nav-sidebar .current-app .section:visited {
  color: var(--body-fg);
}

a:link, a:visited {
  color: var(--link-fg);
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}
a.addlink,
a.changelink,
.object-tools a,
input[type=submit],
.submit-row a.deletelink,
.delete-confirmation form .cancel-link,
#changelist .actions .button {
  padding: 8px 16px;
  border: 1px solid #1d68ed;
  border-radius: 5px;
  color: #1d68ed !important;
  text-transform: uppercase;
  font-size: 13px !important;
  display: inline-block;
  letter-spacing: 0px;
  line-height: 16px;
  position: relative;
  height: auto;
  background: none;
  box-shadow: none !important;
  transition: background .25s;
}
a.addlink:focus,
a.addlink:hover,
a.changelink:focus,
a.changelink:hover,
.delete-confirmation form .cancel-link:active,
.delete-confirmation form .cancel-link:focus,
.delete-confirmation form .cancel-link:hover {
  background: var(--button-hover-bg) !important;
}
.object-tools a:link, .button.default, input[type=submit].default, .submit-row input.default {
  background: linear-gradient(75deg, #1d68ed, #9055a9) !important;
  border: none;
  color: #fff !important;
}
.object-tools a:link {
  padding: 6px 12px;
  font-size: 11px !important;
}
.object-tools a.addlink {
  padding: 6px 12px 6px 24px;
}
a.addlink::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: url(/static/images/icon-addlink-primary.svg) no-repeat !important;
  background-size: 10px 10px !important;
}
a.changelink::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: url(/static/images/icon-changelink-primary.svg) no-repeat !important;
  background-size: 10px 10px !important;
}

.submit-row input {
  margin-bottom: 8px;
}

.delete-confirmation form input[type="submit"],
.submit-row a.deletelink {
  height: 35px;
  border: 1px solid var(--error-fg);
  color: var(--error-fg) !important;
  padding-top: 9px;
  background: none;
}

.object-tools a.addlink::before {
  background: url(/static/images/icon-addlink.svg) no-repeat !important;
}
.object-tools a.changelink {
  background-image: url(/static/images/icon-changelink.svg);
  background-position: 8px center;
  background-repeat: no-repeat !important;
}
.actionlist .addlink {
  border: none;
}
.object-tools a:link, .object-tools a:visited {
  color: #fff !important;
}
.object-tools a:link, .object-tools a:visited {
  background: inherit;
}

.module th a {
  font-weight: 400;
}
.module a.addlink,
.module a.changelink {
  font-size: 10px !important;
  padding: 0px 6px 0px 24px !important;
  border: none !important
}
.module tbody, #content-related {
  box-shadow: 0px 3px 25px -12px #9c9fb1, 0px 2px 5px -4px #525252;
}
#content-related {
  background: var(--background-bg);
}
#content-related h2,
#content-related h3 {
  font-weight: 300;
}
#content-related .actionlist li {
  padding-left: 30px;
}

.results {
  box-shadow: 0px 3px 25px -12px #9c9fb1, 0px 2px 5px -4px #525252;
  overflow-y: overlay;
}

#toolbar form input[type="submit"] {
  border-color: inherit;
  padding: 8px 16px;
}
#toolbar form input[type="submit"]:focus,
#toolbar form input[type="submit"]:hover {
  border-color: inherit;
  background: var(--button-hover-bg);
}

#toolbar #searchbar,
#changelist .actions {
  display: flex;
  flex-wrap: wrap;
}
#toolbar #searchbar,
#changelist .actions select {
  border: none;
  border-bottom: 2px solid #1f68ec;
  border-radius: 0;
  background: none;
  padding: 10px;
  min-height: 40px;
  height: 40px;
}
#toolbar #searchbar:focus,
#changelist .actions select:focus {
  border-bottom: 2px solid #9055a9;
}
#toolbar {
  padding: 0;
  background: none;
  border: none;
}

#changelist-search>div {
  display: flex;
  position: relative;
  align-items: flex-end;
  flex-wrap: wrap;
}
#changelist-search>div>label {
  position: absolute;
  pointer-events: none;
  top: 10px;
}
#changelist-search>div>#searchbar {
  flex: auto;
  margin: 0 12px 0 0;
  padding: 6px 6px 6px 24px;
}
#changelist-search .quiet {
  flex-basis: 100%;
  margin-top: 8px;
}

#changelist-filter {
  background: var(--background-bg);
  box-shadow: 0px 3px 25px -12px #9c9fb1, 0px 2px 5px -4px #525252;
}
#changelist-filter ul {
  padding: 0;
}
#changelist-filter li {
  padding: 0 15px;
}
#changelist-filter li.selected {
  margin-left: 0;
  padding: 0 15px;
  border-left: none;
}
#changelist .paginator {
  border: none;
}
#changelist .actions {
  box-shadow: 0px 3px 25px -12px #9c9fb1, 0px 2px 5px -4px #525252;
  margin-bottom: 15px;
}
#changelist .actions .button:focus,
#changelist .actions .button:hover {
  background: var(--button-hover-bg);
  border-color: inherit;
}
#changelist .actions label {
  width: 100%;
  display: flex;
  align-items: flex-end;
  margin-bottom: 12px;
}
.actions label > * {
  flex: auto !important;
  align-items: flex-end;
}
#changelist .actions span.all, #changelist .actions span.action-counter, #changelist .actions span.clear, #changelist .actions span.question {
  align-self: center;
  justify-self: flex-end;
  text-align: right;
  flex: auto;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: none;
}
.form-row > div {
  display: flex;
  flex-wrap: wrap;
  border-bottom: none;
  width: 100%;
}

input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel], textarea, select:not([multiple]), .vTextField {
  flex: auto !important;
  border: none !important;
  border-bottom: 2px solid var(--body-fg) !important;
  border-radius: 0 !important;
  transition: border-bottom .25s;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus, textarea:focus, select:not([multiple]):focus, .vTextField:focus {
  border-bottom: 2px solid var(--primary) !important;
}
form .aligned input + p.help, form .aligned textarea + p.help, form .aligned select + p.help, form .aligned input + div.help, form .aligned textarea + div.help, form .aligned select + div.help {
  flex-basis: 100%;
}

.submit-row {
  background: none;
  border: none;
}

.login input[type=submit] {
  padding: 12px 36px;
}
.login #container {
  box-shadow: 0px 3px 25px -12px #9c9fb1, 0px 2px 5px -4px #525252;
}

@media (max-width: 767px) {
  #changelist .actions label {
    flex: 1 auto !important;
  }
}

@media (max-width: 1024px) {
  #changelist-search .quiet {
    flex-basis: 100% !important;
    margin: 8px 0 0 0 !important;
  }
  #changelist-search > div {
    flex-wrap: wrap !important;
  }
}