body{
  font-family:Century Gothic,arial,sans-serif;
  overflow: hidden; /* Hide scrollbars */
}

#id01{display: none;}

#map { position:float;  height:100%; width:100%;margin:0;border: 2px solid #ffffff;}

#main_text{
	position:absolute;
	top:30vh;
	right:25%;
	font-size:2vw;
	color:#ffffff;
	border:3px double #333333;
	width: 50%;
	padding: 15px;	
	background-color:rgba(0,37,84,0.8);
}



.header{ 
  padding: 5px;
  background-color:#002554;
  color:#FFFFFF;
  width:100%;
}



li{
	font-size:1em;
	text-decoration: none;
	font-weight:500;
		
}

a:hover{
	color:#3399ff;
	font-weight:800;
	text-decoration: none;
}
.row { 
  border: 5px solid #333333;
  //padding: 5px;
  width: 100%;
  background-color:#eed484; 
  height: 100vh;
  display:flex;
  overflow:visible;
  
}

.column0 {
  float: left;
  width: 25%; 
  height:100%;
  overflow: auto;
}
.column1 {
  float: left;
  width: 35%; 
   height:100%;
  overflow: hidden;
}

.column2 {
  float: left;
  width:40%;
  height:100%;  
  overflow-y: scroll;
  margin-right:auto;
  margin-left:auto;
  }
  
 #plantImg{
width: 100%;
margin-right:auto;
margin-left:auto;
} 


.cityhallimg{
border: 2px solid #ffffff;
overflow-x: hidden;
width: 100%;
height:100vh;
}
  
 .plantIndex{
 padding: 5px;
 background-color:#eed484;
 overflow:auto;
 margin:0;
 width:100%;
 line-height: 200%;
 }
 
 hr { margin: 5px !important;}

 ol{
 columns:1;
 -webkit-columns:1;
 -moz-columns:1;
 font-size:1em;
 }
 
 #numberCircle {
   border-radius: 50%;
   width: 20px;
   height: 20px;
   padding: 2px;
   background: #fff;
   color: #666;
   text-align: center;
   font: 12px Arial, sans-serif;	
   background: yellow;
   border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #666600;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 	
}
	 
 circle {
    fill: #ffff66;
    pointer-events: all;	
}
 circle:hover, 
   circle:focus { 
		cursor: pointer;
		
}


/* Toggle this class - hide and show the popup */


/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
 
img{
padding-bottom:3px;	

}
#mytable{
	
padding:10px;
border-bottom: solid;
border-bottom-width:thin;
width: 90%;
max-width:400px;

}
#myTable tr,td{	
padding:10px;
border-bottom: solid;
border-bottom-width:thin;


}
tr:first-child{ font-weight: bold;  background-color:#eed484;
  }

li{
list-style:none;
}


.mapboxgl-popup-content{
color:#000000;
width:auto;
height:30px;
padding-left:10px;
padding-right:10px;
text-align:center;
overflow:hidden;
}
.custom-popup .mapboxgl-popup-content-wrapper {
    width: 89px;
    height: max-content;
    border: 2px solid #BF0404;
    background-color: rgba(243, 207, 207, 0.7);
    border-radius: 18px;
    margin-bottom: 3px;
  }


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
 

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

.row{
}
.column0{
	display:none;
}
.column1{
    width: 100%;
	position: absolute;
	top:60px;
	height:400px;
  }
.column2 {
    width: 100%;
	top:460px;
	position: absolute;
	height:300px;
	overflow:visible;
 
  
  }
.myTable{
	width: 90%;
  }


.cuLogo{


width:80px;
}
}



/*@media only screen and (min-width: 601px) {


.column0 {
  float: left;
  width: 20%; 
  height:90%;
  overflow: hidden;
}
.column1 {
  float: left;
  width: 40%; 
   height:90%;
  overflow: hidden;
}

.column2 {
  float: left;
  width:40%;
 height:90%;  
  //overflow: hidden;
  }
  
 .myTable{
	width: 90%;
	max-width: 550px;
	overflow:visible;
  
  } 
 
.cuLogo{

height: 50px;
}
} */