.angular-notifications-container {
  position: relative;
  display: table-cell;
  width: 100%;
}
.angular-notifications-icon.overlay {
  position: absolute;
  z-index: 1;
}
.angular-notifications-icon {
    right: -2px;
    top: -5px;
    border-radius: 50%;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    min-width: 20px;
    height: 20px;
    line-height: 1.15;
    background: #f99576;
    color: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}
.angular-notifications-icon.wide-icon {
  border-radius: 30% / 50%;
  background-clip: padding-box;
}
.angular-notifications-icon.fade {
  animation: notification-fade-in 0.5s;
}
.angular-notifications-icon.bounce {
  animation: notification-bounce 0.5s;
}
.angular-notifications-icon.grow {
  animation: notification-grow 0.5s;
}
.angular-notifications-icon.shake {
  animation: notification-shake 0.5s;
}
@keyframes notification-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes notification-bounce {
  30% {
    transform: perspective(1px) translate(0, -8px);
  }
  60% {
    transform: perspective(1px) translate(0, 0);
  }
  80% {
    transform: perspective(1px) translate(0, -5px);
  }
  to {
    transform: perspective(1px) translate(0, 0);
  }
}
@keyframes notification-grow {
  30% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}
@keyframes notification-shake {
  20% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-20deg);
  }
  60% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-10deg);
  }
  to {
    transform: rotate(0);
  }
}
