/* agspy */
:root {
    /* #698089 or rgb(105, 128, 137) */
    --agspy-dk-gray: hsl(197, 13%, 47%);
    /* #E3EAF0 or rgb(227, 234, 240) */
    --agspy-lt-gray: hsl(208, 30%, 92%);
    /* #84a5b3 or rgb(132, 165, 179) */
    --agspy-blue-gray: hsl(198, 24%, 61%);
    /* #9bb8c4 or rgb(155, 184, 196) */
    --agspy-lt-blue-gray: hsl(198, 25%, 75%);
    /* #ADD8E6 or rgb(173, 216, 230) */
    --agspy-lt-blue: hsl(195, 53%, 79%);
    /* #596775 or rgb(89, 103, 117) */
    --agspy-twilight-blue: hsl(214, 13%, 40%);

}

/* bootstrap ("brand #0") colors */
:root {
    --brand-0--black: var(--bs-dark, #212529);
    --brand-0--light-gray: var(--bs-gray, #6c757d);
    --brand-0--gray: var(--bs-gray-dark, #343a40);
    --brand-0--teal: var(--bs-teal, #20c997);
    --brand-0--blue: var(--bs-primary, var(--bs-blue, #0d6efd));
    --brand-0--light-blue: var(--bs-info, #0dcaf0);
    --brand-0--green: var(--bs-success, var(--bs-green, #198754));
    --brand-0--orange: var(--bs-orange, #fd7e14);
    --brand-0--yellow: var(--bs-warning, var(--bs-yellow, #ffc107));
}

/* old branding, agspy, (brand #1) colors*/
:root {
    /* #698089 or rgb(105, 128, 137) */
    --brand-1--dark-gray: hsl(197, 13%, 47%);
    /* #E3EAF0 or rgb(227, 234, 240) */
    --brand-1--light-gray: hsl(208, 30%, 92%);
    /* #84a5b3 or rgb(132, 165, 179) */
    --brand-1--blue-gray: hsl(198, 24%, 61%);
    /* #9bb8c4 or rgb(155, 184, 196) */
    --brand-1--light-blue-gray: hsl(198, 25%, 75%);
    /* #ADD8E6 or rgb(173, 216, 230) */
    --brand-1--light-blue: hsl(195, 53%, 79%);
    /* #596775 or rgb(89, 103, 117) */
    --brand-1--twilight-blue: hsl(214, 13%, 40%);
}

/* new branding, ugw, (brand #2) colors */
:root {
    --brand-2--white: white;
    /* #353531 or rgb(53, 53, 49) */
    --brand-2--black: hsl(60, 4%, 20%);
    /* #554027 or rgb(85, 64, 39) */
    --brand-2--brown: hsl(33, 37%, 24%);
    /* #666666 or rgb(102, 102, 102) */
    --brand-2--gray: hsl(0, 0%, 40%);
    --brand-2--light-gray: hsl(from var(--brand-2--gray, var(--brand-0--gray, gray)) h s calc(l + 40));
    /* #4eb3cf or rgb(78, 179, 207) */
    --brand-2--blue: hsl(193, 58%, 56%);
    /* #b8e1ec or rgb(184, 225, 236) */
    --brand-2--light-blue: hsl(from var(--brand-2--blue, var(--brand-0--blue, blue)) h s calc(l + 26));
    /* #1e5e70 or rgb(30, 94, 112) */
    --brand-2--dark-blue: hsl(from var(--brand-2--blue, var(--brand-0--blue, blue)) h s calc(l - 28));
    /* #1e5e70 or rgb(30, 94, 112) */
    --brand-2--teal: hsl(193, 58%, 28%);
    /* #68a357 or rgb(104, 163, 87) */
    --brand-2--green: hsl(107, 30%, 49%);
    /*    --brand-2--green: green;*/
    --brand-2--light-green: lightgreen;
    --brand-2--dark-green: darkgreen;
    /* #99c24d or rgb(153, 194, 77) */
    --brand-2--yellowish-green: hsl(81, 49%, 53%);
    /* #1b5337 or rgb(27, 83, 55) */
    --brand-2--bluish-green: hsl(150, 51%, 22%);
    /* #cc5803 or rgb(204, 88, 3) */
    --brand-2--orange: hsl(25, 97%, 41%);
    /* #f8c630 or rgb(248, 198, 48) */
/*    --brand-2--yellow: hsl(45, 93%, 58%);*/
    --brand-2--yellow: yellow;
}

.black-on-white {
    color: var(--brand-2--black, var(--brand-0--black, black)) !important;
    background-color: var(--brand-2--white, var(--brand-0--white, white)) !important;
}

.white-on-black {
    background-color: var(--brand-2--black, var(--brand-0--black, black)) !important;
    color: var(--brand-2--white, var(--brand-0--white, white)) !important;
}

.black-on-trans {
    color: var(--brand-2--black, var(--brand-0--black, black)) !important;
    background-color: transparent !important;
}

.white-on-trans {
    color: var(--brand-2--white, var(--brand-0--white, white)) !important;
    background-color: transparent !important;
}

/* bootstrap overrides*/
.bg-primary,
.btn-primary {
    background-color: var(--brand-2--dark-blue, initial) !important;
    color: white;
}

.bg-secondary,
.btn-secondary {
    background-color: var(--brand-2--light-gray, initial) !important;
    color: white;
}

.bg-info,
.btn-info {
    background-color: var(--brand-2--blue, initial) !important;
    color: white;
}

.bg-success,
.btn-success {
    background-color: var(--brand-2--green, initial) !important;
    color: white;
}

.bg-warning,
.btn-warning {
    /* standby for now; altho this makes the .extended-div a more vibrant, branded yellow */
    /*    background-color: var(--brand-2--yellow, initial) !important;*/
/*    color: white;*/
}

.btn-trans {
    background-color: transparent !important;
    color: var(--brand-2--light-gray) !important;
}

.btn-face {
    background-color: ButtonFace !important;
    --clr--fg: hsl(from ButtonFace calc(h + 180) s l);
    color: var(--clr--fg) !important;
    /*    color: ButtonText;*/
}

.btn-text {
    color: ButtonText !important;
    --clr--bg: hsl(from ButtonText calc(h + 180) s l);
    background-color: var(--clr--bg) !important;
}

[role="button"]:hover:not(.ignore-hover),
.btn:hover:not(.ignore-hover) {
    filter: brightness(1.3);
    scale: 1.03;
}

.btn-static {
    scale: 1 !important;
}

a:not(:disabled):not([role="tab"]) {
    color: var(--brand-2--blue, initial);
}

li a:not(:disabled):not([role="tab"]) {
/*    color: hsl(from currentColor h s l);*/
/*    background-color: hsl(from currentColor calc(h + 180) s l);*/
}

a:visited:not(:disabled):not([role="tab"]) {
    color: rebeccapurple;
/*    text-decoration-style: unset;*/
}

a:visited:not(:disabled):focus,
a:visited:not(:disabled):hover {
/*    text-decoration-line: underline;*/
/*    text-decoration-style: double !important;*/
}

.dropup-menu,
.dropdown-menu,
.dropup-menu :not(input),
.dropdown-menu :not(input) {
    background-color: var(--brand-2--dark-blue, initial);
    color: white !important;
}

    .dropdown-menu a:hover {
        background-color: var(--brand-2--blue, initial) !important;
        color: var(--brand-2--yellow, initial) !important;
    }


.solid-background {
    background-color: var(--brand-2--blue);
}

    .solid-background.dark-bg,
    .solid-background--dark {
        background-color: var(--brand-2--dark-blue);
    }

    .solid-background.light-bg,
    .solid-background--light {
        background-color: var(--brand-2--light-blue);
    }


/* gradients */
.agspy-gradient {
    background: var(--agspy-blue-gray); /* #84a5b3; Old browsers (circa 2008) */
    background: -moz-linear-gradient(top, var(--agspy-blue-gray) 0%, var(--agspy-twilight-blue) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--agspy-blue-gray)), color-stop(100%, var(--agspy-twilight-blue))); /* Chrome,Safari4+ */
    /*background: -webkit-linear-gradient(top, var(--agspy-blue-gray, #84a5b3) 0%, var(--agspy-twilight-blue, #596775) 100%);*/ /* Chrome v10 to 25 (March 2013), Safari v5.1 to 6.1 (October 2013) */
    background: -o-linear-gradient(top, var(--agspy-blue-gray) 0%, var(--agspy-twilight-blue) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, var(--agspy-blue-gray) 0%, var(--agspy-twilight-blue) 100%); /* IE10+ */
    background-color: linear-gradient(top, var(--agspy-blue-gray) 0%, var(--agspy-twilight-blue) 100%); /* W3C */
    border-color: var(--agspy-dk-gray); /* rgb(105, 128, 137); */
}

.gradient-background {
    --grad-stop-0: var(--brand-1--blue-gray);
    --grad-stop-100: var(--brand-1--twilight-blue);
}

.brand-gradient {
    --grad-stop-0: var(--brand-2--blue) !important;
    --grad-stop-100: var(--brand-2--dark-blue) !important;
}

.brand-gradient,
.gradient-background {
    --grad-stop-0: var(--brand-2--blue);
    --grad-stop-100: var(--brand-2--dark-blue);
    /* Old browsers (circa 2008) */
    background: var(--grad-stop-0);
    /* FF3.6+ */
    background: -moz-linear-gradient(top, var(--grad-stop-0) 0%, var(--grad-stop-100) 100%);
    /* Chrome,Safari4+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--grad-stop-0)), color-stop(100%, var(--grad-stop-100)));
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, hsl(193, 57%, 56%) 0%, hsl(193, 58%, 28%) 100%);
    /* IE10+ */
    background: -ms-linear-gradient(top, hsl(193, 57%, 56%) 0%, hsl(193, 58%, 28%) 100%);
    /* W3C */
    background: linear-gradient(top, hsl(193, 57%, 56%) 0%, hsl(193, 58%, 28%) 100%);
    border-color: var(--brand-2--gray);
}

    .brand-gradient.reverse,
    .gradient-background.reverse {
        --grad-stop-0: var(--brand-2--blue);
        --grad-stop-100: var(--brand-2--dark-blue);
        /* Chrome,Safari4+ */
        background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, var(--grad-stop-0)), color-stop(100%, var(--grad-stop-100)));
        /* W3C */
        background: linear-gradient(bottom, hsl(193, 57%, 56%) 0%, hsl(193, 58%, 28%) 100%);
    }

.panel-primary > .panel-heading {
    background-color: var(--brand-2--teal, 'initial')!important;
}

/* other/misc. */

.manage-sites-button,
button.compare-multi-charts,
button.multi-charts-compare {
    background-color: var(--brand-2--orange)!important;
}