.system-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    padding: 10px;
    font-weight: bold;
}

.status-dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: pulse 2s infinite;
}


@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    }
}

.status-up {
    background-color: #4CAF50;
    /* Green for up */
}

.status-down {
    background-color: #f44336;
    /* Red for down */
}

.status-issues {
    background-color: #ff9800;
    /* Orange for issues */
}

.text-up {
    color: #4CAF50;
    /* Text color for up */
}

.text-down {
    color: #f44336;
    /* Text color for down */
}

.text-issues {
    color: #ff9800;
    /* Text color for issues */
}