.main_sandbox{
    display: flex;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.CodeMirror{
    height: auto; 
    border: 0px solid #ddd; 
}
.CodeMirror-scroll{ 
    max-height: 700px; 
}
.CodeMirror pre { 
    padding-left: 2px; 
    line-height: 1.25; 
}
.banner{ 
    background: #ffc; 
    padding: 6px; 
    border-bottom: 2px solid silver; 
    text-align: center 
}

.sandbox_main_center{
    width: 100%;
}
.main_sandbox #demo{
    border-right: 2px solid rgb(65,65,65);
}
.main_sandbox #result, .main_sandbox #demo{
    width: 50%;
    background: white;
    height: 400px;
}
.main_sandbox #result #iframe iframe{
    padding: 1px;
    width: 100%;
    height: 100%;
}
.main_sandbox #result #iframe{
    border-left: 2px solid rgb(65,65,65);
    height: 100%;
}
.main_sandbox .CodeMirror.cm-s-default{
    height: 368px;
}




@media (max-width: 1200px) {
    .main_sandbox #result, .main_sandbox #demo{
        width: 100%;
    }
    .main_sandbox {
        display: block;
    }
    .main_sandbox #demo{
        border: none;
    }
    .main_sandbox #result #iframe {
        border: none;
    }
}