/*

Add main CSS here

*/

#projection-menu {
  position: absolute;
  right: 10px;
  top: 10px;
}

#subdivision {
  position: absolute;
}

#subdivision input {
  width: 200px;
}

img:hover {
  opacity: .5;
}

.graticule {
  fill: none;
  stroke: #000;
}

.graticule.outline {
  stroke-width: 2px;
}

.btn {
  z-index: 10;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #222;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

path {
  fill: none;
  stroke: #000;
}

path:hover {
  stroke: red;
}

circle {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.weight_styling {
  width: 400px;
  height: 100px;
  background-color: black;
  border-bottom-left-radius: 400px;
  border-bottom-right-radius: 400px;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
      width: 100px;
      height: 100px;
  }

.carousel-control.Right {
  right: 0;
  left: auto;
}

.carousel-control.Left {
  right: auto;
  left: 0;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
.d3-tip.n {
  left: 588px !important;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}