/* whiteknights-trees.css, by Jonathan Gregory, derived from Studio Lift */
@import url("https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&display=swap");
:root {
  --black: hsl(0, 0%, 5%);
  --white: hsl(0, 0%, 100%);
  --selected-accent: hsl(131, 71%, 40%);
  --selected-background: hsl(131, 50%, 90%);
  --possible-accent: hsl(42, 100%, 50%);
  --possible-background: hsl(42, 50%, 90%);
  --slight-accent: Gainsboro; /* #e0e0e0; */
  --ButtonFace: #eaeaea;
  --text-default: var(--black);
  --text-inverted: var(--white);
  --text-secondary: hsl(0, 0%, 35%);
  --background-leftend: var(--white);
  --background-rightend: #F7F0F5;
  --reading-red: #D8131D;
  --mid-red: #EB8189; /* mean of background-rightend and reading-red */
  --treecircle-red: #FF5252;
  --treeicon-green: #558b2f;
  --winter-color: SaddleBrown;
  --spring-color: #00E020;
  --summer-color: Green;
  --autumn-color: DarkOrange;
  --body-font: "Alegreya Sans", sans-serif;
  --display-font: "Alegreya Sans", sans-serif;
  --tree-label-font-size: calc(var(--iconsize) / 2);
  --tree-label-font: bold var(--tree-label-font-size) Arial, Helvetica;
  --smallcircle-diameter: calc(var(--iconsize) / 4);
  --small-radius: 4px;
  --medium-radius: 10px;
  --map-legend-height: 1.75rem;
  --map-legend-padding: 2px;
  --map-help-margin: var(--body-top-padding);
  --figure-padding: 10px;
  --body-min-width: 350px;
  --body-width: max(var(--body-min-width), 100vw);
  --body-vmin: min(var(--body-width), 100vh);
  --body-padding: 1rem;
  --body-top-padding: var(--block-margin);
  --block-margin: calc(var(--body-padding) / 2); /* above main blocks */
  --inner-block-margin: calc(var(--block-margin) / 2); /* below header, above footer */
  --outer-block-padding: 0.75rem; /* above header, below footer */
  --swiper-nav-arrow-padding: 0.75rem;
  --gallery-padding: 0.75rem;
  --swiper-nav-arrow-width: 24px; /* was 3rem; */
  --swiper-nav-arrow-height: 24px; /* was 17 */
/* = 24px; swiper bullet height + 2*border = 21, looked too small */
  --menu-height: 2.2rem;
  --content-item-width: 660px;
  --reduced-photo-size: 625px;
  --column-gap: 0.75rem;
  --center-row-gap: 0.5rem;
  --center-column-gap: 0.75rem;
  --specieslist-column-width: 15rem;
  --group-label-width: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --over-weight: 500; /* cf. 400 normal weight, 700 bold */
  --button-border-width: 2px;
  --button-block-padding: 1px;
  --google-open-hand: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur");

}
@media (min-width: 501px) {
  :root {
    --gallery-padding: 1rem;
    --body-padding: 2rem;
    --column-gap: 1.5rem;
    --center-column-gap: 2rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --inner-block-margin: var(--block-margin); /* replaces body row-gap */
  }
}

@media (width <= 532px) {
  :root {
     --number-of-species-columns: 1;
  }
}
@media (532px < width <= 758px) {
  :root {
     --number-of-species-columns: 2;
  }
}
@media (758px < width <= 982px) {
  :root {
     --number-of-species-columns: 3;
  }
}
@media (982px < width <= 1208px) {
  :root {
     --number-of-species-columns: 4;
  }
}
@media (1208px < width <= 1432px) {
  :root {
     --number-of-species-columns: 5;
  }
}
@media (1432px < width <= 1658px) {
  :root {
     --number-of-species-columns: 6;
  }
}
@media (1658px < width <= 1882px) {
  :root {
     --number-of-species-columns: 7;
  }
}
@media (width > 1882px) {
  :root {
     --number-of-species-columns: 8;
  }
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
hr { /* added 21.7.26 */
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
  font-size: 100%;
  scroll-behavior: smooth;
}
@media (350px < width <= 1024px) {
  html {
    overflow-x: hidden;
  }
}

body {
  line-height: 1.3;
  position: relative;
  font-family: var(--display-font);
  background-color: var(--background-rightend);
  color: var(--text-default);
  width: var(--body-width);
  container-type: inline-size;
  container-name: body;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  row-gap: var(--block-margin);
}
@media (min-width: 1025px) { /* 21.7.26 was 500 */
  body:has(div.main_content_flexbox) {
    row-gap: 0px;
  }
}
body.embedded {
  row-gap: 0px;
  max-height: 100vh; /* iframe height */
  min-height: 100vh;
}

/* embeddtreepage mappage specieslistpage */
body:not(:has(div.main_content_flexbox)) {
  box-sizing: border-box;
  width: 100%;
}
@media (min-width: 1025px) {

/**** This condition excludes the map page, the embedded tree page and the species list page, but it's too complicated!
  body:has(div.main_content_flexbox:not(.map_container)):not(:has(div.species_list_container)) { *****/

/* If there is a main_content_flexbox, the body content width is set to a max,
with the remainder of the width being absorbed by inline margins. This does not
apply to the mappage and the specieslistpage, which use all available width for
their content. */
  body:has(div.main_content_flexbox) {
    box-sizing: border-box;
/* NB not 100vw because that includes the vertical scrollbar */
    width: max(100%, calc(1300px + var(--block-margin) + 2*var(--body-padding)));
    overflow-x: auto;
  }
}

/***** I don't understand this bit */
@media (max-width: 1024px) {
  body:not(:has(div.species_list_container)) {
    overflow-x: hidden;
  }
}
******/

body:not(:has(header)) { /* error messages */
  padding-top: var(--body-top-padding);
}

.body_high {
  height: 100vh; /* shouldn't exceed vw so no need for horizontal scrollbar */
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/********* This messes up Leaflet markers
*:first-child {
  margin-block-start: 0 !important;
}
**********/

/****** I don't know what this does either
*:last-child {
  margin-block-end: 0 !important;
}
*, *:before, *:after {
  box-sizing: inherit;
}
*******/

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

h1, h2, .h2, h3, .h3, h4, h5 {
  line-height: 1.1;
  text-wrap: pretty;
}

h1 {
  margin-block: 2.5rem 0px;
}

h2 {
  margin-block: 2rem 0px;
}

h3, h4, h5 {
  margin-block: 1rem 0px;
}

h1 + h2 {
  margin-block-start: 1.5rem;
}

h2 + h3, h3 + h4, h4 + h5 {
  margin-block-start: 0.5rem;
}

h1, .h1, h2, .h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--over-weight);
}

