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

/**
 * @file
 * Text and textarea input elements.
 */

: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.
   */
}

.form-element {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 3rem; /* iOS. */
  padding: calc(0.75rem - 1px) calc(1rem - 1px);
  color: #222330;
  border: 1px solid #8e929c;
  border-radius: 0.125rem;
  background: #fff;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; /* Being able to control inner box shadow on iOS. */
}

.no-touchevents .form-element--extrasmall,
.no-touchevents .form-element[name$="][_weight]"] {
  min-height: 1.5rem; /* iOS. */
  padding: calc(0.15rem - 1px) calc(0.5rem - 1px);
  font-size: 0.889rem;
  line-height: 1.2rem;
}

/**
 * Override normalize.css's search appearance.
 */

.form-element--type-search[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/**
 * Fix minor things for specific types.
 */

.form-element--type-date,
.form-element--type-time {
  vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
}

.form-element--type-date {
  min-width: 9.5rem; /* Prevent input width change while filling. */
}

.form-element--type-time {
  min-width: 7.5rem; /* Prevent input width change while filling. */
}

.form-element--type-color {
  min-width: 3rem; /* Bigger input for webkit */
  padding: 0; /* Bigger pickable area */
  text-indent: calc(0.75rem - 1px); /* Text-input fallback for non-supporting browsers like Safari */
}

/**
 * Reset value border and background of the file input on IE11 and Edge.
 */

.form-element--type-file::-ms-value {
  border: 0;
  background: inherit;
}

/**
 * Better upload button alignment for Chrome.
 */

.form-element--type-file::-webkit-file-upload-button {
  vertical-align: top;
}

/**
 * Target IE 11 and Edge.
 *
 * Reduce the vertical padding of the file input element to make the browse
 * button fit into the needed input height.
 */

/* stylelint-disable-next-line selector-type-no-unknown */

_:-ms-fullscreen,
:root .form-element--type-file {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/**
 * States.
 */

.form-element:active {
  border-color: #003cc5;
}

.form-element:hover {
  border-color: #222330;
  box-shadow: inset 0 0 0 1px #222330;
}

.form-element:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
}

.form-element:hover:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
}

.form-element.error {
  border-width: 2px;
  border-color: #d72222;
}

.form-element.error:hover {
  box-shadow: none;
}

.form-element.error:hover:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
}

.form-element--type-textarea.error + .cke {
  border-color: #d72222;
}

.form-element[disabled] {
  -webkit-opacity: 1;
  color: #82828c;
  border-color: #bababf;
  background-color: #f2f2f3;
  box-shadow: none;
  /* https://stackoverflow.com/q/262158#answer-23511280 */
  -webkit-text-fill-color: #82828c;
}

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

@media screen and (max-width: 600px) {
  /* Number, date and time are skipped here */
  .form-element {
    float: none;
    width: 100%;
    margin-top: 0.75rem;
    margin-right: 0;
    margin-left: 0;
  }
  .form-element:first-child,
  .form-item__label + .form-element {
    margin-top: 0;
  }
}