/* css styles */

p, ul {
  font-family: Georgia,Cambria,"Times New Roman",Times,serif;
}

/*==============================================================================
Layout and formatting
==============================================================================*/

#title-block-header.quarto-title-block.default .description, #title-block-header.quarto-title-block.default .abstract {
  margin-top: 0;
  font-size: 0;
}

.navbar-brand {
  position: relative;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  padding-left: 0.5em;
  /*background: url(images/logo.png); */
  background-size: contain;
  background-repeat: no-repeat;
}

h1.title, .title.h1 {
  margin-top: 0.2rem;
  color: #595959;
}

h2 {
  font-size: 1.75rem;
  color: #595959;
}

h3 {
  font-size: 1.4rem;
  color: #595959;
}

.sidebar.toc-left > *, .sidebar.margin-sidebar > * {
  padding-top: 1.2rem;
}

.quarto-title .quarto-categories {
  display: flex;
  flex-wrap: wrap;
  column-gap: .4em;
  row-gap: .4em;
  padding-bottom: .5em;
  margin-top: .75em;
}

div.quarto-post .listing-description p {
  font-size: 0.95rem;
}

.quarto-title-meta {
  margin-bottom: 2rem;
}

.column-margin figcaption, .margin-caption, div.aside, aside, .column-margin {
  font-size: .925rem;
}

.greentxt {
  color: #59B945;
}

.redtxt {
  color: red;
}

.callout.callout-style-simple .callout-body {
  font-size: .97rem;
}

/*==============================================================================
Buttons
==============================================================================*/

.btn-map {
  color: #fff;
  font-weight: bold;
  background-color: #8056b1;
  border-color: #8056b1;
  border-radius: 0.225rem;
  width: 100%;
}

.btn-species {
  color: #fff;
  font-weight: bold;
  background-color: #1eb176;
  border-color: #1eb176;
  border-radius: 0.225rem;
  width: 100%;
}

.btn-docs {
  color: #fff;
  font-weight: bold;
  background-color: #c4c47d;
  border-color: #c4c47d;
  border-radius: 0.225rem;
  width: 100%;
}

.btn-map:hover {
  color: #fff;
  background-color: #a175c2;
  border-color: #a175c2;
}

.btn-species:hover {
  color: #fff;
  background-color: #4fc28c;
  border-color: #4fc28c;
}

.btn-docs:hover {
  color: #fff;
  background-color: #d1d586;
  border-color: #d1d586;
}

.card {
  border-radius: 0.7rem;
}

/*==============================================================================
Call out boxes
==============================================================================*/

.callout.callout-style-default .callout-body {
  font-size: .95rem;
  font-weight: 400;
}

/*==============================================================================
References
==============================================================================*/

.csl-entry {
  margin-bottom: 1.0rem;
}

div.hanging-indent .csl-entry {
  margin-left: -1em;
  text-indent: 0em;
}

/*==============================================================================
Figure
==============================================================================*/

.quarto-figure > figure > p {
  text-align: left;
}

figure > figcaption {
  margin-top: 0em;
}

/*==============================================================================
General
==============================================================================*/

.figure-caption, figcaption {
  font-style: italic;
  font-size: 1rem;
  color: #6d7a86;
}

/*==============================================================================
code blocks
==============================================================================*/

pre.numberSource code > span {
  position: relative;
  left: -4em;
  counter-increment: source-line;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

/*==============================================================================
Floating images
==============================================================================*/

.floatleft {
	float:left;
	width: 50%;
	height: auto;
	margin: 2px 20px 0px 0px;
}

.floatleft .caption {
	margin-bottom: 0px;
}

.floatright {
	float:right;
	width: 50%;
	height: auto;
	margin: 2px 2px 2px 20px;
}

.floatright40 {
	float:right;
	width: 40%;
	height: auto;
	margin: 2px 2px 2px 20px;
}

.floatright30 {
	float:right;
	width: 30%;
	height: auto;
	margin: 2px 2px 2px 20px;
}

/*==============================================================================
Circled numbers
==============================================================================*/

.circlednums {
  font-size: 1em;
  font-weight: 400;
  }

.circle {
  border-radius: 50%;
  padding: 2px 6px 2px 6px;
  background: #FF5454;
  border: 0px solid #FF5454;
  color: #FFFFFF;
  text-align: center;
  font-size: 0.8em;
}

.circleblue {
  border-radius: 50%;
  padding: 2px 6px 2px 6px;
  background: #0080C0;
  border: 0px solid #0080C0;
  color: #FFFFFF;
  text-align: center;
  font: 0.8em;
}

/*==============================================================================
Image hover
==============================================================================*/

.imghover,
.imgnohover {
    position: relative;
    display: inline-block;
}

.imghover img {
    width: 100%;
}

.imgnohover img {
    width: 100%;
}

.imghover img:last-child {
    display:none;
}

.imghover:hover img:first-child {
    display:none;
}

.imghover:hover img:last-child{
    display:inline-block;
}

/*==============================================================================
collapseble boxes
==============================================================================*/

details {
  background-color: rgb(247,247,247);
  border-radius: 4px;
}

details[open] {
  padding: 10px 10px 5px 10px;
  margin-bottom: 16px;
  border-radius: 5px;
  border-top: 1px solid #007AC2;
  border-bottom: 1px solid #00B4CB;
  border-left: 1px solid #007AC2;
  border-right: 1px solid #00B4CB;
  background-color: rgb(251,251,251);
}

details summary {
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 12px;
  margin-top: 0px;
  color: rgb(49, 147, 52);
  padding-left: 6px;
  padding-right: 6px;
  font-size: 0.95em;
}

details[open] summary {
  color: rgba(0,122,194,255);
}

/*==============================================================================
Modal box
==============================================================================*/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 125px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}


/* Modal Content */
.modal-content-50perc, .modal-content-80perc, .modal-content-600px, .modal-content-800px, .modal-content-1000px{
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border-top: 10px solid #007AC2;
  border-bottom: 10px solid #59B945;
  border-radius: 15px;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
.modal-content-800px {
  width: 80%;
  max-width: 800px;
}

.modal-content-50perc{
  width: 50%;
}
.modal-content-80perc {
  width: 80%;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: #007AC2;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #00B4CB;
  text-decoration: none;
  cursor: pointer;
}

.modal-body {
  padding: 1em 1em;
  color: #383838;
  font-size: 1em;
}

pre.numberSource {
  margin-left: 2em !important;
  border-left: 0px !important;
  padding-left: 6px !important;
}