.code-right {
  position: absolute ;
  right: 0px ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
}

.editor-view,#editor-view {
  position: absolute ;
  top: 42px ;
  bottom: 0px ;
  left: 0px ;
  right: 0 ;
  transition-duration: .5s , 1s ;
  transition-property: left, opacity ;
  opacity: 1 ;
}
#editor-locked {
  position: absolute ;
  top: 60px ;
  left: 240px ;
  right: 40px ;
  padding: 20px ;
  z-index: 100 ;
  height: 20px ;
  transition-duration: .5s, 1s ;
  transition-property: left, opacity ;
  border-radius: 10px ;
  color: #FFF ;
  font-size: 16px ;
  opacity: 1 ;
  display: none ;
  pointer-events: none ;
}
#editor-locked i {
  margin-right: 5px ;
}

.code-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
}

.editor-separator {
  background: linear-gradient(hsl(200,30%,30%) 0%,hsl(200,20%,20%) 10%,hsl(200,20%,10%) 90%,hsl(200,20%,0%) 100%);  height: 20px ;
  position: absolute ;
  padding: 0px 10px;
  font-size: 12px;
  top: 400px ;
  left: 0px ;
  right: 0px ;
  cursor: ns-resize;
}
.editor-separator i {
  padding: 1px 5px ;
  font-size: 16px;
}

.runbar {
  position: absolute;
  right: 0px ;
  left: 0px ;
  top: 0px ;
  height: 40px;
  background: hsl(200,30%,30%);
  border-left: solid 2px rgba(0,0,0,.5);
  text-align: left ;
  padding-left: 20px ;
  white-space: nowrap ;
}
.runbar *,.runtime-splitbar * {
  display: inline-block ;
}
.runbar .buttons,.runtime-splitbar .buttons {
  display: inline-block ;
  margin-left: 40px ;
}
.runbar .buttons div,.runtime-splitbar .buttons div {
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
}
.runbar .buttons div:hover,.runtime-splitbar .buttons div:hover  {
  background: hsl(160,50%,60%);
}

.runbar .buttons div:active,.runtime-splitbar .buttons div:active  {
  background: hsl(160,30%,30%);
}
.runbar .buttons img {
  width: 24px ;
  height: 24px ;
  vertical-align: middle;
}

#qrcode-button {
  margin-left: 20px ;
  border-radius: 5px ;
  background: hsl(200,50%,40%) ;
  position: relative ;
  top: -2px ;
  padding: 5px ;
}

#qrcode-button:hover, #run-link:hover {
  background: hsl(200,50%,50%) ;
}

#take-picture-button {
  display: none ;
  margin-left: 20px;
  border-radius: 50px;
  background: rgba(0,0,0,.2);
  padding: 6px;
  width: 20px;
  height: 20px;
  text-align: center;
}

#take-picture-button:hover {
  background:rgba(255,255,255,.2);
}


.runbar .buttons .selected,.runtime-splitbar .buttons .selected,
.runbar .buttons div.selected:hover,.runtime-splitbar .buttons div.selected:hover
{
  background: hsl(160,20%,35%);
  cursor: default ;
}
#run-link {
  display: inline-block ;
  font-size: 14px ;
  padding: 4px 12px ;
  border-radius: 14px ;
  background: hsl(200,50%,40%);
  margin-left: 20px ;
  white-space: nowrap ;
  overflow: hidden ;
  cursor: pointer ;
  vertical-align: middle;
}
a#run-link {
  color: #FFF ;
  text-decoration: none ;
}

.runtime-container {
  position: absolute ;
  bottom: 0 ;
  top: 0 ;
  right: 0 ;
  width: 50% ;
}
.runtime {
  position: absolute ;
  top:0 ;
  left: 0 ;
  right: 0 ;
  height: 100px ;
  text-align: center;
}
.runtime-splitbar {
  background: hsl(200,30%,30%);
  border-left: solid 2px rgba(0,0,0,.5);
  position: absolute ;
  left: 0px ;
  top: 100px ;
  right: 0 ;
  height: 12px ;
  border-bottom: solid 2px #000 ;
  transition-property: height ;
  transition-duration: 0.5s ;
  cursor: ns-resize;
  z-index: 3 ;
  overflow: hidden ;
  white-space: nowrap;
  box-sizing: border-box ;
}

.runtime-splitbar span {
  margin-left: 20px ;
}

.devicecontainer {
  position: absolute ;
  top: 42px ;
  left: 2px ;
  right: 2px ;
  bottom: 2px ;
  overflow: hidden ;
  min-height: 50px ;
  min-width: 50px ;
}

