/*
 * Colors -- Each class represents a judicial selection category.
 *        -- colors MUST be defined as:
 *             -- fill: for the states
 *             -- background-color: for the state details table
 */
/* Elections: Green (10-PRGn Diverging) */
.elections {
  fill: #00441b;
  background-color: #00441b; }

.retention_elections {
  fill: #a6dba0;
  background-color: #a6dba0; }

.nonpartisan_elections {
  fill: #5aae61;
  background-color: #5aae61; }

.partisan_elections {
  fill: #1b7837;
  background-color: #1b7837; }

/* Appointments: Brown (10-BrBG Diverging) */
.legislative_appointment {
  fill: #8c510a;
  background-color: #8c510a; }

.supreme_court_appointment {
  fill: #dfc27d;
  background-color: #dfc27d; }

.gubernatorial_appointment {
  fill: #bf812d;
  background-color: #bf812d; }

/* Nominating Commission: Pink (10-PiYG) */
.nominating_commission,
.nonbinding_commission {
  fill: #de77ae;
  background-color: #de77ae; }

.binding_commission,
.commission_reappoints {
  fill: #c51b7d;
  background-color: #c51b7d; }

/* Hybrids: Purples (9-class) */
.hybrid {
  fill: #3f007d;
  background-color: #3f007d; }

.missouri_plan {
  fill: #6a51a3;
  background-color: #6a51a3; }

.varies {
  fill: #f1a340;
  background-color: #f1a340; }

/* Confirmations: This is the Base color only.
 * Patterns get generated and assigned via javascript.
 * A change here needs a change in Javascript as well!!
 */
.confirmation {
  fill: #fdae61;
  background: repeating-linear-gradient(110deg, #fdae61, #fdae61 3px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 10px);
  background-color: lightgray; }

#locus li.confirmation {
  background-color: #fdae61; }

.legislative {
  background: repeating-linear-gradient(110deg, #fdae61, #fdae61 3px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 10px);
  background-color: lightgray; }

.other {
  background: repeating-linear-gradient(10deg, #fdae61, #fdae61 3px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 10px);
  background-color: lightgray; }

/* Base color */
.not_applicable {
  fill: gray;
  background-color: gray; }

.blank {
  fill: lightgray; }

.click-target {
  fill-opacity: 0;
  pointer-events: all; }

.state {
  transition: opacity 0.5s ease;
  cursor: pointer; }

.overlay {
  transition: opacity 0.5s ease;
  pointer-events: none; }

.state > path {
  transition: fill 0.5s ease, stroke 0.5s ease, stroke-width 0.5s ease;
  stroke: azure;
  stroke-width: 2px; }

.clicked > path {
  stroke: black; }

.state-icon {
  opacity: 0.2; }

.soften {
  opacity: 0.2; }

.soften > path {
  fill: darkgrey; }

.soften .overlay {
  opacity: 0; }

.legend-row {
  list-style-type: none;
  transition: all 0.5s ease-in-out, opacity 0.3s ease-in-out; }

.legend-item {
  transition: all 500ms linear; }

.legend-bar-container {
  cursor: pointer;
  padding-left: 0;
  padding-right: 0.5em; }

.legend-label-container {
  overflow: visible;
  padding-left: 0;
  padding-right: 0; }

.legend-bar {
  border: 1px solid white;
  height: 100%;
  float: right;
  transition: width 0.5s ease-in-out; }

.kids {
  padding: 0; }

.legend-label--text {
  cursor: pointer; }

#abacus text {
  font-size: 90%; }

.branch--closed span:before {
  font-family: FontAwesome;
  content: "\f196";
  /* fa-square-plus-o */ }

.branch--opened span:before {
  font-family: FontAwesome;
  content: "\f147";
  /* fa-square-minus-o */ }

.branch--leaf span:before {
  font-family: FontAwesome;
  content: "\f096";
  /* fa-square-o */
  visibility: hidden; }

.legend-row--new {
  max-height: 0;
  opacity: 0;
  animation: openSpace 0.5s ease forwards, fadeIn 0.3s 0.2s ease forwards; }

@keyframes openSpace {
  to {
    max-height: 120px; } }
@keyframes fadeIn {
  to {
    opacity: 1; } }
.legend-row--remove {
  max-height: 120px;
  animation: closeSpace 0.5s ease forwards; }

@keyframes closeSpace {
  to {
    max-height: 0; } }
path.domain, .tick line {
  stroke: none;
  fill: none; }

#viztitle {
  text-align: center; }

#locus li {
  transition: background-color 0.5s ease, color 0.5s ease, opacity 0.5s linear;
  margin: 0 -1em; }

#locus li span {
  opacity: 0.25; }

#locus li span.hilite {
  color: azure;
  opacity: 1; }

footer {
  margin-top: 5em; }

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: .5em 1em;
  background: rgba(17, 17, 17, 0.9);
  color: #fff;
  border-radius: 4px;
  pointer-events: none;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 11px; }

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none; }

/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center; }

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px; }

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center; }

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%; }