.yyui-json-editor {
  .yyui-input, 
  .yyui-input {
    display: inline-block;
    margin-right: 20px;
  }
  .yyui-button {
    margin: 4px 0;
  }
  .json-field {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #eee;

    .yyui-select {
      margin-right: 12px;
    }

    .yyui-icon {
      margin-right: 10px;
      cursor: pointer;
    }

    // make non-expandable field labels line up with expandable field labels
    // accounts for the expander icon
    &.non-expandable,
    .add-element-btn {
      margin-left: 20px;
    }

    .indented {
      padding-left: 20px;
    }

    .expander-icon {
      margin-right: 8px;
      cursor: pointer;
    }

    .field-key {
      margin-right: 10px;
      min-width: 60px;
      display: inline-block;
    }
    
    .form-control {
      display: inline-block;
      width: auto;
      margin-right: 10px;
    }

    .Select {
      display: inline-block;
      width: 120px;
      vertical-align: middle;
    }

    .bool-selector {
      margin-right: 10px;
    }

    .nullify-btn,
    .remove-btn {
      margin-left: 10px;
      color: #888;
      cursor: pointer;

      &:hover {
        color: #555;
      }
    }

    .null-value {
      font-family: monospace;
      margin-right: 10px;
    }
  }

  .editor-actions {
    button {
      margin-right: 5px;

      i {
        margin-right: 5px;
      }
    }
  }
}

// this appears outside the editor dom component in a popup
#json-editor-new-element-name {
  input {
    width: auto !important;
    display: inline-block !important;
    margin-right: 10px;
  }

  .add-new-element,
  .cancel-new-element {
    cursor: pointer;
  }

  .add-new-element {
    color: #32c5d2;
    margin-right: 10px;
  }

  .cancel-new-element,
  .invalid-element-name {
    color: #e7505a;
  }
}

.yyui-add-element {
  .yyui-formitem {
    display: inline-block;
  }

  .yyui-icon {
    cursor: pointer;
    margin-left: 10px;
  }
}