#insights .half {
  width: 470px;
  float: left;
}

#insights .half:last-child {
  float: right;
}

#insights .block {
  margin-bottom: 40px;
}

#insights .controls .period-selector {
  float: right;
  font-size: 0;
  margin-right: 10px;
}

#insights .controls .period-selector li {
  display: inline-block;
}

#insights .controls .period-selector li .selector {
  font-size: 12px;
  text-transform: uppercase;
  width: 32px;
}

#insights .controls .period-selector li .selector.active,
#insights .controls .period-selector li .selector:hover {
  background: var(--status-translated);
  color: var(--black-3);
}

/* Active users */

#insights .active-users-chart {
  height: 160px;
}

#insights .active-users-chart {
  float: left;
  margin-right: 40px;
  position: relative;
  text-align: center;
}

#insights .active-users-chart:last-child {
  margin-right: 0;
}

#insights .active-users-chart h4 {
  font-size: 14px;
  font-weight: bold;
  margin: 10px auto 0;
  width: 100px;
}

#insights .active-users-chart .active-wrapper {
  left: 0;
  right: 0;
  top: 15px;
  position: absolute;
}

#insights .active-users-chart .active {
  border-bottom: 2px solid var(--light-grey-2);
  display: inline-block;
  font-size: 40px;
  font-weight: bold;
  line-height: 48px;
}

#insights .active-users-chart .total {
  color: var(--light-grey-2);
  font-size: 16px;
  left: 0;
  right: 0;
  top: 68px;
  position: absolute;
}

/* Active users info tooltip */

#insights h3 .tooltip li::marker {
  color: var(--status-translated);
}

/* Time to review suggestions and Age of unreviewed info tooltip */

#insights h3 .tooltip li.current-month::marker {
  color: var(--status-unreviewed);
}

#insights h3 .tooltip li.twelve-month-average::marker {
  color: var(--grey-5);
}

/* Time to review pretranslations */

#insights .time-to-review-pretranslations h3 .tooltip li.current-month::marker {
  color: var(--hot-pink);
}

#insights
  .time-to-review-pretranslations
  h3
  .tooltip
  li.twelve-month-average::marker {
  color: var(--dark-pink);
}

/* Translation activity info tooltip */

#insights h3 .tooltip li.human-translations::marker {
  color: var(--green);
}

#insights h3 .tooltip li.machinery-translations::marker {
  color: var(--forest-green-1);
}

#insights h3 .tooltip li.new-source-strings::marker {
  color: var(--black-3);
}

#insights h3 .tooltip li.completion::marker {
  color: var(--status-translated);
}

/* Review activity info tooltip */

#insights h3 .tooltip li.peer-approved::marker {
  color: var(--blue-1);
}

#insights h3 .tooltip li.self-approved::marker {
  color: var(--grey-5);
}

#insights h3 .tooltip li.rejected::marker {
  color: var(--magenta);
}

#insights h3 .tooltip li.new-suggestions::marker {
  color: var(--black-3);
}

#insights h3 .tooltip li.unreviewed::marker {
  color: var(--status-unreviewed);
}

/* Pretranslation quality info tooltip */

#insights .pretranslation-quality h3 .tooltip li.approval-rate::marker {
  color: var(--lilac);
}

#insights .pretranslation-quality h3 .tooltip li.chrf-score::marker {
  color: var(--purple);
}

#insights .pretranslation-quality h3 .tooltip li.approved::marker {
  color: var(--pink-2);
}

#insights .pretranslation-quality h3 .tooltip li.rejected::marker {
  color: var(--light-pink);
}

#insights .pretranslation-quality h3 .tooltip li.new-pretranslations::marker {
  color: var(--black-3);
}