.sankey-diagram {
  position: relative;
}

.value-box {
  border: 1px solid #333;
  padding: 20px;
  background: rgba(255,255,255,0.6);
  width: 250px;
}

.value-box:hover {
  background: rgba(255,255,255,1);
}

.value-box h4 {
  font-size: 1.2em;
}

.value-box p {
  margin-bottom: 0;
}

.electrical-energy {
  position: absolute;
  top: 23px;
  left: 0;
}

.useful-energy {
  position: absolute;
  top: 23px;
  right: 50px;
}

.wasted-energy {
  position: absolute;
  bottom: 20px;
  right: 50px;
}

.object-box {
  background: rgba(255,255,255,0.5);
  border: 1px solid #333;
  left: 0;
  padding: 20px;
  position: absolute;
  bottom: 20px;
  width: 250px;
}

.text-entry {
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  height: 25px;
  min-width: 20px;
  padding: 0 5px;
  background: #CCC;
  line-height: 1.8em;
  height: 28px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block; /* For Firefox */
  color: #000;
}


/* Tablet */
@media(min-width: 768px){


}

/* Desktop */
@media(min-width:992px){

  .object-box {
    left: 150px;
    bottom: 160px;
    width: 400px;
  }

  .object-box h4 {
    font-size: 1.6em;
  }

  .object-box p {
    font-size: 1.4em;
  }

}

/* Large Desktop */
@media(min-width:1200px){

  .object-box {
    left: 150px;
    bottom: 120px;
    width: 400px;
  }

  .object-box h4 {
    font-size: 1.8em;
  }

  .object-box p {
    font-size: 1.6em;
  }

  .object-box .text-entry {
    height: 40px;
  }

}

/* Print */
@media print {


}