.color-test {
  display: inline-block;
  width: 10em;
  padding: 1em;
  margin: .2em;
  color: white;
  text-align: center;
  border: 1px solid #d4d4d4;
}
.color-test::before,
.color-test::after {
  display: block;
}
.color-test-gray {
  background-color: #c3c8c9;
}
.color-test-gray::before {
  content: "gray";
}
.color-test-gray::after {
  content: "#c3c8c9";
}
.color-test-gray-dark {
  background-color: #3e4a54;
}
.color-test-gray-dark::before {
  content: "gray-dark";
}
.color-test-gray-dark::after {
  content: "#3e4a54";
}
.color-test-gray-darker {
  background-color: #222;
}
.color-test-gray-darker::before {
  content: "gray-darker";
}
.color-test-gray-darker::after {
  content: "#222222";
}
.color-test-gray-text {
  background-color: #909497;
}
.color-test-gray-text::before {
  content: "gray-text";
}
.color-test-gray-text::after {
  content: "#909497";
}
.color-test-gray-mute {
  background-color: #b0b5bc;
}
.color-test-gray-mute::before {
  content: "gray-mute";
}
.color-test-gray-mute::after {
  content: "#b0b5bc";
}
.color-test-gray-line {
  color: black;
  background-color: #d4d4d4;
}
.color-test-gray-line::before {
  content: "gray-line";
}
.color-test-gray-line::after {
  content: "#d4d4d4";
}
.color-test-gray-light {
  color: black;
  background-color: #e5e7e9;
}
.color-test-gray-light::before {
  content: "gray-light";
}
.color-test-gray-light::after {
  content: "#e5e7e9";
}
.color-test-gray-divisor {
  color: black;
  background-color: #ededed;
}
.color-test-gray-divisor::before {
  content: "gray-divisor";
}
.color-test-gray-divisor::after {
  content: "#ededed";
}
.color-test-gray-bg {
  color: black;
  background-color: #fcfcfc;
}
.color-test-gray-bg::before {
  content: "gray-bg";
}
.color-test-gray-bg::after {
  content: "#fcfcfc";
}
.color-test-gray-icon {
  color: black;
  background-color: #b0b5bc;
}
.color-test-gray-icon::before {
  content: "gray-icon";
}
.color-test-gray-icon::after {
  content: "#b0b5bc";
}
.color-test-gray-lighter {
  color: black;
  background-color: #fcfcfc;
}
.color-test-gray-lighter::before {
  content: "gray-lighter";
}
.color-test-gray-lighter::after {
  content: "#fcfcfc";
}
.color-test-brand-primary {
  background-color: #00d0be;
}
.color-test-brand-primary::before {
  content: "brand-primary";
}
.color-test-brand-primary::after {
  content: "#00d0be";
}
.color-test-brand-secondary {
  background-color: #797d7f;
}
.color-test-brand-secondary::before {
  content: "brand-secondary";
}
.color-test-brand-secondary::after {
  content: "#797d7f";
}
.color-test-brand-success {
  background-color: #97c60b;
}
.color-test-brand-success::before {
  content: "brand-success";
}
.color-test-brand-success::after {
  content: "#97c60b";
}
.color-test-brand-info {
  background-color: #00d0be;
}
.color-test-brand-info::before {
  content: "brand-info";
}
.color-test-brand-info::after {
  content: "#00d0be";
}
.color-test-brand-warning {
  background-color: #fc9d21;
}
.color-test-brand-warning::before {
  content: "brand-warning";
}
.color-test-brand-warning::after {
  content: "#fc9d21";
}
.color-test-brand-danger {
  background-color: #ff2e52;
}
.color-test-brand-danger::before {
  content: "brand-danger";
}
.color-test-brand-danger::after {
  content: "#ff2e52";
}
/*# sourceMappingURL=test-page.css.map */