.effect-bell {
    animation: ring 0.5s;
}

.shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    animation-iteration-count: 1; /* Executar apenas 1 vez */
}

@keyframes ring {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.dot-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: Arial, sans-serif;
}

.dot-wrapper {
    position: relative;
    width: 16px;
    height: 16px;
}

.dot-green {
    width: 16px;
    height: 16px;
    background: #00c853;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
}

.dot-red {
    width: 16px;
    height: 16px;
    background: #c81700;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
}

.dot-gray {
    width: 16px;
    height: 16px;
    background: #616161;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
}

.ripple-green {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #00c853;
    animation: ripple 1.5s infinite ease-out;
}

.ripple-red {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #c81700;
    animation: ripple 1.5s infinite ease-out;
}

.ripple-gray {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #616161;
    animation: ripple 1.5s infinite ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}