.form-field-wrapper {
  margin: 5px auto; }
  .form-field-wrapper .form-field-inner {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    border: 1px #a9a9a9 solid;
    padding: 0px 0px 0px 0px; }
    .form-field-wrapper .form-field-inner label.form-field-name {
      padding: 7px 10px;
      margin: 0px;
      background-color: #f8f7f9;
      font-weight: normal; }
    .form-field-wrapper .form-field-inner .form-field-value {
      padding: 7px 10px;
      border-left: 1px solid #a9a9a9;
      background-color: white;
      min-width: 100px;
      flex-grow: 1; }
      .form-field-wrapper .form-field-inner .form-field-value .type-value {
        display: none; }
        .form-field-wrapper .form-field-inner .form-field-value .type-value.text-value {
          height: calc(1.4 * 1em); }
      .form-field-wrapper .form-field-inner .form-field-value[contentEditable=true]:empty:not(:focus):before {
        content: attr(placeholder);
        cursor: text; }
    .form-field-wrapper .form-field-inner .form-field-helper {
      margin: 2px 2px;
      padding: 5px 5px;
      color: white;
      align-self: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #25b7d3;
      font-family: FontAwesome;
      font-weight: bold;
      text-align: center;
      font-size: 25px;
      line-height: 21px;
      cursor: default; }
  .form-field-wrapper.type-text .form-field-inner .form-field-value .text-value.type-value {
    display: block; }
  .form-field-wrapper.type-checkbox .form-field-inner .form-field-value .checkbox-value.type-value {
    display: block; }
  .form-field-wrapper.status-loading {
    color: orange;
    transition: color ease-in .005s; }
    .form-field-wrapper.status-loading .form-field-inner {
      transition: border-color ease-in .005s;
      border-color: orange; }
  .form-field-wrapper.status-loading-finished {
    animation-name: loading-finished;
    animation-duration: .3s;
    animation-fill-mode: forwards; }
    .form-field-wrapper.status-loading-finished .form-field-inner {
      animation-name: loading-finished;
      animation-duration: .3s;
      animation-fill-mode: forwards; }
@keyframes loading-finished {
  from {
    border-color: orange;
    color: orange; }
  to {
    color: grey;
    border-color: #a9a9a9; } }

/*# sourceMappingURL=FormField.css.map */