/* Background */
.background-customizable {
  background-color: #ffffff;
}

/* Banner (top section with logo) */
.banner-customizable {
  padding: 2rem 1rem 1rem 1rem;
  background-color: #ffffff;
}

/* Logo */
.logo-customizable {
  max-width: 180px;
  max-height: 100px;
  background-color: transparent;
}

/* Labels */
.label-customizable {
  font-weight: 500;
  color: #333333;
}

/* Input fields */
.inputField-customizable {
  width: 100%;
  height: 48px;
  color: #333333;
  background-color: #ffffff;
  border: 2px solid #e0e0e0;
}

.inputField-customizable:focus {
  border-color: #0066cc;
  outline: 2px;
}

/* Submit button (primary - Sign In) */
.submitButton-customizable {
  font-size: 16px;
  font-weight: 600;
  margin: 1rem 0 0 0;
  width: 100%;
  height: 48px;
  color: #ffffff;
  background-color: #0066cc;
}

.submitButton-customizable:hover {
  color: #ffffff;
  background-color: #004c99;
}

/* Identity provider button (Sign in with corporate ID) */
.idpButton-customizable {
  height: 48px;
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
  color: #0066cc;
  background-color: #ffffff;
  border-color: #0066cc;
}

.idpButton-customizable:hover {
  color: #ffffff;
  background-color: #0066cc;
}

/* Identity provider description text */
.idpDescription-customizable {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: block;
  font-size: 14px;
  color: #666666;
}

/* Redirect button (optional, for redirects) */
.redirect-customizable {
  font-weight: 600;
  color: #0066cc;
  background-color: #ffffff;
}

/* Text descriptions */
.textDescription-customizable {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: block;
  font-size: 14px;
  color: #666666;
}

/* Legal text */
.legalText-customizable {
  color: #666666;
  font-size: 12px;
}

/* Error messages */
.errorMessage-customizable {
  margin: 0.5rem 0 0.5rem 0;
  padding: 12px;
  font-size: 14px;
  width: 100%;
  background: #ffebee;
  border: 1px solid #d32f2f;
  color: #d32f2f;
  box-sizing: border-box;
}

/* Social button (for social providers if used) */
.socialButton-customizable {
  height: 48px;
  text-align: center;
  width: 100%;
  margin-bottom: 0.5rem;
}

/* Password validation states */
.passwordCheck-valid-customizable {
  color: #4caf50;
}

.passwordCheck-notValid-customizable {
  color: #d32f2f;
}