.bw #bottom-container {
  overflow-x: auto;
  overflow-y: hidden;
}

#toprow {
  position: absolute;
  padding-left: 20px;
  top: 0px;
  width: 20000px;
  box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 30px;
  height: 50%;
}

.one-row #toprow {
  height: 90%;
}

#bottomrow {
  position: absolute;
  bottom: 0px;
  padding-left: 120px;
  padding-top: 20px;
  padding-bottom: 10px;
  width: 20000px;
  box-sizing: border-box;
  height: 50%;
}

.one-row #bottomrow {
  display: none;
}

.timebox {
  display: inline-block;
  vertical-align: top;
  position: relative;
  box-sizing: border-box;
  height: 100%;
  width: 220px;
  margin: 5px;
  border: 2px solid black;
  border-radius: 10px 10px 10px 10px;
  padding: 0px;
  overflow: hidden;
  box-sizing: border-box;
}

.timeboxtext {
  margin-left: 5px;
  margin-right: 5px;
}

.timeboxtextwrapper {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100px;
}

.timeboximage {
  display: none;
  text-align: center;
  width: 100%;
  height: 156px;
  overflow: hidden;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.hasimage .timeboximage {
  display: block;
}

.timebox .closebutton,
#plusdiv .closebutton {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.timebox .draghandle,
#plusdiv .draghandle {
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.timebox .draghandle,
#plusdiv .draghandle {
  position: absolute;
  bottom: 0px;
}

.timebox .photobutton-wrapper {
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%);
}
.photobutton-wrapper {
  display: flex;
}
.timebox .photobutton,
.timebox .photobutton-popup {
  position: relative;
}

.timebox.hasimage .photobutton,
.timebox.hasimage .photobutton-popup {
  display: none;
}

.timebox .draghandle {
  cursor: move;
}

#plusdiv {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  height: 100%;
  width: 220px;
  margin: 5px;
  padding: 10px;
  text-align: center;
  opacity: 0.4;
  box-sizing: border-box;
}

#plusdiv .timeboxtext {
  text-align: left;
}

#plusbtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

#plusbtn line {
  stroke-width: 4;
}

.timebox.drag_placeholder {
  opacity: 0.2;
}

.timeboxtitle {
  text-align: center;
  font-size: 125%;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}

.timebox .placeholderText,
#plusdiv .placeholdertext {
  color: #777;
  font-style: italic;
}

#lines {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#mainline,
#startmarker,
#endmarker {
  stroke-width: 3;
  stroke-opacity: 0.7;
  stroke: black;
}

.connector {
  stroke-width: 3;
  stroke-opacity: 0.7;
  stroke: black;
}

#timeline {
}

#toolbar {
  position: absolute;
  right: 0px;
  display: inline-block;
}

#clearbutton,
#sendbutton {
  display: inline-block;
  margin: 2px;
  margin-top: 4px;
}

.hidden:not(.almostvisible) {
  display: none;
}
.hidden.almostvisible {
  opacity: 0.01; /* Used to be able to calc size/pos in javascript, which won't work if fully hidden */
}

.timeboxtext,
.timeboxtext * {
  user-select: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.tool-container {
  box-shadow: none;
  transform: translate(-16px, 0);
}

.tool-container.tool-left .arrow {
  border-color: transparent transparent transparent transparent;
}

.tool-left .tool-item,
.tool-left .tool-item:hover {
  border: none;
}

.bw-toolbutton > .bw-icon.bw-icon-fill-drop {
  display: block;
  position: absolute;
  z-index: 0;
  left: 4px;
  top: 4px;
}

.tool-container .bw-icon {
  font-size: 32px;
  width: 32px;
  height: 32px;
}

.tool-container.tool-top {
  box-shadow: none;
  border: none;
  background: #777777;
}

.tool-container.tool-top .tool-item {
  border: none;
  color: white;
}

.tool-container.tool-top .tool-item:hover {
  background: #aaaaaa;
}

.tool-container.tool-top .arrow {
  border-top-color: #777777;
}

.tool-container a {
  text-decoration: none;
}