:root {
  --Text-warning: var(--warnning-500);
  --Text-success: var(--success-200);
  --Text-primaryNoneBg: var(--base-black);
}

@media (prefers-color-scheme: dark) {
  :root {
    --Text-warning: var(--warnning-500);
    --Text-success: var(--success-200);
    --Text-primaryNoneBg: var(--base-white);
  }
}

.inputWrapper {
  margin-bottom: 0.25rem;
  position: relative;
}

.passwordInput,
.confirmPasswordInput {
  width: 100%;
  border: 2px solid var(--Text-primaryNoneBg);
  font-size: 0.75rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.passwordInput:focus,
.confirmPasswordInput:focus {
  outline: none;
  border-color: var(--Text-success);
}

/* .input-error {
  border: 1px solid var(--Text-warning) !important;
} */

.error-message {
  margin-top: -0.5rem;
  display: none;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  width: 100%;
}


.error-text {
  color: var(--Text-warning);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.success-text {
  color: var(--Text-success);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}