* {
  box-sizing: border-box; }

body {
  background: white;
  color: #fff;
  font-family: Avenir, Calibri, sans-serif;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto; }

/* adding styles for page that aren't map or popup related */
#page-title {
  grid-column: 2;
  grid-row: 1;
  z-index: 2; }

#page-title h1 {
  color: black;
  font-size: 3.5em;
  border-left: 10px black solid;
  padding-left: 5%; }

#page-title h2 {
  color: gray; }

#page-title li {
  color: black;
  font-size: 1.2em;
  margin: .5em 0px; }

#page-title a, #page-title a:visited {
  color: #0a7570; }

.search-bar {
  height: 200%;
}

.search-button {
    background-color: #0d9b92;
    border-color: #0d9b92;
    border-style: solid;
    padding-right: 2%;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    color: white;
}

/* .adding styles for page that aren't map or popup related */
#california-map {
  fill: #174f17;
  grid-column: 1/3;
  grid-row: 1; }

#california-map g {
  transition: .3s; }

#california-map g:hover {
  fill: #0a7570;
  cursor: pointer; }

.active, .active:hover {
  fill: #2beee1 !important; }

#countyInfo {
  position: fixed;
  display: grid;
  grid-template-rows: 20% 80%;
  grid-template-columns: 60% 40%;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  z-index: 101; }

.clickable {
  pointer-events: auto; }

.legal {
  fill: #0d9b92; }

.semilegal {
  fill: #11d4c7; }

.illegal {
  fill: gray; }

/*#california-map g.illegal:hover {
  cursor: default;
}*/
#countyInfo a {
  grid-column: 1/3;
  grid-row: 3; }

#title-box {
  grid-row: 1;
  grid-column: 1;
  /*display: grid;
  grid-template-rows: 75% 25%;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #b3b3b3;
  pointer-events: auto; }

#score-box {
  pointer-events: auto;
  grid-row: 1;
  grid-column: 2;
  background: #737373; }

h1.name {
  font-weight: 900;
  grid-row: 1;
  margin-left: 0px; }

/*h1.county-score is listed farther down. this is so that it loads after the global h1 styles that come farther down as well */
#subtitle {
  color: white;
  grid-row: 2;
  font-weight: 400;
  margin-left: 10%;
  font-size: 1.2em;
  padding-inline-start: 0px; }

#subtitle span a {
  font-size: .8em;
  text-decoration: none;
  color: #0d9b92; }

.city-list {
  /*background-image: url("../images/map-panel-bg-22.jpg");
  background-position: 0% 50%;*/ /*these two lines were previously used for placing and positioning the background imagine within the popup*/
  background: #d9d9d9;
  grid-row: 2;
  grid-column: 1/3;
  /*this line places city-list within its container for the entire countyInfo popup */
  display: grid;
  grid-template-columns: 28% 18% 18% 18% 18%;
  grid-template-rows: 25% 15% 60%;
  overflow-y: scroll;
  pointer-events: auto; }

/* this element styles the container for the message and two lists that are within the popup */
#storefront {
  grid-column: 1/5;
  grid-row: 1;
  color: black;
  margin-left: 5%;
  font-size: 1.5em;
  color: black;
  font-weight: 400;
  /*border-left: solid black 3px;
  padding-left: 5px;*/ }

#countyInfo p.message {
  grid-row: 2;
  grid-column: 1/5;
  color: black;
  margin-left: 5%;
  font-style: italic; 
}

.cities-styles {
  color: black;
  list-style: none;
  font-size: 20px;
  grid-column: 1/2;
  grid-row: 3;
  margin-left: 15%;
  padding-inline-start: 0px; }

  .cities-styles span{
    font-weight: bold;
  } /*so that the word jurisdiction appears in bold */

/*this is the class that styles the way the list of cities populates the popup once added by js */
.cities-styles a, .cities-styles a:visited {
  text-decoration: none;
  color: #0a7570; }

.scores-styles {
  color: black;
  list-style: none;
  font-size: 20px;
  margin-left: 5%;
  font-weight: 800;
  padding-inline-start: 0px;
 }

.scores-styles span {
    font-weight: bold;
}

.c2{
  grid-column: 2/3;
  grid-row: 3;
  font-weight: bold;
}

.c3{
  grid-column: 3/4;
  grid-row: 3;
  font-weight: normal;
}

.c4{
  grid-column: 4/5;
  grid-row: 3;
  font-weight: normal;
}

.c5{
  grid-column: 5/6;
  grid-row: 3;
  font-weight: normal;
}

/* same as the above class but for styling the ul of scores that is added through js */
#countyInfo img {
  pointer-events: auto; }

svg g {
  font-size: 12px;
  fill: #0d9b92;
  fill-rule: nonzero;
  stroke: white;
  stroke-width: .2;
  stroke-linecap: butt;
  stroke-linejoin: bevel;
  stroke-miterlimit: 4;
  stroke-opacity: 1;
  stroke-dasharray: none;
  marker-start: none; }

#countyInfo.show {
  opacity: 1; }

#countyInfo h1 {
  color: black;
  grid-row: 1/2;
  display: flex;
  align-items: center;
  padding: 5rem;
  padding-left: 3rem;
  margin-top: -.5rem;
  font-weight: 400; }

#countyInfo h1.name {
  padding: 0px;
  padding-left: 10%;
  padding-bottom: 0%;
  margin: 0px; }

#countyInfo h1.county-score {
  background: #737373;
  width: 100%;
  height: 100%;
  padding-left: 10%;
  color: white; }

#countyInfo h1.county-score span {
  font-size: 1.25vw;
  margin-right: 20%;
  border-right: 3px solid white;
  padding-right: 20px; }

#countyInfo p {
  margin-left: 2rem;
  margin-right: 2rem;
  grid-row: 2/3; }

#countyInfo img {
  width: 100%; }

.hidden {
  display: none; }

.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto; }

#countyHover {
  color: black;
  opacity: 0%;
  position: fixed;
  top: 10px;
  padding: 0px 20px 0px 20px;
  z-index: 100;
  background-color: #a1f7f2;
  pointer-events: none;
  font-weight: 800;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
 }

#countyHover.show {
  opacity: 1; }

/* -----
SVG Icons - svgicons.sparkk.fr
----- */
.svg-icon {
  width: 2.5em;
  height: 2.5em; }

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: white; }

.svg-icon circle {
  stroke: white;
  stroke-width: 1; }

#x-button {
  display: none;
  position: fixed;
  right: 1%;
  top: 1%;
  z-index: 102; }

#x-button {
  cursor: pointer;
  transition: .3s; }

/* SVG Icons */
/*#popup {
  width: 50px;
  height: 25px;
  position: relative;
  background:white;
  color: black;
  display: none;
}*/
/* MOBILE STYLES ~~~~~~~~~~~~~~~~~~~~~~~~ */
@media all and (max-width: 768px) {
  #california-map {
    width: 100%;
    grid-column: 1;
    grid-row: 2; 
  }

  #countyInfo {
    width: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.4); 
  }

  #countyInfo.show p {
    margin-bottom: 2rem; 
  }

  body {
    grid-template-columns: 100%; 
  }

  #page-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0px 2.5% 0px 2.5%; }

  #page-title h1 {
    border: 10px solid black; 
  } 

  .message {
      padding-bottom: 1000px;
  }

}
/*ENDS MOBILE MEDIA QUERY ~~~~~~~~~~~~~~~*/

/*# sourceMappingURL=map.css.map */