@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root{
  --navbar-background-color: #f5f5f5;
  --background-color: #f5f5f5;
  --navbar-text-color: #154734;
  --text-color: #424242;
  --text-a: #2d7257;

  --width-leftpane: 700px;
  --height-navbar: 135px;
}

@media print{
  body {
    background-color: white;
    color: black;
  }
}

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.navbar {
  background-color: var(--navbar-background-color) !important;
  color: var(--navbar-text-color) !important;
  margin-bottom: 0;
  font-feature-settings: "liga" off,"clig" off;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  /* 2px border at bottom, 10% transparent text color */
  border-bottom: 0px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}



/* place the logo vertically centered within the navbar */

.title svg path{
  fill: var(--navbar-text-color);
}
.title svg {
  height: 35px;
  width: 35px;
  margin-left: 0px;
  margin-right: 15px;
}

.title { 
  display: flex;
  align-items: center;
  height: 100%;
  width: 200px;
  font-weight: 400;
  color: var(--navbar-text-color);
}

fluid .navbar-brand {
  height: 35px !important;
  margin-left: 13px;
}
.navbar-nav {
  margin: 0px;
  margin-top: 5px;
}


.navbar li {
  display: inline-block;
  float: left;
  margin: 0px;
}
.navbar li a {
  margin: 0 1px;
  padding: 0px 1px !important;
  /*margin: 2px top and bottom, 0 left and 5 right*/
  margin: 2px 13px 2px 0px;
  color: var(--navbar-text-color) !important;
  border-bottom: 1px solid transparent;
  /* remove underline, since these are link*/
  text-decoration: none;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a:hover {
  /*background-color: color-mix(in srgb, var(--navbar-background-color), black 20%) !important;*/
  /* border-radius: 8px; */
  background-color: var(--navbar-background-color);
  border-color: var(--navbar-text-color) !important;
}


/* caption for the tables */
/* also sets the space above them */
caption {
  font-weight: 500;
  font-size: 1.9rem;
  margin-top: 70px;
  color: var(--text-color);
}

/* general settings for the whole page */ 
body {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "liga" off,"clig" off;
  color: var(--text-color);
  background-color: var(--background-color);
  /* make font rendering more consistent across browsers */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* headings */ 
h1 {
  font-weight: 700;
  font-size: 2rem;
}

h2 {
  margin-top: 60px;
  font-weight: 700;
  font-size: 1.8rem;
}

h3 {
  margin-top: 60px;
  font-weight: 600;
  font-size: 1.6rem;
}

/* links */
a {
  color: var(--text-a);
  /* ensure underline */
  text-decoration: underline;
  font-weight: 400;
}

/* paragraphs, lists, and the navbar list items */
p, li, li a{
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.6;
}



.right-pane .leaflet-container {
  height: 100% !important;
  width: 100% !important;
}

svg a {
  cursor: pointer;
  text-decoration: none;
}

.left-pane svg {
  margin-top: 100px;
  max-width: 100%;
  /* scale height with width:*/
  height: auto;
  display: block;
  margin: 100px auto 0;
}

/* h3 is used when a location is not selected */
/* giving it some extra space using a min-height*/
.location-description h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.right-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills pane, crops if needed */
  display: block;
}

.separator {
  height: 1px;
  border: 1px solid var(--text-color);
  margin: 40px 0;
}



/* basic table settings -------------------------------------------------------------*/

.left-pane table {
  width: 100%;
  margin: 20px 0px 50px 0px;
}
.left-pane table,
.left-pane th,
.left-pane td {
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  border-collapse: collapse;
  padding: 3px 12px;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.6;
}
.left-pane th {
  background-color: none;
  font-weight: 500;
}




/* Reactable settings -------------------------------------------------------------*/

.Reactable {
  font-size: 1.5rem;
  font-weight: 300;
  max-height: 500px;
  background-color: var(--background-color);
  border-bottom: 2px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}

.reactable{
  margin: 10px 0px 60px 0px;
}
.rt-td-inner, .rt-th-inner {
  padding: 4px 12px;
  padding-left: 0px;
}
.reactable .rt-td {
  border-top: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}
.reactable .rt-th {
  border-bottom: 2px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}
/* Downloads section ------------------------------------------------------------------*/

.section-downloads {
  max-height: 40px;
  border: 1px solid var(--text-color);
  border-radius: 4px;
  padding: 9px 10px;
  left: -10px;
  width: calc(100% + 20px);
  transition: max-height 0.2s ease;
  margin: 0 -10px;
  cursor: pointer;
  overflow: hidden;
  color: var(--background-color);
  background-color: var(--navbar-text-color);
}


.shiny-download-link {
  margin-bottom: 20px;
  border-color: var(--background-color);
  background: none;
  color: var(--background-color);
  /* make clicks on the button not pass through to the downloads section itself:*/
  pointer-events: auto;
}

.section-downloads table{
  margin-bottom: 20px;
}

.shiny-download-link:hover {
  border-color: var(--background-color);
  background: color-mix(in srgb, transparent 70%, #000000 30%);
  color: var(--background-color);
}

.section-downloads h2 {
  margin-top: 0;
  font-weight: 400;
}

.section-downloads a {
  color: color-mix(in srgb, var(--text-a) 50%, "white" 50%);
}

.section-downloads h3 {
  margin-top: 20px;
}

.section-downloads.expanded {
  max-height: 1000px; 
}

.left-pane .section-downloads table,
.left-pane .section-downloads th,
.left-pane .section-downloads td {
  border-bottom: 1px solid color-mix(in srgb, var(--background-color) 40%, transparent);
}


/* Leaflet map settings ---------------------------------------------------------------*/

.leaflet-tile-pane { 
  filter: saturate(50%) brightness(100%) opacity(0.8); 
}

/* Map selection controls -------------------------------------------------------------*/
.map-controls-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: black;
  gap: 6px;
  pointer-events: none;   /* let clicks pass through to the map */
}
.map-controls-container > * {
  pointer-events: auto;      /* re-enable clicks on actual controls */
}

/* set font size and correct alignment for the checkbox and its label */
.map-controls label,
.map-controls input[type="checkbox"] {
  font-size: 15px;
  margin: 0;
  padding: 0;
  position: static;
}
.map-controls .checkbox {
  margin: 0;
  padding: 0;
}

/* general map control text and buttons */
.map-buttons,
.map-controls .form-group {
  font-size: 15px !important;
  display: inline;
  border-radius: 0;
  margin: 0;
  padding: 5px 10px;
  background-color: white;
  height: auto;
  border: none;
  width: auto;
}
/* general map control container*/
.map-controls {
  position: static;
  display: inline-flex;
  border: 2px solid rgb(0,0,0,0.2);
  border-radius: 4px;
  overflow:hidden;
  align-items: center;
}
.map-controls-container > div {
  display: flex;
  align-items: center;
}
.map-controls-title {
  font-size: 15px !important;
  margin-right: 7px;
  font-weight: 400;
  color: white;
}

/* year range controls ----------------------------------------------------------------*/
.year-range-controls {
  display: flex;
  align-items: center;
  padding: 8px 0;
  margin: 25px 0;
}
.year-range-controls .shiny-input-container {
  display: inline-block;
  margin-right: 10px;
}
.year-range-controls button {
  font-size: 12px !important;
  background: white;
  border-radius: 4px;
  margin: 8px;
  margin-top: 20px;
  padding: 0 5px;
  border: none;
  background-color: #e1e4e9;
  height: auto;
}

/* mini year range controls  -----------------------------------------------------------*/

/* set the overall background white */
.year-range-controls-mini {
  background-color: white;
  display: inline-flex
}
/* container for slider */ 
.year-range-controls-mini .irs--flat {
  height: 33px;
  padding: 0 10px;
}
.year-range-controls-mini .form-group {
  margin-bottom: 0;
  padding: 0 10px;
  width: 215px;
}
/* remove the main label*/
.year-range-controls-mini .form-group label {
  visibility: hidden;
  position: absolute;
}
/* year labels */
.year-range-controls-mini .irs-from, 
.year-range-controls-mini .irs-to, 
.year-range-controls-mini .irs-single,
.year-range-controls-mini .irs-min, 
.year-range-controls-mini .irs-max {
  top: 16px;
  padding: 0px 5px;
}
/* slider position */
.year-range-controls-mini .irs--flat .irs-bar,
.year-range-controls-mini .irs--flat .irs-line {
  top: 7px;
  height: 7px;
}
/* small arrows, remove */
.year-range-controls-mini .irs--flat .irs-from::before, 
.year-range-controls-mini .irs--flat .irs-to::before, 
.year-range-controls-mini .irs--flat .irs-single::before {
  visibility: hidden;
}
/* slider handles */
.year-range-controls-mini .irs--flat .irs-handle {
  top: 4px;
  height: 11px;
}

/* Data selector-----------------------------------------------------------------------*/

/* container, position on map*/
.map-datatype-selector {
  position: absolute;
  right: 10px;
  bottom: 30px;
  z-index: 1000;
  overflow: hidden;
  color: black;
}
/* text above the selector*/
.selector-header {
  display: block;
  margin-bottom: 15px;
}
.selector-header, .selector-header a {
  font-size: 15px !important;
  font-weight: 400;
  text-align: center;
  color: white;
}

/* inner container */
.map-datatype-selector .form-group {
  /* override the default width and margin*/
  margin: 0 !important;
  width: 207px;
}
.map-datatype-selector .checkbox label {
  /* make the whole label area clickable, not just the text */
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.map-datatype-selector .checkbox label:hover {
  /* highlight on hover */
  filter: saturate(150%) brightness(110%);
}
.map-datatype-selector label span {
  /* container for the colored dot and the text */
  /* necessary for vertical centering */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1px;
}
.choice-dot{
  /* colored dot next to each data type */
  width: 15px;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid black;
}
.choice-text {
  /* text label for each data type */
  /*width: 180px;*/
  margin-left: 5px;
  font-size: 15px !important;
  color: white;
  width: 180px;
  border: 1px solid #00000035;
  background-color: color-mix(in srgb, var(--item-color) 65%, #2f2f2fc7);
  border-radius: 4px;
  padding-left: 10px;
  padding-right: 6px;
  font-feature-settings: "liga" off,"clig" off;
  font-family: "Roboto";
}

.shiny-input-checkboxgroup .checkbox input[type="checkbox"]:not(:checked) ~ span {
  opacity: 0.6;
  filter: grayscale(80%);
}
.shiny-input-checkboxgroup .checkbox input[type="checkbox"]:checked ~ span {
  opacity: 1;
}

/* hide the actual checkboxes, we only want the colored dots */
.map-datatype-selector .checkbox input[type="checkbox"] {
  display: none;
}


/* expandable text box---------------------------------------------------------------*/
.expandable-textbox {
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.5s ease;
  position: relative;
  cursor: pointer;
}

.expandable-textbox h1 {
  margin-top: 0;
}

.expandable-textbox::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;  /* height of the gradient */
  background: linear-gradient(to bottom, transparent, var(--background-color));
  pointer-events: none;  /* allows clicks to pass through */
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}

.expandable-textbox.expanded::after {
  display: none;  /* hide gradient when expanded */
}
.expandable-textbox.expanded {
  max-height: 1000px; 
}



/* Wide screen layout -----------------------------------------------------------------*/
@media (min-width: 1100px) {
  .navbar {
    box-sizing: border-box;
    height: var(--height-navbar);
    width: var(--width-leftpane);
    padding: 20px;
  }

  .split-layout {
    width: var(--width-leftpane);
    height: calc(100vh - var(--height-navbar));
  }

  .left-pane {
    box-sizing:border-box;
    overflow: scroll;
    /* only allow vertical scroll*/
    overflow-x: hidden;
    height: 100%;
    padding: 20px;
    padding-top: 20px;
  }

.left-pane::after {
  content: '';
  position: absolute;
  top: var(--height-navbar);
  left: 0;
  right: 0;
  width: var(--width-leftpane);
  height: 20px;  /* height of the gradient */
  /* gradient from top to bottom, red to transparent*/  
  background: linear-gradient(to bottom, var(--background-color), transparent);
  pointer-events: none;  /* allows clicks to pass through */
}

  .right-pane {
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100vh;
    width: calc(100vw - var(--width-leftpane));
  }
}


/* Narrow screeen layout --------------------------------------------------------------*/
@media (max-width: 1099px) {
  .navbar {
    box-sizing: border-box;
    width: none;
    min-height: var(--height-navbar);
    padding: 20px;
  }

  .nabar-nav {
    margin-bottom: 20px;
  }

  .navbar-header{
    /* override a float:left applied by Less at certain screen widths"*/
    float: none;
  }

  .split-layout {
    width: none;
    display: flex;
    flex-direction: column;
  }

  .right-pane {
    order: 1;
    position: relative;
    display: block;
    height: 500px;
  }

  .left-pane {
    order: 2;
    box-sizing: border-box;
    padding: 20px;
  }

  .shiny-plot-output{
    width: calc(var(--width-leftpane) - 40px);
  }
  .shiny-plot-output img {
    max-width: 100%;
    height: auto;
  }
}