.RD     { background-color: #9ACD32; }
.WR     { background-color: #FF6347; }
.OK     { color: #9ACD32; }
.ERR    { color: #FF6347; }

.java { grid-template-columns: repeat(1, 1fr); }
.editor{ position: relative; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; }
.diagram { position: relative; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; }
#preview { height: 100%; }
.code { height: calc(70vh - 90px); }
.cons { height: calc(30vh); }
.btns { position: relative; height: 35px; background-color: var(--lylclr); }
.btn { padding: 5px; margin: 5px; font-size: 12px; color: var(--wbkclr); background-color: var(--lblclr); float: right; cursor: pointer; height: 15px; font-family: 'Mononoki'; }

@media (min-width: 900px) {
  .java { grid-template-columns: repeat(2, 1fr); }
  .editors { width:50% !important; height:100% !important; }
  .diagram { overflow: auto; height: calc(100% - 55px); position: absolute; top: 30px; left: 50%; width: 50%; }
  .code { font-size: 14px !important; }
}

button { width: 100%; }
.btn-group { width: 100%; }
.padleft { padding-left: 15px; width: calc(100% - 15px); }

.ace_gutter-cell.ace_breakpoint{ 
  border-radius: 20px 0px 0px 20px; 
  box-shadow: 0px 0px 1px 1px red inset; 
}
.fas {
  font-size: 24px;
}
.error-text { display: none }

#cy { position: relative; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; height: calc(50vh); width: 100%; }

.popper-div { /* just an example */
  border: 1px solid red;
  background: #fff;
  z-index: 9999;
  padding: 0.25em;
  pointer-events: none;
}