#dot {
      width: 16px;
      height: 16px;
      background-color: #1279ff;
      box-shadow: inset 0 0 0 2px #fff;
      
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: breathing 2.5s cubic-bezier(0.2, 0, 0.2, 1) infinite;
      z-index: 5;
    }

        #myLocationPin {
      width: 0;
      height: 0;
      position: relative;
      z-index: 5;
    }

    #pulse {
      width: 24px;
      height: 24px;
      background-color: #1279ff;
      border-radius: 999px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: pulse-animation 2.5s infinite;
      z-index: 5;
    }

    @keyframes pulse-animation {
      0% {
        transform: translate(-50%, -50%) scale(0);
        /* opacity: 1; */
        
      }
      20%{
        opacity: 1;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.75);
        opacity: 0;
      }
      75%, 100%{
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
      }

    }

    .inter-dot {
  width: 16px;
  height: 16px;
  background-color: white;
  border: 4px solid #1279ff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#moving-dot-dom, .moving-dot {
  position: absolute; /* positioned by JS */
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #1279ff; /* dot color */
  z-index: 9;
  pointer-events: none;
  animation: breathing 2.5s cubic-bezier(0.2, 0, 0.2, 1) infinite;
}

@keyframes breathing {
      0%, 100%{
        box-shadow: inset 0 0 0 3px #fff;
      }
      
      50%{
        box-shadow: inset 0 0 0 2px #fff;
      }
    }