/* Color variables */
:root {
    --bc-row-orange: #fd9438;
    --bc-row-orange-hover: #FF9B45;
    --bc-row-red: #ff5c5c;
    --bc-row-red-hover: #FF6969;
}

.network-issue-link {
    padding: 0.5rem 1rem !important;
    display: block !important;
    font-size: 14px;
    color: var(--bc-primary-block-bg) !important;
    text-align: center !important;
    /* font-weight: bold; */
}

#network-issue-row {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 35px;
    overflow: hidden;
}

#network-issue-row.maintenance {
    background-color: var(--bc-row-orange);
}
#network-issue-row.maintenance:hover {
    background-color: var(--bc-row-orange-hover);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#network-issue-row.incident {
    background: var(--bc-row-red);
}
#network-issue-row.incident:hover {
    background: var(--bc-row-red-hover);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes network-issue-scroll {
    from {
        left: 50px;
    }
    to {
        transform: translate3d(-100%, 0, 0)
    }
}