.hrm-login-1,
.hrm-login-2,
.hrm-login-3,
.hrm-login-4,
.hrm-login-5,
.hrm-login-6,
.hrm-login-7 {
  height: auto;
  min-height: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hrm-login-1 .message,
.hrm-login-1 #login_error,
.hrm-login-2 .message,
.hrm-login-2 #login_error,
.hrm-login-3 .message,
.hrm-login-3 #login_error,
.hrm-login-4 .message,
.hrm-login-4 #login_error,
.hrm-login-5 .message,
.hrm-login-5 #login_error,
.hrm-login-6 .message,
.hrm-login-6 #login_error,
.hrm-login-7 .message,
.hrm-login-7 #login_error {
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  margin: 0 0 40px;
  padding: 20px;
  box-sizing: border-box;
}

.hrm-login-1 div#login,
.hrm-login-2 div#login,
.hrm-login-3 div#login,
.hrm-login-4 div#login,
.hrm-login-5 div#login,
.hrm-login-6 div#login,
.hrm-login-7 div#login {
  width: 100%;
  max-width: 360px;
}

.hrm-login-1 div#login h1 a,
.hrm-login-2 div#login h1 a,
.hrm-login-3 div#login h1 a,
.hrm-login-4 div#login h1 a,
.hrm-login-5 div#login h1 a,
.hrm-login-6 div#login h1 a,
.hrm-login-7 div#login h1 a {
  background-image: none, url("../images/login-logo.jpg");
  background-size: 120px;
  width: 120px;
  height: 120px;
  margin: 0 auto 40px;
}

.hrm-login-1 p#backtoblog,
.hrm-login-2 p#backtoblog,
.hrm-login-3 p#backtoblog,
.hrm-login-4 p#backtoblog,
.hrm-login-5 p#backtoblog,
.hrm-login-6 p#backtoblog,
.hrm-login-7 p#backtoblog {
  position: fixed;
  top: 40px;
  left: 40px;
  margin: 0;
  padding: 0;
}

.hrm-login-1 p#backtoblog a,
.hrm-login-2 p#backtoblog a,
.hrm-login-3 p#backtoblog a,
.hrm-login-4 p#backtoblog a,
.hrm-login-5 p#backtoblog a,
.hrm-login-6 p#backtoblog a,
.hrm-login-7 p#backtoblog a {
  color: #FFF;
  font-size: 1.125rem;
  font-weight: 600;
}

.hrm-login-1 p#backtoblog a:focus, .hrm-login-1 p#backtoblog a:hover,
.hrm-login-2 p#backtoblog a:focus,
.hrm-login-2 p#backtoblog a:hover,
.hrm-login-3 p#backtoblog a:focus,
.hrm-login-3 p#backtoblog a:hover,
.hrm-login-4 p#backtoblog a:focus,
.hrm-login-4 p#backtoblog a:hover,
.hrm-login-5 p#backtoblog a:focus,
.hrm-login-5 p#backtoblog a:hover,
.hrm-login-6 p#backtoblog a:focus,
.hrm-login-6 p#backtoblog a:hover,
.hrm-login-7 p#backtoblog a:focus,
.hrm-login-7 p#backtoblog a:hover {
  color: #FFF;
}

.hrm-login-1 .hrm-login,
.hrm-login-2 .hrm-login,
.hrm-login-3 .hrm-login,
.hrm-login-4 .hrm-login,
.hrm-login-5 .hrm-login,
.hrm-login-6 .hrm-login,
.hrm-login-7 .hrm-login {
  background: 0;
  box-shadow: none;
  margin: 0 0 20px;
  padding: 0;
}

.hrm-login-1 .hrm-login__input,
.hrm-login-2 .hrm-login__input,
.hrm-login-3 .hrm-login__input,
.hrm-login-4 .hrm-login__input,
.hrm-login-5 .hrm-login__input,
.hrm-login-6 .hrm-login__input,
.hrm-login-7 .hrm-login__input {
  position: relative;
  color: #FFF;
}

.hrm-login-1 .hrm-login__input .icon,
.hrm-login-2 .hrm-login__input .icon,
.hrm-login-3 .hrm-login__input .icon,
.hrm-login-4 .hrm-login__input .icon,
.hrm-login-5 .hrm-login__input .icon,
.hrm-login-6 .hrm-login__input .icon,
.hrm-login-7 .hrm-login__input .icon {
  position: absolute;
  top: 50%;
  left: 20px;
  color: inherit;
  font-size: 24px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
}

