.editable-JSON {
  color: inherit;
}

.editable-JSON, .editable-JSON-input, .editable-JSON input {
  font-family: Courier, Lucidatypewriter, Fixed, monospace;
  font-size: 14px;
}

.editable-JSON input[type="text"] {
  display: inline-block;
}

.editable-JSON-number, .editable-JSON-date input, .editable-JSON-field:not(.editable-JSON-_id-field), .editable-JSON-string:not(.editable-JSON-_id-value) {
  cursor: pointer;    
}

.editable-JSON-input {
  border: 0;
  padding: 0;
  margin: 0;
}

.editable-JSON-field {
  color: #F92772;
}

/***
* The following four rules are to make the JSON display look exactly like a <pre> at the top level.
* The alternative is to remove the last three rules.
* But then it won't look like a <pre> output
*/

.editable-JSON-indent {
  margin-left: 1.2em;    
}

.editable-JSON > .editable-JSON-indent > .editable-JSON-field {
  margin-left: 1.2em;
}

.editable-JSON > .editable-JSON-indent > .editable-JSON-indent {
  margin-left: 2.4em;    
}

.editable-JSON > .editable-JSON-indent > .editable-JSON-closer {
  margin-left: 1.2em;
}

.editable-JSON-string {
  color: #A6E22D;    
}

.editable-JSON-boolean {
  color: #66D9EF;
  cursor: pointer;
}

.editable-JSON .editable-JSON-date input {
  min-width: 14.4em;
  cursor: auto;
  background: inherit;
}

.editable-JSON-date input:focus {
  background: rgba(128,128,128,.1);
}

.editable-JSON-number {
  color: #E6DB74;
}

.editable-JSON-null {
  color: #AE81FF;
}

.editable-JSON input {
  background: rgba(128,128,128,.15);
  border: 0;
  color: inherit;
  padding: 0;
  margin: 0;
  font-size:14px;
}

.editable-JSON input::selection {
  background:#955;
}

.editable-JSON input::-moz-selection {
  background:#955;
}

.editable-JSON-field input {

}

.editable-JSON-_id-field, .editable-JSON-_id-value {
  opacity: 0.5;
  cursor: not-allowed;
}