#system-status-container {
    --color-operational: #22cc44;
    --color-down: #ff3333;
    --color-degraded-performance: #ff8800;
    --color-partial-outage: #d4730d;
    --color-major-outage: #d73a49;
    --color-delayed: #ffbb00;
    --color-maintenance: #6f42c1;
    --color-issue: #e67e22;
    --color-unauthorized: #b7791f;
    --color-unknown: #bbb;
    --color-background: #f9f9fa;
    --color-text: #24292e;
    --borderss: #0003;
    --service-name: #333;
    --note-before: #22cc44;
    --status-operational: #090;
    font-family: "BB Text";
}

.theme-dark #system-status-container {
    --color-operational: #22cc44;
    --color-down: #ff3333;
    --color-degraded-performance: #ff8800;
    --color-partial-outage: #d4730d;
    --color-major-outage: #d73a49;
    --color-delayed: #ffbb00;
    --color-maintenance: #8b5cf6;
    --color-issue: #f59e0b;
    --color-unauthorized: #d69e2e;
    --color-unknown: #888;
    --color-background: #f9f9fa;
    --color-text: #24292e;
    --borderss: #fff4;
    --service-name: #ccc;
    --note-before: #22cc44;
    --status-operational: #4b0
}

.bbss-wrapper {
    --color-operational: #22cc44;
    --color-down: #ff3333;
    --color-degraded-performance: #ff8800;
    --color-partial-outage: #d4730d;
    --color-major-outage: #d73a49;
    --color-delayed: #ffbb00;
    --color-maintenance: #6f42c1;
    --color-issue: #e67e22;
    --color-unauthorized: #b7791f;
    --color-unknown: #bbb;
    --service-name: #333;
    --note-before: #22cc44;
    --status-operational: #090;
    --borderss: #0003;
    font-family: "BB Text", Sans-Serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 1.428572
}

.theme-dark .bbss-wrapper {
    --color-operational: #22cc44;
    --color-down: #ff3333;
    --color-degraded-performance: #ff8800;
    --color-partial-outage: #d4730d;
    --color-major-outage: #d73a49;
    --color-delayed: #ffbb00;
    --color-maintenance: #8b5cf6;
    --color-issue: #f59e0b;
    --color-unauthorized: #d69e2e;
    --color-unknown: #888;
    --service-name: #ccc;
    --note-before: #22cc44;
    --status-operational: #4b0;
    --borderss: #fff4
}

.bbss-title {
    margin: 0 0 16px
}

#system-status-container a:hover {
    text-decoration: underline
}

#system-status-container:active a {
    text-decoration: none
}

.theme-dark #system-status-container a,
.theme-dark #contactLink {
    color: #09f
}

.last-access-time {
    color: #333
}

.theme-dark #system-status-container .contact,
.theme-dark .last-access-time {
    color: #ccc
}

#system-status-container .contact {
    padding-top: 32px
}

.loading-container {
    padding: 120px 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.loading-section {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.loading-text-section .Loading-text {
    color: var(--global-black, #000);
    margin-top: 16px;
    font-size: 17px;
    letter-spacing: -0.022em
}

.theme-dark .Loading-text {
    color: var(--global-white, #fff)
}

.loading-section .dots {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.loading-section .dots span {
    position: absolute;
    height: 10px;
    width: 4px;
    background-color: #80b200;
    border-radius: 2px;
    transform: rotate(calc(var(--i)* -30deg - 150deg)) translateY(15px);
    animation: bbss-animate .84s linear infinite;
    animation-delay: calc(-0.07s* var(--i) + .5s)
}

.theme-dark .loading-section .dots span {
    background-color: #8BBB00
}

@keyframes bbss-animate {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.status-divider {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--borderss)
}

.status-item {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--borderss);
    padding: 6px 8px 6px 10px;
    position: relative
}

.service-name {
    color: var(--service-name);
    display: flex;
    width: 25%;
    overflow-wrap: break-word
}

.service-status {
    display: flex;
    width: 25%;
    overflow-wrap: break-word
}

.service-description {
    display: flex;
    width: 50%;
    overflow-wrap: break-word;
    color: var(--service-name)
}

.service-name::before,
.note::before,
.bbss-inline-note::before {
    content: '';
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMyMkNDNDQ7fQ0KPC9zdHlsZT4NCjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjgiIGN5PSI4IiByPSI4Ii8+DQo8L3N2Zz4NCg==');
    -webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOC4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMyMkNDNDQ7fQ0KPC9zdHlsZT4NCjxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjgiIGN5PSI4IiByPSI4Ii8+DQo8L3N2Zz4NCg==')
}

.service-name::before {
    margin-top: 2px;
    margin-right: 10px
}

.note {
    color: var(--service-name);
    align-content: center;
    display: flex;
    justify-content: flex-end;
    vertical-align: middle;
    position: relative
}

.note::before {
    margin-right: 8px;
    background-color: var(--note-before)
}

.status-operational {
    color: var(--status-operational)
}

.status-operational .service-name::before {
    background-color: var(--color-operational)
}

.status-major-outage {
    color: var(--color-major-outage)
}

.status-major-outage .service-name::before {
    background-color: var(--color-major-outage)
}

.status-partial-outage {
    color: var(--color-partial-outage)
}

.status-partial-outage .service-name::before {
    background-color: var(--color-partial-outage)
}

.status-degraded-performance {
    color: var(--color-degraded-performance)
}

.status-degraded-performance .service-name::before {
    background-color: var(--color-degraded-performance)
}

.status-delayed {
    color: var(--color-delayed)
}

.status-delayed .service-name::before {
    background-color: var(--color-delayed)
}

.status-down {
    color: var(--color-down)
}

.status-down .service-name::before {
    background-color: var(--color-down)
}

.status-maintenance {
    color: var(--color-maintenance)
}

.status-maintenance .service-name::before {
    background-color: var(--color-maintenance)
}

.status-issue {
    color: var(--color-issue)
}

.status-issue .service-name::before {
    background-color: var(--color-issue)
}

.status-unauthorized {
    color: var(--color-unauthorized)
}

.status-unauthorized .service-name::before {
    background-color: var(--color-unauthorized)
}

.status-unknown-status {
    color: var(--color-unknown)
}

.status-unknown-status .service-name::before {
    background-color: var(--color-unknown)
}

.bbss-inline-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    width: 100%
}

.bbss-inline-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--service-name)
}

.bbss-inline-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap
}

