:root {
  --primary: #79aec8;
  --secondary: #417690;
  --accent: #f5dd5d;
  --primary-fg: #fff;

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

  --header-color: #ffc;
  --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: #264b5d;

  --link-fg: #417893;
  --link-hover-color: #036;
  --link-selected-fg: var(--secondary);

  --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: #ffc;

  --button-fg: #fff;
  --button-bg: var(--secondary);
  --button-hover-bg: #205067;
  --default-button-bg: #205067;
  --default-button-hover-bg: var(--secondary);
  --close-button-bg: #747474;
  --close-button-hover-bg: #333;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

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

  --font-family-primary: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-family-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  color-scheme: light;
}

/* TABLES */

table {
  border-collapse: collapse;
  border-color: var(--border-color);
}

td,
th {
  font-size: 0.8125rem;
  line-height: 1rem;
  border-bottom: 1px solid var(--hairline-color);
  vertical-align: top;
  padding: 8px;
}

th {
  font-weight: 500;
  text-align: left;
}

thead th,
tfoot td {
  color: var(--body-quiet-color);
  padding: 5px 10px;
  font-size: 0.6875rem;
  background: var(--body-bg);
  border: none;
  border-top: 1px solid var(--hairline-color);
  border-bottom: 1px solid var(--hairline-color);
}

tfoot td {
  border-bottom: none;
  border-top: 1px solid var(--hairline-color);
}

thead th.required {
  font-weight: bold;
}

tr.alt {
  background: var(--darkened-bg);
}

tr:nth-child(odd),
.row-form-errors {
  background: var(--body-bg);
}

tr:nth-child(even),
tr:nth-child(even) .errorlist,
tr:nth-child(odd) + .row-form-errors,
tr:nth-child(odd) + .row-form-errors .errorlist {
  background: var(--darkened-bg);
}

/* SORTABLE TABLES */

thead th {
  padding: 5px 10px;
  line-height: normal;
  text-transform: uppercase;
  background: var(--darkened-bg);
}

thead th a:link,
thead th a:visited {
  color: var(--body-quiet-color);
}

thead th.sorted {
  background: var(--selected-bg);
}

thead th.sorted .text {
  padding-right: 42px;
}

table thead th .text span {
  padding: 8px 10px;
  display: block;
}

table thead th .text a {
  display: block;
  cursor: pointer;
  padding: 8px 10px;
}

table thead th .text a:focus,
table thead th .text a:hover {
  background: var(--selected-bg);
}

thead th.sorted a.sortremove {
  visibility: hidden;
}

table thead th.sorted:hover a.sortremove {
  visibility: visible;
}

table thead th.sorted .sortoptions {
  display: block;
  padding: 9px 5px 0 5px;
  float: right;
  text-align: right;
}

table thead th.sorted .sortpriority {
  font-size: 0.8em;
  min-width: 12px;
  text-align: center;
  vertical-align: 3px;
  margin-left: 2px;
  margin-right: 2px;
}

table thead th.sorted .sortoptions a {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
  background: url(../img/sorting-icons.svg) 0 0 no-repeat;
  background-size: 14px auto;
}

table thead th.sorted .sortoptions a.sortremove {
  background-position: 0 0;
}

table thead th.sorted .sortoptions a.sortremove:after {
  content: "\\";
  position: absolute;
  top: -6px;
  left: 3px;
  font-weight: 200;
  font-size: 1.125rem;
  color: var(--body-quiet-color);
}

table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
  color: var(--link-fg);
}

table thead th.sorted .sortoptions a.sortremove:focus,
table thead th.sorted .sortoptions a.sortremove:hover {
  background-position: 0 -14px;
}

table thead th.sorted .sortoptions a.ascending {
  background-position: 0 -28px;
}

table thead th.sorted .sortoptions a.ascending:focus,
table thead th.sorted .sortoptions a.ascending:hover {
  background-position: 0 -42px;
}

table thead th.sorted .sortoptions a.descending {
  top: 1px;
  background-position: 0 -56px;
}

table thead th.sorted .sortoptions a.descending:focus,
table thead th.sorted .sortoptions a.descending:hover {
  background-position: 0 -70px;
}

.is-active {
  display: block;
}

.is-not-active {
  display: none;
}