h3, .h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--over-weight);
}

h4, .h4 {
  font-size: 1.125rem;
  font-weight: var(--over-weight);
}

h5, .h5 {
  font-size: 1rem;
  font-weight: var(--over-weight);
}

figure {
  margin-block-start: 1rem;
}

figcaption {
  margin-block-start: 0.5rem;
}

p, .p, ul, ol, summary, figcaption, button {
  font-family: var(--body-font);
  line-height: 1.3;
  font-size: 1rem;
}
@media (min-width: 501px) {
  p, .p, ul, ol, summary, figcaption, button {
    font-size: 1.125rem;
  }
}

p, ul, ol, summary { /* 18.4.26 removed button */
  margin-block-start: 0.5rem;
}

ul {
  list-style-type: disc;
  margin-inline-start: 1.5rem;
}

ol {
  list-style-type: decimal;
  margin-inline-start: 1.5rem;
}

ul li,
ol li {
  margin-block-start: 0.5rem;
}

.no_bullets {
  list-style-type: none;
  margin-inline-start: 0;
}

ul li::marker,
ol li::marker {
  color: var(--selected-accent);
  font-family: var(--display-font);
}

a {
  font-family: var(--display-font);
  color: var(--text-default);
  text-decoration: none;
}

p a, a.p, .gmll_popup a, h2 a, h3 a, footer a {
  text-decoration-color: var(--selected-accent);
}

p a, a.p, .gmll_popup a, h2 a, h3 a, div.error a, footer a,
span.species_list_item a:hover, span.species_list_item a:active {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 2px;
  transition: ease 0.25s text-decoration;
}

@media (hover: hover) {
  p a:hover, a.p:hover, .gmll_popup a:hover, h2 a:hover, h3 a:hover, div.error a:hover, footer a:hover, span.species_list_item a:hover {
    text-decoration-color: var(--possible-accent);
  }
}
@media (hover: none) {
  p a:active, a.p:active, .gmll_popup a:active, h2 a:active, h3 a:hover, div.error a:active, span.species_list_item a:active, footer a:active {
    text-decoration-color: var(--possible-accent);
  }
}

button, .button, .dummy_button {
  border-style: solid;
  border-color: var(--slight-accent);
  border-radius: var(--small-radius); /* similar to Google Maps buttons */
  border-width: var(--button-border-width);
  padding-block: var(--button-block-padding);
  padding-inline: 0.25rem;
  background-color: var(--ButtonFace);
}
button, .button {
  cursor: pointer;
}
@media (hover: hover) {
  button:hover, .button:hover {
    border-color: var(--possible-accent);
    background-color: var(--possible-background);
    transition: ease 0.25s all;
  }
}
@media (hover: none) {
  button:active, .button:active {
    border-color: var(--possible-accent);
    background-color: var(--possible-background);
  }
}

button.selected {
  border-color: var(--selected-accent);
  background-color: var(--selected-background);
}

/***
details {
  margin-block-start: 1rem;
}

summary {
  font-weight: bold;
}
***/

strong, .strong {
  font-weight: bold;
}

.normal_weight {
  font-weight: 400;
}

light, .light {
  font-weight: 300;
}

em, .em {
  font-style: italic;
}

.qv {
  font-weight: 400;
  font-style: italic;
  cursor: pointer;
}

.flexright {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
}

.header {
  padding-block: var(--outer-block-padding);
  background: var(--white) linear-gradient(to right, var(--background-leftend), var(--background-rightend));
  margin-bottom: var(--inner-block-margin);
  position: relative; /* for the menu-item underline */
}

.header menu {
  margin-block-start: 0px;
  margin-inline-start: 0px;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--h3-font-size);
  line-height: 1.0;
  gap: var(--column-gap);
  align-items: center;
  list-style-type: none; /* Removes the bullet */
}

/***
.header menu a {
  text-decoration: none;
}
***/

.header menu img {
  display: inline;
  height: var(--menu-height);
  vertical-align: top;
}

.header menu li {
  --menu-item-decoration-color: transparent;
  --menu-item-decoration-width: 100%;
  font-weight: 300;
  height: var(--menu-height);
  line-height: var(--menu-height);
  position: relative;
}

.header menu li.home_menu_item {
  --menu-item-decoration-width: 5.8rem;
}

.header menu li.home_menu_item div {
  display: inline-block;
  font-size: var(--h3-font-size);
  font-weight: var(--over-weight);
  line-height: 1.0;
}

.header menu li:before {
  content: "";
  position: absolute;
  top: calc(var(--menu-height) + var(--outer-block-padding) - 4px);
  right: 0px;
  width: var(--menu-item-decoration-width);
  height: 4px;
  background-color: var(--menu-item-decoration-color);
  transition: ease 0.25s all;
}
@media (hover: hover) {
  .header menu li:not(.current_menu_item):hover {
    --menu-item-decoration-color: var(--possible-accent);
  }
}
@media (hover: none) {
  .header menu li:not(.current_menu_item):active {
    --menu-item-decoration-color: var(--possible-accent);
  }
}

.header menu li.current_menu_item {
  --menu-item-decoration-color: var(--selected-accent);
}

.body_padding:not(.body_padding .body_padding),
.body_padding_if_le1k:not(.body_padding .body_padding_if_le1k) {
  padding-inline: var(--body-padding);
}
@media (min-width: 1025px) {
  .body_padding_if_le1k {
    padding-inline: 0px;
  }
}

div.error {
  padding-left: var(--body-padding);
  color: var(--black);
  font-size: 2rem;
  font-weight: bold;
}

/* applied to map, only effectual on mappage, I think redundant because
we can use flex_grow */
/****
div.main_content_flexbox > div.main_content_high {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 425px;
}
****/

div.main_content_flexbox {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--body-width);
  row-gap: var(--block-margin);
}

.route div.main_content_flexbox {
  row-gap: 0px;
}