.bbss-inline-item strong {
    margin-right: 4px
}

.bbss-source-tag {
    opacity: .8
}

.bbss-inline-note {
    display: inline-flex;
    align-items: center;
    color: var(--service-name);
    white-space: nowrap
}

.bbss-inline-note::before {
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
    background-color: var(--color-operational, #22cc44)
}

.bbss-inline-note.status-operational::before {
    background-color: var(--color-operational)
}

.bbss-inline-note.status-major-outage::before {
    background-color: var(--color-major-outage)
}

.bbss-inline-note.status-partial-outage::before {
    background-color: var(--color-partial-outage)
}

.bbss-inline-note.status-degraded-performance::before {
    background-color: var(--color-degraded-performance)
}

.bbss-inline-note.status-delayed::before {
    background-color: var(--color-delayed)
}

.bbss-inline-note.status-down::before {
    background-color: var(--color-down)
}

.bbss-inline-note.status-maintenance::before {
    background-color: var(--color-maintenance)
}

.bbss-inline-note.status-issue::before {
    background-color: var(--color-issue)
}

.bbss-inline-note.status-unauthorized::before {
    background-color: var(--color-unauthorized)
}

.bbss-inline-note.status-unknown-status::before {
    background-color: var(--color-unknown)
}

.bbss-inline-note.mini::before {
    width: 16px;
    height: 16px;
    margin-top: -2px;
    margin-right: 6px
}

.bbss-inline-meta-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--service-name);
    flex: 1 1 auto
}

.bbss-inline-meta-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: auto
}

.bbss-inline-generated {
    display: block;
    margin: 4px 0
}

button.bbss-info-button {
    margin-left: auto;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-unknown) !important;
    width: 24px;
    height: 24px;
    border-radius: 50% !important;
    cursor: pointer;
    font-size: 14px;
    line-height: 1em !important
}

button.bbss-info-button:hover,
button.bbss-info-button:focus,
button.bbss-info-button:active {
    background: transparent;
    color: #1d1d1f !important
}

.theme-dark button.bbss-info-button:hover,
.theme-dark button.bbss-info-button:focus,
.theme-dark button.bbss-info-button:active {
    color: #f5f5f7 !important
}

.bbss-issue-popup {
    position: absolute;
    right: 0;
    top: calc(100% + 0px);
    z-index: 99999;
    box-sizing: border-box;
    width: max-content;
    min-width: 220px;
    max-width: min(300px, calc(100vw - 24px));
    background: #e5e5e8;
    color: #333;
    border-radius: 10px;
    padding: 14px 14px 12px 14px;
    font-family: "BB Text", sans-serif;
    overflow-wrap: anywhere
}

.theme-dark .bbss-issue-popup {
    background: #454548;
    color: #eee
}

.bbss-issue-popup::after {
    content: '';
    position: absolute;
    top: -8px;
    right: 10px;
    left: auto;
    transform: none;
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #e5e5e8 transparent
}

.theme-dark .bbss-issue-popup::after {
    border-color: transparent transparent #454548 transparent
}

.bbss-issue-popup a:focus-visible,
.bbss-issue-popup button:focus-visible,
.bbss-issue-popup span:focus-visible {
    outline: 2px solid #0070ee;
    outline-offset: 2px
}

.bbss-issue-popup.bbss-popup-bottom,
.bbss-issue-popup.bbss-popup-top {
    transform: none
}

.bbss-info-button:focus-visible {
    outline: 2px solid #0070ee;
    outline-offset: 0
}

.bbss-popup-title {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.016em;
    line-height: 1.428572
}

.bbss-popup-row {
    display: flex;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 12px;
    letter-spacing: -.01em;
    line-height: 1.33334
}

.bbss-popup-label {
    font-weight: 600;
    opacity: .8
}

.bbss-popup-value {
    opacity: .9;
    word-break: break-word
}

#system-status-container a:focus-visible {
    outline: 2px solid #0070ee;
    outline-offset: 1px
}

@media only screen and (max-height:750px) and (max-width:1024px) {
    .loading-container {
        padding: 40px 0 80px
    }
}

@media (max-width:880px) {
    .bbss-issue-popup {
        position: absolute;
        right: 8px
    }

    .bbss-issue-popup.bbss-popup-bottom {
        transform: translateX(8px)
    }

    .status-item {
        display: block;
        padding: 8px 40px 8px 32px
    }

    .service-name,
    .service-status,
    .service-description {
        display: inline;
        width: auto
    }

    .service-description {
        display: none
    }

    .service-name::before {
        position: absolute;
        left: 8px;
        top: 50%;
        margin-top: -1px;
        transform: translateY(-50%);
        border-radius: 50%
    }

    .service-name::after {
        content: " - "
    }

    .service-status::after {
        display: none
    }

    button.bbss-info-button {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%)
    }
}