#serverbar {
  display: none ;
  position: absolute ;
  bottom: 2px ;
  left: 2px ;
  right: 2px ;
  box-sizing: border-box ;
  height: 40px ;
  background: hsl(240,20%,50%) ;
  text-align: left ;
  padding: 7px 20px ;
  white-space: nowrap ;
  overflow: hidden ;
}

#serverbar i {
  margin-right: 10px ;
}

#serverbar i.status {
  margin: 0 10px 0 20px ;
  background: hsl(0,50%,40%) ;
  border-radius: 40px ;
  border: solid 2px rgba(0,0,0,.5) ;
  width: 14px ;
  height: 14px ;
  display: inline-block ;
  position: relative ;
  top: 3px ;
}

#serverbar i.status.running {
  background: hsl(160,100%,60%) ;
}

#serverbar .button {
  border-radius: 5px ;
  background: hsl(240,20%,30%) ;
  color: #FFF ;
  padding: 3px 10px ;
  display: inline-block ;
  cursor: pointer ;
  margin-left: 20px ;
}

.server-open .devicecontainer {
  bottom: 44px ;
}

.server-open #serverbar {
  display: block ;
}

#device {
  position: absolute ;
  top: 0px ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  background: #000 ;
}
#device iframe {
  border: none ;
}
#device iframe {
  width: 960px;
  height: 540px;
}
#ruler {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  pointer-events: none ;
  text-align: center;
}
#ruler canvas {
  display: inline-block ;
}
.help-window {
  position: absolute;
  right: 20px ;
  bottom: 5px ;
  color: hsl(20,20%,20%);
  z-index: 4 ;
  margin-left: 5px ;
  cursor: pointer ;
  width: 40px ;
  height: 40px ;
}
#help-window-content {
  position: absolute ;
  bottom: 0px ;
  background: hsl(30,100%,90%);
  border-radius: 20px ;
  padding: 10px ;
  overflow: hidden ;
  min-height: 20px ;
  min-width: 20px ;
  width: 20px ;
}

#help-window-content.displaycontent {
  width: 450px ;
  left: 75px ;
  bottom:40px ;
}

#help-window-content.displaycontent.vertical {
  width: 450px ;
  right: 0 ;
  top:50px ;
  left: unset ;
  bottom: unset ;
}

.help-window.disabled #help-window-content {
  background: hsl(20,0%,60%);
  bottom: 0px ;
  left: 0px ;
  width: 20px ;
}
#help-window-content .content {
  display: none ;
}
#help-window-content.displaycontent .content {
  display: block ;
}
.help-window.disabled #help-window-content .content {
  display: none ;
}

.help-window i {
  margin: 0 ;
}

.help-window .left-side {
  position: absolute ;
  left: 0 ;
  top: 0 ;
  bottom: 0 ;
  width: 20px ;
  padding: 10px ;
  background: rgba(0,0,0,.1);
  text-align: center ;
}

.help-window .content {
  margin-left: 40px;
}

.help-window p {
  margin: 0 ;
}

.help-window h1, .help-window h2, .help-window h3, .help-window h4, .help-window h5, .help-window h6 {
  font-size: 18px ;
  padding: 0 ;
  margin: 0 0 5px 0 ;
}

.help-window .see-doc-button {
  border-radius: 3px ;
  background: hsl(0,50%,40%);
  font-size: 12px ;
  color: #FFF ;
  padding: 4px 8px ;
  float: right ;
  margin-left: 10px ;
}

.help-window .see-doc-button i {
  margin-right: 4px ;
}

#source-asset-bar .language {
  border-radius: 10px ;
  background-color: rgba(0,0,0,.3) ;
  color: rgba(255,255,255,.7);
  font-size: 11px ;
  padding: 3px 8px ;
  margin-left: 10px ;
  font-family: "Ubuntu Mono";
  position: relative ;
  top: -2px;
}
#source-asset-bar .language.python {
  background-color: hsl(160,40%,40%) ;
}
#source-asset-bar .language.lua {
  background-color: hsl(20,40%,40%) ;
}
#source-asset-bar .language.javascript {
  background-color: hsl(300,40%,40%) ;
}
#source-asset-bar .language.microscript {
  background-color: hsl(200,40%,40%) ;
}

.code-tools {
  display: inline-block ;
}

