.character-panda {
  background-image: url("/assets/pandas-94d5883e.png");
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.character-panda.feedback {
  width: 160px;
  height: 155px;
  background-position: 0px -445px;
}

.character-panda.daily-goal {
  width: 110px;
  height: 145px;
  background-position: -1055px -10px;
}

.character-panda.wrong-answer {
  width: 105px;
  height: 140px;
  background-position: -555px -230px;
}

.character-panda.correct-answer {
  width: 155px;
  height: 150px;
  background-position: -355px -440px;
}

.character-panda.invitation {
  width: 145px;
  height: 140px;
  background-position: 0px -665px;
}

.character-panda.test-failed {
  width: 125px;
  height: 150px;
  background-position: -1360px -5px;
}

.character-panda.test-successful {
  width: 140px;
  height: 155px;
  background-position: -705px -665px;
}

.character-panda.test-running {
  width: 175px;
  height: 145px;
  background-position: -1170px -665px;
}

.character-panda.badges {
  width: 115px;
  height: 160px;
  background-position: -1055px -430px;

  position: absolute;
  z-index: 10;

  right: -25px;
}

/* About iPhone size */
@media (max-width: 767px) {
  .character-panda.badges {
    right: 0px;
  }
}

/* About iPad size */
@media (min-width: 767px) and (max-width: 991px) {
  .character-panda.badges {
    right: -35px;
  }
}

.character-panda.goal-popup {
  width: 115px;
  height: 145px;
  background-position: -1200px -445px;

  margin: auto;
  margin-top: 17px;
}

.character-goal-popup .caption {
  font-size: x-large;
  text-align: center;
}

/* Character goal popup */
@keyframes goal-popup {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }

  50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }

  70% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
  }

  80% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }

  95% {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }

  100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.character-goal-popup {
  animation: 0.8s ease-in goal-popup;
  -webkit-animation: 0.8s ease-in goal-popup;

  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  margin: auto;

  z-index: 10;

  background: lightblue;

  border-radius: 50%;

  width: 300px;
  height: 300px;

  border: dashed;
}

.goal-popup-overlay {
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  min-height: 100%;
  z-index: 9;
}