/* Lightweight ru-ma.de branding; the remaining UI inherits Elastic. */
:root {
  --ru-ma-teal: #0b5f62;
  --ru-ma-teal-dark: #084a4d;
  --ru-ma-mint: #e8f5f2;
}

a { color: var(--ru-ma-teal); }
a:hover { color: var(--ru-ma-teal-dark); }

.btn-primary,
.floating-action-buttons a.button {
  background-color: var(--ru-ma-teal);
  border-color: var(--ru-ma-teal);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.floating-action-buttons a.button:hover {
  background-color: var(--ru-ma-teal-dark);
  border-color: var(--ru-ma-teal-dark);
}

.form-control:focus {
  border-color: #4ca5a5;
  box-shadow: 0 0 0 .2rem rgba(11, 95, 98, .18);
}

.task-login #layout-content {
  background:
    radial-gradient(circle at 15% 15%, rgba(147, 218, 204, .32), transparent 30rem),
    linear-gradient(135deg, #f7fbfa 0%, var(--ru-ma-mint) 100%);
}

.task-login #logo {
  max-width: 260px;
  width: min(260px, 80vw);
  height: auto;
}

html.dark-mode .task-login #layout-content {
  background: linear-gradient(135deg, #132b2c 0%, #102223 100%);
}