body {
    background-color: #f8f9fa;
}

.card-ramal {
    transition: transform 0.2s;
    border: none;
}

.card-ramal:hover {
    transform: translateY(-5px);
}

.offline-blink {
    animation: blinker 2s linear infinite;
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5;
}

@keyframes blinker {
    50% {
        opacity: 0.7;
        border-color: transparent;
    }
}

#logViewer {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    background-color: #1e1e1e;
    color: #d4d4d4;
    max-height: 250px;
    overflow-y: auto;
    border-radius: 5px;
    padding: 10px;
}

.log-error {
    color: #ff6b6b;
    font-weight: bold;
}

.log-warn {
    color: #f1c40f;
}

.log-info {
    color: #2ecc71;
}

.status-dot {
    height: 10px;
    width: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.status-online {
    background-color: #28a745;
    box-shadow: 0 0 5px #28a745;
}

.status-error {
    background-color: #dc3545;
}