* {
  box-sizing: border-box; }

body {
  color: #222222;
  width: 95%;
  max-width: 1400px;
  margin: 20px auto; }

body, svg text {
  font-family: "Open Sans", sans-serif; }

.chart {
  width: 100%;
  height: 600px; }

.person {
  color: #555555;
  margin: 0.2em;
  padding: 0.2em;
  margin-bottom: 0.8em; }
  .person:hover {
    background-color: #e8eeff;
    color: #333333;
    cursor: pointer; }
  .person h3 {
    font-size: 12pt;
    margin: 0;
    padding: 0; }
  .person p {
    font-size: 10.5pt;
    margin: 0.3em 0;
    padding: 0; }
  .person.person-detail h3 {
    font-weight: 300;
    font-size: 24pt;
    margin-bottom: 0.3em; }
  .person.person-detail p {
    display: inline-block;
    margin-right: 1em; }

a.people-feature {
  display: block;
  margin-bottom: 1.2em;
  color: #222222;
  text-decoration: none;
  padding-right: 15px; }

#people-dropdown {
  max-height: 500px;
  overflow-y: auto; }

.people-feature-selector {
  font-size: 48px;
  float: right;
  pointer-events: none;
  margin-right: 15px; }

.columns {
  height: 600px; }
  .columns .left-column, .columns .right-column {
    display: inline-block;
    vertical-align: top; }
  .columns .left-column {
    width: 70%; }
  .columns .right-column {
    width: 30%; }

.graph-list {
  font-size: 10.5pt; }
  .graph-list li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid transparent;
    padding-left: 6px;
    line-height: 2em;
    background-color: transparent;
    transition: background-color 0.4s, border-color 0.4s; }
    .graph-list li:hover {
      background-color: #f5f8fc;
      cursor: pointer; }
    .graph-list li.active {
      border-color: #7595ad; }

.credits {
  text-align: center;
  margin: 2em; }

.credits img {
  height: 80px;
  width: auto;
  opacity: 0.3;
  transition: opacity 0.4s; }
  .credits img:hover {
    opacity: 0.8; }

#circle circle {
  fill: none;
  pointer-events: all; }

#circle path {
  transition: fill-opacity 0.5s, opacity 0.5s; }

svg .group path, svg .group text {
  fill-opacity: 0.5; }
svg .group:hover {
  cursor: pointer; }
svg .group text {
  pointer-events: none; }

path.chord {
  stroke: black;
  stroke-width: 0.25px; }
  path.chord:hover {
    cursor: pointer; }

#circle:hover path.hidden {
  stroke-opacity: 0.01;
  fill-opacity: 0.01; }

#circle:hover path.fade {
  stroke-opacity: 0.1;
  fill-opacity: 0.1; }

.collab-tooltip {
  position: absolute;
  top: 344px;
  left: 326px;
  opacity: 0;
  transition: opacity 0.6s;
  font-size: 10pt;
  border: 1px solid #cccccc;
  background-color: white;
  padding: 0.3em;
  pointer-events: none; }

.title-elem {
  display: none; }

.no-data {
  text-align: center;
  font-size: 40pt;
  font-weight: 100;
  height: 600px;
  padding-top: 250px; }