.ripple-green {
            margin: auto;
            border-radius: 50%;
            background-color:rgba(45, 176, 43, 0.2);
            animation: ripple-green 1s linear infinite;
        }

            .ripple-green::before,
            .ripple-green::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 50%;
                animation: inherit;
                animation-delay: 0.5s;
            }

            .ripple-green::after {
                animation-delay: 4s;
            }
            

        @keyframes ripple-green {
            0% {
                box-shadow: 0 0 0 .2rem rgba(45, 176, 43, 0.2);
            }

            100% {
                box-shadow: 0 0 0 2rem rgba(45, 176, 43, 0);
            }
        }

        /********************/


           .ripple-red {
            margin: auto;
            border-radius: 50%;
            background-color:rgba(201, 4, 4, 0.2);
            animation: ripple-red 1s linear infinite;
        }

            .ripple-red::before,
            .ripple-red::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 50%;
                animation: inherit;
                animation-delay: 0.5s;
            }

            .ripple-red::after {
                animation-delay: 4s;
            }
            

        @keyframes ripple-red {
            0% {
                box-shadow: 0 0 0 .2rem rgba(201, 4, 4, 0.2);
            }

            100% {
                box-shadow: 0 0 0 2rem rgba(201, 4, 4, 0);
            }
        }