:root {
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

.pulse {
    box-shadow: 0 0 0 rgba(0, 123, 255, 0.4);
    animation: pulse 2s infinite;
}

.pulse-secondary {
    box-shadow: 0 0 0 var(--secondary);
    animation: pulse-secondary 2s infinite;
}

.pulse-success {
    box-shadow: 0 0 0 var(--success);
    animation: pulse-success 2s infinite;
}

.pulse-info {
    box-shadow: 0 0 0 var(--info);
    animation: pulse-info 2s infinite;
}

.pulse-warning {
    box-shadow: 0 0 0 var(--warning);
    animation: pulse-warning 2s infinite;
}

.pulse-danger {
    box-shadow: 0 0 0 var(--danger);
    animation: pulse-danger 2s infinite;
}

.pulse-light {
    box-shadow: 0 0 0 var(--light);
    animation: pulse-light 2s infinite;
}

.pulse-dark {
    box-shadow: 0 0 0 var(--dark);
    animation: pulse-dark 2s infinite;
}


@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}
@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

@-webkit-keyframes pulse-secondary {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--secondary);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(108, 117, 125, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(108, 117, 125, 0);
    }
}
@keyframes pulse-secondary {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--secondary);
        box-shadow: 0 0 0 0 var(--secondary);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(108, 117, 125, 0);
        box-shadow: 0 0 0 10px rgba(108, 117, 125, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(108, 117, 125, 0);
        box-shadow: 0 0 0 0 rgba(108, 117, 125, 0);
    }
}

@-webkit-keyframes pulse-success {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--success);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

@keyframes pulse-success {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--success);
        box-shadow: 0 0 0 0 var(--success);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

@-webkit-keyframes pulse-info {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--info);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(23, 162, 184, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(23, 162, 184, 0);
    }
}
@keyframes pulse-info {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--info);
        box-shadow: 0 0 0 0 var(--info);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(23, 162, 184, 0);
        box-shadow: 0 0 0 10px rgba(23, 162, 184, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(23, 162, 184, 0);
        box-shadow: 0 0 0 0 rgba(23, 162, 184, 0);
    }
}

@-webkit-keyframes pulse-warning {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--warning);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}
@keyframes pulse-warning {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--warning);
        box-shadow: 0 0 0 0 var(--warning);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

@-webkit-keyframes pulse-danger {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--danger);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

@keyframes pulse-danger {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--danger);
        box-shadow: 0 0 0 0 var(--danger);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

@-webkit-keyframes pulse-light {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--light);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(248, 249, 250, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(248, 249, 250, 0);
    }
}
@keyframes pulse-light {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--light);
        box-shadow: 0 0 0 0 var(--light);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(248, 249, 250, 0);
        box-shadow: 0 0 0 10px rgba(248, 249, 250, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(248, 249, 250, 0);
        box-shadow: 0 0 0 0 rgba(248, 249, 250, 0);
    }
}

@-webkit-keyframes pulse-dark {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--dark);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(52, 58, 64, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(52, 58, 64, 0);
    }
}
@keyframes pulse-dark {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--dark);
        box-shadow: 0 0 0 0 var(--dark);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(52, 58, 64, 0);
        box-shadow: 0 0 0 10px rgba(52, 58, 64, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(52, 58, 64, 0);
        box-shadow: 0 0 0 0 rgba(52, 58, 64, 0);
    }
}