#container {
  height: 801px;
  overflow: visible;
  padding: 0;
  position: relative;
}

:host /deep/ .box {
  background-color: #a9a9a9;
  text-align: center;
  font-family: Asap, Avenir, Arial, sans-serif;
  width: 196px;
  height: 50px;
  line-height: 50px;
  color: black;
  position: absolute;
  top: 0;
  border: 1px solid black;
  z-index: 1000;
  list-style: none;
  display: flex;
  align-items: center;
}

:host /deep/ .fa-item {
  float: left;
  padding: 0 16px 0 10px;
  opacity: 0.8;
}

.box-image {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.item-title {
  white-space: nowrap;
  overflow: hidden;
}

:host /deep/ .ui-selected { background: #c7c7c7; }

.ruler {
  height: 50px;
}

.ruler-container {
  padding-left: 0px;
}

.channel-titles {
  padding-right: 0px;
  /*width: 97px;*/
}

.channel-title {
  height: 50px;
  border: 1px solid black;
  background-color: #2d2d2d;
  color: #e0e0e0;
  font-weight: bold;
  line-height: 50px;
  padding-left: 10px;
  cursor: pointer;
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}

.common-channel {
  text-decoration: underline;
}

.channel-color {
  width: 10px;
  height: 10px;
  display: inline-block;
}

.channel-selected {
  background: #656565;
}

.timeline {
  padding-left: 0px;
  /*max-width: 1200px;*/
  overflow-x: auto;
}

:host /deep/ .timeline-row {
  position: absolute;
  border: 1px solid #454545;
  width: 100%;
}

:host /deep/ .output-row {
  background-color: #adadad;
  border: 1px solid #454545;
  width: 100%;
}

.timeline-container {

}
