@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;700&display=swap");
/* line 3, app/assets/stylesheets/devise.scss */
body {
  background: #373b5e;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  color: white;
}

/* line 10, app/assets/stylesheets/devise.scss */
h2 {
  font-weight: 400;
}

/* line 14, app/assets/stylesheets/devise.scss */
a {
  color: white;
}

/* line 17, app/assets/stylesheets/devise.scss */
a:hover {
  text-decoration: none;
}

/* line 22, app/assets/stylesheets/devise.scss */
label {
  color: white;
  display: block;
  text-align: left;
  margin-bottom: 2rem;
  font-size: 14px;
}

/* line 29, app/assets/stylesheets/devise.scss */
label > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* line 35, app/assets/stylesheets/devise.scss */
label > span a {
  font-size: 0.9rem;
}

/* line 40, app/assets/stylesheets/devise.scss */
input {
  display: block;
}

/* line 43, app/assets/stylesheets/devise.scss */
input .errored {
  border: 3px solid #d36c52;
}

/* line 47, app/assets/stylesheets/devise.scss */
input[type="text"], input[type="email"], input[type="password"] {
  display: block;
  border: none;
  border-radius: 3px;
  padding: 12px;
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* line 59, app/assets/stylesheets/devise.scss */
input[type="submit"] {
  background: #5baad3;
  border: none;
  color: white;
  padding: 10px;
  border-radius: 3px;
  display: block;
  width: 100%;
  cursor: pointer;
  font-size: 1rem;
}

/* line 70, app/assets/stylesheets/devise.scss */
input[type="submit"]:hover {
  background: #7a7fbd;
}

/* line 74, app/assets/stylesheets/devise.scss */
input[type="submit"]:active {
  background: #96ced6;
}

/* line 80, app/assets/stylesheets/devise.scss */
.logo {
  max-width: 220px;
  margin-bottom: 3em;
  width: 40vw;
}

/* line 86, app/assets/stylesheets/devise.scss */
.form-container {
  width: 400px;
  margin: 5em auto;
  text-align: center;
}

/* line 92, app/assets/stylesheets/devise.scss */
.checkbox-field input {
  display: inline;
}

/* line 96, app/assets/stylesheets/devise.scss */
.actions {
  display: flex;
  justify-content: space-between;
}

/* line 100, app/assets/stylesheets/devise.scss */
.actions label {
  margin-bottom: 1rem;
}

/* line 105, app/assets/stylesheets/devise.scss */
.flash-message {
  text-align: left;
  font-size: 14px;
  margin: 16px 0;
}

/* line 111, app/assets/stylesheets/devise.scss */
.error-message {
  font-style: italic;
  margin-top: 0.5rem;
  color: #d36c52;
}

/* line 117, app/assets/stylesheets/devise.scss */
.terms {
  margin: 16px 0;
  font-size: 12px;
  font-style: italic;
  text-align: left;
}

/* line 124, app/assets/stylesheets/devise.scss */
.terms-and-conditions {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  margin-top: 1rem;
}

/* Two-Factor Authentication Styles */
/* line 132, app/assets/stylesheets/devise.scss */
.otp-input {
  font-size: 24px !important;
  text-align: center;
  letter-spacing: 0.5rem;
  font-family: monospace;
}

/* line 139, app/assets/stylesheets/devise.scss */
.otp-input.errored {
  border: 3px solid #d36c52 !important;
  animation: shake 0.5s ease-in-out;
}

/* line 144, app/assets/stylesheets/devise.scss */
.error-message {
  background-color: rgba(211, 108, 82, 0.1);
  border: 1px solid #d36c52;
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  color: #d36c52;
  font-size: 14px;
  text-align: center;
}

/* line 155, app/assets/stylesheets/devise.scss */
.instruction {
  margin: 1.5rem 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
}

/* line 161, app/assets/stylesheets/devise.scss */
.verification-section {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem 0;
}

/* line 168, app/assets/stylesheets/devise.scss */
.qr-container {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  margin: 2rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* line 176, app/assets/stylesheets/devise.scss */
.backup-codes {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  text-align: left;
}

/* line 184, app/assets/stylesheets/devise.scss */
.backup-codes ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

/* line 193, app/assets/stylesheets/devise.scss */
.backup-codes li {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.5rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
  text-align: center;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}