@media (min-width: 1025px) {
/* moved inside 1k 18.7.26 */
/** div.main_content_flexbox:not(.map_container):not(.species_list_header) { **/
  div.main_content_flexbox {
    margin-block-start: var(--block-margin);
/*****
  }
  div.main_content_flexbox:not(.map_container) {
*****/
    margin-inline: auto;
    flex-direction: row;
    justify-content: center;
    column-gap: var(--column-gap);
    width: 100%;
    align-items: flex-start; /* i.e. at the top, default is stretch */
  }
/* reverse_if for speciespage */
  div.main_content_flexbox.reverse_if_gt1k {
    flex-direction: row-reverse;
  }
}

@media (max-width: 1024px) {
/* speciespage */
  div.main_content_flexbox.reverse_if_le1k {
    flex-direction: column-reverse;
  }

/**** no longer in use
  div.main_content_flexbox.squeeze_if_le1k {
    margin-inline: auto;
    width: calc(min(var(--content-item-width), var(--body-width)) - 2*var(--block-margin));
  }
*****/

}

#species_lists {
  margin-top: 0px; /* because species_list_header has sticky padding-bottom */
  container-type: inline-size;
  flex-direction: column;
}

.scroll {
  overflow-y: auto;
  overflow-x: hidden; /* prevents extra horizontal scrollbar */
}

/* must not precede scroll */
.flex_grow {
  flex-basis: 0px;
  flex-grow: 1;
}

.flex_grow:not(.route .flex_grow) {
  min-height: fit-content;
}

@media (min-width: 1025px) {
  .flex_grow_if_gt1k {
    flex-basis: 1px;
    flex-grow: 1;
  }
}

/***
.route div.main_content_flexbox.flex_grow {
  min-height: 0px; /* fit-content makes it much higher than the map */
}

***/

.main_content_imgitem {
  box-sizing: border-box; /** 9.5.26 was content-box **/
  width: var(--content-item-width);
}

div.text_container { /* for embedtreepage */
  max-width: var(--content-item-width);
  padding-inline: var(--body-padding);
  margin-inline: auto;
  margin-block-start: var(--block-margin);
}

h1:not(.main_content_flexbox h1),
h2:not(.main_content_flexbox h2) {
  text-align: center;
}

.main_content_flexbox .main_content_textitem {
  min-width: 300px;
/* a textitem within a column flexbox is allowed to take the whole width */
  @media (min-width: 1025px) {
    max-width: var(--content-item-width);
  }
}

.main_content_textitem:not(.main_content_flexbox .main_content_textitem),
.main_content_imgitem:not(.main_content_flexbox .main_content_imgitem) {
  margin-block-start: var(--block-margin);
  margin-inline: auto;
}
@media (max-width: 1024px) {
  body {
    --effective-body-width: var(--body-width);
  }
  body.embedded {
    --effective-body-width: calc(var(--body-width) - 2 * var(--body-padding));
  }
  .main_content_textitem:not(.main_content_flexbox .main_content_textitem),
  .main_content_imgitem:not(.main_content_flexbox .main_content_imgitem) {
    max-width: min(var(--effective-body-width), var(--content-item-width));
  }
}

.main_content_flexbox .main_content_imgitem,
.main_content_flexbox .main_content_newmapitem {
  max-width: var(--content-item-width);
}

@media (max-width: 1024px) {
/* The body flexbox row-gap supplies the top margin for the first-child */
  .main_content_flexbox .main_content_textitem:not(:first-child),
  .main_content_flexbox .main_content_imgitem:not(:first-child),
  .main_content_flexbox .main_content_newmapitem:not(:first-child) { 
    margin-block-start: var(--block-margin);
  }
  .route .main_content_imgitem {
    margin-block-end: 0px; /* so the scrollbar touches the footer border */
  }
  .main_content_flexbox .main_content_imgitem,
  .main_content_flexbox .main_content_newmapitem {  
    box-sizing: content-box;
    max-width: min(100%, var(--content-item-width));
    margin-inline: auto;
    width: 100%; /* added for speciespage 23.5.26 */
    height: fit-content;  /* added for speciespage 23.5.26 */
  }
  .route .main_content_flexbox .main_content_imgitem,
  .route .main_content_flexbox .main_content_newmapitem {
    max-width: 100%;
    width: calc(var(--body-width) - 2*var(--body-padding));
  }
  .route .main_content_flexbox .scroll .main_content_imgitem {
    width: calc(var(--body-width) - 3*var(--body-padding)); /* extra for scrollbar */
  }
}
@media (max-width: 1024px) {
  .route .main_content_newmapitem, .route .main_content_imgitem {
    margin-block: 0px; /* to save space */
  }
}
@media (min-width: 1025px) {
  .main_content_flexbox .main_content_imgitem {
    min-width: var(--content-item-width); /* min-width prevents textitem from taking the width */
  }
}

.hidden {
  visibility: hidden;
}

.hidden_until_loaded {
  visibility: hidden;
}

.none {
  display: none;
}

body > div:first-child, body > h2:first-child {
  margin-block-start: var(--block-margin);
}

header + h2,
div > p:first-child,
div > h2:first-child,
div > h3:first-child {
  margin-block-start: 0rem;
}

/* This selection applies when the flexbox is in row direction */
@media (min-width: 1025px) {
  div.main_content_flexbox > p {
    margin-block-start: 0rem;
  }
}

div.map_legend { /* single line of text */
  border-radius: 0px;
  border-top-left-radius: var(--medium-radius);
  border-top-right-radius: var(--medium-radius);
  height: var(--map-legend-height);
/*  line-height: var(--map-legend-height); */ /* for vertical alignment */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--map-legend-padding);
  background-color: var(--white);
/*  position: relative; */
  width: 100%;
}

div.map_legend:not(:first-child) {
  margin-block-start: var(--block-margin);
}

.map_legend div.button_container {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.map_legend button {
  height: 100%;
  box-sizing: border-box;
/*  vertical-align: middle; */
  line-height: 1.5;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

/****
.map_legend button.hidden {
  visibility: hidden;
}
****/

/***
.map_legend button.h3 {
  font-weight: 400;
  padding-inline: 0.25rem;
}
***/

#map_mode {
  width: calc(6 * var(--h3-font-size));
}

@keyframes button-flashing {
  0% {
    border-color: var(--flashing-color);
    background-color: var(--flashing-background);
  }
  50% {
    border-color: var(--slight-accent);
    background-color: var(--ButtonFace);
  }
}

#live_location.selected, #live_location.waiting {
  animation-name: button-flashing;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1);
}

#live_location.selected {
  --flashing-color: var(--selected-accent);
  --flashing-background: var(--selected-background);
}

