:root {
  --wavolution-navy: #1e4b82;
  --wavolution-teal: #268b97;
  --wavolution-green: #4aad82;
  --wavolution-red: #db242a;
  --wavolution-charcoal: #504a45;
  --wavolution-paper: #fcf9f4;
}

body {
  color: var(--wavolution-charcoal);
}

#layout-menu,
#layout-sidebar .header,
#layout-list .header,
#layout-content .header {
  border-color: rgba(30, 75, 130, 0.16);
}

#layout-menu {
  background: var(--wavolution-navy);
}

#layout-menu .popover-header img,
#layout-menu #logo,
#login-branding #logo,
#logo {
  max-width: 280px;
  width: auto;
  height: auto;
}

#login-form {
  border-top: 4px solid var(--wavolution-teal);
}

#login-form .button.mainaction,
button.btn-primary,
.btn-primary,
input.button.mainaction {
  border-color: var(--wavolution-navy);
  background-color: var(--wavolution-navy);
}

#login-form .button.mainaction:hover,
button.btn-primary:hover,
.btn-primary:hover,
input.button.mainaction:hover {
  border-color: var(--wavolution-teal);
  background-color: var(--wavolution-teal);
}

a,
.listing li.selected > a,
.listing tr.selected td,
.menu a.selected,
.popupmenu a.active {
  color: var(--wavolution-navy);
}

.quota-widget .bar,
.progress-bar,
.ui-progressbar-value {
  background: linear-gradient(90deg, var(--wavolution-teal), var(--wavolution-green));
}

.menu a:hover,
.button:hover,
.toolbar a.button:hover {
  color: var(--wavolution-teal);
}

.message.error,
.warning,
.ui-state-error {
  border-color: var(--wavolution-red);
}

html.dark-mode #layout-menu {
  background: #173b67;
}