:root {
    --base-services-state-graph-unknown-bg: #ebebeb;
    --base-services-state-graph-unknown-outline-color: #dee2e6;
}

[data-bs-theme=dark] {
    --base-services-state-graph-unknown-bg: #32363a;
    --base-services-state-graph-unknown-outline-color: rgba(240,246,252,0.1);
}

.services-state-graph-wrapper {
    white-space: nowrap;
}

.services-state-graph {
    white-space: nowrap;
    /*    cursor: default;*/
}

.services-state-graph-counts {
    color: var(--bs-dropdown-link-color);
    text-decoration: none;
}

.services-state-graph-text {
    font-size: small;
}

.services-state-graph-count-sum,
.services-state-graph-count-idle,
.services-state-graph-count-active,
.services-state-graph-count-offline {
    margin-right: 5px;
}

.services-state-graph-unknown,
.services-state-graph-idle,
.services-state-graph-active,
.services-state-graph-offline {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 1px;
}

.services-state-graph-unknown {
    background-color: var(--base-services-state-graph-unknown-bg);
    outline: 1px solid var(--base-services-state-graph-unknown-outline-color);
    outline-offset: -1px;
}

.services-state-graph-idle {
    --bs-text-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity)) !important;
}
.services-state-graph-count-idle {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity)) !important;
}

.services-state-graph-active {
    --bs-text-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity)) !important;
}
.services-state-graph-count-active {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity)) !important;
}

.services-state-graph-offline {
    --bs-text-opacity: 1;
    background-color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity)) !important;
}
.services-state-graph-count-offline {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity)) !important;
}