/*
--------------------------------------
Containers
--------------------------------------
*/

.wrapper__inner {
  position  : relative;
  width     : 100%;
  max-width : var(--container-primary-max-width);
  margin    : 0 auto;
  padding   : 2rem 0;
}

#main {
  max-width       : 100%;
  min-height      : 80vh;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  align-items     : center;
  padding         : 2rem 0;
  margin          : 0 auto;
}

#main > * {
  width     : 100%;
  margin    : 0;
  max-width : 480px;
}

/*
--------------------------------------
Page Header
--------------------------------------
*/

.page-header {
  text-align    : center;
  margin-bottom : 2rem;
}

.page-header h1 {
  font-size      : 1.75rem;
  line-height    : 1;
  font-weight    : 700;
  color          : var(--color-black-default);
  text-transform : initial;
  letter-spacing : 0.5px;
  margin         : 0;
  background     : var(--color-white-default);
  border-radius  : var(--radius-lg) var(--radius-lg) 0 0;
  padding        : 1.5rem 1rem;
}

/*
--------------------------------------
Card & Content
--------------------------------------
*/

.page-content {
  background    : var(--color-white-default);
  border-radius : 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow    : 0 2px 8px rgba(0, 0, 0, 0.06);
  padding       : 1.5rem 2.5rem 2.5rem;
}

/*
--------------------------------------
Form
--------------------------------------
*/

.login-form .form-group {
  margin-bottom : 1.25rem;
}

.login-form .form-group-row {
  margin-bottom : 1.25rem;
}

.login-form .form-control-label {
  display       : block;
  font-size     : 0.875rem;
  font-weight   : 600;
  color         : var(--color-black-default);
  margin-bottom : 0.5rem;
}

.login-form .form-control-label.required::after {
  content     : "*";
  color       : var(--color-primary);
  margin-left : 4px;
}

.login-form .form-control {
  width         : 100%;
  padding       : 0.75rem 1rem;
  font-size     : 0.9375rem;
  border        : 1px solid var(--input-border-color);
  border-radius : var(--radius-md);
  background    : var(--color-white-default);
  color         : var(--color-black-default);
  transition    : all 0.2s ease;
}

.login-form .form-control:focus {
  outline      : none;
  border-color : var(--color-primary);
  box-shadow   : 0 0 0 3px var(--color-primary-20);
}

.login-form .form-control::placeholder {
  color : var(--color-grey-font-default);
}

.login-form .input-group {
  position : relative;
  display  : flex;
  width    : 100%;
}

.login-form .input-group .form-control {
  border-radius : var(--radius-md) 0 0 var(--radius-md);
  flex          : 1;
}

.login-form .input-group-btn {
  position : relative;
}

.login-form .forgot-password {
  text-align    : right;
  margin-bottom : 1.5rem;
}

.login-form .forgot-password a {
  font-size       : 0.875rem;
  color           : var(--color-grey-font-default);
  text-decoration : none;
  transition      : color 0.2s ease;
}

.login-form .forgot-password a:hover {
  color           : var(--color-primary);
  text-decoration : underline;
}

/*
--------------------------------------
Form Footer & Buttons
--------------------------------------
*/

.login-form .form-footer {
  text-align : center;
  margin-top : 1.5rem;
}

.login-form .form-footer .btn-primary {
  display     : inline-flex;
  align-items : center;
}

.login-form .form-footer .btn-primary:hover {
  background   : var(--color-primary);
  border-color : var(--color-primary);
  box-shadow   : 0 10px 30px rgba(0, 0, 0, 0.25);
  transform    : translateY(-2px);
}

/*
--------------------------------------
Divider
--------------------------------------
*/

/*
--------------------------------------
No Account
--------------------------------------
*/

.no-account {
  text-align : center;
}

.no-account .btn-secondary {
  display         : inline-flex;
  justify-content : center;
  align-items     : center;
  height          : 50px;
  width           : 100%;
}

.no-account .btn-secondary:hover {
  background : var(--color-black-default);
  color      : var(--color-white-default);
}

/*
--------------------------------------
Page footer
--------------------------------------
*/

footer.page-footer {
  background : transparent;
  padding    : 1rem 0;
  text-align : center;
}

/*
--------------------------------------
Responsive
--------------------------------------
*/

@media (max-width : 575px) {
  .page-content {
    padding : 1.5rem;
  }

  .page-header h1 {
    font-size : 1.375rem;
  }

  .login-form .form-footer .btn-primary,
  .no-account .btn-secondary {
    padding : 0.875rem 1.5rem;
  }
}