#live_location.waiting {
  --flashing-color: var(--possible-accent);
  --flashing-background: var(--possible-background);
}

/**** Not needed because all buttons do this
@media (hover: hover) {
  .map_legend button:not(.active_button):not(.waiting_button):hover {
    border-color: var(--possible-accent);
    background-color: var(--possible-background);
    transition: ease 0.25s all;
  }
}
@media (hover: none) {
  .map_legend button:not(.active_button):not(.waiting_button):active {
    border-color: var(--possible-accent);
    background-color: var(--possible-background);
  }
}
******/

.map_legend img {
/*  vertical-align: -20%;  18.4.26 apparently has no effect */
}

.dummy_button {
  font-weight: var(--over-weight);
  cursor: default !important;
}

p .dummy_button img {
  height: 1em;
  aspect-ratio: 1;
  line-height: 0;
  vertical-align: -0.2em;
}

/* This calculation is necessary because height: 100% does not work in
firefox, owing to something unexpected about its treatment of buttons. */
.map_legend button img {
  height: calc(var(--map-legend-height) - 2 * (var(--button-border-width) + var(--button-block-padding)));
}

#species_page_mode {
  width: 14.5rem;
  padding-top: 1px;
}

#species_page_mode img, #species_tree_mode img, #species_other_mode img {
  height: 20px;
  vertical-align: -6px;
}

div.species_resources {
  margin-block-start: var(--block-margin);
  display: flex;
  column-gap: var(--column-gap);
  align-items: center;
}

#species_resources span {
  display: inline-block;
}

/* *************
.map_status_report {
  text-align: right;
  padding-right: 0.5rem;
  font-style: italic;
  font-weight: 300;
  display: inline-block;
  vertical-align: middle;
}
************* */

/* container for Google and Leaflet maps, needed to superimpose them because
their individual divs must be absolutely positioned wrt a positioned div */
#map_container {
  position: relative; /*no effect other than to make this div positioned */
  visibility: hidden; /* while under construction */
  container-type: inline-size;
  container-name: map_container;
}

.main_content_newmapitem {
  @media (min-width: 1025px) {
    width: var(--content-item-width);
    min-width: var(--content-item-width);
    box-sizing: content-box;
  }
  @media (max-width: 1024px) {
    width: fit-content;
    height: fit-content;
  }
}

.main_content_newmapitem .map_container {
  margin-inline: 0rem;
}
@media (max-width: 1024px) {
  .main_content_newmapitem .map_container {
    --map-dimension: min(var(--content-item-width), calc(var(--body-width) - 2*var(--body-padding)));
    width: min(var(--map-dimension), 100%);
    height: calc(var(--map-dimension) + var(--map-legend-height));
    margin-inline: auto;
  }
}
@media (min-width: 1025px) {
  .main_content_newmapitem .map_container {
    width: 100%;
/*    height: 518px; */
    height: calc(var(--content-item-width) + var(--map-legend-height) + 2*var(--map-legend-padding));
  }
}

@media (max-width: 1024px) {
  .route .map_container {
    --map-dimension: calc(var(--body-width) - 2*var(--body-padding));
    width: var(--map-dimension);
    height: min(33vh, var(--map-dimension));
    margin-block-end: var(--block-margin); /* space above the hr */
  }
}

@media (min-width: 1025px) {
  .route .main_content_newmapitem {
    position: sticky;
    top: 0px;
  }
}

.map {
  height: calc(100% - var(--map-legend-height) - 2*var(--map-legend-padding));
  position: absolute;
  top: calc(var(--map-legend-height) + 2*var(--map-legend-padding));
  display: block;
  border-radius: 0px;
  border-bottom-left-radius: var(--medium-radius);
  border-bottom-right-radius: var(--medium-radius);
  box-shadow: var(--shadow-1);
  visibility: visible;
}
@container map_container (min-width: 0px) {
  .map {
    width: 100cqi;
  }
}

.main_content_newmapitem .map {
  left: 0px;
}

@media (min-width: 1025px) {
  .main_content_flexbox .map {
    min-height: min(var(--content-item-width), 100%);
  }
}

/* Replace "cursor: grab" on the Leaflet map, while it is not being dragged,
with Google Map's open-hand cursor, because in Linux chrome "grab" looks like
"pointer" */
#leaflet_map:not(.leaflet-dragging .leaflet-grab) {
  cursor: var(--google-open-hand), move !important;
}
.smallcircle {
  cursor: var(--google-open-hand), move !important;
}

.leaflet-container a {
  color: var(--black);
}

@container map_container (min-width: 0px) {
  .map_help {
    position: absolute;
    top: calc(var(--map-help-margin) + var(--map-legend-height));
    left: var(--map-help-margin);
    box-sizing: border-box;
    width: calc(min(100cqi, var(--content-item-width)) - 2*var(--map-help-margin));
    height: auto;
    z-index: 2000;
    background-color: var(--background-leftend);
    border-radius: var(--medium-radius);
    border-style: solid;
    border-width: 2px;
    border-color: var(--slight-accent);
    padding-inline: var(--map-help-margin);
    padding-block: 0.5rem;
    display: none;
    overflow: hidden;
  }
}

.map_help p {
  margin-block-start: 0.25rem;
}

.map_help p img {
  height: 1rem;
  width: auto;
  display: inline;
  vertical-align: -3px;
}

.map_help span.td1 {
  display: inline-block;
  padding-right: 0.25rem;
}

.map_help span.button {
/****
  border-radius: var(--small-radius);
  border-style: solid;
  border-width: 2px;
  border-color: var(--slight-accent);
  background-color: var(--ButtonFace);
****/
  padding-inline: 2px;
  display: inline-block; /* allows height to be specified */
  height: fit-content;
  vertical-align: bottom;
}

/* ************
.map_button_container {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  z-index: 2000;
}
.map_button_container button {
  font-family: var(--body-font);
  font-size: 1rem;
  width: 5.5rem;
/***  border-radius: var(--small-radius); ***/
  margin-block-start: 0px;
  border-style: solid;
}
.map_icon_container {
  display: flex;
  justify-items: flex-end;
  gap: 4px;
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  z-index: 2000;
  width: 5rem;
}
.map_icon {
  height: 2rem;
  width: 2rem;
  padding: 5px;
  background-color: Var(--ButtonFace);
  border-radius: var(--small-radius);
}
************ */

/****
.leaflet-grab {
  cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur") !important;
}
****/

