html, body {
	height: 100%;
	margin: 0px;
	line-height: 1.1;

}


.layout_row {
  display: flex;
  align-items: stretch;      /* forces all children to match the tallest height */
  gap: 10px;                  /* optional spacing between them */
  height: 80vh;
}


.map_btns {
	flex: 0 0 10%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	cursor: pointer;
}

#geoaigrass_map, #graph_div {
	flex: 0 0 45%;
	box-sizing: border-box;
	border: 1px solid #ccc;
}

/* #geoaigrass_map {
    margin: 3px;
	position: relative;
	width: 42%;
	height: 750px;
	left: 10%;
}

#graph_div {
	width: 48%;
	height: fit-content;
	right: 0%;
	position: absolute;
	top: 18.5%;
	color: #565656;
	background-color: #FFFFFF;
	padding: 0 15px 0 15px;
	border: 1.5px #CECECE;
	border-style: solid;  
}

.map-btns {
	width: 10%;
	display: block;
	position: absolute;
	cursor: pointer;
} */





#map_lyrs {
	padding-top: 1.6rem;
	padding-left: 1.25rem;
	font-weight: bold;
	text-decoration: underline;
}


.map-btn {
	color: #FFFFFF;
	padding: 0.5rem;
	border: 1px;
	border-style: solid;
	border-color: #CECECE;
}



#osm {
	background-color: #8a8a8a;
}

#satellite {
	background-color: #5f5f5f;
}



/* Annual variables */

#cleaf {
	background-color: #78ca71;
}

#clitter {
	background-color: #59a955;
}

#cveg {
	background-color: #3b8a3b;
}

#cwood {
	background-color: #965735;
}

#csoil {
	background-color: #693012;
}


/* Monthly variables */

#fgrazing {
	background-color: #A02B93;
}

#gpp {
	background-color: #AE397F;
}

#nbp {
	background-color: #BD476C;
}

#nee {
	background-color: #CB5558;
}

#ra {
	background-color: #D65F4A;
}

#reco {
	background-color: #DE6640;
}

#rh {
	background-color: #E97132;
}








#help {
	background-color: #0F9ED5;
}

#project {
	/* background-color: #125F81; */
	/* background-color: #117fab; */
	background-color: #4C9FC0;
}

#farm {
	/* background-color: #6F2FA0; */
	background-color: #b5b5b5;
}

#mean {
	background-color: #E97132;
}
#chill {
	/* background-color: #D56DCD; */
	background-color: #125F81;
}

#degree {
	background-color: #9B2B93;
	/* background-color: #E8D259; */
}

#extreme {
	/* background-color: #C14F13; */
	background-color: #E12E26;
	
}




.fwd_bckwd {
	/* text-align: center; */
	color: #5051A3;
	padding-top: 0.5rem;
}


.image_dates {
	padding-top: 1rem;
	padding-left: 0.5rem;

}

.top-controls {
  display: flex;
  align-items: center; /* vertically center the span and div */
  gap: 3rem;
}



/* This is for chart.js */
canvas, canvas3, canvas4, canvas5 {
	/* height:	100%; */
  	-moz-user-select: none;
  	-webkit-user-select: none;
  	-ms-user-select: none;
	background-color: white;
}

.chart {
	/* height: auto; */
}

.point_graph {
	max-height: 160px !important;
}

.polygon_graph {
	max-height: 250px !important;
	/* height: auto !important; */
}

#mapserver_legend {
	padding: 0.75em !important;
}

#legend_images {
	position: absolute;
	left: 60rem;
	top: 15rem;
	/* right: 61px; */
	z-index: 250;
	font-size: small;
	color: #CECECE;
	background-color: rgba(80, 80, 80, 0.75);
	padding: 5px;
	border: 2px solid;
	border-color: rgba(111, 111, 111, 1.0);  
}

.close-btn {
		position: absolute;
		top: -2px;
		right: 0px;
		background-color: rgba(80, 80, 80, 0);
		color: #CECECE;
		border: none;
		width: 20px;
		height: 20px;
		text-align: center;
		font-weight: bold;
		cursor: pointer;
		border-radius: 50%;
		line-height: 20px;
	}

.close-btn:hover {
		color: darkred;
	}




#wrap {
  position:absolute;
  width: 800px;
  margin: 20px auto;
  font-family: arial, sans-serif;
  font-size: 14px;
  z-index:30000;
}

#noShow {
  padding: 5px 10px;
  background-color: #ddd;
}

/* Geocode divs */
#location_search {
  /*z-index: 1000;*/
  /*background-color: white;*/
  position: absolute;
  top: 80px;
  margin-top: 15px;
  /*left: 40px;*/
  width: auto;
  height: auto;
  padding: 10px;
}
#location_search input {
  width: 200px;
}

.gcd-gl-result {
	padding-top: 5em;
    padding-left: 0.2em;
}

.gcd-gl-result, .gcd-gl-result ul, .gcd-gl-result a {
  font-style: sans-serif;
  list-style-type: none;
  /*color: #cecece;
  padding-left: 0px;*/
  text-decoration: none;
}

.gcd-gl-result a:link .gcd-road {
  color: rgba(0,92,132,1.0);
  text-decoration: none;
}

.gcd-gl-result a:visited {
  color: rgba(0,92,132,1.0);
  text-decoration: none;
}
.gcd-gl-result a:hover {
  color: rgba(0,92,132,0.6);
  text-decoration: underline;
}
.gcd-gl-result a:active {
  color: rgba(0,92,132,0.6);
  text-decoration: underline;
}


