.uixPanel { display: none; position: relative; height:100%; width: 100%; padding: 0; margin: 0; }

.uixPanel #rawcodeMultiType { width: 100%; margin-left: 10px; height: 90px; overflow: auto; background-color: #eee; font-size: 12px; font-family: monospace; }
.uixPanel #beautifierxHead { position:relative; display:block; width: 100%; height: 100px; }
.uixPanel #beautifierxHead button { position: relative; display:block; width: 100%; height: 30px; }
.uixPanel #beautifierxHead button.beautify { margin-top: 30px; }

.uixPanel #beautifierxCoding { position:relative; display:block; width: 100%; height: calc(100% - 100px); }
.uixPanel #beautifierxCoding[data-cols="1"] .boxCodeBeautified { width: 100%; }
.uixPanel #beautifierxCoding[data-cols="2"] .boxCodeBeautified { width: calc(50% - 7px); }
.uixPanel #beautifierxCoding[data-cols="3"] .boxCodeBeautified { width: calc(33% - 8px); }
.uixPanel #beautifierxCoding[data-cols="3"] .boxCodeBeautified:last-child { width: 33%; }
.uixPanel #beautifierxCoding[data-cols="4"] .boxCodeBeautified { width: calc(25% - 10px); }

.uixPanel #beautifierxCoding.boxCodeBeautified:last-child { float: right; }

.uixPanel #beautifierxCoding .boxCodeBeautified { position:relative; display:inline-block; height: 100%; padding-right: 10px; }
.uixPanel #beautifierxCoding .boxCodeBeautified:last-child { padding-right: 0 !important; }
.uixPanel #beautifierxCoding .boxCodeBeautified .textCodeBeautified { position:relative; display:block; width: 100%; height: 100%; background-color: #eee; font-size: 12px; font-family: monospace; white-space: nowrap; }