.login-logo,
.register-logo {
  margin-bottom: 0.9rem;
  font-size: 2.1rem;
  font-weight: 300;
  text-align: center;
}
.login-logo a,
.register-logo a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.login-page,
.register-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-box,
.register-box {
  width: 360px;
}
@media (max-width: 576px) {
  .login-box,
  .register-box {
    width: 90%;
    margin-top: 0.5rem;
  }
}
.login-box .card,
.register-box .card {
  margin-bottom: 0;
}

.login-card-body,
.register-card-body {
  padding: 20px;
  color: var(--bs-secondary-color);
  background-color: var(--bs-body-bg);
  border-top: 0;
}
.login-card-body .input-group .form-control:focus,
.register-card-body .input-group .form-control:focus {
  box-shadow: none;
}
.login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
  border-color: #86b7fe;
}
.login-card-body .input-group .form-control.is-valid:focus,
.register-card-body .input-group .form-control.is-valid:focus {
  box-shadow: none;
}
.login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
  border-color: #198754;
}
.login-card-body .input-group .form-control.is-invalid:focus,
.register-card-body .input-group .form-control.is-invalid:focus {
  box-shadow: none;
}
.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
  border-color: #dc3545;
}
.login-card-body .input-group .input-group-text,
.register-card-body .input-group .input-group-text {
  color: var(--bs-secondary-color);
  background-color: transparent;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .login-card-body .input-group .input-group-text,
  .register-card-body .input-group .input-group-text {
    transition: none;
  }
}

.login-box-msg,
.register-box-msg {
  padding: 0 20px 20px;
  margin: 0;
  text-align: center;
}

.social-auth-links {
  margin: 10px 0;
}

.lockscreen .lockscreen-name {
  font-weight: 600;
  text-align: center;
}
.lockscreen .lockscreen-logo {
  margin-bottom: 25px;
  font-size: 35px;
  font-weight: 300;
  text-align: center;
}
.lockscreen .lockscreen-logo a {
  color: var(--bs-emphasis-color);
  text-decoration: none;
}
.lockscreen .lockscreen-wrapper {
  max-width: 400px;
  margin: 0 auto;
  margin-top: 10%;
}
.lockscreen .lockscreen-item {
  position: relative;
  width: 290px;
  padding: 0;
  margin: 10px auto 30px;
  background-color: var(--bs-body-bg);
  border-radius: 4px;
}
.lockscreen .lockscreen-image {
  position: absolute;
  top: -25px;
  left: -10px;
  z-index: 10;
  padding: 5px;
  background-color: var(--bs-body-bg);
  border-radius: 50%;
}
.lockscreen .lockscreen-image > img {
  border-radius: 50%;
  width: 70px;
  height: 70px;
}
.lockscreen .lockscreen-credentials {
  margin-left: 70px;
}
.lockscreen .lockscreen-credentials .form-control {
  border: 0;
}
.lockscreen .lockscreen-credentials .btn {
  padding: 0 10px;
  border: 0;
}
.lockscreen .lockscreen-footer {
  margin-top: 10px;
}

.img-size-64,
.img-size-50,
.img-size-32 {
  height: auto;
}

.img-size-64 {
  width: 64px;
}

.img-size-50 {
  width: 50px;
}

.img-size-32 {
  width: 32px;
}