.layer-switcher {
	position: initial;
}

label {
	margin: 0.25rem;
}

.routing-buttons {
	display: none;
	padding-left: 5em;
}

.routing-buttons button{
  background-color:rgba(190,190,190,0.8);
  font-size: 0.9em;
}

.routing-buttons label{
  font-size: 0.9em;
}

.routing-buttons select{
  font-size: 0.8em;
}
.routing-buttons button:hover{background-color:rgba(242,242,242,0.8);}

.routing-buttons button:focus{background-color:rgba(242,242,242,0.8);}


#slider-1 {
    margin-bottom: 2.5em;
	width: 11.3em;
}      

#slider-2 {
    margin-bottom: 2.5em;
	width: 11.3em;	
}

#slider-3 {
    margin-bottom: 2.5em;
	width: 11.3em;	
}      

#slider-4 {
    margin-bottom: 2.5em;
	width: 11.3em;	
}



#custom-map-control {
    position: relative;
    top: 1rem;
	margin-bottom: 2.5rem;
}




#custom-map-control li {
	display: block;
	font-size: small;	
}

#sidebar p {
	margin-top: 1.1rem;
	margin-right: 1rem;
	font-size: 0.9em;
}




.ol-control {
 	background-color: rgba(255,255,255,0);
}


.ol-control button:focus {
	outline: none;
	color: rgba(225,225,225,1.0);
}

	.ol-zoom-in {
		display: none;
	}

	.ol-zoom-out {
		display: none;
	}



.custom-zoom {
	top: 0.5em;
	left: 0.5em;		
}

.custom-zoom .custom-zoom-in {
	background-image: url("../../map/images/zoom-in-off.png");
	background-repeat: no-repeat;	
}

.custom-zoom .custom-zoom-out {
	background-image: url("../../map/images/zoom-out-off.png");
	background-repeat: no-repeat;	
}

.custom-zoom .custom-zoom-in:hover {
	background-image: url("../../map/images/zoom-in-on.png");
	background-repeat: no-repeat;	
}

.custom-zoom .custom-zoom-out:hover {
	background-image: url("../../map/images/zoom-out-on.png");
	background-repeat: no-repeat;	
}


#shaded-rectangle {
	width: 50px;
	height: 200px;
	color: rgba(120, 120, 120, 0.5);
	z-index: 100;
	float: left;
	
}

#route_dist {
	padding-left: 5em;
	color: #ff0000;
	float: right;
    position: fixed;
    /* bottom: 95px; */
	top: 150px;
    z-index: 1000;
    right: 20px;
}

/* .introjs-overlay {
   position: fixed!important;
} */

/* .intro_anim {
	position: fixed!important;
	width:75%!important; 
	height:75%!important;
	top:0!important;
	left:0!important;   
} */

/*  .introjs-tooltip {
	position: fixed;
	width: 1000px;
} */

/*
.intro_anim {
	width:100%; 
}
 */

.introjs-tooltipReferenceLayer {
	/* margin-top:0px; */ 
	/* top: 30%; */
	/* top: 50%; */
	/* top: 40%; */
	
}

.introjs-tooltip {
	max-width: none;
	width: 1000px;
	
	min-height: 500px;

	/* height: max-content; */
	/* height: 500px; */
    /* top: 30%; */
	/* margin-top: -200px; */
}

.introjs-helperNumberLayer {
	/* margin-top: -200px; */
	/* visibility: hidden; */
}

/* .importantRule { 
	top: -25%;
	top: 50%;
} */

/*  .introjs-custom {
	margin-top:0px; 
 } */
 
.fa-icons  {
	color: rgba(0, 92, 132, 1.0);
}

#image-type {
	margin-top: 1rem;
	/* margin-left: 2rem; */
	font-size: small;
	
}

#image-type-sel {
	margin-left: 1rem;
}

#image-year {
	margin-top: 1rem;
	/* margin-left: 2rem; */
	font-size: small;
	
}

#image-year-sel {
	margin-left: 3.55rem;
}

#image-month {
	margin-top: 1rem;
	/* margin-left: 2rem; */
	margin-bottom: 3rem;	
	font-size: small;
	
}

#image-month-sel {
	margin-left: 2.65rem;
}


#legal_aid_legend {
	display: block;
	/* margin-left: 3rem; */	
	margin-top: -1rem;
}

#distance_to_aid_legend {
	display: none;
	margin-left: 0.45rem;	
	margin-top: -1rem;
}

#imm_demand_legend {
	display: none;
	margin-left: 0.45rem;	
	margin-top: -1rem;
}

#story_div {
  /* height: 300px; */
  height: 400px;
  max-width: 1200px;
  margin: auto;
}
#story_div img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 1000px;

}
.options a {
  cursor: pointer;
}

.prev-year:hover {
	cursor: pointer;
}

.next-year:hover {
	cursor: pointer;
}

#tf_variable_selector {
	padding-top: 0.75rem;
	display: inline-flex;
}

#tf_variable_selector label {
	margin-left: 0.5rem;
	margin-right: 1rem;
}

/* .modal-dialog {
	max-width: 55% !important;
}

.modal-dialog {
	min-width: 25% !important;
} */


.modal-dialog.modal-xl {
  max-width: 80vw;       /* 95% of viewport width */
  margin: 0.5rem auto;   /* keeps it centered vertically/horizontally */
}