#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  
  overflow: hidden;
}

#canvas-key-partners {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 20%;
  height: 75%;
}

#canvas-key-activities {
  position: absolute;
  top: 0;
  left: 20%;
  
  width: 20%;
  height: calc(75% / 2);
}

#canvas-key-resources {
  position: absolute;
  top: calc(75% / 2);
  left: 20%;
  
  width: 20%;
  height: calc(75% / 2);
}

#canvas-value-proposition {
  position: absolute;
  top: 0;
  left: 40%;
  
  width: 20%;
  height: 75%;
}

#canvas-customer-relationships {
  position: absolute;
  top: 0;
  left: 60%;
  
  width: 20%;
  height: calc(75% / 2);
}

#canvas-channels {
  position: absolute;
  top: calc(75% / 2);
  left: 60%;
  
  width: 20%;
  height: calc(75% / 2);
}

#canvas-customer-segments {
  position: absolute;
  top: 0;
  left: 80%;
  
  width: 20%;
  height: 75%;
}

#canvas-revenue-streams {
  position: absolute;
  top: 75%;
  left: 50%;
  
  width: 50%;
  height: 25%;
}

#canvas-cost-structure {
  position: absolute;
  top: 75%;
  left: 0;
  
  width: 50%;
  height: 25%;
}

.segment {
  border: solid 1px black;
  overflow: scroll;
}

.segment-header {
  width: calc(100% - 20px);
  height: 40px;
  line-height: 40px;
  margin: 5px;
  padding: 0 5px;
  background-color: #bdc3c7;
  color: #7f8c8d;
}

.segment-details {
  display: inline-block;
  background-color: blue;
  margin: 5px;
  padding: 5px;
}

.hidden {
  display: none;
}

#input-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  heght: 200px;
  background-color: black;
}