div.prompt-background, div.prompt-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999
}

div.prompt-overlay {
    background-color: gray;
    opacity: .2
}

div.prompt-border {
    width: 520px;
    margin: 100px auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-radius: 2px;
    -moz-box-shadow: 2px 2px 12px rgba(128, 128, 128, .3);
    -webkit-box-shadow: 2px 2px 12px rgba(128, 128, 128, .3);
    box-shadow: 2px 2px 12px rgba(128, 128, 128, .3)
}

div.prompt-title {
    font-weight: 700
}

div.prompt-description {
    color: gray;
    margin: 30px 0 0 0;
    line-height: 1.3em
}

div.prompt-description div.preview-description {
    margin-bottom: 30px
}

div.prompt-contents {
    margin: 30px 0
}

div.prompt-buttons {
    text-align: right
}

input.prompt-field[type=file], input.prompt-field[type=text] {
    width: 100%;
    border: 1px solid #d3d3d3;
    border-radius: 2px;
    padding: 8px;
    box-sizing: border-box
}

input.prompt-cancel, input.prompt-submit {
    margin-left: 10px
}

div.prompt-contents table {
    width: 100%
}

div.prompt-contents th {
    font-weight: 400;
    text-align: left
}

div.prompt-contents td, div.prompt-contents th {
    padding: 8px 0
}

div.prompt-contents td input[type=text] {
    width: 100%
}


span.header-light {
    color: gray
}


.info {
    color: gray;
    font-style: italic
}

#auto {
    width: 100%;
    height: 100%;
    margin: -40px 0 -24px 0;
    padding: 40px 0 24px 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

#contents {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative
}

#codeEditor, #treeEditor {
    height: 100%;
    min-height: 400px;
    width: 400px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
#div_content{
    height: 80%;
    min-height: 400px;
}
#previewEditor {
    position: absolute;
    height: 100%;
    min-height: 400px;
    width: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    display: none
}

#codeEditor {
    float: left;
    padding: 15px 0 15px 15px
}

#treeEditor {
    float: left;
    padding: 15px 15px 15px 0
}

div.jsoneditor, div.jsoneditor-menu {
    border-color: #0b72b8 !important
}

div.jsoneditor-menu {
    background-color: #0b72b8 !important
}

div.jsoneditor {
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .1)
}

#splitter {
    text-align: center;
    float: left;
    height: 100%;
    padding: 15px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

#splitter #buttons {
    margin: 0 0 15px 0
}

#splitter #toTree {
    margin: 40px 0 0 0
}

#splitter #toCode {
    margin: 20px 0 0 0
}

#splitter #drag {
    font-size: 32px;
    color: #d3d3d3;
    border-radius: 3px;
    min-width: 24px;
    cursor: col-resize
}

#splitter #drag.active, #splitter #drag:hover {
    color: gray;
    background-color: #f5f5f5
}
#drag_down {
    width: 100%;
    /*font-size: 24px;*/
    color: #fefefe;
    border-radius: 3px;
    min-height: 24px;
    height: 24px;
    cursor: row-resize;
    background-color: #0b72b8;
}

#drag_down.active, #drag_down:hover {
    background-color: #55a7e3;
}
a.header {
    color: #fff;
    text-decoration: none
}

a.footer {
    color: #bfbfbf;
    text-decoration: none
}

a.footer:hover {
    color: #ee422e;
    text-decoration: underline
}

#ad {
    float: right;
    right: 15px;
    padding: 15px 0 15px 0;
    position: relative
}

#ad {
    width: 160px;
    height: 600px
}

@media (min-width: 1500px) {
    #ad {
        width: 300px;
        height: 600px
    }
}

#chromeAppInfo {
    line-height: normal;
    padding: 0 5px 20px 5px
}

div.error, div.notification {
    border-radius: 2px;
    padding: 5px;
    margin: 5px;
    box-shadow: 0 0 15px rgba(128, 128, 128, .5);
    line-height: 1.3em
}

div.error {
    color: #fff;
    background-color: #ee422e;
    border: 1px solid #ee422e;
    overflow: hidden;
    word-break: break-word
}

div.error a {
    color: #fff
}

div.error a:hover {
    color: #ffcecf
}

div.notification {
    color: #1a1a1a;
    background-color: #ffffab;
    border: 1px solid #e6d600;
    overflow: hidden;
    word-break: break-word
}

div.notification p {
    color: inherit
}

div.notification p:last-child {
    margin-bottom: 0
}

div.notification a {
    color: inherit
}

pre.error {
    margin: 0 0 10px 0;
    white-space: pre-wrap;
    font-family: droid sans mono, monospace, courier new, courier, sans-serif;
    font-size: 10pt
}

a.error {
    color: #ee422e;
    font-size: 8pt
}

#schemaDoc {
    width: 100px;
    padding: 4px 8px
}

button.flat, input.flat {
    border: 1px solid #d3d3d3;
    border-radius: 2px;
    padding: 8px;
    box-sizing: border-box
}

button.flat, input[type=button].flat, input[type=submit].flat {
    background-color: #f5f5f5;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .05)
}

button.flat:hover, input[type=button].flat:hover, input[type=submit].flat:hover {
    background-color: #fff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .05)
}

div.error button.close, div.notification button.close {
    /*margin-top: -16px;*/
    margin-right: -6px;
    font-size: 32px;
    padding: 4px 8px;
    color: inherit;
    background: 0 0;
    border: none;
    cursor: pointer
}

button.convert {
    cursor: default;
    padding: 2px
}

div.convert-left, div.convert-right {
    width: 24px;
    height: 24px;
    margin: 0
}

div.convert-right {
    background: url(/img/icons.svg) 0 -48px
}

div.convert-left {
    background: url(/img/icons.svg) -24px -48px
}

.jsoneditor .search input {
    background: 0 0
}

.jsoneditor-modal .pico-modal-header {
    background-color: #0b72b8
}

.jsoneditor-modal .jsoneditor-jmespath-label {
    color: #4d4d4d
}

.jsoneditor-modal .selectr-selected .selectr-tag, .selectr-option.active {
    background-color: #4d4d4d;
    color: #fff
}

.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc, .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
    background-color: #4d4d4d;
    border-color: #4d4d4d
}
#warning{
    margin-top: 5px;
}
#warning .alert {
    margin: 0px;
}