mainView {

margin: 30px auto;
width: 700px;

} jsonTextarea {

width: 700px;
height: 300px;

} .red {

color: red;

}

/* JSON VIEW */

/* striped background */ .jsonView {

background-color: #f3f6fa;
background-image: linear-gradient(rgba(255, 255, 255, 1) 50%, transparent 50%, transparent);
background-size: 60px 60px;
padding: 30px 0 0 5px;
background-attachment: local;

} /* inputs */ .jsonView select.form-control {

margin: 0;
padding: 0;

} .jsonView select.form-control, .jsonView input.form-control {

width: 100px;
display: inline;
height: 29px;
padding-left: 5px;

} .jsonView input {

margin: 0;
border: 0;
background: none;

} .jsonView input.keyinput {

font-weight: bold;

} .jsonView input {

height: 30px;
margin: 0;
padding: 0;

} .jsonView input.addItemKeyInput, .jsonView input.addItemValueInput {

border: 1px solid #ccc;
background: white;
margin-left: 0;

} .jsonView .addItemKeyInput {

font-weight: bold;

}

/* chevrons */ .jsonView .glyphicon-chevron-right, .jsonView .glyphicon-chevron-down {

float: left;
cursor: pointer;
position: relative;
top: 7px;
right: 22px;
margin-right: -15px;

} .jsonView > json > .glyphicon-chevron-down {

display: none;

} /* add and delete */ .jsonView .addObjectItemBtn {

background-color: transparent;
border-color: transparent;
padding: 0;
border: 0;
height: 30px;
display: block;

} .jsonView .addObjectItemBtn i {

display: block;

} .jsonView .deleteKeyBtn, .jsonView .moveArrayItemBtn {

float: right;
margin-right: 10px;
position: relative;
top: 7px;
z-index: 99999999999999;
cursor: pointer;

}

/* basic layout */ .jsonView .jsonObjectKey {

font-weight: bold;

} .jsonContents {

margin-left: 25px;

} .jsonView .block {

display: block;

} .jsonView .jsonItemDesc {

font-family: Georgia, serif;
color: grey;
font-style: italic;
cursor: default;
line-height: 30px

} .jsonView .objectDesc {

cursor: default;

} /* first brace */ .jsonView > json > .jsonItemDesc {

display: block;
float: left;
position: relative;
bottom: 25px;
height: 0;
width: 0;

}

/* array numbering */ .jsonView ol.arrayOl {

margin: 0;
padding-left: 25px;

} .jsonView ol.arrayOl > li > span > span > json > .glyphicon-chevron-down, .jsonView ol.arrayOl > li > span > span > json > .glyphicon-chevron-right {

left: -40px;

} .jsonView ol.arrayOl li {

color: grey;
font-style: italic;
font-family: Georgia, serif;
list-style-type: decimal;

} .jsonView ol.arrayOl li input, .jsonView li select, .jsonView li button {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;

} .jsonView ol.arrayOl li *:not(.btn):not(.jsonItemDesc) {

color: black;

}

.jsonView li li {

list-style-type: lower-roman;

} .jsonView li li li {

list-style-type: upper-roman;

} .jsonView li li li li {

list-style-type: lower-latin;

} .jsonView li li li li li {

list-style-type: upper-latin;

} .jsonView li li li li li li {

list-style-type: lower-greek;

} .jsonView li li li li li li li {

list-style-type: decimal;

} .sortable-placeholder {

height: 20px;
display: block;

}