.code-tools .buttons {
  display: inline-block ;
}
.code-tools .buttons div {
  display: inline-block ;
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
  vertical-align: middle ;
  height: 20px ;
}
.code-tools .buttons div:hover {
  background: hsl(160,50%,60%);
}

.code-tools .buttons div:active  {
  background: hsl(160,30%,30%);
}
#code-font-plus {
  padding: 8px 11px ;
  height: 24px ;
  font-size: 19px ;
}
#code-font-minus {
  padding: 12px 14px ;
  height: 16px ;
  font-size: 12px ;
}

.value-tool-button {
  position: relative ;
  display: inline-block ;
  background: hsl(200,50%,50%);
  color: #FFF ;
  border-radius: 5px ;
  padding: 6px ;
  font-size: 13px ;
  z-index: 4 ;
  cursor: pointer ;
  width: 80px ;
  display: none ;
  margin-left: 20px ;
}

.value-tool-button span {
  background: #FFF ;
  border-radius: 3px ;
  padding: 2px 4px ;
  font-size: 11px ;
  color: hsl(200,50%,20%);
}

.value-tool-button i {
  position: absolute;
  right: 15px;
  top: 5px;
  font-size: 20px ;
}

.value-tool-button .slider-track {
  background: rgba(255,255,255,.5) ;
  border-radius: 2px ;
  width: 30px ;
  height: 3px ;
  position: absolute ;
  right: 10px ;
  top: 15px ;
}

.value-tool-button .slider-cursor {
  background: #FFF ;
  border-radius: 9px ;
  width: 9px ;
  height: 9px ;
  position: absolute ;
  right: 23px ;
  top: 12px ;
  box-shadow: 0 0 5px hsl(200,50%,20%);
}

#color-value-tool-button {
  display: none ;
}
#sourcelist {
  bottom: 34px ;
}
#manage-libs-button {
  position: absolute ;
  bottom: 3px ;
  left: 2px ;
  right: 2px ;
  border-radius: 5px ;
  color: rgba(255,255,255,.75) ;
  padding: 5px 10px ;
  text-align: left ;
  cursor: pointer ;
  font-size: 14px ;
  white-space: nowrap ;
  overflow: hidden ;
}
#manage-libs-button:hover {
  background: hsl(200,30%,30%);
}
#manage-libs-button.selected {
  background: hsl(200,30%,30%);
}
#manage-libs-button i {
  margin-right: 10px ;
}
.source-list-panel {
  position: absolute ;
  top: 40px ;
  bottom: 0 ;
  left: 0 ;
  width: 40px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
}
.source-list-header {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
  height: 40px ;
  cursor: pointer ;
  white-space: nowrap ;
}
.source-list-header div {
  position: absolute ;
  right: 180px ;
  transform: translateX(100%);
  padding: 10px ;
}
.source-list-header i {
  position: absolute ;
  top: 0 ;
  right: 0 ;
  bottom: 0 ;
  width: 18px;
  padding: 11px 11px;
  font-size: 18px;
  color: rgba(255,255,255,.9);
}

.source-list {
  position: absolute ;
  top: 40px ;
  bottom : 40px ;
  left: 0 ;
  right: 0 ;
  font-size: 14px ;
  overflow-y: auto ;
  overflow-x: hidden ;
}
.source-list i {
  padding: 10px 5px ;
  font-size: 15px ;
}
.create-source-button {
  position: absolute ;
  bottom: 0px ;
  height: 20px;
  left: 0 ;
  right: 0 ;
  padding: 10px 12px ;
  background: hsl(160,50%,40%);
  font-size: 18px ;
  cursor: pointer ;
  color: #FFF ;
  z-index: 1 ;
  box-shadow: 0 -10px 20px #000;
  text-align: center ;
  white-space: nowrap ;
}
.create-source-button i {
  margin-right: 10px ;
}

