$errorImgUrl: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-graph-error-circle-e50000.svg');
$validImgUrl: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-graph-check-027a02.svg');
$selectArrowImgUrl: url('/headers/ilusion/'+ $assets-folder +'/dist/svg/icon-ownfill-ui-chevron-down-46403c.svg');


/* Mensaje de error mostrado bajo el input */
.error_text {
  color: $brand-red;
  clear: both;
  padding-top: 5px;
  padding-bottom: 5px;
  display: block;
  font-size: $font-size-base;
  font-weight: $roboto-light;
  line-height: 1.2;
  text-align: left;
  .checkbox &, .radio & {
    padding-left: 20px;
  }
  .includes_error & {
    color: $brand-red;
  }
  .includes_warning & {
    color: #c1a655;
  }
}
.error_text a {
  color: $brand-red;
}
/* comunes a errores y validados */
.includes_error {
  input,
  select,
  .form-control.bootstrap-select .dropdown-toggle {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right 10px top 14px;
    background-size: 18px 18px;
    padding-right: 35px;
    transition: background 0s;
  }
  select {
    background-position: right 15px top 14px;
  }
  input.form-control,
  textarea.form-control {
    &::-ms-clear {
      display: none;
    }
  }
  input.form-control {
    background-position: right 10px bottom 8px;
    padding-right: 35px;
  }
  select.form-control {
    background-position: right 10px top 50%, right 30px bottom 8px;
    background-size: 10px 10px, 18px 18px;
    padding-right: 52px;
  }
  &.form-group label:not(.sr-only) + .form-control:not(textarea),
  &.form-group label:not(.sr-only) + span .form-control,
  &.form-group label:not(.sr-only) + .twitter-typeahead .form-control,
  &.form-group label:not(.sr-only) + .geounits-autocomplete-input-widget .twitter-typeahead .form-control {
    padding-right: 35px;
  }
  &.form-group label:not(.sr-only) + .form-control.bootstrap-select {
    padding: 0;
  }
  &.form-group label:not(.sr-only) + .form-control.bootstrap-select .dropdown-toggle {
    padding-right: 52px;
    background-position: right 30px bottom 8px;
  }
  &.form-group label:not(.sr-only) + select.form-control,
  &.form-group label:not(.sr-only) + span select.form-control,
  &.form-group label:not(.sr-only) + .twitter-typeahead select.form-control {
    padding-right: 52px;
    background-position: right 10px top 32px, right 30px bottom 8px;
  }
  &.form-group label.long-label:not(.sr-only) + select.form-control,
  &.form-group label.long-label:not(.sr-only) + span select.form-control,
  &.form-group label.long-label:not(.sr-only) + .twitter-typeahead select.form-control {
    background-position: right 10px top 47px, right 30px bottom 8px;
  }
}

/* Inputs marcados como erróneos */
.includes_error {
  input,
  textarea,
  select,
  .false-select,
  .form-control.bootstrap-select .dropdown-toggle {
    border: 1px solid $brand-red !important;
    &.form-control {
      box-shadow: none;
      &:focus {
        box-shadow: 0 0 8px rgba($input-border-focus,.8);
      }
    }
  }
  input,
  select,
  .false-select,
  .form-control.bootstrap-select .dropdown-toggle {
    background-image: $errorImgUrl;
  }
  select.form-control {
    background-image: $selectArrowImgUrl, $errorImgUrl;
  }
  input[type="file"] {
    background-image: none;
  }
}
.checkbox.includes_error {
  input {
    outline: 2px solid $brand-red;
    outline-offset: -1px;
    @media screen and (device-aspect-ratio: 40/71) {
      outline: 0;
    }
  }
}

/* error messages: EOC */

/* sugerencia de mail */
.help-block {
  font-size: 12px;
  line-height: 16px;
  font-weight: $roboto-regular;
  margin: 3px 0 0;
  color:$brand-grey-dark;
  a {
    color: $link-color;
    text-decoration: underline;
  }
}