/* for charts page */
.is-active { background: #EA3546; }

/* h* in pure-menu-heading is too tall */
.less_tall { margin-top: 5px; margin-bottom: 5px; }
/* pure-menu-heading pads too much horizontally */
.less_indented { padding-left: 0px; padding-right: 0px; }

/* pure-components, flashed alert messages */
.alert {
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.alert-message {
    background-color: #dff0d8;
    border: 1px solid green;
}

.alert-error {
    background-color: #ff6666;
    border: 1px solid red;
}

/* generally can't safely combine this with pure-x classes, so wrappetywrap.... */
.vertcenter { display: flex; align-items: center; }
.verttop { display: flex; align-items: left; }
.vertsep { padding-bottom: 5px; }

/* config editing etc */
.pure-button.button-warning {  color: black; background: rgb(255, 225, 0); }
.button-warning:hover, .button-warning:focus { background: rgb(255, 191, 0); }

.pure-button.button-error {   color: white;  background: rgb(240, 49, 42); }
.button-error:hover, .button-error:focus { background: rgb(179, 25, 19); }

.pure-button-primary:hover, .pure-button-primary:focus { background: #004280; }

.pure-button-secondary { color: white; background: #1CB841; }
.pure-button-secondary:hover, .pure-button-secondary:focus { background: #116f27;  }

.pure-button-tertiary { color: white; background: #fa77f4; }
.pure-button-tertiary:hover, .pure-button-tertiary:focus { background: #f609ea;  }

.helpimlost { background: rgb(66, 184, 221); }
.helpimlost:hover, .helpimlost:focus { background: rgb(66, 184, 221); color: black; }

/* consistent visual for data and api names  */
code.metric { font-size: smaller; font-weight: bold; color: DimGray; }

/* bit of vertical space before everything */
body > div.pure-g:first-of-type { padding-top: 1em; }

form.mini { display: inline-block; }

/* for various small icons */
.icon_warning { color: #ff7800; }

@media screen and (max-width: 47em)
{
    /* pure css has no zero-width/vanish-me class */
    div.skip { display: none; }

}
@media screen and (min-width: 48em)
{
    /* instead of griddly mess just pad a little */
    body { padding-left: 2%; padding-right: 2%; }
}