:root {
    --pulseSize: 8px;
    --blue: rgba(95,139,250,.65);
    --red: rgba(255, 0, 0, 0.65);
    --transparentRed: rgba(255, 0, 0, 0);
    --transparentBlue: rgba(95,139,250,0);
}


.circle-red {
    border: 6px solid red;
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.circle-green {
    border: 6px solid #1e911a;
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.fa-slow-spin {
  -webkit-animation: fa-spin 3s infinite linear;
  animation: fa-spin 3s infinite linear;
}

.fa-slower-spin {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

.pulse--blue {
  width: var(--pulseSize);
  height: var(--pulseSize);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 var(--blue);
  animation: pulsing-blue 2s infinite;
  transition: all 0.2s;
  cursor: pointer;
}

.pulse--red {
  width: var(--pulseSize);
  height: var(--pulseSize);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 var(--red);
  animation: pulsing-red 2s infinite;
  transition: all 0.2s;
  cursor: pointer;
}

.pulse--blue:active {
  transform: scale(1.2);
}

.pulse--blue:active {
  transform: scale(1.2);
}

@keyframes pulsing-blue {
  from {
    box-shadow: 0 0 0 0 var(--blue);
  }
  70% {
    box-shadow: 0 0 0 var(--pulseSize) var(--transparentBlue);
  }
  to {
    box-shadow: 0 0 0 0 var(--transparentBlue);
  }
}


@keyframes pulsing-red {
  from {
    box-shadow: 0 0 0 0 var(--red);
  }
  70% {
    box-shadow: 0 0 0 var(--pulseSize) var(--transparentRed);
  }
  to {
    box-shadow: 0 0 0 0 var(--transparentBlue);
  }
}