body {
  background: #f4f7fb;
}

#content {
  padding-top: 22px;
}

.breadcrumbs {
  padding: 12px 40px;
  border-bottom: 1px solid #dde6f1;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
}

.module,
.inline-group,
.selector,
#changelist-filter,
.submit-row,
.messagelist li {
  border-radius: 18px;
  overflow: hidden;
}

.module,
.inline-group,
#changelist-filter {
  border: 1px solid #dbe5f0;
  box-shadow: 0 12px 28px rgba(24, 45, 67, 0.06);
}

.module caption,
.module h2,
.module .grp-table caption {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.object-tools a,
.submit-row input,
.submit-row a,
input[type="submit"],
input[type="button"],
.button,
.button.default,
.selector-available h2,
.selector-chosen h2 {
  border-radius: 999px;
}

.button,
.button.default,
input[type="submit"],
input[type="button"],
.submit-row input {
  padding: 10px 16px;
}

.submit-row {
  padding: 14px 16px;
  border: 1px solid #dbe5f0;
  background: #ffffff;
}

.object-tools a {
  padding: 10px 14px;
}

#changelist table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.change-list #changelist {
  display: flex;
  gap: 18px;
}

.change-list #changelist #changelist-form {
  flex: 1 1 auto;
  min-width: 0;
}

.change-list #changelist-filter {
  width: 280px;
  flex: 0 0 280px;
  background: #ffffff;
}

.change-list #changelist-filter h2 {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aligned label {
  color: #55687f;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .change-list #changelist {
    flex-direction: column-reverse;
  }

  .change-list #changelist-filter {
    width: 100%;
    flex: 1 1 auto;
  }
}

@media (prefers-color-scheme: dark) {
  body:not(.pettopia-admin-home-page) {
    background: #10161c;
    color: #e8eef5;
  }

  body:not(.pettopia-admin-home-page) #content,
  body:not(.pettopia-admin-home-page) #container {
    background: transparent;
  }

  body:not(.pettopia-admin-home-page) .breadcrumbs {
    background: rgba(16, 22, 28, 0.82);
    border-color: #263442;
  }

  body:not(.pettopia-admin-home-page) .module,
  body:not(.pettopia-admin-home-page) .inline-group,
  body:not(.pettopia-admin-home-page) #changelist-filter,
  body:not(.pettopia-admin-home-page) .submit-row,
  body:not(.pettopia-admin-home-page) .selector {
    background: #17212a;
    border-color: #2a3947;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  }

  body:not(.pettopia-admin-home-page) .form-row,
  body:not(.pettopia-admin-home-page) .aligned .form-row,
  body:not(.pettopia-admin-home-page) .results tbody tr,
  body:not(.pettopia-admin-home-page) #changelist-filter li,
  body:not(.pettopia-admin-home-page) .submit-row,
  body:not(.pettopia-admin-home-page) .selector-available select,
  body:not(.pettopia-admin-home-page) .selector-chosen select,
  body:not(.pettopia-admin-home-page) textarea,
  body:not(.pettopia-admin-home-page) input[type="text"],
  body:not(.pettopia-admin-home-page) input[type="password"],
  body:not(.pettopia-admin-home-page) input[type="email"],
  body:not(.pettopia-admin-home-page) input[type="number"],
  body:not(.pettopia-admin-home-page) input[type="url"],
  body:not(.pettopia-admin-home-page) select {
    background: #1b2630;
    border-color: #30404e;
    color: #edf3f8;
  }

  body:not(.pettopia-admin-home-page) th,
  body:not(.pettopia-admin-home-page) td,
  body:not(.pettopia-admin-home-page) label,
  body:not(.pettopia-admin-home-page) p,
  body:not(.pettopia-admin-home-page) li,
  body:not(.pettopia-admin-home-page) h1,
  body:not(.pettopia-admin-home-page) h2,
  body:not(.pettopia-admin-home-page) h3,
  body:not(.pettopia-admin-home-page) h4,
  body:not(.pettopia-admin-home-page) h5,
  body:not(.pettopia-admin-home-page) .help,
  body:not(.pettopia-admin-home-page) .quiet {
    color: #d8e3ee;
  }

  body:not(.pettopia-admin-home-page) a:link,
  body:not(.pettopia-admin-home-page) a:visited {
    color: #7ecbff;
  }

  body:not(.pettopia-admin-home-page) .results tbody tr:nth-child(odd),
  body:not(.pettopia-admin-home-page) .results tbody tr:nth-child(even) {
    background: #17212a;
  }

  body:not(.pettopia-admin-home-page) .results thead th,
  body:not(.pettopia-admin-home-page) .module h2,
  body:not(.pettopia-admin-home-page) .module caption,
  body:not(.pettopia-admin-home-page) #changelist-filter h2,
  body:not(.pettopia-admin-home-page) .selector-available h2,
  body:not(.pettopia-admin-home-page) .selector-chosen h2 {
    background: #21313f;
    color: #eff5fb;
  }

  body:not(.pettopia-admin-home-page) .button,
  body:not(.pettopia-admin-home-page) .button.default,
  body:not(.pettopia-admin-home-page) input[type="submit"],
  body:not(.pettopia-admin-home-page) input[type="button"],
  body:not(.pettopia-admin-home-page) .object-tools a {
    background: #2ea39a;
    color: #ffffff;
    border-color: transparent;
  }

  body:not(.pettopia-admin-home-page) .button.default,
  body:not(.pettopia-admin-home-page) .submit-row input.default {
    background: #2ea39a;
  }

  body:not(.pettopia-admin-home-page) .selector-available select,
  body:not(.pettopia-admin-home-page) .selector-chosen select {
    color: #edf3f8;
  }
}
