body{
    display: grid;
    grid-template-columns: 2fr 2fr; 
    grid-template-rows: .2fr .8fr;
    grid-template-areas: "header header" "mappanel sidebar";
    background-image: url(https://i0.wp.com/css-tricks.com/wp-content/uploads/2018/07/scrolling-gradient.png?fit=1200%2C600&ssl=1);
    background-attachment: fixed;
    background-size: cover;
    /* overflow-y: hidden; */
    height: 90vh; /* this makes our page cover the whole browser window*/
    width: 99vw;
    ;
}

header {
	grid-area: header;
	color: white;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: repeat(2, .1fr);
  padding: 10px;
  font-size: x-large;
}

.zipstories{
  display: none;
  grid-row: 3;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hiddenClass{
  display: none !important;
}

.visibleClass{
  display: grid !important;
}
/* ---------styles for the cards----------- */

/* this is the card container */
#contents{
  grid-area: sidebar;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
  height: 90vh;
  overflow-y:scroll; /* adds a vertical scroll-bar to this div */
  grid-gap: 10px;    /* added a gap between each card */
  padding: 10px;    /* added padding */
  cursor: pointer;
}

/* header for the cards */
h4 .header{
  grid-row: 2;
}

.cardTitle{
  grid-column: 1 / span 3;
  grid-row: 1;  
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.languageMenu{
  margin-left:auto;
  margin-right:auto;

}


/* this is the class for the zipcodes */
.codes{
  display:grid;
  /* grid-template-columns: repeat(1, 1fr); */
  grid-template-rows: .2fr .1fr .7fr;
  padding:10px;
  background-color:rgb(225, 199, 247);
  border-radius: 5px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ---------styles for the progress bar ----------- */
.progressBar{
  border: 2px solid white;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-row: 3;
  height: 20px;
}

.yesBar div, .noBar div{
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 12px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.yesBar{
  background-color:rgb(105, 185, 68);
  /* border-radius:10px; */
  grid-column:1;
  grid-row:1;
}

.noBar{
  background-color:red;
  /* border-radius:10px; */
  grid-column:2;
  grid-row:1;
}

#titleImage{
  max-width: 200px;
}
.sidebar-item {
	padding: 10px;
	background: rgb(245, 241, 237);
	border: 3px solid white;
	border-radius: 48px;
	margin: 5px;
	color: black;
	cursor: pointer;
	text-align: center;
}

header{
    grid-area: header;
    color: white

}


#map{
    height:90vh;
    grid-area: mappanel;
    border-radius: 8px; 
  position: relative; 
  z-index: 500;
} 


#mapid {
  height: 100%;
  width: 100%;
  
}

/* Lauren: Adding in CSS for the chart */
#myProgress {
  width: 100%;
  background-color: grey;
  border-radius: 16px; /* Albert: made it into a pill! you can modify/change this if you like it! */
}

/* Lauren: How do I make the width correspond to .yes, .no, and .unsure? */
/* Albert: You need to do this in JavaScript! */
/* Albert: Step 1, make sure this is a class! because you should have multiple of these! one per zipcode */
/* Albert: Step 2: create different divs for each progress bar, one per zipcode */
/* Albert: Step 3: Set the .css style "width" to the percent calculated when you divide the total by the number of support */
/* Albert: Step 4: Add the divs to the progress bar container, note, you will need to create unique IDs for each container
because each progress bar should be unique to each zipcode!  */
#myBar {
  width: 10%;
  height: 30px;
  background-color: #04AA6D;
  text-align: center; /* To center it horizontally (if you want) */
  line-height: 30px; /* To center it vertically */
  color: white;
  border-radius: 16px; /* Albert: made it into a pill! you can modify/change this if you like it! */
  /* width: [temporary space holder] */
}

/*Legend specific*/
.legend {
  padding: 6px 8px;
  font: 14px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
  /*border-radius: 5px;*/
  line-height: 24px;
  color: #555;
}
.legend h4 {
  text-align: center;
  font-size: 16px;
  margin: 2px 12px 8px;
  color: #777;
}

.legend span {
  position: relative;
  bottom: 3px;
  cursor: pointer;
}

.disabled{
  color:rgb(194, 194, 194);
}

.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin: 0 8px 0 0;
  opacity: 0.7;
}

.legend i.icon {
  background-size: 18px;
  background-color: rgba(255, 255, 255, 1);
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* turn off overflow */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

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

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

* {box-sizing:border-box}