.leaflet_bench {
/*
These margin and dimensions override elements of style set directly by leaflet
in order to position the div. The div top left corner is hereby positioned at
at the specified coordinate and it is made the size of the img it contains.
*/
   margin: 0px !important;
   width: fit-content !important;
   height: fit-content !important;
   padding: 0px !important;
}

.google_bench {
   z-index: 500 !important;
   position: relative;
}

/******
@keyframes leaflet-flashing {
  0% {opacity: 1;}
  50% {opacity: 0;}
}
******/

@keyframes location-flashing {
  0% {color: red;}
  50% {color: cyan;}
}

.google_location_icon, .leaflet_location_icon {
  height: 12px; width: 12px; /* iconsize */
}

.location_flashing {
  animation-name: location-flashing;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1);
}

.google_smallcircle {
  color: var(--treeicon-green);
  width: var(--smallcircle-diameter);
  height: var(--smallcircle-diameter); 
  visibility: hidden;
  padding: 0px;
  margin: 0px;
}

div.lightbox_container { 
  display: none;
  position: fixed;
  z-index: 3000;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* Dark semi-transparent background */
  text-align: center;
}

div.lightbox_container div {
  display: block;
  position: fixed;
  top: var(--body-padding);
  left: var(--body-padding);
  width: calc(var(--body-width) - 2*var(--body-padding));
  height: calc(100vh - 2*var(--body-padding));
  background-color: white;
}

.lightbox_container button, 
.map_help button {
  display: block;
  position: absolute;
  top: 0rem;
  right: 0.25rem;
  margin: 0rem;
  height: 2rem;
  width: 2rem;
  padding: 0px;
  text-align: center;
  font-size: 2rem;
/***  text-decoration: none; ***/
  z-index: 3010;
/***  border-radius: var(--small-radius); ***/
  border-style: none;
  background-color: transparent;
}

.lightbox_container button img,
.map_help button img {
  width: 100%;
  height: 100%;
}

/* Override Google Maps styles. Their css is loaded automatically as required
so !important is needed to modify them whenever loaded. Experiment indicated
that the height and max-height keywords were needed, to avoid the height being
too short with a scrollbar included, in both gm-style-iw-d and gm-style-iw-c
but I don't understand the relationships of these classes. */

.gm-style-iw-chr {
  height: 10px !important;
}

.gm-style-iw-d {
  margin-right: 20px !important;
  max-height: none !important;
  height: fit-content !important;
}

.gm-style-iw-c {
  max-height: none !important;
  height: fit-content !important;
}

.gmll_popup {
  margin-block: 0rem;
  font-family: var(--body-font);
  color: var(--text-default);
  line-height: 1.3;
  font-size: 1rem;
  font-weight: var(--over-weight);
  padding: 0px;
  width: fit-content;
  height: fit-content;
  margin-inline: auto;
  margin-block: 0px;
}

.gmll_popup p {
  margin-block-start: 0.5rem;
  margin-block-end: 0px;
  max-width: 200px;
  line-height: 1rem;
}
.gmll_popup p:first-of-type { 
  margin-block-start: 0px;
}

/***
.gmll_popup a {
  text-decoration-color: var(--selected-accent);
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 2px;
}
@media (hover: hover) {
  .gmll_popup a:hover {
    text-decoration-color: var(--possible-accent);
    transition: ease 0.25s;
  }
}
@media (hover: none) {
  .gmll_popup a:active {
    text-decoration-color: var(--possible-accent);
  }
}
***/

.gmll_popup img {
  max-height: 200px;
  max-width: 200px;
  width: auto;
  height: auto;
}

.gmll_popup img:hover {
  cursor: pointer;
}

/* .gmll_popup span.box { */
.gmll_popup button {
  display: inline-flex;
/**  padding-inline: 2px; **/
/**  margin-inline: 0px; html contains spaces between elements
  margin-block: 0px; **/
  vertical-align: middle; /* aligns this element wrt the line */
  align-items: center;
}

.gmll_popup button span {
  padding-inline-start: 2px;
  line-height: 1rem;
  font-size: 1rem;
}

/***
@media (hover: hover) {
  .gmll_popup span.box:hover {
    border-color: var(--possible-accent);
    background-color: var(--possible-background);
    transition: ease 0.25s all;
    cursor: pointer;
  }
}
@media (hover: none) {
  .gmll_popup span.box:active {
    border-color: var(--possible-accent);
    background-color: var(--possible-background);
  }
}
***/

/***
.gmll_popup .crossbox {
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--reading-red);
}
***/

.gmll_popup button img {
  display: inline-block;
  height: 20px; /* intrinsic height of png */
  width: auto;
  vertical-align: -10%;
}

div.tree_example {
  position: relative;
  background-color: var(--background-leftend);
  border-radius: var(--medium-radius);
  border-style: solid;
  border-width: 2px;
  border-color: var(--slight-accent); /* var(--mid-red); */
  padding-block-start: calc(var(--block-margin) + var(--figure-padding));
}
@media (max-width: 1024px) {
  div.tree_example {
    width: fit-content;
    margin-inline: auto;
  }
}

@media (hover: hover) {
  .route div.tree_example figure img:hover { /* signalling onclick action */
    cursor: pointer;
  }
}

.route div.tree_example {
  width: 100%;
}

.route div.main_content_imgitem div.tree_example,
.route div.main_content_imgitem div.tree_example + p {
  margin-top: var(--block-margin);
}

@media (min-width: 1025px) {
  .route div.main_content_imgitem h2 + p,
  .route div.main_content_imgitem h2 + div.tree_example {
    margin-top: 0rem;
  }
}

/****
div.tree_example a {
  text-decoration: none;
}
****/

/* First two cases not flex_center because must be flex-direction: row */
div.swiper_container h3, /* above tree photo on speciespage */
h2.flex_center, /* title of speciespage and specieslistpage */
h3.flex_center, /* buttons in routepage tree_example */
p.flex_center, /* specieslistpage */
div.flex_center {
  text-align: center;
  margin-inline: auto;
/*  padding-block-start: var(--block-margin); matches figure padding-bottom */
  display: flex;
  row-gap: var(--center-row-gap);
  column-gap: var(--center-column-gap);
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px) {
  .flex_center {
    flex-direction: column;
  }
}

div.tree_example h2, div.tree_example h3 {
  padding-inline: 1rem; /* so as not to abut the white box */
}

