/* .sidebar */

.sidebar {
  position: fixed;
  background-color: #333;
  color: white;
  z-index: 100;
  padding: 8px;
  
  transition-property: top, left, right, bottom;
  transition-duration: 0.33s;
  transition-timing-function: linear;

  width: attr(data-width px);

  height: calc(100% - 36px);
  top: 36px;
  overflow: hidden;
}


.sidebar li {
  white-space: nowrap;
  text-overflow: ellipsis;
}


.sidebar li div {
  display: inline;
  margin-left: 8px;
}

.sidebar:after {
  content: width;
}

.sidebar.open {
  left: 0px;
}

.sidebar.closed {
  left: calc(attr(data-width px) * -1);
}

.sidebar input[type="checkbox"],
.sidebar input[type="radio"] {
  margin-right: 8px;
}

/* */

.sidebar header h2 {
  display: inline-block;
  margin-right: 16px;
}

.sidebar header button {
  float: right;
}

.sidebar .content {
  height: calc(100% - 100px);
  padding-right: 16px;
  overflow: scroll;
}