.playground {
    height: 100vh;
    width: 100%;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
    position: relative;
    overflow: hidden
}

.playground .boxes {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute
}

.playground .boxes .box-edit {
    height: 25%;
    min-height: 125px;
    width: 100%;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: #262831;
    position: relative;
    overflow: hidden
}

.playground .boxes .box-edit .box {
    height: 100%;
    width: 33.3333%;
    padding-left: 0em !important;
    border-right: 1px solid #1B1C22;
    border-bottom: 1px solid #31343F;
    color: #D7D8E0;
    font-size: 1em !important;
    position: relative;
    overflow: hidden
}

.playground .boxes .box-edit .box .bar {
    padding: 9px 10px;
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid #1B1C22;
    font-weight: 500;
    white-space: nowrap;
    position: relative
}

.playground .boxes .box-edit .box .code-block {
    height: 100%;
    height: calc(100% - 35px);
    width: 100%;
    margin: 0;
    background: #1B1C22;
    border: none;
    border-radius: 0;
    position: relative
}

.playground .boxes .box-edit .box .code-block textarea,.playground .boxes .box-edit .box .code-block pre {
    width: 100%;
    height: 100%;
    padding: 15px;
    margin: 0;
    background: #262831;
    border: 0;
    resize: none;
    color: #fff;
    font-family: 'Source Code Pro', monospace, sans-serif;
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0.002em;
    line-height: 1.4em;
    overflow: scroll;
    -webkit-transition: ease all 0.1s;
    transition: ease all 0.1s
}

.playground .boxes .box-edit .box .code-block textarea:focus,.playground .boxes .box-edit .box .code-block pre:focus {
    background: #31343F;
    outline: 0px solid transparent
}

.playground .boxes .box-edit .box .code-block .ace-merbivore {
    background: #262831
}

.playground .boxes .box-edit .box .code-block .ace-merbivore .ace_gutter {
    background: #262831;
    border-right: 1px solid #31343F
}

.playground .boxes .box-edit .box .code-block .ace-merbivore .ace_marker-layer .ace_active-line {
    background: #31343F !important
}

.playground .boxes .box-edit .box:last-child {
    border-right: 0px solid transparent
}

.playground .boxes .box-output {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative
}

.playground .boxes .box-output .results {
    height: 100%;
    width: 100%;
    margin: 0;
    border: none;
    border-top: 1px solid #31343F;
    border-radius: 0;
    box-shadow: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: scroll;
    position: absolute;
    left: 0;
    top: 0
}

.playground .boxes .box-output .results .iframe-result {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 0
}

#handle {
    background: #000;
    float: left;
    height: 15px;
    margin: 0px;
    width: 100%;
    cursor: row-resize;
}