/* general */
@media (prefers-color-scheme: light) {
    html {
        filter: invert(0);
    }
    :root {
    }
}
@media (prefers-color-scheme: dark) {
    html {
        filter: invert(0.85);
    }
    :root {
    }
}
html {
    filter: none;
}

:root {
    --bs-primary: #ccc;
}

.nav {
    --bs-nav-link-color: #000;
    --bs-link-color-rgb: 0, 0, 0;
}

.btn-outline-primary {
    --bs-btn-bg: #fff;
    --bs-btn-color: #000;
    --bs-btn-border-color: #ccc;
    --bs-btn-hover-bg: #ccc;
    --bs-btn-hover-border-color: #ccc;
    --bs-btn-active-bg: #ccc;
    --bs-btn-active-border-color: #ccc;
    --bs-btn-active-color: #000;
    --bs-gradient: linear-gradient(#000 0%, #fff 100%);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-border-color: #000;
}

/* light grey background for active nav links */
.nav-tabs .nav-link.active {
    --bs-nav-tabs-link-active-bg: rgba(var(--bs-light-rgb), 1);
    border-bottom: 1px solid rgb(var(--bs-light-rgb));
    font-weight: bold;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    opacity: 0.3;
}

textarea {
    resize: none;
}

code,
pre,
.code {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.h5,
.h6 {
    text-transform: uppercase;
    font-weight: bold;
}

/* graph */

#flowDiv .dygraph-title {
    font-size: 1.5rem;
    text-transform: uppercase;
}

#flowDiv .dygraph-ylabel {
    font-size: 1rem;
}

#legend span {
    padding: 0.2rem;
}

#legend span.highlight {
    background-color: #eee;
}

#series label {
    display: block;
}

#viewList li h4 {
    margin-left: 10px;
}

/* graph options */

.accordion h4:after {
    content: '\25B2';
    float: right;
}

.accordion h4.collapsed:after {
    content: '\25BC';
}

/* flows */
#sourceCIDRPrefixDiv:before,
#destinationCIDRPrefixDiv:before {
    content: '/';
    width: auto;
    position: absolute;
    font-size: 170%;
    padding-left: 1rem;
}
#sourceCIDRPrefix,
#destinationCIDRPrefix {
    padding-left: 2rem;
}