:root {
  --pr-brand: #0B2A3C;
  --pr-action: #1565C0;
  --pr-action-hover: #0F56A6;
  --pr-accent: #F57C00;
  --pr-bg: #F5F7FA;
  --pr-text: #17212B;
  --pr-muted: #5B6670;
  --pr-line: #D7DEE5;
}

input:focus {
  border-color: var(--pr-action);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.18);
}

#brickwall,
#background {
  background-image: url('../../prontoroster/prontoroster-login-backdrop.jpg');
  background-color: var(--pr-bg);
  background-position: center center;
}

#loginBox {
  box-shadow: 0 18px 48px rgba(11, 42, 60, 0.2);
  border: 1px solid rgba(11, 42, 60, 0.14);
}

#loginBox:after {
  background-color: rgba(255, 255, 255, 0.84);
}

#logo img {
  max-width: 320px;
  max-height: 82px;
}

#login-message {
  color: var(--pr-brand);
}

button[type=submit],
input[type="submit"],
.primary.button {
  background-color: var(--pr-action);
  color: #fff;
  box-shadow: none;
}

button[type=submit]:hover,
input[type=submit]:hover,
input[type=submit]:active {
  background-color: var(--pr-action-hover);
  color: #fff;
  box-shadow: none;
}

#poweredBy {
  color: var(--pr-muted);
  background: rgba(255,255,255,0.76);
  box-shadow: none;
  text-shadow: none;
  border: 1px solid rgba(215, 222, 229, 0.8);
  opacity: 0.62;
}

#poweredBy a {
  color: var(--pr-muted);
  text-decoration: none;
}

#company .content {
  background: rgba(255,255,255,0.76);
  color: var(--pr-muted);
  box-shadow: none;
  text-shadow: none;
  border: 1px solid rgba(215, 222, 229, 0.8);
}