.source-list-item {
  white-space: nowrap ;
  margin: 1px 0px ;
  background: rgba(0,0,0,.25);
  cursor: pointer ;
  position: relative ;
}
.source-list-item.selected {
  background: hsl(200,30%,30%);
}
.source-list-item i {
  padding: 10px 6px 10px 14px ;
  font-size: 18px ;
  white-space: nowrap ;
}
.source-list-item .filename {
  display: inline-block;
  margin: 10px 0 ;
  padding: 2px 8px ;
  /*background: rgba(255,255,255,.1);*/
  border-radius: 3px ;
  max-width: 150px ;
}
.source-list-item input {
  border: none ;
  border-radius: 3px ;
  font-size: 14px ;
  width: 100px ;
  padding: 3px 5px ;
  background: rgba(0,0,0,.5);
  color: rgba(255,255,255,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
}
.source-list-item .active-user {
  display: none ;
  position: absolute ;
  bottom: 4px ;
  left: 4px ;
  font-size: 8px ;
  color: #FFF ;
  background: hsl(0,50%,50%);
  padding: 4px ;
  border-radius: 8px ;
}

.source-list-item input:focus {
  outline: none ;
}
.source-tools {
  text-align: right ;
  position: absolute ;
  left: 150px ;
}
.source-tools i {
  border-radius: 3px ;
  padding: 5px 4px;
  margin: 7px 2px;
  background: hsl(160,50%,40%);
  display: inline-block ;
  font-size: 14px ;
  cursor: pointer ;
}
.source-tools i.fa-trash {
  background: hsl(0,50%,40%);
}

.value-tool {
  padding: 10px ;
  background: hsl(200,20%,15%) ;
  border:solid 1px rgba(255,255,255,.2);
  box-shadow: 0 0 5px #000 ;
  border-radius: 5px ;
  position: fixed ;
}
.value-tool input[type="range"] {
  width: 300px ;
}
.value-tool .colortext {
  width: unset ;
}
.value-tool canvas {
  /*background: linear-gradient(to right,#444,rgba(0,0,0,0));*/
}

#run-window .content {
  text-align: center ;
}

#run-window .titlebar.runbar {
  padding: 2px 0 2px 20px ;
  height: 36px ;
  border: none ;
  background: none ;
  overflow: hidden ;
}

.runtime-container.vertical-split .runbar {
  border-top: solid 2px rgba(0,0,0,.5) ;
}

.runtime-terminal.horizontal-split #terminal-toolbar {
  border-left: solid 2px rgba(0,0,0,.5) ;
}

#run-window {
  background: hsl(200,30%,30%);
}

#run-window .minify {
  top:7px ;
  right: 8px ;
}

.ace-tomorrow-night-bright .ace_marker-layer .ace_active-line {
    background: #182828;
}
.ace-tomorrow-night-bright .ace_marker-layer .ace_selection {
    background: #584848;
}

.show-picture {
  background: white ;
  border-radius: 5px ;
  padding: 10px ;
  text-align: center ;
}

.show-picture div {
  display: inline-block ;
  margin: 10px 0 0 0 ;
  background: hsl(200,50%,40%);
  color: white ;
  border-radius: 5px ;
  padding: 5px 10px ;
  cursor: pointer ;
}
.show-picture div.save {
  background: hsl(160,50%,40%);
}

.show-picture div.close {
  background: hsl(0,50%,40%);
}


#runtime-left {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  bottom: 0 ;
}

.code-toolbar,#code-toolbar {
  position: absolute ;
  top: 0px ;
  left: 0px ;
  right: 0px ;
  height: 40px ;
  padding: 0px 20px ;
  padding-left: 0px ;
  transition-property: padding-left ;
  transition-duration: .5s ;
  background: hsl(200,30%,30%);
  overflow: hidden ;
}
#code-toolbar i {
  margin-right: 5px ;
}
.code-toolbar .delete {
  padding: 4px 8px ;
  border-radius: 4px ;
  background: hsl(0,50%,50%);
  cursor: pointer ;
}
.code-toolbar #delete-source i {
  margin: 0 ;
}

.lib-manager-container {
  position: absolute ;
  top: 42px ;
  left: 2px ;
  right: 2px ;
  bottom: 2px ;
  background: hsl(200,20%,20%) ;
  z-index: 4 ;
  padding: 40px ;
  overflow: auto ;
  display: none ;
}

.lib-box .docbutton {
  background: rgba(0,0,0,.5) ;
  padding: 5px 10px ;
  border-radius: 5px ;
  display: inline-block ;
  margin-right: 10px ;
  margin-top: 5px ;
  font-size: 14px ;
}
.lib-box .docbutton i {
  margin-right: 5px ;
}
.lib-box > div > a.docbutton {
  color: rgba(255,255,255,.8) ;
}

#runtime-server-view {
  position: absolute ;
  left: 0 ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

#runtime-server-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 100px ;
  top: 0px ;
  bottom: 0 ;
  width: 12px ;
  cursor: ew-resize;
  z-index: 3 ;
  box-sizing: border-box ;
  border-right: solid 2px #000 ;
}

#runtime-console-view {
  position: absolute ;
  right: 0 ;
  top: 0 ;
  bottom: 0 ;
}