.hrm-login-1 .hrm-login__input input,
.hrm-login-2 .hrm-login__input input,
.hrm-login-3 .hrm-login__input input,
.hrm-login-4 .hrm-login__input input,
.hrm-login-5 .hrm-login__input input,
.hrm-login-6 .hrm-login__input input,
.hrm-login-7 .hrm-login__input input {
  outline: none;
  background: none;
  width: 100%;
  border: 0;
  box-shadow: none;
  margin: 0;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 20px;
  padding-left: 60px;
}

.hrm-login-1 .hrm-login__submit input,
.hrm-login-2 .hrm-login__submit input,
.hrm-login-3 .hrm-login__submit input,
.hrm-login-4 .hrm-login__submit input,
.hrm-login-5 .hrm-login__submit input,
.hrm-login-6 .hrm-login__submit input,
.hrm-login-7 .hrm-login__submit input {
  float: none;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

.hrm-login-1 .hrm-login__submit input:active,
.hrm-login-2 .hrm-login__submit input:active,
.hrm-login-3 .hrm-login__submit input:active,
.hrm-login-4 .hrm-login__submit input:active,
.hrm-login-5 .hrm-login__submit input:active,
.hrm-login-6 .hrm-login__submit input:active,
.hrm-login-7 .hrm-login__submit input:active {
  margin: 0;
  -webkit-transform: scale(0.99);
          transform: scale(0.99);
}

.hrm-login-1 .hrm-login__remember,
.hrm-login-2 .hrm-login__remember,
.hrm-login-3 .hrm-login__remember,
.hrm-login-4 .hrm-login__remember,
.hrm-login-5 .hrm-login__remember,
.hrm-login-6 .hrm-login__remember,
.hrm-login-7 .hrm-login__remember {
  color: #FFF;
  font-size: 14px;
  font-weight: 600 !important;
  float: none !important;
}

.hrm-login-1 .hrm-login__remember input,
.hrm-login-2 .hrm-login__remember input,
.hrm-login-3 .hrm-login__remember input,
.hrm-login-4 .hrm-login__remember input,
.hrm-login-5 .hrm-login__remember input,
.hrm-login-6 .hrm-login__remember input,
.hrm-login-7 .hrm-login__remember input {
  background: #FFF;
  border: 0;
}

.hrm-login-1 .hrm-login__remember label,
.hrm-login-2 .hrm-login__remember label,
.hrm-login-3 .hrm-login__remember label,
.hrm-login-4 .hrm-login__remember label,
.hrm-login-5 .hrm-login__remember label,
.hrm-login-6 .hrm-login__remember label,
.hrm-login-7 .hrm-login__remember label {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.hrm-login-1 #nav,
.hrm-login-2 #nav,
.hrm-login-3 #nav,
.hrm-login-4 #nav,
.hrm-login-5 #nav,
.hrm-login-6 #nav,
.hrm-login-7 #nav {
  margin: 0;
  padding: 0 0 40px;
  color: #FFF;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.hrm-login-1 #nav a,
.hrm-login-2 #nav a,
.hrm-login-3 #nav a,
.hrm-login-4 #nav a,
.hrm-login-5 #nav a,
.hrm-login-6 #nav a,
.hrm-login-7 #nav a {
  color: inherit;
}

.hrm-login-1 {
  background: #D8634F;
}

.hrm-login-1 .hrm-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.hrm-login-1 .hrm-login__input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hrm-login-1 .hrm-login__input:first-of-type {
  border-radius: 4px 4px 0 0;
}

.hrm-login-1 .hrm-login__input:last-of-type {
  border-top: 0;
  border-radius: 0 0 4px 4px;
  margin: -1px 0 20px;
}

.hrm-login-1 .hrm-login__input.focused {
  background: rgba(255, 255, 255, 0.2);
}

.hrm-login-1 .hrm-login__submit {
  display: block;
  width: 100%;
}

.hrm-login-1 .hrm-login__submit input.button {
  display: block;
  background: #FFFFFF;
  width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 12px 20px;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #D8634F;
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
}

.hrm-login-1 .hrm-login__remember {
  margin-bottom: 20px !important;
}

.hrm-login-2 {
  background: #58575D;
}

.hrm-login-2 .hrm-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.hrm-login-2 .hrm-login__input {
  background: #FFFFFF;
  width: 100%;
  color: #BBB;
}

.hrm-login-2 .hrm-login__input.focused {
  color: #8E8E92;
}

.hrm-login-2 .hrm-login__submit {
  display: block;
  width: 100%;
}

.hrm-login-2 .hrm-login__submit input.button {
  display: block;
  background: #FF3366;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
}

.hrm-login-2 .hrm-login__remember {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-bottom: 20px !important;
}

.hrm-login-3 {
  background: #5A5A62;
}

.hrm-login-3 .hrm-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.hrm-login-3 .hrm-login__input {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  margin: 0 0 20px;
  color: #FFF;
}

.hrm-login-3 .hrm-login__input .icon {
  color: rgba(255, 255, 255, 0.4);
}

.hrm-login-3 .hrm-login__submit {
  display: block;
  width: 100%;
}

.hrm-login-3 .hrm-login__submit input.button {
  display: block;
  background: #FF3366;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  padding: 12px 20px;
  border: 0;
  border-radius: 100px;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
}

.hrm-login-3 .hrm-login__remember {
  margin-bottom: 20px !important;
}

.hrm-login-4 {
  background: #333141;
}

.hrm-login-4 .hrm-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.hrm-login-4 .hrm-login__input {
  background: rgba(255, 255, 255, 0.12);
  width: 100%;
  border-radius: 100px;
  margin: 0 0 20px;
  padding: 0 20px;
  color: #FFF;
}

.hrm-login-4 .hrm-login__input .icon {
  left: 40px;
  color: rgba(255, 255, 255, 0.4);
}

.hrm-login-4 .hrm-login__submit {
  display: block;
  width: 100%;
}

.hrm-login-4 .hrm-login__submit input.button {
  display: block;
  background: #FF3366;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  padding: 12px 20px;
  border: 0;
  border-radius: 100px;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
}

.hrm-login-4 .hrm-login__remember {
  margin-bottom: 20px !important;
}

.hrm-login-5 {
  background: #36363E;
}

.hrm-login-5 div#login {
  max-width: 540px;
}

