//@import "../../node_modules/react-colors-picker/assets/index.css";

.tangleTooltip{
  display: inline;
  position: relative;
}

.tangleTooltip:hover:after{
  background: #333;
  background: rgba(0,0,0,.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 0%;
  padding: 3px 5px;
  position: absolute;
  z-index: 98;
}
.tangleTooltip:hover:before{
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 10%;
  position: absolute;
  z-index: 99;
}

/* JSON Editor */
.jsonEditor * {
  vertical-align: top;
}

.jsonEditor > .jsonObject > .jsonChildren {
  margin-left: 0;
  border-left: 0;
  padding: 0;
}

.jsonChildren {
  margin-left: 20px;
  display: none;
  font-weight: normal;
  border-left: 1px dotted #ddd;
}
.jsonFlex .jsonChildren {
  margin-left: -20px;
}
.jsonCompound.open > .jsonChildren {
  display: block;
}

.jsonAdd {
  margin-left: 5px;
}
.jsonFlex .jsonField {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}
.jsonFieldAdder {
  margin-left: 13px;
}
.jsonFieldAdder select {
  margin-left: 5px;
}
.compoundToggle:before {
  content: '▸';
  color: #333;
  line-height: 1em;
  margin-right: 3px;
}
.open > .compoundToggle:before {
  content: '▾';
}

.jsonName {
  font-style: italic;
  position: relative;
  padding-left: 15px;
  white-space: nowrap;
  min-width:80px;
}

.jsonValue {
  position:relative;
  padding-left: 15px;
  flex-grow: 1;
}

.jsonValue > input,
.jsonValue > textarea,
.jsonValue > select {
  margin-bottom: 5px;
}

.jsonFlex input[type=text],
.jsonFlex input[type=number],
.jsonFlex input[type=password],
.jsonFlex textarea {
  width: 100%;
}

.jsonRemove, .jsonFixed {
  visibility: hidden;
  margin-right: 5px;
  text-decoration: none;
  width: .6em;
  display: inline-block;
  position: absolute;
  left: 0;
}

.jsonName:hover > .jsonRemove {
  visibility: visible;
}

.jsonReset{
  visibility: hidden;
  padding-left: 0px;
  text-decoration: none;
  width: .6em;
  display: inline-block;
  position: absolute;
  left: 0;
}
.jsonValue:hover > .jsonReset {
  visibility: visible;
}


//pre {
//  background: #eee;
//  border: 1px solid #ddd;
//  padding: 5px;
//  //float: left;
//  width: 180px;
//  margin: 0 10px 0 0;
//}

.compoundToggle, .jsonString{
  cursor: pointer;
}

.booleanField * {
  vertical-align: middle;
}

.booleanField input {
  margin-bottom: 0;
}

.jsonError > .jsonName,
.jsonError .jsonErrorMsg {
  color: #f36;
}

.jsonError .jsonErrorMsg {
  margin: 0 0 10px 10px;
  font-size: 0.9em;
  vertical-align: bottom;
  display: block;
}

.jsonError > .jsonValue > input,
.jsonError > .jsonValue > select,
.jsonError > .jsonValue > textarea {
  background-color: #fff8f8;
}

.jsonNovalue {
  color: #999;
  font-style: italic;
}

.jsonGroup {
  margin-bottom: 10px;
}

.bindingEditor .jsonEditor{
  display: inline-block;
}