html {
  color: #111;
  /* http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ */
  font-family: "Lucida Grande", Helvetica, Arial, sans-serif !important;
  /* IE ignores this and renders Arial better */
  font-family: Arial, Tahoma, Helvetica, sans-serif;
  font-size: 100.01%;
  height: 100%;
  /* avoids obscure font-size bug */
  line-height: 1.5;
  width: 100%; }

body {
  background: #f2f2f2;
  font-size: 75%;
  /* 12px 62.5% for 10px*/
  height: 100%;
  width: 100%; }

.warning {
  color: #821517;
  font-weight: bold; }

.success {
  color: #090;
  font-weight: bold; }

#container {
  margin: 70px auto 0;
  width: 460px; }

#modx-login-logo {
  margin: 0 0 12px 24px; }
  #modx-login-logo img {
    width: 180px; }

#modx-panel-login-div {
  border: 0;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 0 7px 1px #d9d9d9;
  padding: 26px; }

img.loginCaptcha {
  border: 1px solid #039;
  height: 60px;
  width: 148px; }

.loginLicense {
  color: #555;
  font-size: 90%;
  margin: 1em auto;
  padding-left: 20px;
  width: 460px; }

h2 {
  color: #4e4e4e;
  font-weight: bold; }

#modx-login-btn {
  float: right;
  font-size: 12px; }
  #modx-login-btn:active {
    margin: 3px 2px 1px; }

.modx-forgot-login {
  float: left; }

#modx-forgot-login-form {
  margin-top: 24px; }
  #modx-forgot-login-form button {
    margin-top: 24px;
    font-size: 12px; }

a {
  color: #bbb;
  text-decoration: none; }
  a :hover {
    text-decoration: underline; }

#modx-login-email {
  width: 200px; }

.login-form-item {
  margin: 0; }
  .login-form-item label {
    cursor: pointer;
    font-size: 120%;
    color: #4e4e4e;
    margin: 0 0 3px 3px;
    display: block; }

.login-form-item-first {
  margin: 0 0 17px; }

.login-form-element .x-form-text {
  padding: 8px;
  line-height: 32px;
  width: 390px;
  background: #f2f2f2;
  border-color: #e9e9e9; }

.login-cb-row {
  padding: 24px 0 10px 0; }

.x-form-check-wrap {
  float: left; }
  .x-form-check-wrap .x-form-cb-label {
    margin: 11px 0 0;
    color: #888; }
  .x-form-check-wrap.modx-login-rm-cb {
    float: left; }

.login-cb-col {
  float: left;
  width: 50%; }

.modx-login-fl-link {
  cursor: pointer;
  height: auto !important;
  line-height: 18px;
  margin: 10px 0 0 2px;
  white-space: nowrap; }

#modx-fl-link:focus {
  color: #BE0000; }

#modx-login-language-select-div {
  bottom: 0;
  color: #888;
  left: 0;
  padding: 4px;
  position: absolute; }

#modx-login-language-select {
  background: #eee;
  border: 1px solid #aaa;
  position: relative; }

@media (max-width: 640px) {
  #container {
    margin: 50px auto 0;
    width: calc(100% - 30px); }
  #modx-login-logo {
    margin: 0 auto 20px; }
    #modx-login-logo img {
      margin: 0 auto;
      display: block; }
  #modx-panel-login-div {
    padding: 25px; }
  .login-form-element .x-form-text {
    width: -webkit-fill-available; }
  .login-cb-col {
    float: none;
    width: 100%; }
  #modx-login-btn {
    float: none;
    margin: 20px auto 0;
    display: block; }
    #modx-login-btn:active {
      margin: 20px auto 0; }
  .x-form-check-wrap.modx-login-rm-cb {
    float: none; }
  .loginLicense {
    width: calc(100% - 30px); } }