/* Keyframe ping */
@keyframes ping {
   75%, 100% {
      transform: scale(2);
      opacity: 0;
   }
}

/* Classe de container para o efeito */
.fa-stack-ping {
   position: relative;
   display: inline-block;
   width: 1em;
   height: 1em;
   line-height: 1em;
   vertical-align: text-top;
}

/* Efeito de ping */
 .fa-animate-ping {
    animation: ping 1s cubic-bezier(0,0,.2,1) infinite;
}

/* Caso precise virar somente 45º */
.fa-rotate-45 {
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

/* posição em relação ao container */
.fa-stack-right-bottom,
.fa-stack-rb{
   height: 16px;
   width: 16px;
   right: -2px;
   bottom: -2px;
   position: absolute;
   z-index: 1;
   border: 2px solid white;
   border-radius: 100%;
}

.fa-stack-right-top,
.fa-stack-rt {
   height: 16px;
   width: 16px;
   right: -2px;
   top: 2px;
   position: absolute;
   z-index: 1;
   border: 2px solid white;
   border-radius: 100%;
}

/* cores */
.text-red {
   color: #f4001e;
}
.text-success {
   color: rgb(0 210 122);
}