.service {
    background: var(--behnke-light-black);
    border-radius: var(--behnke-basic);
    padding: var(--behnke-basic);
    margin-bottom: calc(2 * var(--behnke-basic));
    color: var(--behnke-black);
    display: flex;
    flex-direction: column;
}

.service .service-title {
    font-size: var(--behnke-big-font-size);
    color: var(--behnke-black);
    padding-bottom: calc(var(--behnke-basic));
}

.service-component {
    display: flex;
    align-items: center;
    margin-bottom: var(--behnke-basic);
}

.service-state {
    width: var(--behnke-basic);
    height: var(--behnke-basic);
    border-radius: calc(0.5 * var(--behnke-basic));
    margin-left: var(--behnke-basic);
    margin-right: var(--behnke-basic);
    color: transparent;
}

.service-ok {
    background-color: var(--behnke-green);
}

.service-partial {
    background-color: var(--behnke-orange);
}

.service-outage {
    background-color: var(--behnke-red);
}

.service-unknown {
    background-color: var(--behnke-gray);
}

.sub-service .service-component {
    margin-left: calc(2 * var(--behnke-basic));
}