div.swiper_container h3 {
  margin-block-start: 0px;
  flex-wrap: wrap;
}

div.flex_center:first-child,
div.species_list_header p {
  margin-block-start: 0px;
}

@media (min-width: 1025px) {
  div.flex_column_if_gt1k {
    display: flex;
    flex-direction: column;
  }
}

.route div.tree_example h2 {
  padding-inline: 3rem; /* enough for the button */
  padding-top: 0.25rem; /* more than homepage, where there's a high button */
}

/****
div.tree_example button img {
  width: 2rem;
  display: inline;
  vertical-align: -30%;
}
****/

div.tree_example figure {
  padding-block: var(--figure-padding);
  padding-inline: var(--figure-padding);
  margin-block-start: 0px;
  border-radius: var(--medium-radius); /* irrelevant for column flex */
  background-color: var(--background-leftend); /* irrelevant for row flex */
  width: fit-content;
  margin-inline: auto;
}
@media (min-width: 1025px) {
  div.tree_example figure {
    padding-block: var(--block-margin);
    padding-inline: 0px;
    display: block;
  }
}

div.tree_example div {
  width: fit-content; /* i.e. the img */
  margin-inline: auto;
}

div.tree_example img:not(button img) { 
  max-height: calc(var(--body-vmin) - 3.5rem);
  display: block;
  margin-inline: auto;
}

button.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.1rem;
  padding-block: 2px;
}

/* for the navigational photos */
.route div.main_content_imgitem
img:not(figure img, h2 img, button img, p img) {
  display: block;
  --imgsize: min(417px, calc(var(--body-vmin) - 3.5rem));
  max-width: var(--imgsize);
  max-height: var(--imgsize);
  margin-block: 1rem;
  margin-inline: auto;
}

/* It was very fiddly to get .positioned, .overprint and .tree_label to give
the same result in ordinary text and in a Leaflet map divIcon */
span.positioned {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  vertical-align: -8px;
  font-size: 12px;
}

h3 span.positioned {
  vertical-align: -6px;
}

h2 span.positioned {
  vertical-align: -5px;
}

span.overprint {
  position: absolute;
  top: 4px;
  left: 4px;
  height: 16px;
  width: 16px;
  pointer-events: none;
}

div.tree_example h3 { /* below the photo */
  margin-block-start: 0.5rem;
}

div.tree_example figcaption {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* species information below the figure */
.route div.tree_example p, .route div.species_resources {
  padding-inline: var(--figure-padding);
  box-sizing: border-box;
  margin-inline: 0px;
  margin-block-start: 0px;
  margin-block-end: 0.5rem; /* normal p separation */
}
.route div.species_resources {
  margin-block-end: 1rem; /* twice normal p separation */
}
@media (min-width: 1025px) {
/* ".route div.tree_example p" has to be repeated, rather than relying on the
more general ".route p", in order to be of equal specificity to the previous
non-@media declaration, and thus override it. */
  .route div.tree_example p, .route p, .route div.species_resources {
    padding-inline: 0px;
    margin-inline: auto;
    width: var(--reduced-photo-size);
  }
}

/**** waymark comment paragraphs
@media (min-width: 1025px) {
  .route div.main_content_imgitem p {
    width: var(--reduced-photo-size);
    margin-inline: auto;
  }
}
****/

div.tree_example figure p
/*** div.tree_example button ***/ {
  margin-block-start: 0;
}

div.tree_example footer {
  text-align: center;
  padding-block-end: var(--figure-padding);
}

.route div.tree_example footer {
  display: flex;
  column-gap: var(--column-gap);
  justify-content: center;
  align-items: center;
  padding-block-start: 0.25rem;
  padding-block-end: 0px;
}

/***
div.tree_example button,
div.main_content_textitem > h2 button,
.route div.main_content_imgitem p button {
  border-color: var(--slight-accent);
  border-style: solid;
  border-radius: var(--small-radius);
  background-color: var(--ButtonFace); /* hsl(131, 30%, 90%); */
}
***/
/***
div.tree_example button {
  padding: 0.25rem;
}
***/

.route div.main_content_imgitem p button {
  padding-block: 0px;
  padding-inline: 2px;
  margin-inline: 2px;
  font: var(--tree-label-font);
}

/***
@media (hover: hover) {
  div.tree_example button:hover,
  div.main_content_textitem > h2 button:hover {
    border-color: var(--possible-accent);
    background-color: var(--possible-background);
    transition: ease 0.25s all;
  }
}
@media (hover: none) {
  div.tree_example button:active {
    border-color: var(--possible-accent);
    background-color: var(--possible-background);
  }
}

div.tree_example button.h2 {
  padding-block: 0px;
  line-height: 1.0;
  position: absolute;
  top: 10px;
  left: 10px;
}
.route div.tree_example button.h2 {
  font: var(--tree-label-font);
  font-size: calc(var(--tree-label-font-size) * 1.25);
}
***/

div.tree_gallery {
  display: block;
  background-color: var(--background-leftend);
  border-radius: var(--medium-radius);
  border-style: solid;
  border-width: 2px;
  border-color: var(--slight-accent);
  padding-block-start: calc(var(--gallery-padding) + var(--figure-padding));
  padding-block-end: var(--gallery-padding);
  padding-inline: 0px;
  margin-block: 0px;
  box-sizing: content-box;
  max-width: var(--content-item-width);
  min-width: 0px; /* needed to prevent swiper entering an infinite loop */
  width: 100%; /* needed to prevent swiper entering an infinite loop */
  overflow: hidden; /* needed to prevent swiper entering an infinite loop */
  max-height: 100%;
  height: fit-content;
  position: relative; /* for navigation */
  visibility: hidden; /* while under construction */
}
.embedded div.tree_gallery {
  padding-block-end: var(--body-padding);
  height: auto;
  margin-block-start: var(--block-margin);
  margin-inline: auto;
}

.tree_gallery div.swiper_container {
  box-sizing: content-box;
  width: 100%;
  display: none;
/* made visible by slidechange triggered when swiper first enabled or
when swiper is initialised if there is only one slide (so no changes) */
  visibility: hidden;
}

.tree_gallery .swiper-slide {
  margin-block: 0px;
}
@media (min-width: 1025px) {
  .tree_gallery .swiper-slide {
    height: fit-content !important;
  }
}

.tree_gallery h3 {
  text-align: center;
  margin-block-start: 0rem;
  margin-block-end: calc(var(--h3-font-size) * 0.8);
}

