body{
  font-family: sans-serif;
  font-size: 18px;
  width: 100%;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.wrap{
  height: 500px;
  width: 1200px;
  position: absolute;
}

#kitchen{
    width: 100px;
    height: 150px;
    background: #aad4f5;;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    left: 300px;
}

#bar{
  width: 10px;
  height: 300px;
  background: #c8c8c8;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 200px;
  left: 300px;
}

.table {
  width: 140px;
  height: 140px;
  background-image: url(table.png);
  background-size: 100% 100%;
  background-position: center;
  border-radius: 70px;
  transform: scaleY(0.5);
  margin-top: -30px;
  box-shadow: 1px 1px 8px grey;
  cursor: pointer;
  transition: filter 0.15s, border 0.15s;
  position: absolute;
  left: 1000px;
}
#table-1{
  top: 0px;
}
#table-2{
  top: 120px;
}
#table-3{
  top: 240px;
}
#table-4{
  top: 360px;
}

.table.empty {
  filter: drop-shadow(3px 4px 14px rgb(182, 182, 182));
  border: 4px solid #ffffff;
}

.table.waiting {
  filter: drop-shadow(3px 4px 14px #ff7b00);
  border: 4px solid #ff7b00;
}

.table.dirty {
  filter: drop-shadow(3px 4px 14px #e21d1d);
  border: 4px solid #e21d1d;
}

.table.choosing {
  filter: drop-shadow(3px 4px 14px #43aa08);
  border: 4px solid #43aa08;
}

.table:after{
  content: " ";
    position: absolute;
    left: 64px;
    width: 10px;
    z-index: -5;
    top: 144px;
    height: 58px;
    background: #32180c;
    border-radius: 5px;
}

.robot{
  background-image: url('robot-stay.png');
  width: 130px;
  height: 130px;
  position: absolute;
  background-size: 100%;
  z-index: 10;
  left: 300px;
}

.robot.run{
  background-image: url('robot.gif');
}
.robot.run.left{
  transform: scaleX(-1);
}

.control{
  align-self: flex-end;
}

#robot-1{
  top: 200px;
}

#robot-2{
  top: 350px;
}

button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.legend-item{
  font-size: 16px;
}