:root {
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
}

.main-container {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  background: #ffffff;
  overflow: hidden;
}

.main-container,
.main-container * {
  box-sizing: border-box;
}

input,
select,
textarea,
button {
  outline: 0;
}

.logo {
  position: relative;
  width: 85px;
  height: 20px;
  margin: 32px 0 0 32px;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-06-19/z71fLs6Qae.png)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 1;
}

.page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 2;
}

.login-image {
  flex-shrink: 0;
  position: relative;
  width: 704px;
  height: 100vh;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-06-19/cj8uGX1PBH.png)
    no-repeat center;
  background-size: cover;
  z-index: 3;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 736px;
  height: 100vh;
  padding: 10px;
  overflow-y: auto;
  z-index: 4;
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 438px;
}
.login-content-login {
  gap: 32px;
}
.login-content-signup {
  gap: 15px;
}

.login-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
}

.steex {
  width: 158.807px;
  height: 46px;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-06-19/fOfQcsEP7S.png)
    no-repeat center;
  background-size: 100% 100%;
}

.divider {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
}

.divider-1 {
  height: 1px;
  background: url(https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-06-19/QQxkBLfSfv.png)
    no-repeat center;
  background-size: cover;
}

.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px;
}

.input-email,
.input-password {
  width: 100%;
}

.base-input-field,
.base-input-field-2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}

.input-title,
.input-title-3 {
  font-family: Outfit, var(--default-font-family);
  font-size: 16px;
  font-weight: 700;
  color: #3a4a69;
}

.input-field,
.input-field-4 {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #899abe;
  border-radius: 6px;
  color:#3a4a69;
  font-family: Nunito, var(--default-font-family);
}
.input-field i.fa-envelope, .input-field i.fa-lock {
    margin-right: 10px;
}

.input-field.error,
.input-field-4.error  {
  border: 2px solid #ff0069;
  color: #ff0069;
}

.envelope,
.chevron-down {
  font-family: Font Awesome 6 Pro, var(--default-font-family);
  font-size: 16px;
  font-weight: 900;
  color: #3a4a69;
  margin-right: 8px;
}
.envelope.error,
.chevron-down.error {
  color: #ff0069;
}

.frame,
.frame-5 {
  flex-grow: 1;
  border:none;
}
input.frame.error,
input.frame-5.error {
    color:#ff0069
}

.text-of-input,
.text-of-input-6 {
  font-family: Nunito, var(--default-font-family);
  font-size: 16px;
  color: #3a4a69;
}
.text-of-input.error,
.text-of-input-6.error {
  color: #ff0069;
}

.helper-text {
  font-family: Nunito, var(--default-font-family);
  font-size: 12px;
  color: #3a4a69;
}
.helper-text.error {
  color: #ff0069;
}

.options {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.checkbox-label,
.default-text-link-example {
  font-family: Nunito, var(--default-font-family);
  font-size: 12px;
}

.checkbox-label {
  color: #3a4a69;
}

.default-text-link-example {
  color: #1e96fc;
}

.buttons-primary {
  width: 100%;
}

.base-buttons-atom {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
  background: #1e96fc;
  border-radius: 6px;
  width: 100%;
  cursor: pointer;
  border: none;
}

.button-label {
  font-family: Outfit, var(--default-font-family);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.login-copyright {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.copyright-acheel-all-rights {
  font-family: Nunito, var(--default-font-family);
  font-size: 12px;
  color: #899abe;
  text-align: center;
}

/* 🎯 RESPONSIVE */
@media screen and (max-width: 768px) {
  .login-image {
    display: none;
  }

  .page {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .login-form {
    width: 100%;
    padding: 24px;
    height: auto;
  }

  .login-content {
    width: 100%;
    max-width: 420px;
  }
}


form .input-field input, form .input-field select {
    width: 100%;
    border: none;