/* Collapse the public login to a black field with no decorative surface. */
body.backloom-login,
body.backloom-login #app_root,
body.backloom-login #app_root > div {
  background: #000 !important;
  background-image: none !important;
  color: #999;
  color-scheme: dark;
}

body.backloom-login #login_panel {
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 24rem;
  padding: 0 1.5rem !important;
}

/* Keep the two credentials legible without introducing color or ornament. */
body.backloom-login #sign_in_form .form-control {
  background: #050505 !important;
  border: 1px solid #222 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #aaa !important;
}

body.backloom-login #sign_in_form .form-control:focus {
  border-color: #444 !important;
}

body.backloom-login #sign_in_form .form-control::placeholder {
  color: #666 !important;
}

body.backloom-login #sign_in_form [data-password-control="visibility"] {
  display: none !important;
}

/* Make the only action look functional, not promotional. */
body.backloom-login #sign_in_submit {
  background: #161616 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #aaa !important;
}

body.backloom-login #sign_in_submit:focus,
body.backloom-login #sign_in_submit:hover {
  background: #1d1d1d !important;
  border-color: #444 !important;
  color: #ccc !important;
}

body.backloom-login #errorMsg {
  background: #050505 !important;
  border-color: #333 !important;
  border-radius: 0 !important;
}

body.backloom-login #errorMsg,
body.backloom-login #errorMsg i,
body.backloom-login #errorMsg .text-gray-800 {
  color: #888 !important;
}