ul {
  list-style: none;
}

a {
  text-decoration: none;
  outline: none;
}

img {
  display: block;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Mulish";
  font-weight: normal;
  letter-spacing: 1px;
}

body {
  padding: 0px;
  margin: 0px;
  font-family: "Inter", sans-serif !important;
  height: 100vh;
  background: var(--White, #FFF);
}

.auth-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.auth-container .errors-danger {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
  color: #721c24;
  background-color: rgba(109, 107, 175, 0.08);
  border-radius: 5px;
}

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}

#form-content {
  -webkit-border-radius: 18px;
  display: grid;
  gap: 24px;
  border-radius: 18px;
  max-width: 360px;
  min-width: 360px;
  /* max-width: 600px; */
  text-align: center;
  /* border: 1px solid red; */
  position: relative;
}

.form-header {
  display: grid;
  gap: 12px;
  margin-bottom: 35px;
}


.form-header .bold-text {
  margin-top: 30px;
  align-self: stretch;
  color: var(--Gray-900, #181A1E);
  text-align: center;
  /* Display sm/Semibold */
  /* font-family: Inter; */
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 38px;
}

.form-header .lite-text {
  color: var(--Gray-500, #6B7281);
  text-align: center;
  /* Text md/Regular */
  /* font-family: Inter; */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

#form-body {
  display: grid;
  grid-template-rows: 1fr;
  row-gap: 24px;
}

#form-footer {
  font-size: 14px;
  text-align: center;
}


.remember-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reset-pass-button {
  display: grid;
  column-gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.remember-me label {
  color: var(--Gray-700, #344054);
  /* Text sm/Medium */
  /* font-family: Inter; */
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 142.857% */
}

#form-footer .underlineHover {
  color: #000000;
  display: inline-block;
  text-decoration: underline;
  font-weight: 400;
}

#form-footer .underlineHover:hover {
  text-decoration: none;
}

#form-footer .underlineHover:active {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}

/* .input {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 10px 40px;
  color: #FFFFFF;
  background-color: #6D6BAF;
  cursor: pointer;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  text-align: center;
  border: none;
  text-decoration: none;
  display: inline-block;
  margin: 0 10px 0 10px;
} */

.input:hover {
  /* -webkit-box-shadow: 4px 4px 8px 0px rgba(109, 107, 175, .5);
  -moz-box-shadow: 4px 4px 8px 0px rgba(109, 107, 175, .5); */
  /* box-shadow: 4px 4px 8px 0px rgba(109, 107, 175, .5); */
  /* background-color: #FFFFFF; */
  /* color: #6D6BAF; */
  text-decoration: none;
  border: 1px solid var(--Gray-300, #D0D5DD);
}

.input:active {
  text-decoration: none;
  background-color: #FFFFFF;
  color: #6D6BAF;
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
  border: 1px solid var(--Gray-300, #D0D5DD);
}

/* .input[type="button"] {
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 10px 40px;
  color: #6D6BAF;
  background-color: #FFFFFF;
  cursor: pointer;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  text-align: center;
  border: none;
  text-decoration: none;
  display: inline-block;
  margin: 0 10px 0 10px;
} */

.input[type="button"]:hover {
  -webkit-box-shadow: 4px 4px 8px 0px rgba(109, 107, 175, .5);
  -moz-box-shadow: 4px 4px 8px 0px rgba(109, 107, 175, .5);
  box-shadow: 4px 4px 8px 0px rgba(109, 107, 175, .5);
  background-color: #6D6BAF;
  color: #FFFFFF;
  text-decoration: none;
}

.input[type="button"]:active {
  text-decoration: none;
  background-color: #6D6BAF;
  color: #FFFFFF;
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -o-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  height: 40px;
  max-width: 100%;
  min-width: 100%;
  display: block;
  border: none;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  padding: 10px 14px;
  margin: 10px 0 20px 0;
  /* border: 2px solid #f6f6f6; */
  border: 1px solid var(--Gray-300, #D0D5DD);
  background: var(--White, #FFF);
  /* Shadow/xs */
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  -webkit-border-radius: 8px;
  border-radius: 8px;
  box-sizing: border-box;
}

.form-control::placeholder {
  color: #6D6BAF !important;
  opacity: 0.6 !important;
}

.inputText label {
  color: var(--Gray-700, #344054);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  display: block;
  margin: 0 auto;
  text-align: left;
}

.inputText:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  background: #FFFFFF;
  border-bottom: 2px solid #5fbae9;
  border: 1px solid var(--Gray-300, #D0D5DD);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
  color: var(--Gray-500, #667085);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.fadeIn {
  opacity: 1;
}

.first {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  align-items: center;
  /* padding: 0 0 30px 0; */
}

.second {
  font-size: 22px;
  padding: 0 0 30px 0;
}

.account__logo {
  width: 210px;
  height: 50px;
  justify-content: center;
  align-items: center;
}

.buttons {
  margin-top: 24px;
}

.back-button {
  width: 100%;
  height: 44px;
  padding: 8px 14px;
  background-color: white;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0em;
  text-align: center;
  color: var(--Gray-900, #181A1E);
  cursor: pointer;
  display: block;
  border-radius: 6px;
  border: 1px solid var(--Gray-50, #E7ECF5);
  background: var(--Gray-5, #FFF);
  box-shadow: 0px 1px 4px 0px rgba(82, 87, 97, 0.08);
}

.submit-button {
  width: 100%;
  height: 44px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px;
  background: linear-gradient(180deg, rgba(16, 85, 223, 0) 0%, #1055DF 100%), linear-gradient(180deg, #4382FF 0%, #0A5CFF 64.5%), linear-gradient(0deg, #6698FE, #6698FE);
  font-weight: 600;
  /* letter-spacing: 0em; */
  text-align: center;
  cursor: pointer;
  display: block;
  color: var(--Gray-5, #FFF);
  font-size: 14px;
  line-height: 130%;
}

.link-text {
  color: var(--Primary-600, #206AFF);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.blue-text {
  color: var(--Primary-700, #0A5CFF);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.sing-up-button-section{
  margin-top: 20px;
}
.sing-up-button{
  width: 100%;
  height: 44px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--Gray-50, #E7ECF5);
  background: var(--White, #FFF);
  box-shadow: 0px 1px 4px 0px rgba(82, 87, 97, 0.08);
  font-weight: 600;
  /* letter-spacing: 0em; */
  text-align: center;
  cursor: pointer;
  display: block;
  color: var(--Gray-900, #181A1E);
  font-size: 14px;
  line-height: 130%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Password Reset Form Enhancements */
.reset-instructions {
  text-align: center;
  padding: 20px 0;
}

.reset-instructions .success-message {
  color: var(--Success-600, #16A34A);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 1.5;
}

.reset-instructions .additional-info {
  color: var(--Gray-600, #475467);
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}

.reset-instructions .additional-info--error {
  color: var(--Error-600, #DC2626);
  margin-bottom: 20px;
}

/* Django password help text styling */
.helptext {
  display: block;
  font-size: 13px;
  color: var(--Gray-600, #475467);
  margin-top: 8px;
  line-height: 1.5;
  text-align: left;
  padding: 12px;
  background-color: #F9FAFB;
  border-radius: 6px;
  border-left: 3px solid var(--Primary-600, #206AFF);
}

.helptext ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
  list-style: disc;
}

.helptext li {
  margin: 4px 0;
  color: var(--Gray-600, #475467);
}

/* Error messages styling */
.errorlist {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  color: var(--Error-600, #DC2626);
  font-size: 13px;
  text-align: left;
}

.errorlist li {
  background-color: var(--Error-50, #FEF2F2);
  border-left: 3px solid var(--Error-600, #DC2626);
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* Better form field spacing for password reset */
#form-body > div {
  margin-bottom: 20px;
}

#form-body .inputText {
  margin-bottom: 0;
}

/* Improved password field styling */
input[type="password"].form-control {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="password"].form-control:focus {
  border-color: var(--Primary-600, #206AFF);
  box-shadow: 0px 0px 0px 3px rgba(32, 106, 255, 0.1);
  outline: none;
}

/* Social login (SSO) buttons */
.sso-section {
  margin-top: 20px;
}

.sso-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--Gray-3, #98A2B3);
  font-size: 13px;
  margin: 16px 0;
}

.sso-divider::before,
.sso-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--Gray-2, #EAECF0);
}

.sso-divider span {
  padding: 0 12px;
}

.sso-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid var(--Gray-2, #D0D5DD);
  background: #FFF;
  color: var(--Gray-7, #344054);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.sso-button:hover {
  background: var(--Gray-1, #F9FAFB);
  text-decoration: none;
}

.sso-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Centring a flex child with justify-content clips it once it outgrows the
   container: the overflow spills past both edges and the part above the start
   edge cannot be scrolled back to, so the logo and heading are simply lost.
   Auto margins centre identically while there is room, and yield when there
   is not. Short pages are unaffected; tall ones become scrollable. */
.wrapper {
  justify-content: flex-start;
  padding: 40px 0;
  box-sizing: border-box;
}

#form-content {
  margin: auto 0;
}

/* ── Two-factor authentication ─────────────────────────────────────────────
   Setup, verification, and backup codes. The pages sit in the same 360px
   #form-content column as sign-in, so everything here is full-width. */

.tfa-panel {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--Gray-50, #E7ECF5);
  background: var(--White, #FFF);
  box-shadow: 0px 1px 4px 0px rgba(82, 87, 97, 0.08);
}

/* The global `img { width: 100% }` would stretch the QR to the column width
   while its height attribute held at 200px — a distorted QR does not scan.
   Squaring it here is what keeps the code readable. */
.tfa-qr {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  image-rendering: pixelated;
}

.tfa-steps {
  display: grid;
  gap: 16px;
  text-align: left;
  margin: 0;
  padding: 0;
  counter-reset: tfa-step;
}

.tfa-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--Gray-700, #344054);
  font-size: 14px;
  line-height: 20px;
}

.tfa-step::before {
  counter-increment: tfa-step;
  content: counter(tfa-step);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--Gray-50, #E7ECF5);
  color: var(--Gray-900, #181A1E);
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

/* The manual-entry key. Breaks anywhere: a base32 secret has no spaces and
   would otherwise overflow the column. */
.tfa-secret {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--Gray-50, #E7ECF5);
  background: #F8FAFC;
  color: var(--Gray-900, #181A1E);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 1px;
  word-break: break-all;
  user-select: all;
}

/* One character per box is overkill for a 6-digit field this size; wide
   tracking on a centred input reads the same way and stays one input. */
.tfa-code-input input {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 8px;
  /* Tracking is applied after the last character too, so a centred value sits
     half a step left of true centre. The indent puts it back. */
  text-indent: 8px;
  padding: 10px 14px;
}

.tfa-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tfa-code {
  padding: 8px 4px;
  border-radius: 6px;
  background: #F8FAFC;
  color: var(--Gray-900, #181A1E);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: center;
  user-select: all;
}

.tfa-callout {
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #FDE68A;
  background: #FFFBEB;
  color: #92400E;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}

.tfa-note {
  color: var(--Gray-500, #6B7281);
  font-size: 13px;
  line-height: 20px;
}

/* Sign-in pages put two links on one row; these pages often have one, which
   `justify-content: space-between` would shove to the left. */
.tfa-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.tfa-secondary-button {
  margin-top: 12px;
}

/* .submit-button is written for <input>, which the browser sizes as border-box. An
   anchor wearing the same class is content-box, so width:100% plus the padding
   overflows the column — and its label sits at the top rather than centred. */
a.submit-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Three separate gaps stack between one field and one button here: the input's own
   bottom margin, #form-body's row-gap, and .buttons' top margin. Left alone they
   read as a hole in the form, so the field and the button each drop theirs and the
   row-gap alone does the spacing. */
.tfa-field input {
  margin-bottom: 0;
}

.tfa-form .buttons {
  margin-top: 0;
}