.grid line {
  stroke: #ccc;
  stroke-opacity: 0.7;
}

.grid .tick {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

/* a legend circle with a border for scatterplots */

.legend--icon--circle2 {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  align-self: center;
  flex-shrink: 0;
  border:2px solid
}

.title {
  font-size: 14px;
  font-weight: 600;
  fill: #414042
}

.cells path {
  fill: none;
  pointer-events: all;
}


.cellsselected {
  opacity:1;
  stroke-width: 2px;
  stroke: #000;
  fill:orange;
  fill-opacity: 0.75;
}

@media (min-width: 500px) {
  #info {
      min-height: 45px;
      width: 100%;
      font-size: 16px;
      margin: 16px 0px 16px 0px;
  }
}

@media (max-width: 499px) {
  #info {
      min-height: 45px;
      width: 100%;
      font-size: 16px;
      margin: 16px 0px 16px 0px;
  }
}

.dropdown {
  height: 44px;
  border-style: solid;
  color: #206095;
  background-color: #FFF;
  font-size: 1.1em;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  padding-left: 6px;
  margin-bottom: 20px;
  border: 2px solid #206095;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.dropdown:focus-visible{
  box-shadow: 0 0 0px 3pt orange;
}

::before,
::after {
  box-sizing: border-box;
}

#selectnav::before {

  height: 43px;
  width: 46px;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  background: #206095;
  content: '';
  pointer-events: none;

}

#selectnav::after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  right: 17px;
  bottom: 0;
  margin: 18px 0 0 0;
  border-style: solid;
  border-width: 10px 9px 0 9px;
  border-color: #ffffff transparent transparent transparent;
  pointer-events: none;
}

#label {
	font-weight:bold;
}