/**
 * CSS Compiled on: 2023-07-14 14:24:19 -07:00
 * ============================================================================== *
 */
/****************************************/
/* Global Variables Set: variables.scss */
/****************************************/
/****************************************/
/*    Mixins Accessible: mixins.scss    */
/****************************************/
/****************************************/
/*    Class Library: class-lib.scss     */
/****************************************/
/* Typography Classes */
/**********************/
pre code, .color-chart > div .swatch {
  font-size: 0.8333333333em;
  line-height: 1.351;
}

.api-feed article h2, .main-content .dev-tease h2 {
  font-size: 1.2em;
  line-height: 1.251;
}

.api-feed article a {
  font-family: "Texta-Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.primary-text {
  color: #072e56;
  color: var(--primary-text, #072e56);
}

.accent-text {
  color: #614113;
  color: var(--accent-text, #614113);
}

.secondary-text {
  color: #56072e;
  color: var(--secondary-text, #56072e);
}

.tertiary-text {
  color: #2e5607;
  color: var(--tertiary-text, #2e5607);
}

.quarternary-text {
  color: #200903;
  color: var(--quarternary-text, #200903);
}

.info-text {
  color: #0f3144;
  color: var(--info-text, #0f3144);
}

.warning-text {
  color: #4f4319;
  color: var(--warning-text, #4f4319);
}

.danger-text {
  color: #430f0a;
  color: var(--danger-text, #430f0a);
}

.success-text {
  color: #2a4232;
  color: var(--success-text, #2a4232);
}

.hardware {
  background-color: #e1e1e1;
  background-color: var(--hardware-bg, #e1e1e1);
  color: #1a1a1a;
  color: var(--hardware-text, #1a1a1a);
}

.highlight {
  background-color: #fff;
  background-color: var(--highlight-bg, #fff);
  color: #242424;
  color: var(--highlight-text, #242424);
}

.inverse {
  background-color: #1a1a1a;
  background-color: var(--inverse-bg, #1a1a1a);
  color: #f9f9f9;
  color: var(--inverse-text, #f9f9f9);
}

.api-feed article a {
  color: #0a3f75;
  color: var(--link-text, #0a3f75);
  text-decoration: underline;
}
.api-feed article a:focus, .api-feed article a:hover {
  color: #0d5094;
  color: var(--link-text-hover, #0d5094);
  text-decoration: none;
}
.api-feed article a:focus {
  outline: 3px dotted #0d5094;
}

.test-comp-y, .test-comp-x, .color-chart > div .swatch {
  border: 1px solid var(--comp-border, rgba(0, 0, 0, 0.17));
  border-radius: 4px;
  margin: 0.75rem 0;
  padding: calc(0.75rem - 1px) 15px;
}

.color-chart > div .swatch {
  border-radius: 3px;
  padding: calc(0.375rem - 1px) 15px;
}

.test-comp-x {
  background-color: #0e58a4;
  background-color: var(--primary-bg, #0e58a4);
  color: #fff;
  color: var(--primary-solidtext, #fff);
}

.test-comp-y {
  background-color: #dce9f6;
  background-color: var(--primary-bglt, #dce9f6);
  border-color: #0e58a4;
  border-color: var(--primary-border, #0e58a4);
  color: #072e56;
  color: var(--primary-text, #072e56);
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

.spanner {
  margin-left: -15px;
  margin-right: -15px;
  padding-right: 15px;
  padding-left: 15px;
}
@media only screen and (min-width: 992px) {
  .spanner {
    margin-left: -30px;
    padding-left: 30px;
  }
}

.grid-underlay {
  background: url("../img/devbg_12c_full.png") center -1px repeat-y;
  background-size: 100% 1.5rem;
}
.grid-underlay .main-content {
  background-color: transparent;
}

@media only screen and (max-width: 559px) {
  .grid-underlay {
    background: url("../img/devbg_type_white.png") center -1px repeat-y;
    background-size: 100% 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .grid-underlay {
    background-color: #FFFFBF;
    background-size: 1200px 1.5rem;
  }
}
@media only print {
  .grid-underlay {
    -webkit-print-color-adjust: exact;
    background-color: #FFFFBF;
    background-size: 8in 1.5rem;
  }
}
.main-content .dev-tease p.lead {
  font-size: 1em;
  line-height: 1.501;
}

.main-content .dev-tease h2 {
  padding: 0.375rem 0;
}
.main-content .dev-tease h2 a {
  color: var(--link-text, #0a3f75);
  text-decoration: underline;
}
.main-content .dev-tease h2 a:hover {
  color: var(--link-text-hover, #0d5094);
}

.sf-dump {
  z-index: 30;
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50vw;
}

.hover-link {
  color: var(--link-text-hover, #0d5094) !important;
  background-color: var(--link-bg-hover, #fafad2);
}

.active-link {
  color: var(--link-text-active, #ce3e86) !important;
}

.safe-body {
  color: var(--gray-safe, var(--gray-safe, #6b6b6b));
}

body.retired #site-navigation .gnmi_development,
body.retired #site-navigation #gnmi_rbe,
body.retired #site-navigation .gnmi_purchase {
  display: none !important;
}

body.active #site-navigation .gnmi_development,
body.active #site-navigation .gnmi_pmts,
body.active #site-navigation .gnmi_taxes {
  display: none !important;
}

#devDropdown + ul > li > a {
  align-items: center;
}
#devDropdown + ul > li > a *:first-child {
  flex-basis: 1.5em;
}

.color-chart > div {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  margin: 0 -15px 0.75rem;
}
.color-chart > div h2 {
  flex: 0 0 100%;
  padding-left: 15px;
  padding-bottom: calc(0.375rem - 1px);
  border-bottom: 1px solid var(--comp-border, rgba(0, 0, 0, 0.17));
  margin-bottom: 0.75rem;
}
.color-chart > div .swatch {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border-color: rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}
.color-chart > div .swatch:before {
  font-size: 1.2rem;
  margin-right: 0 !important;
}
.color-chart > div .color {
  flex-basis: 80px;
}
.color-chart > div.shading .color:nth-child(2) .swatch {
  background-color: #f9f9f9;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#f9f9f9";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(3) .swatch {
  background-color: #ededed;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#ededed";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(4) .swatch {
  background-color: #e1e1e1;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#e1e1e1";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(5) .swatch {
  background-color: #d4d4d4;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#d4d4d4";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(6) .swatch {
  background-color: #c8c8c8;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#c8c8c8";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(7) .swatch {
  background-color: #bcbcbc;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#bcbcbc";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(8) .swatch {
  background-color: #b0b0b0;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#b0b0b0";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(9) .swatch {
  background-color: #a4a4a4;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#a4a4a4";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(10) .swatch {
  background-color: #989898;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#989898";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(11) .swatch {
  background-color: #8c8c8c;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#8c8c8c";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(12) .swatch {
  background-color: gray;
  color: #000;
  position: relative;
}
.color-chart > div.shading .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "gray";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(13) .swatch {
  background-color: #767676;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#767676";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(14) .swatch {
  background-color: #6c6c6c;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#6c6c6c";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(15) .swatch {
  background-color: #616161;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#616161";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(16) .swatch {
  background-color: #575757;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#575757";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(17) .swatch {
  background-color: #4d4d4d;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#4d4d4d";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(18) .swatch {
  background-color: #434343;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#434343";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(19) .swatch {
  background-color: #383838;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#383838";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(20) .swatch {
  background-color: #2e2e2e;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#2e2e2e";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(21) .swatch {
  background-color: #242424;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#242424";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.shading .color:nth-child(22) .swatch {
  background-color: #1a1a1a;
  color: #fff;
  position: relative;
}
.color-chart > div.shading .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#1a1a1a";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(2) .swatch {
  background-color: #f3f8fc;
  color: #000;
  position: relative;
}
.color-chart > div.primary .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#f3f8fc";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(3) .swatch {
  background-color: #dce9f6;
  color: #000;
  position: relative;
}
.color-chart > div.primary .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#dce9f6";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(4) .swatch {
  background-color: #c6dbf1;
  color: #000;
  position: relative;
}
.color-chart > div.primary .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#c6dbf1";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(5) .swatch {
  background-color: #afcdeb;
  color: #000;
  position: relative;
}
.color-chart > div.primary .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#afcdeb";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(6) .swatch {
  background-color: #99bfe5;
  color: #000;
  position: relative;
}
.color-chart > div.primary .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#99bfe5";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(7) .swatch {
  background-color: #82b0e0;
  color: #000;
  position: relative;
}
.color-chart > div.primary .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#82b0e0";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(8) .swatch {
  background-color: #6ba2da;
  color: #000;
  position: relative;
}
.color-chart > div.primary .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#6ba2da";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(9) .swatch {
  background-color: #5594d4;
  color: #000;
  position: relative;
}
.color-chart > div.primary .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#5594d4";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(10) .swatch {
  background-color: #3e86ce;
  color: #000;
  position: relative;
}
.color-chart > div.primary .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#3e86ce";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(11) .swatch {
  background-color: #2877c9;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#2877c9";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(12) .swatch {
  background-color: #1169c3;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "#1169c3";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(13) .swatch {
  background-color: #1061b3;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#1061b3";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(14) .swatch {
  background-color: #0e58a4;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#0e58a4";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(15) .swatch {
  background-color: #0d5094;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#0d5094";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(16) .swatch {
  background-color: #0c4785;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#0c4785";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(17) .swatch {
  background-color: #0a3f75;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#0a3f75";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(18) .swatch {
  background-color: #093765;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#093765";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(19) .swatch {
  background-color: #072e56;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#072e56";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(20) .swatch {
  background-color: #062646;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#062646";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(21) .swatch {
  background-color: #051d37;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#051d37";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(22) .swatch {
  background-color: #031527;
  color: #fff;
  position: relative;
}
.color-chart > div.primary .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#031527";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.primary .color:nth-child(12) .swatch {
  border: 3px solid rgba(0, 0, 0, 0.25);
}
.color-chart > div.primary-layers {
  display: none;
}
.color-chart > div.primary-layers .swatch {
  background-color: #1169c3;
  color: #fff;
}
.color-chart > div.primary-layers .color:nth-child(7) .swatch {
  border: 3px solid rgba(0, 0, 0, 0.75);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.475) 0%, rgba(255, 255, 255, 0.475) 100%);
}
.color-chart > div.primary-layers .color:nth-child(17) .swatch {
  border: 3px solid rgba(0, 0, 0, 0.75);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.405) 0%, rgba(0, 0, 0, 0.405) 100%);
}
.color-chart > div.accent .color:nth-child(2) .swatch {
  background-color: #fdfaf4;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#fdfaf4";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(3) .swatch {
  background-color: #faefe0;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#faefe0";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(4) .swatch {
  background-color: #f7e5cc;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#f7e5cc";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(5) .swatch {
  background-color: #f4dbb8;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#f4dbb8";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(6) .swatch {
  background-color: #f0d1a4;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#f0d1a4";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(7) .swatch {
  background-color: #edc790;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#edc790";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(8) .swatch {
  background-color: #eabd7c;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#eabd7c";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(9) .swatch {
  background-color: #e7b267;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#e7b267";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(10) .swatch {
  background-color: #e3a853;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#e3a853";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(11) .swatch {
  background-color: #e09e3f;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#e09e3f";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(12) .swatch {
  background-color: #dd942b;
  color: #000;
  position: relative;
}
.color-chart > div.accent .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "#dd942b";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(13) .swatch {
  background-color: #cb8828;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#cb8828";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(14) .swatch {
  background-color: #ba7c24;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#ba7c24";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(15) .swatch {
  background-color: #a87021;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#a87021";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(16) .swatch {
  background-color: #96651d;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#96651d";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(17) .swatch {
  background-color: #85591a;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#85591a";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(18) .swatch {
  background-color: #734d16;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#734d16";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(19) .swatch {
  background-color: #614113;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#614113";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(20) .swatch {
  background-color: #50350f;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#50350f";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(21) .swatch {
  background-color: #3e290c;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#3e290c";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.accent .color:nth-child(22) .swatch {
  background-color: #2c1e09;
  color: #fff;
  position: relative;
}
.color-chart > div.accent .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#2c1e09";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(2) .swatch {
  background-color: #fcf3f8;
  color: #000;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#fcf3f8";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(3) .swatch {
  background-color: #f6dce9;
  color: #000;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#f6dce9";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(4) .swatch {
  background-color: #f1c6db;
  color: #000;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#f1c6db";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(5) .swatch {
  background-color: #ebafcd;
  color: #000;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#ebafcd";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(6) .swatch {
  background-color: #e599bf;
  color: #000;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#e599bf";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(7) .swatch {
  background-color: #e082b0;
  color: #000;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#e082b0";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(8) .swatch {
  background-color: #da6ba2;
  color: #000;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#da6ba2";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(9) .swatch {
  background-color: #d45594;
  color: #000;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#d45594";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(10) .swatch {
  background-color: #ce3e86;
  color: #000;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#ce3e86";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(11) .swatch {
  background-color: #c92877;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#c92877";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(12) .swatch {
  background-color: #c31169;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "#c31169";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(13) .swatch {
  background-color: #b31061;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#b31061";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(14) .swatch {
  background-color: #a40e58;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#a40e58";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(15) .swatch {
  background-color: #940d50;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#940d50";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(16) .swatch {
  background-color: #850c47;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#850c47";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(17) .swatch {
  background-color: #750a3f;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#750a3f";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(18) .swatch {
  background-color: #650937;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#650937";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(19) .swatch {
  background-color: #56072e;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#56072e";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(20) .swatch {
  background-color: #460626;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#460626";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(21) .swatch {
  background-color: #37051d;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#37051d";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.secondary .color:nth-child(22) .swatch {
  background-color: #270315;
  color: #fff;
  position: relative;
}
.color-chart > div.secondary .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#270315";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(2) .swatch {
  background-color: #f8fcf3;
  color: #000;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#f8fcf3";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(3) .swatch {
  background-color: #e9f6dc;
  color: #000;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#e9f6dc";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(4) .swatch {
  background-color: #dbf1c6;
  color: #000;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#dbf1c6";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(5) .swatch {
  background-color: #cdebaf;
  color: #000;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#cdebaf";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(6) .swatch {
  background-color: #bfe599;
  color: #000;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#bfe599";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(7) .swatch {
  background-color: #b0e082;
  color: #000;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#b0e082";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(8) .swatch {
  background-color: #a2da6b;
  color: #000;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#a2da6b";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(9) .swatch {
  background-color: #94d455;
  color: #000;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#94d455";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(10) .swatch {
  background-color: #86ce3e;
  color: #000;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#86ce3e";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(11) .swatch {
  background-color: #77c928;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#77c928";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(12) .swatch {
  background-color: #69c311;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "#69c311";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(13) .swatch {
  background-color: #61b310;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#61b310";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(14) .swatch {
  background-color: #58a40e;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#58a40e";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(15) .swatch {
  background-color: #50940d;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#50940d";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(16) .swatch {
  background-color: #47850c;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#47850c";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(17) .swatch {
  background-color: #3f750a;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#3f750a";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(18) .swatch {
  background-color: #376509;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#376509";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(19) .swatch {
  background-color: #2e5607;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#2e5607";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(20) .swatch {
  background-color: #264606;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#264606";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(21) .swatch {
  background-color: #1d3705;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#1d3705";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.tertiary .color:nth-child(22) .swatch {
  background-color: #152703;
  color: #fff;
  position: relative;
}
.color-chart > div.tertiary .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#152703";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(2) .swatch {
  background-color: #f6f3f3;
  color: #000;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#f6f3f3";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(3) .swatch {
  background-color: #e5dddb;
  color: #000;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#e5dddb";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(4) .swatch {
  background-color: #d3c7c3;
  color: #000;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#d3c7c3";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(5) .swatch {
  background-color: #c2b1ac;
  color: #000;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#c2b1ac";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(6) .swatch {
  background-color: #b19a94;
  color: #000;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#b19a94";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(7) .swatch {
  background-color: #9f847c;
  color: #000;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#9f847c";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(8) .swatch {
  background-color: #8e6e65;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#8e6e65";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(9) .swatch {
  background-color: #7d584d;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#7d584d";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(10) .swatch {
  background-color: #6c4135;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#6c4135";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(11) .swatch {
  background-color: #5a2b1e;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#5a2b1e";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(12) .swatch {
  background-color: #491506;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "#491506";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(13) .swatch {
  background-color: #431306;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#431306";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(14) .swatch {
  background-color: #3d1205;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#3d1205";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(15) .swatch {
  background-color: #371005;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#371005";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(16) .swatch {
  background-color: #320e04;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#320e04";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(17) .swatch {
  background-color: #2c0d04;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#2c0d04";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(18) .swatch {
  background-color: #260b03;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#260b03";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(19) .swatch {
  background-color: #200903;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#200903";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(20) .swatch {
  background-color: #1a0802;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#1a0802";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(21) .swatch {
  background-color: #140602;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#140602";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.quarternary .color:nth-child(22) .swatch {
  background-color: #0f0401;
  color: #fff;
  position: relative;
}
.color-chart > div.quarternary .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#0f0401";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(2) .swatch {
  background-color: #f4f8fa;
  color: #000;
  position: relative;
}
.color-chart > div.info .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#f4f8fa";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(3) .swatch {
  background-color: #dfeaf1;
  color: #000;
  position: relative;
}
.color-chart > div.info .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#dfeaf1";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(4) .swatch {
  background-color: #cadde7;
  color: #000;
  position: relative;
}
.color-chart > div.info .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#cadde7";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(5) .swatch {
  background-color: #b5cfde;
  color: #000;
  position: relative;
}
.color-chart > div.info .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#b5cfde";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(6) .swatch {
  background-color: #a0c2d4;
  color: #000;
  position: relative;
}
.color-chart > div.info .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#a0c2d4";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(7) .swatch {
  background-color: #8ab4cb;
  color: #000;
  position: relative;
}
.color-chart > div.info .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#8ab4cb";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(8) .swatch {
  background-color: #75a6c1;
  color: #000;
  position: relative;
}
.color-chart > div.info .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#75a6c1";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(9) .swatch {
  background-color: #6099b8;
  color: #000;
  position: relative;
}
.color-chart > div.info .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#6099b8";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(10) .swatch {
  background-color: #4b8bae;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#4b8bae";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(11) .swatch {
  background-color: #367ea5;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#367ea5";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(12) .swatch {
  background-color: #21709b;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "#21709b";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(13) .swatch {
  background-color: #1e678f;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#1e678f";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(14) .swatch {
  background-color: #1c5e82;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#1c5e82";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(15) .swatch {
  background-color: #195576;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#195576";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(16) .swatch {
  background-color: #164c69;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#164c69";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(17) .swatch {
  background-color: #14435d;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#14435d";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(18) .swatch {
  background-color: #113a51;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#113a51";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(19) .swatch {
  background-color: #0f3144;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#0f3144";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(20) .swatch {
  background-color: #0c2838;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#0c2838";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(21) .swatch {
  background-color: #091f2b;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#091f2b";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(22) .swatch {
  background-color: #07161f;
  color: #fff;
  position: relative;
}
.color-chart > div.info .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#07161f";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.info .color:nth-child(12) .swatch::before {
  font-family: "Font Awesome 5 Free";
  content: "\f05a";
  margin-right: 0.35em;
  font-weight: 700;
}
.color-chart > div.warning .color:nth-child(2) .swatch {
  background-color: #fbfaf5;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#fbfaf5";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(3) .swatch {
  background-color: #f4f0e2;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#f4f0e2";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(4) .swatch {
  background-color: #ede7cf;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#ede7cf";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(5) .swatch {
  background-color: #e6ddbd;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#e6ddbd";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(6) .swatch {
  background-color: #ded3aa;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#ded3aa";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(7) .swatch {
  background-color: #d7c997;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#d7c997";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(8) .swatch {
  background-color: #d0c084;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#d0c084";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(9) .swatch {
  background-color: #c9b671;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#c9b671";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(10) .swatch {
  background-color: #c1ac5f;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#c1ac5f";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(11) .swatch {
  background-color: #baa34c;
  color: #000;
  position: relative;
}
.color-chart > div.warning .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#baa34c";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(12) .swatch {
  background-color: #b39939;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "#b39939";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(13) .swatch {
  background-color: #a58d34;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#a58d34";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(14) .swatch {
  background-color: #968130;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#968130";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(15) .swatch {
  background-color: #88742b;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#88742b";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(16) .swatch {
  background-color: #7a6827;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#7a6827";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(17) .swatch {
  background-color: #6b5c22;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#6b5c22";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(18) .swatch {
  background-color: #5d501e;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#5d501e";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(19) .swatch {
  background-color: #4f4319;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#4f4319";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(20) .swatch {
  background-color: #403715;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#403715";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(21) .swatch {
  background-color: #322b10;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#322b10";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(22) .swatch {
  background-color: #241f0b;
  color: #fff;
  position: relative;
}
.color-chart > div.warning .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#241f0b";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.warning .color:nth-child(12) .swatch::before {
  font-family: "Font Awesome 5 Free";
  content: "\f071";
  margin-right: 0.35em;
  font-weight: 700;
}
.color-chart > div.danger .color:nth-child(2) .swatch {
  background-color: #faf4f3;
  color: #000;
  position: relative;
}
.color-chart > div.danger .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#faf4f3";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(3) .swatch {
  background-color: #f0dfdd;
  color: #000;
  position: relative;
}
.color-chart > div.danger .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#f0dfdd";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(4) .swatch {
  background-color: #e6cac7;
  color: #000;
  position: relative;
}
.color-chart > div.danger .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#e6cac7";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(5) .swatch {
  background-color: #dcb5b1;
  color: #000;
  position: relative;
}
.color-chart > div.danger .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#dcb5b1";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(6) .swatch {
  background-color: #d3a09b;
  color: #000;
  position: relative;
}
.color-chart > div.danger .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#d3a09b";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(7) .swatch {
  background-color: #c98a85;
  color: #000;
  position: relative;
}
.color-chart > div.danger .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#c98a85";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(8) .swatch {
  background-color: #bf756f;
  color: #000;
  position: relative;
}
.color-chart > div.danger .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#bf756f";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(9) .swatch {
  background-color: #b56058;
  color: #000;
  position: relative;
}
.color-chart > div.danger .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#b56058";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(10) .swatch {
  background-color: #ac4b42;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#ac4b42";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(11) .swatch {
  background-color: #a2362c;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#a2362c";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(12) .swatch {
  background-color: #982116;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "#982116";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(13) .swatch {
  background-color: #8c1e14;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#8c1e14";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(14) .swatch {
  background-color: #801c12;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#801c12";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(15) .swatch {
  background-color: #741911;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#741911";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(16) .swatch {
  background-color: #67160f;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#67160f";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(17) .swatch {
  background-color: #5b140d;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#5b140d";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(18) .swatch {
  background-color: #4f110b;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#4f110b";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(19) .swatch {
  background-color: #430f0a;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#430f0a";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(20) .swatch {
  background-color: #370c08;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#370c08";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(21) .swatch {
  background-color: #2b0906;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#2b0906";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(22) .swatch {
  background-color: #1e0704;
  color: #fff;
  position: relative;
}
.color-chart > div.danger .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#1e0704";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.danger .color:nth-child(12) .swatch::before {
  font-family: "Font Awesome 5 Free";
  content: "\f06a";
  margin-right: 0.35em;
  font-weight: 700;
}
.color-chart > div.success .color:nth-child(2) .swatch {
  background-color: #f7faf8;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(2) .swatch::before {
  position: absolute;
  content: "#f7faf8";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(3) .swatch {
  background-color: #e8f0ea;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(3) .swatch::before {
  position: absolute;
  content: "#e8f0ea";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(4) .swatch {
  background-color: #d9e6dd;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(4) .swatch::before {
  position: absolute;
  content: "#d9e6dd";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(5) .swatch {
  background-color: #c9dbcf;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(5) .swatch::before {
  position: absolute;
  content: "#c9dbcf";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(6) .swatch {
  background-color: #bad1c2;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(6) .swatch::before {
  position: absolute;
  content: "#bad1c2";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(7) .swatch {
  background-color: #abc7b4;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(7) .swatch::before {
  position: absolute;
  content: "#abc7b4";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(8) .swatch {
  background-color: #9cbda7;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(8) .swatch::before {
  position: absolute;
  content: "#9cbda7";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(9) .swatch {
  background-color: #8db399;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(9) .swatch::before {
  position: absolute;
  content: "#8db399";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(10) .swatch {
  background-color: #7da98c;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(10) .swatch::before {
  position: absolute;
  content: "#7da98c";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(11) .swatch {
  background-color: #6e9f7e;
  color: #000;
  position: relative;
}
.color-chart > div.success .color:nth-child(11) .swatch::before {
  position: absolute;
  content: "#6e9f7e";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(12) .swatch {
  background-color: #5f9571;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(12) .swatch::before {
  position: absolute;
  content: "#5f9571";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(13) .swatch {
  background-color: #578968;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(13) .swatch::before {
  position: absolute;
  content: "#578968";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(14) .swatch {
  background-color: #507d5f;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(14) .swatch::before {
  position: absolute;
  content: "#507d5f";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(15) .swatch {
  background-color: #487156;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(15) .swatch::before {
  position: absolute;
  content: "#487156";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(16) .swatch {
  background-color: #41654d;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(16) .swatch::before {
  position: absolute;
  content: "#41654d";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(17) .swatch {
  background-color: #395944;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(17) .swatch::before {
  position: absolute;
  content: "#395944";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(18) .swatch {
  background-color: #314d3b;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(18) .swatch::before {
  position: absolute;
  content: "#314d3b";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(19) .swatch {
  background-color: #2a4232;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(19) .swatch::before {
  position: absolute;
  content: "#2a4232";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(20) .swatch {
  background-color: #223629;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(20) .swatch::before {
  position: absolute;
  content: "#223629";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(21) .swatch {
  background-color: #1b2a20;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(21) .swatch::before {
  position: absolute;
  content: "#1b2a20";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(22) .swatch {
  background-color: #131e17;
  color: #fff;
  position: relative;
}
.color-chart > div.success .color:nth-child(22) .swatch::before {
  position: absolute;
  content: "#131e17";
  color: #000;
  bottom: -1.5em;
  font-size: 14px;
}
.color-chart > div.success .color:nth-child(12) .swatch::before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  margin-right: 0.35em;
  font-weight: 700;
}

.hide-container {
  display: none;
}

.flexamples .reg-container > * {
  border: 1px solid #000;
  float: left;
  margin: 1.5rem 1%;
  text-align: center;
  width: 17%;
}
.flexamples .flex-container {
  display: flex;
  flex-direction: column;
}
.flexamples .flex-container > * {
  padding: 20px;
}
.flexamples .div_1 {
  background-color: #dce9f6;
}
.flexamples .div_2 {
  background-color: #faefe0;
}
.flexamples .div_3 {
  background-color: #f6dce9;
}
.flexamples .div_4 {
  background-color: #e9f6dc;
}
.flexamples .div_5 {
  background-color: #e8f0ea;
}

.g-head {
  background-color: #dce9f6;
  padding: 20px 10px;
}

.g-nav {
  background-color: #f4f0e2;
  padding: 20px 10px;
}

.g-main {
  background-color: #f6dce9;
  padding: 20px 10px;
}

.g-foot {
  background-color: #e9f6dc;
  padding: 20px 10px;
}

.grid-container, .grid-container_2 {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "ghd ghd" "main nav" "foot foot";
}
.grid-container .g-head, .grid-container_2 .g-head {
  grid-area: ghd;
}
.grid-container .g-nav, .grid-container_2 .g-nav {
  grid-area: nav;
}
.grid-container .g-main, .grid-container_2 .g-main {
  grid-area: main;
}
.grid-container .g-foot, .grid-container_2 .g-foot {
  grid-area: foot;
}
.grid-container_2 {
  grid-template-columns: max-content 3fr;
  grid-template-areas: "ghd ghd" "nav main " "foot foot";
}

.api-feed .views-row {
  margin-bottom: 2.25rem;
}
.api-feed article h2 {
  border-bottom: 1px solid var(--comp-border, rgba(0, 0, 0, 0.17));
  padding-bottom: calc(0.375rem - 1px);
  margin-bottom: 0.375rem;
  padding-bottom: 0;
}
.api-feed article a {
  text-decoration: none;
}
.api-feed article .article__lead {
  max-width: 35rem;
}

pre {
  background-color: #d4d4d4;
  padding: 0 8px;
}
.notepad .sidenote {
  margin-bottom: 1.5rem;
}

figure.inline-tile-icon {
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.5);
  float: left;
  margin-right: 30px;
  margin-bottom: 1.5rem;
  max-width: 80px;
}
/*# sourceMappingURL=maps/development-styles.css.map */