#editor {
  background: #fff;
  display: none;
  float: left;
  height: calc(100% - 70px);
  left: 0;
  margin: 0;
  overflow: auto;
  position: absolute;
  top: 28px;
  // ace.js does not provide an API to always hide the vertical scrollbar,
  // so we cover it with the sidebar here and below.
  width: calc(100vw - 38px); // make it (100vw - 50px) to show the scrollbar
  z-index: 97;
  &.active {
    display: block;
  }
  // this animation ensures the horizontal scrollbar is smoothly resized
  &.tabs-changing {
    transition: 0.5s ease-in-out;
  }
  .ace_search {
    &.right {
      right: 60px;
      // right: 448px;
      transition: 0.5s ease-in-out;
    }
    &.active {
      right: 448px;
    }
  }
  &.tabs-open {
    width: calc(100vw - 426px); //make it (100vw - 438px) to show the scrollbar
  }
}

#audio-parent,
#img-display-parent {
  display: none;
  &.active {
    display: block;
  }
}

#pd-svg-parent {
  background: #f1f1f1;
  display: none;
  font-family: monospace;
  overflow: auto;
  #pd-svg {
    background: #f1f1f1;
    svg {
      background: #f1f1f1;
    }
  }
  &.active {
    display: block;
  }
}

#editor-msg-parent {
  display: none;
  overflow: auto;
  &.active {
	margin-top: 20px;
	margin-left: 20px;
    display: block;
  }
}


#editor .editor_read_only {
	background: #fdd;
}
