/* Main */

.cohort-show {
  padding: 20px;
  border: 1px solid #ddd;
}

/* Rest */

.show-me p {
  display: inline-block;
  vertical-align: top;
  line-height: 35px;
}

.show-me > span {
  display: inline-block;
  vertical-align: top;
}
.range-container {
  margin-top: 20px;
}

.dates-column-container, .events-column-container {
  border-right: 1px solid #ddd;
}

.dates-column-container, .events-column-container, .cohort-container {
  float: left;
  text-align: center;
}

.dates-column-container .date-title, .events-column-container .event-title,
.cohort-container .cohort-title {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.cohort-container .cohort-title {
  padding: 10px 0;
}

.dates div, .events div {
  padding: 10px 20px;
  border: 1px solid transparent;
}

.axis div {
  display: inline-block;
  width: 77px;
  text-align: center;
}

.cohort .box {
  display: inline-block;
  width: 77px;
  padding: 10px;
  text-align: center;
  color: white;
}

.cohort {
  display: inline-block;
  text-align: left;
}

.cohort-show .table-container {
  border: 1px solid #ddd;
  margin: 20px auto 0;
  display: none;
}

.cohort-show .table-container.rendered {
  display: inline-block;
}

.gradient-0 {
  background-color: white;
  border: 1px solid white;
}

.gradient-1 {
  background-color: #9CC5FF;
  border: 1px solid #9CC5FF;
}

.gradient-2 {
  background-color: #8ABAFF;
  border: 1px solid #8ABAFF;
}

.gradient-3 {
  background-color: #75AFFF;
  border: 1px solid #75AFFF;
}

.gradient-4 {
  background-color: #61A3FF;
  border: 1px solid #61A3FF;
}

.gradient-5 {
  background-color: #579DFF;
  border: 1px solid #579DFF;
}

.gradient-6 {
  background-color: #4A95FF;
  border: 1px solid #4A95FF;
}

.gradient-7 {
  background-color: #388BFF;
  border: 1px solid #388BFF;
}

.gradient-8 {
  background-color: #247FFF;
  border: 1px solid #247FFF;
}

.gradient-9 {
  background-color: #1777FF;
  border: 1px solid #1777FF;
}

.gradient-10 {
  background-color: #0D71FF;
  border: 1px solid #0D71FF;
}