body {
  font-family: Quicksand, sans-serif;
}

/* WELCOME, USERNAME. */
#user-tools {
  color: #fff0b3;
  font-size: 12px;
  font-weight: bold;
}

/* Properoom Administration */
#branding #site-name a {
  color: #fff0b3;
  font-weight: 700;
}

/* APP NAME */
.module h2,
.module caption,
.inline-group h2 {
  border-radius: 0.3em;
  font-size: 14px;
  font-weight: bold;
}

.calendar caption {
  background: var(--primary) !important;
  color: var(--header-link-color) !important;
}

.calendar td a:hover {
  color: var(--body-bg) !important;
}

.timelist a:hover {
  color: var(--body-bg) !important;
}

.submit-row input:hover {
  background: var(--default-button-bg);
}

body.light {
  --primary: hsl(27, 95%, 45%);
  --secondary: hsl(37, 95%, 63%);
  --accent: hsl(208, 25%, 45%);
  --primary-fg: #1d1e1e;

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

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

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

  --link-fg: #447e9b;
  --link-hover-color: #036;
  --link-selected-fg: #5b80b2;

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

  --error-fg: #ba2121;

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

  --darkened-bg: rgb(235, 235, 222); /* A bit darker than --body-bg */
  --selected-bg: #e4e4e4; /* E.g. selected table cells */
  --selected-row: #ffc;

  --button-fg: var(--primary-fg);
  --button-bg: var(--secondary);
  --button-hover-bg: var(--accent);

  --default-button-bg: var(--secondary);
  --default-button-hover-bg: var(--primary);

  --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
  --close-button-hover-bg: #747474;
  --delete-button-bg: #ba2121;
  --delete-button-hover-bg: #a41515;

  --close-button-bg: var(--secondary);
  --close-button-hover-bg: var(--primary);

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

  --delete-button-bg: #ff808a;
  --delete-button-hover-bg: #ff6557;
}

body.dark {
  --primary: hsl(48, 100%, 85%);
  --secondary: hsl(37, 95%, 63%);
  --accent: hsl(208, 25%, 45%);
  --primary-fg: #1d1e1e;

  --body-fg: ivory;
  --body-bg: #202121;
  --body-quiet-color: #e0e0e0;
  --body-loud-color: #ffffff;

  --header-bg: var(--secondary);
  --header-color: var(--primary-fg);
  --header-link-color: var(--primary-fg);

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

  --link-fg: #dccc7a;
  --link-hover-color: hsl(208, 25%, 32%);
  --link-selected-fg: #6f94c6;

  --hairline-color: #272727;
  --border-color: #353535;

  --error-fg: #e35f5f;
  --message-success-bg: #006b1b;
  --message-warning-bg: #583305;
  --message-error-bg: #570808;

  --darkened-bg: #1b1b1d;
  --selected-bg: #1b1b1b;
  --selected-row: #00363a;

  --button-fg: var(--primary-fg);
  --button-bg: var(--primary);
  --button-hover-bg: var(--accent);

  --default-button-bg: var(--primary);
  --default-button-hover-bg: var(--secondary);

  --close-button-bg: var(--primary);
  --close-button-hover-bg: var(--secondary);

  --object-tools-fg: ivory;

  --delete-button-bg: #ff808a;
  --delete-button-hover-bg: #ff6557;
}

/* autocomplete_fields select width */

select + .select2 {
  /* This value is hardcoded for the size of the longest `WWWWW` string to not cause a
     horizontal scrollbar in the select widget. */
  width: 480px !important;
}

/* Save button */

input[name|='_save'] {
  background-color: #88e797 !important;
}

input[name|='_save']:hover {
  background-color: #4fcf6d !important;
}