.connection-status .badge {
    font-size: 11px;
    padding: 2px 10px;
    display: inline;
}

.pulse,
.pulse-danger {
    display: block;
    position: absolute;
    top: 10px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.pulse {
    background: #22c03c;
}

.pulse:before {
    content: "";
    top: -4px;
    right: -4px;
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
    background: rgba(34, 192, 60, 0.6);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(34, 192, 60, 0.9);
    animation: pulse 1s linear infinite;
}

.pulse-danger {
    background: #ee335e;
}

.pulse-danger:before {
    content: "";
    top: -4px;
    right: -4px;
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
    background: rgba(238, 51, 94, 0.8);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(238, 51, 94, 0.9);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    8% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    15% {
        -webkit-transform: scale(0.1);
        opacity: 1;
    }
    30% {
        -webkit-transform: scale(0.5);
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
}

.connectors-dropdown .nav-link {
    cursor: pointer;
}

.connectors-dropdown .dropdown-menu {
    min-width: 280px;
}

.connection-status-dropdown {
    display: flex;
    flex-wrap: wrap;
}

.connector-grid-item {
    width: 50%;
}

.connector-grid-item .connection-status {
    padding: 4px 8px;
}

#connector-status-inline .pulse,
#connector-status-inline .pulse-danger {
    top: 7px;
    right: -6px;
}

.connector-grid-item .badge {
    white-space: nowrap;
}

.nav-link.active,
.nav-link:focus {
    color: var(--primary-bg-color) !important;
    border-bottom: 3px solid var(--primary-bg-color) !important;
}

.nav-link:hover {
    color: var(--primary-bg-color) !important;
}

.nav-link {
    background-color: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
}