/* ==========================================
 Layout
============================================*/
/* ==========================================
 Contents
============================================*/
.login {
  color: #2a2a2a;
  font-size: var(--sz-32);
  font-weight: 400;
  line-height: 1.53;
  padding-block: var(--sz-38) var(--sz-38);
}

.login__heading {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: 1.53;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sz-57);
}
.login__heading::after {
  content: "";
  display: block;
  width: var(--sz-454);
  height: 1px;
  background-color: var(--color-primary);
}

.form-control {
  --color-form-control-border: var(--color-primary);
  --bs-border-radius: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.53;
  padding: 0.5em 0.75em;
  width: var(--sz-496);
  margin-inline: auto;
  margin-bottom: var(--sz-30);
}

.form-control::-moz-placeholder {
  color: #b8bec4;
}

.form-control::placeholder {
  color: #b8bec4;
}

.login__memory {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: var(--sz-44);
}

.btn-login {
  aspect-ratio: 389/82;
  width: var(--sz-496);
  font-size: var(--sz-36);
  margin-bottom: var(--sz-18);
}

.login__forgot {
  color: #0b30ff;
  font-size: var(--sz-28);
  font-weight: 400;
  line-height: 2;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  display: block;
  text-decoration: none;
  margin-bottom: var(--sz-30);
}

.login__errorMessage {
  text-align: center;
  color: var(--bs-danger);
}

.login__separator {
  width: var(--sz-634);
  margin-inline: auto;
  margin-bottom: var(--sz-60);
}

.btn-register {
  color: #fff;
  background-color: #5dc07b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5dc07b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5dc07b;
  --bs-btn-disabled-border-color: #fff;
  --bs-btn-disabled-bg: #5dc07b;
  --bs-btn-hover-border-color: #fff;
  aspect-ratio: 389/82;
  width: var(--sz-389);
  border-radius: 0;
  font-size: var(--sz-36);
  font-weight: 700;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--sz-57);
}

.p1 {
  text-align: center;
  margin-bottom: var(--sz-38);
}

.p2 {
  text-align: center;
  margin-bottom: var(--sz-25);
}

@media screen and (min-width: 992px) {
  .login {
    font-size: var(--sz-36);
    padding-block: var(--sz-38) var(--sz-60);
  }
  .login__heading {
    font-size: var(--sz-50);
    margin-bottom: var(--sz-65);
  }
  .form-control {
    font-size: var(--sz-36);
    padding: 0 0.5em;
    width: var(--sz-646);
  }
  .login__memory {
    margin-bottom: var(--sz-60);
  }
  .btn-login {
    width: var(--sz-389);
    margin-bottom: var(--sz-51);
  }
  .login__forgot {
    font-size: var(--sz-23);
  }
  .login__separator {
    margin-bottom: var(--sz-90);
  }
  .btn-register {
    margin-bottom: var(--sz-55);
  }
  .p2 {
    margin-bottom: var(--sz-45);
  }
}