body {
  background-color: #fff;
  padding: 1em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

a {
  color: #990000;
}
.society-graph {
  font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.society-heatmap-bg {
  fill: #eee;
}

.society-cell-outline {
  stroke: #fff;
}

.society-
.society-heatmap-select,
.society-network-toggle {
  display: block;
  margin-bottom: 1em;
  font: 300 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.society-heatmap-select {
  display: inline;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 2em;
  padding: 6px 12px;
  line-height: 1.42857143;
  background-image: none;
}

label {
  font: 300 12px "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.society-network-toggle input {
  margin-right: 6px;
}

.society-link {
  stroke: steelblue;
  stroke-opacity: .4;
  fill: none;
  pointer-events: none;
}

.society-node:hover,
.society-node--source,
.society-node--target {
  font-weight: 700;
}

.society-node--source {
  fill: #009191;
}

.society-node--target {
  fill: #d66a00;
}

.society-node--faded {
  opacity: 0.3;
}

.society-link--source,
.society-link--target {
  stroke-opacity: 1;
  stroke-width: 2px;
}

.society-link {
  stroke: #000;
}

.society-link--source {
  stroke: #009191;
}

.society-link--target {
  stroke: #d66a00;
}

.key-green {
  height: 1em;
  background-color: #009191;
  padding: .25em;
  color: #fff;
}

.key-red {
  height: 1em;
  background-color: #d66a00;
  padding: .25em;
  color: #fff;
}

.instructions {
  width: 100%;
}
