/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/2815083
 * @preserve
 */

/**
 * @file
 * Main form and form item styles.
 */

:root {
  /*
   * Color Palette.
   */
  /* Secondary. */
  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
  /*
   * Base.
   */
  /*
   * Typography.
   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
  /**
   * Spaces.
   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
  /*
   * Common.
   */
  /*
   * Inputs.
   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
  /*
   * Details.
   */
  /**
   * Buttons.
   */
  /**
   * jQuery.UI dropdown.
   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
  /**
   * Progress bar.
   */
  /**
   * Tabledrag icon size.
   */ /* 17px */
  /**
   * Ajax progress.
   */
  /**
   * Breadcrumb.
   */
}

:-ms-input-placeholder {
  color: #8e929c;
}

::-ms-input-placeholder {
  color: #8e929c;
}

::placeholder {
  color: #8e929c;
}

/* IE 10 and 11 needs this set as important. */

:-ms-input-placeholder {
  color: #8e929c !important;
}

/**
 * General form item.
 */

.form-item {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/**
 * When a table row or a container-inline has a single form item, prevent it
 * from adding unnecessary extra spacing.
 * If it has multiple form items, allow spacing between them, overriding Classy.
 */

tr .form-item,
.container-inline .form-item {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/**
 * Form element label.
 */

.form-item__label {
  display: table;
  margin-top: 0.25rem; /* 4px */
  margin-bottom: 0.25rem; /* 4px */
  font-size: 0.889rem; /* ~14px */
  font-weight: bold;
  line-height: 1.125rem; /* 18px */
}

.form-item__label--multiple-value-form {
  margin-top: 0;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.form-item__label[for] {
  cursor: pointer;
}

.form-item__label.option {
  display: inline;
  font-weight: normal;
}

/* Label states. */

.form-item__label.has-error {
  color: #d72222;
}

.form-item__label.option.has-error {
  color: inherit;
}

.form-item__label.is-disabled {
  cursor: default; /* @todo ...or auto? */
  color: #82828c;
}

.form-item__label.form-required::after,
.fieldset__label.form-required::after {
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.3em;
  margin-left: 0.3em;
  content: "";
  vertical-align: super;
  /* Use a background image to prevent screen readers from announcing the text. */
  background-image: url(../../images/core/ee0000/required.svg);
  background-repeat: no-repeat;
  background-size: 0.4375rem 0.4375rem;
}

/**
 * Form item description.
 */

.form-item__description {
  margin-top: 0.375rem; /* 6px */
  margin-bottom: 0.375rem; /* 6px */
  color: #545560;
  font-size: 0.79rem; /* ~13px */
  line-height: 1.0625rem; /* 17px */
}

/* Description states. */

.form-item__description.is-disabled {
  color: #82828c;
}

/**
 * Error message (Inline form errors).
 */

.form-item__error-message {
  margin-top: 0.375rem; /* 6px */
  margin-bottom: 0.375rem; /* 6px */
  color: #d72222;
  font-size: 0.79rem; /* ~13px */
  font-weight: normal;
  line-height: 1.0625rem; /* 17px */
}

.form-item__prefix.is-disabled,
.form-item__suffix.is-disabled {
  color: #82828c;
}

/**
 * Form actions.
 */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.form-actions .button,
.form-actions .action-link {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.form-actions .ajax-progress--throbber {
  align-self: center;
}

/**
 * Password module.
 *
 * @legacy
 * @todo These should be in a standalone component file.
 */

.confirm-parent,
.password-parent {
  overflow: visible;
  width: auto;
}

.form-item-options-group-info-identifier,
.form-item-pass .description {
  clear: both;
}

/**
 * Custom label placement for editor filter format select.
 */

.form-item--editor-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
}

.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix,
.form-item--editor-format .form-element--editor-format {
  min-width: 1px;
}

.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
  margin-right: 0.5rem; /* LTR */
}

[dir="rtl"] .form-item--editor-format .form-item__label,
[dir="rtl"] .form-item--editor-format .form-item__prefix,
[dir="rtl"] .form-item--editor-format .form-item__suffix {
  margin-right: 0;
  margin-left: 0.5rem;
}

.form-item--editor-format .form-item__description,
.form-item--editor-format .form-item__error-message {
  flex: 0 1 100%;
  min-width: 1px;
}

/**
 * Improve form element usability on narrow devices.
 *
 * @legacy
 */

@media screen and (max-width: 600px) {
  .password-strength {
    width: 100%;
  }
  div.form-item div.password-suggestions {
    float: none;
  }
}