:root {
  --pico-font-size: 80%;
}

@media (min-width: 370px) {
  :root {
    /* --pico-font-size: 106.25%; */
    --pico-font-size: 80%;
  }
}
@media (min-width: 576px) {
  :root {
    /* --pico-font-size: 106.25%; */
    --pico-font-size: 90%;
  }
}
@media (min-width: 768px) {
  :root {
    /* --pico-font-size: 112.5%; */
    --pico-font-size: 100%;
  }
}
@media (max-width: 768px) {
  nav, nav ul {
    justify-content: space-around;
  }
}
@media (min-width: 1024px) {
  :root {
    /* --pico-font-size: 118.75%; */
    --pico-font-size: 100%;
  }
}
@media (min-width: 1280px) {
  :root {
    /* --pico-font-size: 125%; */
    --pico-font-size: 100%;
  }
}
@media (min-width: 1536px) {
  :root {
    /* --pico-font-size: 131.25%; */
    /* --pico-font-size: 100%; */
    --pico-font-size: 118.75%;
  }
}
/* pico overrides */
:root:not([data-theme="dark"]), [data-theme="light"] {
  --pico-font-family: 'Roboto', system-ui;
  --pico-primary: #49780c;
  --pico-primary-background: #89b94e;
  --pico-primary-hover-background: #67982C;

  --pico-mark-background-color: #F1F0EB;
  /* --pico-card-sectioning-background-color: #F1F0EB; */
  --pico-card-sectioning-background-color: #FAFAFA;
  --pico-muted-border-color: #FAFAFA;

  --pico-secondary: #616161;
  --pico-secondary-background: #5B5B5B;
  --pico-secondary-hover-background: #3C3C3C;

  --pico-contrast-background: #CCCCCC;
  --pico-contrast-hover-background: #B6B6B6;
  --pico-contrast-inverse: var(--pico-secondary-background);

  --pico-color: #4E4E4E;
  --pico-h1-color: #000000;
  --pico-h2-color: #111111;
  --pico-h3-color: #232323;
  --pico-h4-color: #313131;
  --pico-h5-color: #363636;
  --pico-h6-color: #4E4E4E;

  --pico-form-element-spacing-vertical: 0.35rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
  /* --pico-nav-element-spacing-vertical: 0.35rem; */
  /* --pico-nav-link-spacing-vertical: 0.35rem; */

  /* no radius */
  --pico-border-radius: 0;
  box-sizing: border-box;
}

.home-cards {
  --pico-grid-row-gap: 0;
  --pico-grid-column-gap: 0;
  --pico-group-box-shadow: 0;
  --pico-h4-color: var(--pico-primary-background);
}
header.grid {
  --pico-grid-row-gap: 0;
  --pico-grid-column-gap: 0;
}
.home-cards a {
  --pico-text-decoration: none;
  border: 2px solid transparent;
}
.home-cards a:hover {
  --pico-text-decoration: none;
  border: 2px solid var(--pico-primary-background);
}

.home-cards h4 {
  margin-bottom: calc( 0.5 * var(--pico-spacing) );
}

div [role=button] {
  vertical-align:middle;
}

  .home-cards section
, .home-cards article {
  margin-bottom: 0;
  box-shadow: none;
}

.home-cards img {
  filter: saturate(50%);
}

.home-cards hgroup>:not(:first-child):last-child {
  /* font-size: 0.875em; */
  font-size: 0.825em;
}

[type=search] {
  --pico-border-radius: 0;
}
td, th {
    padding: calc(var(--pico-spacing) / 4) var(--pico-spacing);
}


/* footer { */
/*   background-color: var(--pico-mark-background-color); */
/* } */
/* footer div { */
/*   background-color: var(--pico-mark-background-color); */
/* } */

/* nav li { */
/*     display: inline-block; */
/*     margin: 0; */
/*     padding: 0; */
/* } */
/*   nav details.dropdown */
/* , nav details.dropdown summary:not([role]) { */
/*     margin: 0; */
/*     height: inherit; */
/* } */

input:not([type=checkbox],[type=radio]), select, textarea {
  --pico-spacing: 0.5rem;
}

fieldset {
  --pico-spacing: 0.5rem;
}

body {
  background-image: url(/img/header.png);
  background-repeat: no-repeat;
  background-position: center top;
  /* background-attachment: fixed; */
  background-size: 115ch;
}

main header {
  background-color: #F0F0F0;
  --pico-grid-column-gap: 0;
}

body > header {
  background-color: none;
  padding-bottom: 0;
}
nav {
  margin-top: 28ch;
  margin-left: auto;
  margin-right: auto;
  max-width: 80ch;
}

footer {
  max-width: 80ch;
}

/*************************************************************************************/
/* charts.css overrides */
.charts-css.bar {
  /* max-width: 90%; */
  --labels-size: 24ch;
  /* --color: var(--pico-color); */
  /* --color: var(--pico-primary-background); */
}

.charts-css.pie {
  max-width: 24ch;
  /* --labels-size: 5ch; */
  --color-1: var(--pico-primary-background);
  --color-2: var(--pico-contrast-background);
}

  table.charts-css
, table.charts-css caption {
    margin-bottom: var(--pico-spacing);
}

table.charts-css tbody th { 
  font-size: 0.85rem;
}

.charts-css.legend {
  font-size: 0.85rem;
}

span.data {
  font-size: 0.7rem;
  padding-left: 1ch;
}
/*************************************************************************************/
/* dashboard */
.selected {
  border: solid;
  cursor: pointer;
}
.selected:hover {
  border: dashed;
}