#left-panel {
  width: 500px;
  display: flex;
  flex-direction: row;
  position: relative;
  max-height: 100%;
  /* border: solid 10px #f00; */
}

#left-panel-content {
  /* border: solid 10px #ff0; */
  position: relative;
  width:100%;
}

.left-panel-panel {
  visibility: hidden;
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}

.left-panel-panel.active {
  visibility: visible;
}


#data-container {
  display: flex;
  flex-direction: column;
}

#editor-container {

  display: flex;
  flex-direction: column;
  background-color: #ff0;
  z-index: 200;
}

#left-panel-toolbar {
  background-color: #333333;
  width: 2rem;
  color: #aaa;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#left-panel-toolbar > * {
  margin: 0.25rem 0;
}