#compile-button {
  color: black;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 40px;
  bottom: 20px;
  right: 40px;
  position: fixed;
  opacity: 0.8;
  padding: 5px;
  cursor: pointer;
  display: block;
  z-index: 2;
  box-shadow: 0px 2px 2px 1px #00000040;
  transition: 300ms opacity;
}

#compile-button:hover {
  opacity: 1;
  box-shadow: 0px 2px 4px 1px #00000050;
}

#description-box {
  padding: 15px;
  color: white;
  height: 100%;
  width: 100%;
  overflow: auto;
  font-size: 17px;
  background: black;
  font-family: monospace;
  line-height: 20px;
  text-rendering: optimizeLegibility;
}

#description-box h2 {
  background-color: antiquewhite;
  color: black;
  padding: 5px;
}

#description-box #todo {
  background-color: yellow;
  color: black;
  padding: 5px;
}

#description-box code {
  background-color: darkslategray;
  color: antiquewhite;
  font-size: 15px;
  font-family: monospace;
  padding: 4px;
}

#output-box {
  height: 100%;
  width: 100%;
  margin: 10px 0 0 0;
}

#output-box code {
  padding: 10px;
  background-color: black;
  height: 100%;
  width: 100%;
  color: antiquewhite;
  display: block;
  overflow: auto;
  font-family: monospace;
}

#input-box {
  margin: 10px 0 0 0;
  padding: 10px;
  height: 100%;
  width: 100%;
  display: block;
  overflow: auto;
  border: 0;
  outline: 0;
  font-size: 14px;
  font-family: monospace;
}

#setting-box {
  padding: 10px;
  height: 100%;
  width: 100%;
  display: block;
}

.monaco-editor {
  height: 100%;
  width: 100%;
}

/* Golden Layout Theme */
.lm_goldenlayout {
  background: #ee0979;
  background: linear-gradient(to right, #ff6a00, #ee0979);
}

.lm_content {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
  color: whitesmoke;
}
.lm_dragProxy .lm_content {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}
.lm_dropTargetIndicator {
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
  outline: 1px dashed #ffffff;
}
.lm_splitter {
  background: #ffffff;
  opacity: 0.001;
  transition: opacity 200ms ease;
}
.lm_splitter:hover,
.lm_splitter.lm_dragging {
  background: #ffffff;
  opacity: 0.4;
}
.lm_header {
  height: 20px;
}
.lm_header .lm_tab {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  margin-right: 2px;
  padding-bottom: 4px;
}
.lm_header .lm_tab .lm_close_tab {
  width: 11px;
  height: 11px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==);
  background-position: center center;
  background-repeat: no-repeat;
  right: 6px;
  top: 4px;
  opacity: 0.4;
}
.lm_header .lm_tab .lm_close_tab:hover {
  opacity: 1;
}
.lm_header .lm_tab.lm_active {
  border-bottom: none;
  box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.2);
  padding-bottom: 5px;
}
.lm_header .lm_tab.lm_active .lm_close_tab {
  opacity: 1;
}
.lm_dragProxy.lm_right .lm_header .lm_tab.lm_active,
.lm_stack.lm_right .lm_header .lm_tab.lm_active {
  box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.2);
}
.lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active,
.lm_stack.lm_bottom .lm_header .lm_tab.lm_active {
  box-shadow: 2px 2px 2px -2px rgba(0, 0, 0, 0.2);
}
.lm_tab:hover,
.lm_tab.lm_active {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
.lm_controls > li {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.4;
  transition: opacity 300ms ease;
}
.lm_controls > li:hover {
  opacity: 1;
}
.lm_controls .lm_popout {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=);
}
.lm_controls .lm_maximise {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
}
.lm_controls .lm_close {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=);
}
.lm_controls .lm_dock {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QQLEyI6TJPB/QAAAXdJREFUOMul08uKE2EQhuGnMj0m4gk1C3Wj4lZRUXDhSsSb0Cvwbty7de0diAvxcBEqiIgndDBRnJlMutzUQJvEJGBB0w1/1ft/VfV1mInM7OMohthAdp4JvkTEaLauMR+HcA83MCpAiyP1/TAzn0dEuwo0xTH8xBNsYROXca3OYx1FLcbYxkt8qMKDOIutiJjOFvUWgHbxqVQ01UIPx0vljwU186CI2KnZDDDMzKhWz5Wy3bVAmXkSJ/YVVU6LnUo5lZkHloIycxNXcAev8SYiphHxHc8KfguHVyka4m5t5hG+ZWZTCl7gKW7j6j+3lpm9ammir7iosx1trsek5znzebhbc6ciadnzui2dwc0y4emaz+dy9qjefy9pZkZNFTbYw0Xcxys8LsAEv8pP7UJDRsQe3hd0o0w4Ll+9i4jfmrkrkesych86ryuiywglietbnfnpqdpvicviiy5ghbgt/wH1S1E/MwfLEpsVoAke4G3nF1kYfwAzNYI/6q7lywAAAABJRU5ErkJggg==);
}
.lm_stack.lm_docked .lm_controls .lm_dock {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QQLExoPDb+5jqaaakzjrefuomvv0tengjauhwfgybq20fg6iyzgbo4gg8gibaabyaafd5akwwiatyz3swn+e/qfFsUvBsevQDzn8gmkRI8a3W4YGjQJdD0MFQ44YUQ5S/geFgF99NFhyEmOz5QtIG4a0aYJMneuSwvmiUaEhebu0Vm51s8LLKaotzY1OQjJWbvpUyJESD0li26g2goJs2feMOyCZJxVuyFp7WvTnJcg/zkPjGQks0ox9/8AAAAASUVORK5CYII=);
}
.lm_stack.lm_docked > .lm_items {
  border-color: #5555ff;
  border-image: linear-gradient(to right, #5555ff 1%, #ffffff 100%);
  box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.2);
}
.lm_popin {
  cursor: pointer;
}
.lm_popin .lm_icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.7;
}
.lm_popin:hover .lm_icon {
  opacity: 1;
}
.lm_item {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
