/* css styles */

/* make title smaller*/
.quarto-title-block h1.title {
  font-size: 1.25em; /* Adjust the value as needed (e.g., 1.5em, 24px) */
  margin-top: -15px !important;
  padding-top: 0px !important;
  margin-bottom: -5px !important;
  padding-bottom: 0px !important;
}

/* make date smaller*/
.quarto-title-meta {
  font-size: 0.9em; /* Adjust the value as needed (e.g., 1.5em, 24px) */
}

/* make tab content margins smaller*/
.panel-tabset .tab-content {
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-top: 5px !important;
  margin-top: 5px !important;
}

/* make spacing smaller*/
.panel-tabset .tab-content .line-block {
  padding-bottom: 10px;
}

/* make tabs smaller*/
.panel-tabset .nav-tabs .nav-link {
  padding: 4px;
  padding-left: 7px;
  padding-right: 7px;
  font-size: 0.7em;
}

/*bring something to the front*/
.title-block-header {
  position: relative;
  z-index: 1; /* Keep title text behind or in front as needed */
}


/*bring home page map up in line with title*/
.column .cell-output-display {
  position: relative;
  margin-top: -90px; /* Adjust this value to overlap */
  z-index: 10; /* Ensure map is above title */
}


/* edit appearance of north arrow*/
img[src*=".png"] {
  width: 40px;
  height: 55px;
  border-radius: 5px;
  padding: 6px 6px 6px 6px;
  color: #333;
  background: rgba(255,255,255,0.5);
  margin-top: 2px;
  margin-left:2px;
  border: 2px solid rgba(0,0,0,0.2);
  background-clip: padding-box;
}

/*for some reason above placement wasn;t applying to home page so need to specify*/
.cell-output-display img[src*=".png"] {
  position: absolute;
  bottom: 18px;
  right: 5px;
  width: 40px;
  height: 55px;
  border-radius: 5px;
  padding: 6px 6px 6px 6px;
  color: #333;
  background: rgba(255,255,255,0.5);
  margin-top: 2px;
  margin-left: -5px;
  margin-bottom: 10px;
  border: 2px solid rgba(0,0,0,0.2);
  background-clip: padding-box;
}


/* edit appearance of north arrow for exploits page too*/
.panel-tabset img[src*=".png"] {
  position: absolute;
  bottom: 18px;
  right: 5px;
  width: 40px;
  height: 55px;
  border-radius: 5px;
  padding: 6px 6px 6px 6px;
  color: #333;
  background: rgba(255,255,255,0.5);
  margin-top: 2px;
  margin-left: -5px;
  margin-bottom: 10px;
  border: 2px solid rgba(0,0,0,0.2);
  background-clip: padding-box;
}

/*edit legend layout*/
.leaflet-control-container .leaflet-top.leaflet-right{
  width: 300px;
  height: 70vh;
  display: flex;
  align-items: flex-start;
  align-content: stretch;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap-reverse;
}

.info.legend.leaflet-control:has(> div) {
  width: 45%;
}

.info.legend.leaflet-control:not(:has(> div)) {
  width: 45%;
  order: -1; 
}

/*remove break after legend numers so NA on same line*/
.info.legend.leaflet-control:has(> br) > div:nth-child(5) {
  clear: both;
}



/* scroll drop down watersheds*/
.navbar-nav .dropdown-menu {
  max-height: 70vh; /* Set a fixed height */
  overflow-y: auto;  /* Enable vertical scrolling when content exceeds height */
}

.line-block {
  margin-left: 20px;
}

/* make horizontal sliders line up with bars */

/* allows label to go ontop of slider*/
#tabset-1-1 .oi-3a86ea {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  min-width: 90%;
}

/* makes label wider */
#tabset-1-1 .oi-3a86ea label {
  min-width: 100%;
}

/* puts sliders side by side */
#tabset-1-1 .quarto-layout-panel  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  flex-grow: 1;
}

/* make basic styling for row more flexible*/
#tabset-1-1 .quarto-layout-row {
  display: flex;
  justify-content: center;
  padding-right: 0px;
  padding-bottom: 10px;
}

/* remove uneven padding around sliders and make sure sldiers centered*/
#tabset-1-1 .quarto-layout-cell {
  padding-right: 0px;
  padding-left: 5%;
  margin: 0px;
}

/* make sure attributions dont cover scale bar*/
.leaflet-control-attribution {
  max-width: 80%;
  opacity: 0.8;
}

/* better button styles*/

/* opacity*/
.leaflet-control-container .leaflet-top.leaflet-left {
  opacity: 0.8;
}

/* recenter button nicer colours*/
.leaflet-bar button {
  opacity: 0.8;
  background-color: #ffffff;
}

.leaflet-bar button:hover {
  opacity: 1;
  background-color: #ffffff;
}



/* chem plot layout*/
#tabset-1-1 > div.panel-fill.panel-grid > div > div {
  display: grid;
  grid-template-columns: 25% 75%;  
  grid-template-rows: 20% 30% auto;
}

#tabset-1-1 > div.panel-fill.panel-grid > div > div > div:nth-child(2) {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1; 
}

#tabset-1-1 > div.panel-fill.panel-grid > div > div > div:nth-child(3) {
  grid-row: 2 / span 1;
  grid-column: 1 / span 1; 
  align-self: start !important;
}

#tabset-1-1 > div.panel-fill.panel-grid > div > div > div:nth-child(4) {
  grid-row: 1 / span 3;
  grid-column: 2 / span 1;
}


#ojs-cell-1-2 > div:nth-child(1) > form {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
}

#ojs-cell-2-2 > div:nth-child(1) > form {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
}

/* chem plot legends on right */
.plot-d6a7b5-figure {
  display: grid;
  grid-template-columns: 85% 15%;  
  grid-template-rows: 90% 10%;
}

.plot-d6a7b5 {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  justify-self: center !important;
  width: 100%;
}

.plot-d6a7b5-swatches {
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
  justify-self: start !important;
  align-self: start !important;
  height: 30% !important;
  font-size: 0.95em !important;
}

/*download button smaller*/
.btn-quarto {
  align-self: flex-end;
}


/* map markers no background color (tbh not sure which of these did the job o I've left them all)*/
.leaflet-marker-shadow {
  display: none !important;
}

.awesome-marker {
  background: none !important;
}

.awesome-marker-icon {
  background: none !important;
}

.awesome-marker-icon-blue {
  background: none !important;
}


/* outline for icons*/
.awesome-marker-icon-blue .fa {
  -webkit-text-stroke-width: 0.75px; /* Outline thickness */
  -webkit-text-stroke-color: #fcffa4;
}


/* marker legend grey*/
.info.legend.leaflet-control.leaflegend-group-yeartrib .fa.fa-circle {
  color: #333333 !important;
}

.leaflet-control-container > div.leaflet-top.leaflet-right > div.info.legend.leaflet-control.leaflegend-group-yeartrib > div:nth-child(3) > div > i {
  color: #333333 !important;
}

.leaflet-control-container > div.leaflet-top.leaflet-right > div.info.legend.leaflet-control.leaflegend-group-yeartrib > div:nth-child(4) > div > i {
  color: #333333 !important;
}

.leaflet-control-container > div.leaflet-top.leaflet-right > div.info.legend.leaflet-control.leaflegend-group-yeartrib {
  order: -1;
}