.app-cover {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    background-color: #ffe6e6;
    border-radius: 50%;
    box-shadow: 0 0 0 2.04px #feeeed;
    overflow: hidden;
    display: none;
}

.andar-elevador:hover .app-cover {

  display: block;
}

.app-cover .checkbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 3;
}

.bin-icon {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 10.7px;
  height: 14.8px;
  margin: -7.4px auto 0 auto;
  border-radius: 50%;
  z-index: 2;
}

.lid {
  position: relative;
  width: 12.6px;
  height: 1.01px;
  left: -1.01px;
  border-radius: 1.01px;
  background-color: #f44336;
  transition: 0.2s ease background-color;
}

.lid::before {
  content: "";
  position: absolute;
  top: -1.01px;
  left: 0;
  right: 0;
  width: 2.5px;
  height: 1.5px;
  margin: 0 auto;
  border-radius: 2.5px 2.5px 0 0;
  background-color: #f44336;
  transition: 0.2s ease background-color;
}

.box {
  position: relative;
  height: 14.2px;
  margin-top: 0.5px;
  border-radius: 0 0 2px 2px;
  background-color: #f44336;
  transition: 0.2s ease background-color;
}

.box-inner {
  position: relative;
  top: 1.12px;
  width: 8.7px;
  height: 11.4px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0 0 1.3px 1.3px;
  transition: 0.2s ease background-color;
}

.bin-lines {
  position: relative;
  top: 1.77px;
  margin: 0 auto;
  width: 0.75px;
  height: 7.65px;
  border-radius: 1.01px;
  background-color: #f44336;
  transition: 0.2s ease background-color;
}

.bin-lines::before,
.bin-lines::after {
  content: "";
  position: absolute;
  width: 0.75px;
  height: 7.65px;
  border-radius: 1.01px;
  background-color: #f44336;
  transition: 0.2s ease background-color;
}

.bin-lines::before {
  left: -2.5px;
}

.bin-lines::after {
  left: 2.5px;
}

.layer {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 0;
  height: 0;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.25s ease all;
  z-index: 1;
}

/* Estados ativados */
.app-cover .checkbox:checked ~ .bin-icon .lid,
.app-cover .checkbox:checked ~ .bin-icon .lid::before,
.app-cover .checkbox:checked ~ .bin-icon .box,
.app-cover .checkbox:checked ~ .bin-icon .box-inner {
  background-color: #fff;
}

.app-cover .checkbox:checked ~ .bin-icon .bin-lines,
.app-cover .checkbox:checked ~ .bin-icon .bin-lines::before,
.app-cover .checkbox:checked ~ .bin-icon .bin-lines::after {
  background-color: #03a9f4;
}

.app-cover .checkbox:checked + .bin-icon .box {
  animation: shake 0.2s ease 0.1s;
}

.app-cover .checkbox:checked + .bin-icon .lid {
  animation: lift-up 0.8s ease 0.1s, shake_u 0.8s ease 0.1s, shake_l 0.2s ease 0.8s;
}

.app-cover .checkbox:checked ~ .layer {
  width: 58px;
  height: 58px;
}

/* Animações */

@keyframes shake {
  0% { transform: rotateZ(3deg); }
  25% { transform: rotateZ(0); }
  75% { transform: rotateZ(-3deg); }
  100% { transform: rotateZ(0); }
}

@keyframes lift-up {
  0% { top: 0; }
  50% { top: -8.75px; }
  100% { top: 0; }
}

@keyframes shake_u {
  0% { transform: rotateZ(0); }
  25% { transform: rotateZ(-15deg); }
  50% { transform: rotateZ(0); }
  75% { transform: rotateZ(15deg); }
  100% { transform: rotateZ(0); }
}

@keyframes shake_l {
  0% { transform: rotateZ(0); }
  80% { transform: rotateZ(3deg); }
  90% { transform: rotateZ(-3deg); }
  100% { transform: rotateZ(0); }
}