/*
 * Base styles for the auth forms when they render OUTSIDE portal chrome.
 *
 * login.css only styles the .login-* classes. Everything holding the form together — .container,
 * .form-group, .form-control, .btn, .alert, .pull-right — comes from the legacy Bootstrap bundle that
 * PortalChromeShell loads (bootstrap.min.css + custom.css + site.min.css), along with the CSS custom
 * properties login.css reads. The global /login and /signup pages fall back to the EasyAsset chrome
 * whenever the returnUrl names no portal (arriving from an email, or typing the URL), and that chrome
 * loads none of it — so the form rendered as unstyled fragments.
 *
 * Pulling in the Bootstrap bundle would fix the form and wreck the EA Nav/Footer around it, which are
 * built for the modern stylesheet. So this file re-declares just the primitives the auth markup uses,
 * every rule scoped under .login-body-container so nothing can leak into the surrounding page.
 *
 * Loaded by lib/authChrome.tsx in the EA-chrome branch only. Under portal chrome the real Bootstrap is
 * present and this file is not requested.
 */

.login-body-container {
  /* login.css reads these from the portal bundle's :root, which is absent here. Values match
     custom.css so the form looks identical in both chromes. */
  --grey: #888;
  --grey-1: #eee;
  --input-border-color: #aaa;
  --text-color: #434343;
  --bgcolor-theme: #83ffc1;
  --textcolorcontrast-theme: #434343;

  /* login.css pins this to height/min-height 100vh, which assumes the form owns the whole viewport.
     Under EA chrome it sits between a header and a footer, so a hard 100vh overflows the page. */
  height: auto;
  min-height: 0;
  padding: 60px 20px;
  box-sizing: border-box;
}

/* ---- Bootstrap primitives (scoped) ---- */

.login-body-container .container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

.login-body-container .form-group {
  margin-bottom: 15px;
}

.login-body-container .form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.login-body-container .btn {
  display: inline-block;
  margin-bottom: 0;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  user-select: none;
}

.login-body-container .btn-block {
  display: block;
  width: 100%;
}

.login-body-container .text-center {
  text-align: center;
}

.login-body-container .pull-right {
  float: right;
}

.login-body-container .clearfix::before,
.login-body-container .clearfix::after {
  display: table;
  content: ' ';
}

.login-body-container .clearfix::after {
  clear: both;
}

.login-body-container .alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.login-body-container .alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.login-body-container .alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}