.tree_gallery figure {
  overflow: clip;
  margin-inline: auto;
  margin-block: auto;
/*  width: fit-content; */ /* 2.8.26 apparently ineffectual */
  padding-inline: var(--figure-padding);
}
@media (min-width: 1025px) {
  .tree_gallery figure {
    padding-inline: var(--block-margin);
/*    width: var(--reduced-photo-size); */ /* not good because it puts the caption at the extreme right */
/*    height: fit-content; */ /* 2.8.26 apparently ineffectual */
    padding-block-end: 1rem; /* separation from pagination */
  }
  .embedded .tree_gallery figure {
    height: auto;
    width: auto;
  }
}

/*******
figure
h3
div width fit-content, height var(--reduced-photo-size) + 1.5 rem
div width fit-content = actual width of the img, thus positions figcaption
img max-height and max-width var(--reduced-photo-size)
figcaption height 1.5rem
*******/

.tree_gallery figure div {
  margin-inline: auto;
  width: fit-content;
}

.tree_gallery figure div > div {
  margin-inline: auto;
  width: fit-content;
}

.tree_gallery figure img {
  display: block;
  margin-inline: auto;
  box-sizing: border-box; /* 16.5.26 */
}
@media (max-width: 1024px) {
  .tree_gallery:not(.embedded .tree_gallery) figure img {
    max-height: calc(var(--body-vmin) - 3.5rem);
  }
}
@media (min-width: 1025px) {
  .tree_gallery:not(.embedded .tree_gallery) figure img {
    max-height: var(--reduced-photo-size);
    max-width: var(--reduced-photo-size);
  }
}
.embedded .tree_gallery figure img { /* 17rem by experiment */
  --img-dimension: min(calc(100vw - 2 * var(--body-padding) - 2 * var(--block-margin)), calc(100vh - 17rem), var(--reduced-photo-size));
  max-height: var(--img-dimension);
  max-width: var(--img-dimension);
  height: auto;
  width: auto;
}

.tree_gallery figcaption {
  height: 1.5rem;
}

.tree_gallery figcaption span.left,
.tree_gallery figcaption span.right {
  width: 5rem;
}

.tree_gallery figcaption span.right {
  text-align: right;
}

/****** There is no longer any .body_high .tree_gallery
.body_high .tree_gallery figure img {
  max-height: min(calc(var(--body-width) - 2*var(--body-padding)), calc(100vh - 13rem));
}
***********/

.tree_gallery figcaption {
  display: flex;
  justify-content: space-between;
}

div:has(> div.tree_gallery_pagination) {
  width: calc(100% - 2rem - 2*(var(--swiper-nav-arrow-width) + var(--swiper-nav-arrow-padding)));
  margin-inline: auto;
}

.tree_gallery_pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}

.tree_gallery_pagination .swiper-pagination-bullet {
  margin: 0px !important;
  height: 17px;
  width: 17px;
  border: 2px solid var(--slight-accent);
  background-color: transparent;
  opacity: 1;
  text-align: center;
  line-height: 1.15rem; /* **** should be unitless **** apparently vertically centred if slightly >height */
}

.tree_gallery_pagination .swiper-pagination-bullet.text_bullet {
  width: 1.8rem; /* suits 3-letter month name */
  border-radius: var(--small-radius);
}

.tree_gallery_pagination .swiper-pagination-bullet.bark_bullet {
  border-radius: var(--small-radius);
}
.tree_gallery_pagination .swiper-pagination-bullet.bark_bullet img {
  vertical-align: text-top;
}

.tree_gallery_pagination .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active),
.tree_gallery_pagination .swiper-pagination-bullet:active:not(.swiper-pagination-bullet-active) {
  border-color: var(--possible-accent);
  background-color: var(--possible-background);
  transition: ease 0.25s all;
}

.tree_gallery_pagination .swiper-pagination-bullet-active:not(.number_bullet) {
  border-color: var(--selected-accent);
  background-color: var(--selected-background);
}

.tree_gallery_pagination .swiper-pagination-bullet-active.number_bullet {
  border-color: var(--treecircle-red);
  background-color: var(--treecircle-red);
}

.tree_gallery_pagination .number_bullet span, span.red_circle_label {
  font: var(--tree-label-font);
  color: white;
  text-align: center;
}

.tree_gallery_pagination .number_bullet span {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0px;
  width: auto;
  margin-bottom: 1px;
  line-height: 1.0;
  vertical-align: baseline;
}

span.red_circle_label {
  line-height: 1.5;
  vertical-align: middle;
  display: inline-block;
  background-color: var(--treecircle-red);
  box-sizing: border-box;
  --red-circle-margin: 1px;
  --red-circle-size: calc(var(--iconsize) - 2 * var(--red-circle-margin));
  height: var(--red-circle-size);
  width: var(--red-circle-size);
  margin: var(--red-circle-margin);
  border-radius: calc(var(--red-circle-size) / 2);
  border-style: solid;
  border-color: white;
  border-width: 1px;
  padding: 1px;
}
@media (hover: hover) {
  span.red_circle_label:hover {
    cursor: pointer;
  }
}
.route .tree_example span.red_circle_label {
  margin-block: -12px; /* prevents it from affecting line spacing */
}

.tree_gallery_pagination .number_bullet:not(.swiper-pagination-bullet-active) span {
  color: var(--black);
}

div.gallery_nav {
  visibility: hidden; /* revealed after gallery page has been written */
  flex-direction: row;
  display: flex;
  justify-content: space-between;
/***  height: 0px; ***/
/* No space below the fig; the arrows are on top of the fig */
}

span.gallery_nav_next,
span.gallery_nav_prev {
  cursor: pointer;
  width: var(--swiper-nav-arrow-width);
  height: var(--swiper-nav-arrow-height);
/* The relative positioning moves the nav arrows onto the same level as
the page dots. It can't be done by positioning the gallery_nav div instead,
because the pagination is disabled by having something on top of it. */
/***
  position: relative;
  top: calc(-4px - var(--swiper-nav-height) - var(--gallery-padding));
***/
/* 2px for border, I don't know what other 2px is */
}

span:is(.gallery_nav_next, .gallery_nav_prev) svg {
  --nav-arrow-border-color: var(--slight-accent);
  color: var(--ButtonFace);
  height: 100%; /*** var(--swiper-nav-arrow-height); ***/
}

