@import "chembl_base";

.color-box {
  height: 150px;
}

.color-box-small {
  height: 80px;
}

.color-box,
.color-box-small {
  font-family: $chembl-helvetica;

  p {
    margin: 0 auto;
  }

  &:hover {
    opacity: 0.8;
  }

}



.chembl-teal {
  background-color: $chembl-teal;
}

.lighter-teal {
  background-color: $lighter-teal;
}

.darker-teal {
  background-color: $darker-teal;
}

.accent-teal {
  background-color: $teal-accent;
}

.lighter-grey {
  background-color: $grey-light;
}

.medium-grey {
  background-color: $grey-medium;
}

.darker-grey {
  background-color: $grey-dark;
}

.chembl-red {
  background-color: $chembl-red;
}


.teal-1 {
  background-color: $teal-1;
}

.teal-2{
  background-color: $teal-2;
}

.teal-3 {
  background-color: $teal-3;
}

.teal-4{
  background-color: $teal-4;
}

.teal-5 {
  background-color: $teal-5;
}

.teal-6 {
  background-color: $teal-6;
}

.red-1 {
  background-color: $red-1;
}

.red-2{
  background-color: $red-2;
}

.red-3 {
  background-color: $red-3;
}

.red-4{
  background-color: $red-4;
}

.red-5 {
  background-color: $red-5;
}

.red-6 {
  background-color: $red-6;
}

.chembl-font {
  font-family: $chembl-helvetica;
}

.chembl-font {
  font-family: $chembl-helvetica;
}

.helvetica {
  font-family: $helvetica;
}

.verdana {
  font-family: $verdana;
}

.open-sans {
  font-family: $open-sans;
}

.roboto-mono {
  font-family: $roboto-mono;
}

.off-base {
  background-color: $off-base;
}

.off-accent {
  background-color: $off-accent;
}

.first-base {
  background-color: $first-base;
}

.first-accent {
  background-color: $first-accent;
}

.second-base {
  background-color: $second-base;
}

.second-accent {
  background-color: $second-accent;
}