.ribbon, .ribbon * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 300;
}
.ribbon b {
  font-weight: 600;
  color: var(--ribbon-b-color, #355434) !important;
}
.ribbon {
  display: table;
  width: 100%;
  font-family: Lato, Helvetica, sans-serif;
  font-size: 0.8rem;
}
.ribbon__category {
  display: block;
  margin-bottom: 0.5rem;
  margin-top: 10rem;
}
.ribbon__category--separator {
  display: inline-block;
  padding: 0px 15px;
}
.ribbon__category--cell {
  display: inline-block;
  width: 18px;
  outline: none;
  text-align: left;
  white-space: nowrap;
  transform: translateY(-2px) rotate(-45deg);
  color: black;
  background-color: transparent !important;
}
.ribbon__category--cell[id*=All] {
  font-weight: bold;
}
.ribbon__category--cell.clickable:active {
  pointer-events: none;
}
.ribbon__category--cell:hover {
  cursor: help !important;
  font-weight: bold;
}
.ribbon__subject {
  display: block;
  padding-bottom: 0rem;
  white-space: nowrap;
}
.ribbon__subject__label--left {
  display: inline-block;
  width: 140px;
}
.ribbon__subject__label--right {
  display: inline-block;
  margin-left: 1rem;
}
.ribbon__subject--separator {
  display: inline-block;
  padding: 0px 15px;
}
.ribbon__subject--cell {
  display: inline-block;
  width: 18px;
  height: 18px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.356);
  outline: none;
  text-align: center;
}
.ribbon__subject--cell--hover {
  cursor: pointer;
}
.ribbon__subject--cell--no-annotation {
  display: inline-block;
  width: 18px;
  height: 18px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.356);
  outline: none;
  text-align: center;
}
.ribbon__subject--cell--no-annotation:hover {
  cursor: not-allowed !important;
}
.ribbon__subject--cell--disabled {
  display: inline-block;
  width: 18px;
  height: 18px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.356);
  outline: none;
  text-align: center;
  background: repeating-linear-gradient(45deg, #ffffff, rgba(0, 0, 0, 0.1) 1px, #ffffff 2px, #ffffff 12px);
}

.selected {
  font-weight: bold !important;
}

.clickable {
  cursor: pointer !important;
}