/*════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Base ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

body {
  background-color: white !important;
}

.min-100-vh {
  min-height: 100vh !important;
}

#app_logo {
  width: 80%;
  max-width: 800px;
}

#right_col {
  border-left: 5px solid var(--forstone);
}

#login_bg {
  object-position: 50% 50%;
  object-fit: cover;
}

/*════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Form ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

.muted-link {
  font-weight: 600;
  text-decoration: none;
  color: darkgray;
}

.muted-link:hover {
  color: black !important;
}

.login-header {
  letter-spacing: 1px !important;
  color: #676767 !important;
}

.auth-form {
  width: 100%;
  max-width: 30rem;
}

.slow {
  transition: all 100ms;
}

.form-control-placeholder {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 8px 0 0 20px;
  transition: all 200ms;
  opacity: 0.60;
  color: #676767;
  pointer-events: none;
  text-overflow: ellipsis;
  font-size: 1.3rem;
  overflow: hidden;
  max-width: 100%;
}

.form-group {
  margin-top: 4rem;
  position: relative;
}

.form-control:focus+.form-control-placeholder,
.form-control:valid+.form-control-placeholder {
  transform: translate3d(0, -125%, 0);
  opacity: 1;
  padding-top: 0em;
}

.form-control:focus,
.form-control:valid {
  margin-top: 4rem !important;
}

.error {
  display: block !important;
  font-size: 1.2rem;
}

.form-control:focus {
  border-color: var(--forstone);
  box-shadow: 0 0 0 .25rem var(--forstone25);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: black;
  background-color: var(--bs-body-bg);
}