body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  margin-top: .5rem;
  margin-bottom: 1rem;
}

.legend {
  background-color: #EEE;
  padding: .5rem;
  font-style: oblique;
  display: flex;
  align-items: center;
  margin-bottom: .5rem;
}
.legend i {
  margin-right: 1rem;
}

.elevator-container {
  position: relative;
}
.floor {
  height: 50px;
}
#floor-col {

}
.floor-col-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 50px;
  background-color: #EEE;
  border: 1px solid #DDD;
  box-sizing: border-box;
}
.elevator-col {
  position: absolute;
}
.elevator {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.door {
  background-color: #CCC;
  position: absolute;
  border: 1px solid #AAA;
  height: 100%;
}
.doorLeft {
  border-left: none;
  left: 0;
}
.doorLeft i {
  margin-left: 3px;
  margin-top: 3px;
}
.doorRight {
  border-right: none;
  right: 0;
}

/* Animations */
@keyframes closeDoor {
  from { width: 0; }
  to { width: 25px; }
}
@keyframes openDoor {
  from { width: 25px; }
  to { width: 0; }
}

.doorOpening {
  animation: openDoor;
  animation-duration: 2s;
  width: 0;
  animation-fill-mode: forwards;
}
.doorClosing {
  animation: closeDoor;
  animation-duration: 2s;
  width: 50%;
  animation-fill-mode: forwards;
}