/*
 * Glean branding for the Cognito classic hosted UI.
 *
 * Cognito only accepts a fixed allow-list of selectors/properties here
 * (see "Customizing the built-in sign-in and sign-up webpages" in the
 * Cognito developer guide); anything else makes SetUICustomization fail.
 *
 * Palette (typescript/core/theme/Colors.ts):
 *   gleanBlue #343ced  blue600 #131bd4  blue100 #e2e3fb
 *   black     #333333  gray500 #767676  lightGray #e0e0e0
 */

.background-customizable {
  background-color: #f7f7fb;
}

.banner-customizable {
  padding: 28px 0 20px 0;
  background-color: #ffffff;
}

.logo-customizable {
  max-width: 55%;
  max-height: 72px;
}

.label-customizable {
  font-weight: 500;
}

.textDescription-customizable {
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  font-size: 15px;
}

.idpDescription-customizable {
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  font-size: 15px;
}

.legalText-customizable {
  color: #767676;
  font-size: 11px;
}

.inputField-customizable {
  width: 100%;
  height: 44px;
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

.inputField-customizable:focus {
  border-color: #343ced;
}

.submitButton-customizable {
  font-size: 15px;
  font-weight: 600;
  margin: 20px 0 10px 0;
  padding: 0 16px;
  width: 100%;
  height: 44px;
  color: #ffffff;
  background-color: #343ced;
}

.submitButton-customizable:hover {
  color: #ffffff;
  background-color: #131bd4;
}

.idpButton-customizable {
  height: 44px;
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
  color: #343ced;
  background-color: #ffffff;
  border-color: #343ced;
}

.idpButton-customizable:hover {
  color: #ffffff;
  background-color: #343ced;
}

.socialButton-customizable {
  border-radius: 6px;
  height: 44px;
  text-align: left;
  width: 100%;
  margin-bottom: 15px;
}

.errorMessage-customizable {
  padding: 8px;
  font-size: 14px;
  width: 100%;
  background: #fff5f5;
  border: 1px solid #e53e3e;
  color: #c53030;
}

.redirect-customizable {
  text-align: center;
}

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

.passwordCheck-valid-customizable {
  color: #2f855a;
}