.hrm-login-5 div#login h1 {
  display: block;
  width: 100%;
  text-align: center;
}

.hrm-login-5 div#login h1 a {
  background-image: none, url("../img/logo-alt.svg");
}

.hrm-login-5 .hrm-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: #FFF;
  padding: 90px;
}

.hrm-login-5 .hrm-login__input {
  width: 100%;
  border-bottom: 1px solid #D5D9E0;
  margin: 0 0 20px;
  color: #A2ABC0;
}

.hrm-login-5 .hrm-login__input.focused {
  color: #1E2431;
}

.hrm-login-5 .hrm-login__input .icon {
  color: #A2ABC0;
}

.hrm-login-5 .hrm-login__submit {
  display: block;
  width: 100%;
}

.hrm-login-5 .hrm-login__submit input.button {
  display: block;
  background: #FF3366;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
  padding: 12px 20px;
  border: 0;
  border-radius: 100px;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
}

.hrm-login-5 .hrm-login__remember {
  margin-bottom: 40px !important;
  color: #A2ABC0;
}

.hrm-login-5 .hrm-login__remember input {
  border: 1px solid #D5D9E0;
}

.hrm-login-6 {
  background: #383941;
}

.hrm-login-6 div#login {
  max-width: 440px;
}

.hrm-login-6 div#login h1 {
  display: block;
  width: 100%;
  text-align: center;
}

.hrm-login-6 div#login h1 a {
  background-image: none, url("../images/login-logo.png");
}

.hrm-login-6 .hrm-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: #FFF;
  padding: 90px 0 0;
}

.hrm-login-6 .hrm-login__input {
  width: 100%;
  border-bottom: 1px solid #D5D9E0;
  margin: 0 40px 20px;
  color: #A2ABC0;
}

.hrm-login-6 .hrm-login__input.focused {
  color: #1E2431;
}

.hrm-login-6 .hrm-login__input .icon {
  color: #A2ABC0;
}

.hrm-login-6 .hrm-login__submit {
  display: block;
  width: 100%;
}

.hrm-login-6 .hrm-login__submit input.button {
  display: block;
  background: #FF3366;
  width: 100%;
  height: auto;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
}

.hrm-login-6 .hrm-login__remember {
  margin: 0 40px;
  margin-bottom: 40px !important;
  color: #A2ABC0;
}

.hrm-login-6 .hrm-login__remember input {
  border: 1px solid #D5D9E0;
}

.hrm-login-7 {
  background: #282939;
}

.hrm-login-7 .hrm-login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.hrm-login-7 .hrm-login__input {
  background: rgba(255, 255, 255, 0.15);
  width: 100%;
  border-radius: 4px;
  margin: 0 0 20px;
  padding: 0 20px;
  color: #FFF;
}

.hrm-login-7 .hrm-login__input .icon {
  left: 40px;
  color: rgba(255, 255, 255, 0.4);
}

.hrm-login-7 .hrm-login__submit {
  display: block;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

.hrm-login-7 .hrm-login__submit input.button {
  display: block;
  background: #FF3366;
  height: auto;
  margin: 0 0 0 auto;
  padding: 12px 20px;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFF;
  font-size: 18px;
  font-weight: 600;
  text-shadow: none;
}

.hrm-login-7 .hrm-login__remember {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  margin-bottom: 0 !important;
}