html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
}

body { font-family: Roboto, arial, helvetica, sans-serif; font-size: 14px; display: flex;}

* { box-sizing: border-box; }

.purgatory { clear: both; }

ul { list-style-type: none; padding: 0; margin: 0 0 0 20px; }

[data-class="folderButton"] + ul { display: none; }

button {
   display: block;
   width: 100%;
   border: none;
   padding: 4px 5px;
   text-decoration: none;
   color: steelblue;
   text-align: left;
   background-color: white;
   cursor: pointer;
   outline: none;
}

button:hover {
   background-color: steelblue;
   color: white;
}

button.active:hover {
   color: steelblue;
}

button.active {
   background-color: gainsboro;
}

[data-class="data"] {
   color: orangered;
}

[data-class^="closeTag"] {
   padding: 4px 5px;
   color: gray;
   margin-left: -20px;
}

[data-class^="closeTag"] span {
   font-size: 10px;
}

.endTagActive {
   color: orangered;
}

#editContainer {
   /* position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: 500px; */
   border-right: solid 1px royalblue;
   overflow: auto;
   flex: 1;
   min-height: 0;
}

pre.preJSON{
   /* position: fixed;
   top: 0;
   left: 800px;
   bottom: 0;
   height: 50%; */
   width: 400px;
   overflow: auto;
   margin: 0;
   padding: 20px;
   font-size: 11px;
   border-right: solid 1px royalblue;
   min-height: 0;
}

pre.preHTML{
   /* position: fixed;
   top: 0;
   left: 1000px;
   bottom: 0;
   height: 50%;
   right: 0; */
   width: 400px;
   overflow: auto;
   margin: 0;
   padding: 20px;
   font-size: 11px;
   min-height: 0;
}

.preTEST {
    display: none;
   position: fixed;
   height: 50%;
   left: 500px;
   bottom: 0;
   right: 0;
   overflow: scroll;
   margin: 0;
   padding: 20px;
   font-size: 11px;
   border-top: solid 1px royalblue;
}