.notification-badge{

  transform-origin:center;

  position:absolute;

  top:-6px;
  right:-6px;

  width:20px;
  height:20px;

  border-radius:50%;

  background:#ff3b30;

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:14px;
  font-weight:700;

  color:white;

  box-shadow:
    0 0 12px
    rgba(0, 0, 0, 0.45);

  z-index:50;

}

.card-badge{

  position:absolute;

  top:18px;
  right:18px;

  width:22px;
  height:22px;

  border-radius:50%;

  background:#ff3b30;

  display:flex;

  align-items:center;
  justify-content:center;

  color:white;

  font-size:14px;
  font-weight:800;

  box-shadow:
    0 0 14px
    rgba(255,59,48,.45);
}

.badge-pop{

  animation:
    badgePop .45s
    cubic-bezier(
      .22,
      1.4,
      .36,
      1
    );
}