@media (hover: hover) {
  span:is(.gallery_nav_next, .gallery_nav_prev):hover svg {
    --nav-arrow-border-color: var(--possible-accent);
    color: var(--possible-background);
  }
}
@media (hover: none) {
  span:is(.gallery_nav_next, .gallery_nav_prev):active svg {
    --nav-arrow-border-color: var(--possible-accent);
    color: var(--possible-background);
  }
}

span.gallery_nav_prev svg {
  transform: scaleX(-1);
}

span.gallery_nav_prev {
  padding-left: var(--swiper-nav-arrow-padding);
}

span.gallery_nav_next {
  padding-right: var(--swiper-nav-arrow-padding);
}

.swiper-wrapper {
  align-items: center;
}

.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

div:has(> div.species_list_container) {
  width: fit-content;
  margin-inline: auto;
}
@media (width <= 36rem) {
  div:has(> div.species_list_container) {
    width: 100%;
  }
}

div.group_list {
  display: flex;
  margin-inline: auto;
  column-gap: 0.5rem;
  row-gap: 0px;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1;
}

.group_list button {
/***
  border-radius: var(--small-radius);
  border-style: solid;
  border-width: 2px;
  border-color: var(--slight-accent);
***/
  margin: 0px;
  padding-inline: 5px;
}

/****
.group_list button:hover,
.group_list button:active {
  border-color: var(--possible-accent);
  background-color: var(--possible-background);
  transition: ease 0.25s all;
}

.group_list button.selected {
  border-color: var(--selected-accent);
  background-color: var(--selected-background);
  transition: ease 0.25s all;
}
****/

span.group_button {
  font-size: var(--h3-font-size);
  font-weight: bold;
}

/***
span.group_button:hover,
span.group_button:active {
  color: var(--possible-accent);
  transition: ease 0.25s all;
}
***/

span.group_button.selected {
  color: var(--selected-accent);
/**  transition: ease 0.25s all; **/
}
@media (width <= 36rem) {
  #buttonAZ {
    display: none;
  }
}

@media (width <= 36rem) {
  #letter_list {
    width: 15rem; # about half the alphabet, to balance the two lines of it
  }
}

div.species_list_container {
  margin-block-start: 0.5rem;
  width: fit-content;
  display: grid;
  grid-template-columns: auto;
  row-gap: 0.5rem;
  justify-content: center;
}
div.species_list_container.has_group_label {
  grid-template-columns: var(--group-label-width) auto;
}
@media (width <= 36rem) {
  div.species_list_container {
    width: 100%;
  }
}

div.species_list_header {
  position: sticky;
  top: 0px;
  margin-top: calc(-0.5 * var(--block-margin));
  padding-top: calc(1.5 * var(--block-margin));
  padding-bottom: var(--block-margin);
  background-color: var(--background-rightend);
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
@media (min-width: 501px) {
  div.species_list_header {
    padding-top: calc(0.5 * var(--block-margin));
    padding-bottom: 0px;
  }
}

div.species_list {
  display: grid;
/* cqw refers to the inline-size of the containing main_content_flexbox */
/*****
  --number-of-species-columns: max(1, round(down, calc((100cqw - var(--group-label-width)) / var(--specieslist-column-width)), 1));
******/
  grid-auto-flow: column;
  width: calc(var(--group-label-width) + var(--number-of-species-columns) * var(--specieslist-column-width));
  grid-template-columns: repeat(var(--number-of-species-columns), var(--specieslist-column-width));
  grid-template-rows: repeat(round(up, calc(var(--number-of-species) / var(--number-of-species-columns)), 1), auto);
}
@media (width > 532px) { /* min width for two columns, was 36rem */
  div.species_list {
    justify-content: center;
  }
}
@media (width <= 532px) {
  div.species_list {
    width: calc(100cqw - var(--group-label-width));
    grid-template-columns: 100%;
  }
}
div.species_list_container:not(.has_group_label) div.species_list {
  --group-label-width: 0px;
}
div.species_list.selected {
  background-color: var(--slight-accent);
}

span.group_label {
  width: var(--group-label-width);
  font-size: var(--h3-font-size);
  font-weight: bold;
  vertical-align: text-top;
}
span.group_label.selected {
  color: var(--selected-accent);
  transition: ease 0.25s all;
}

div.family_label {
  font-size: var(--h3-font-size);
}

div.agsperm_label {
  font-size: var(--h2-font-size);
  background-color: var(--slight-accent);
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
}

/* prevents it from appearing in black during transition to possible-accent */
span.species_list_item a:not(:hover):not(:active) {
  text-decoration-color: transparent;
}

span.species_tree_count {
  width: 1rem;
  display: inline-block;
}

.rubric { 
  color: var(--reading-red);
}

.warning {
  color: var(--reading-red);
}

span.small_green_square {
  height: 0.5rem;
  width: 0.5rem;
  color: var(--selected-accent);
}

span.small_green_square svg {
  padding-inline: 2px;
}

.border_top {
  border: none;
  border-top: 2px solid var(--mid-red); /* var(--possible-accent); */
  padding-block: 1rem;
}

footer.body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block-start: var(--inner-block-margin);
  padding-block-end: calc(0.5rem + var(--outer-block-padding));
}
@media (min-width: 1025px) {
  footer.body {
/* needed to balance the block-margin above the first main item */
    margin-block-start: calc(var(--inner-block-margin) + var(--block-margin));
  }
}

.route footer.body {
/* same margin as between the header and the top of the map */
  margin-block-start: calc(var(--block-margin) + var(--inner-block-margin));
}

hr {
  border: none;
  height: 2px;
  background-color: var(--mid-red);
  padding: 0px; /* padding has the background-color */
  margin-block-end: var(--block-margin); /* between rule and footer text */
}
.body_padding hr {
  margin-inline: calc(-1 * var(--body-padding));
}
@container body (width > 0px) {
  hr { width: 100cqi; }
}

footer.body p {
  font-size: 0.875rem;
  font-weight: var(--over-weight);
  margin: 0px;
}

/* These come last because display: none must supersede previous classes */
.if_narrow, .if_wide, .if_le1k, .if_gt1k { }

@media (min-width: 501px) {
  .if_narrow {
    display: none;
  }
}

@media (max-width: 500px) {
  .if_wide {
    display: none;
  }
}

/* !important overrides greater specificity implied by other classes */
@media (min-width: 1025px) {
  .if_le1k { display: none !important; }
}

@media (max-width: 1024px) {
  .if_gt1k { display: none !important; }
}