#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[type="text"] {
    margin: 0;
    border: 0;
    background: none;
}
.jsonView input[type="checkbox"] {
    position: absolute;
}
.jsonView input.keyinput {
    font-weight: bold;
}
.jsonView input {
    height: 30px;
    margin: 0;
    padding: 0;
}
.jsonView input[type="text"].addItemKeyInput, .jsonView input[type="text"].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;
    min-height: 30px;
}
.jsonView ol.arrayOl li.arrayItem > span > span > .glyphicon-chevron-right, .jsonView ol.arrayOl li.arrayItem > span > span > .glyphicon-chevron-down {
    right: 30px;
}
.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;
}