.color-swatches {
  display: flex;
  margin: 0 -5px;
}

.color-swatches .bd-purple {
  background-color: #563d7c;
}

.color-swatches .bd-purple-light {
  background-color: #cbbde2;
}

.color-swatches .bd-purple-lighter {
  background-color: #e5e1ea;
}

.color-swatches .bd-gray {
  background-color: #f9f9f9;
}

.color-swatch {
  width: 4rem;
  height: 4rem;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
  border-radius: 0.25rem;
}

@media (min-width: 768px) {
  .color-swatch {
    width: 6rem;
    height: 6rem;
  }
}
.swatch-blue {
  color: #fff;
  background-color: #0d6efd;
}

.swatch-indigo {
  color: #fff;
  background-color: #6610f2;
}

.swatch-purple {
  color: #fff;
  background-color: #6f42c1;
}

.swatch-pink {
  color: #fff;
  background-color: #d63384;
}

.swatch-red {
  color: #fff;
  background-color: #dc3545;
}

.swatch-orange {
  color: #212529;
  background-color: #fd7e14;
}

.swatch-yellow {
  color: #212529;
  background-color: #ffc107;
}

.swatch-green {
  color: #fff;
  background-color: #28a745;
}

.swatch-teal {
  color: #fff;
  background-color: #20c997;
}

.swatch-cyan {
  color: #fff;
  background-color: #17a2b8;
}

.swatch-white {
  color: #212529;
  background-color: #fff;
}

.swatch-gray {
  color: #fff;
  background-color: #6c757d;
}

.swatch-gray-dark {
  color: #fff;
  background-color: #343a40;
}

.swatch-100 {
  color: #212529;
  background-color: #f8f9fa;
}

.swatch-200 {
  color: #212529;
  background-color: #e9ecef;
}

.swatch-300 {
  color: #212529;
  background-color: #dee2e6;
}

.swatch-400 {
  color: #212529;
  background-color: #ced4da;
}

.swatch-500 {
  color: #212529;
  background-color: #adb5bd;
}

.swatch-600 {
  color: #fff;
  background-color: #6c757d;
}

.swatch-700 {
  color: #fff;
  background-color: #495057;
}

.swatch-800 {
  color: #fff;
  background-color: #343a40;
}

.swatch-900 {
  color: #fff;
  background-color: #212529;
}

.bd-blue-100 {
  color: #212529;
  background-color: #a8cbfe;
}

.bd-blue-200 {
  color: #212529;
  background-color: #81b4fe;
}

.bd-blue-300 {
  color: #fff;
  background-color: #5a9cfe;
}

.bd-blue-400 {
  color: #fff;
  background-color: #3485fd;
}

.bd-blue-500 {
  color: #fff;
  background-color: #0d6efd;
}

.bd-blue-600 {
  color: #fff;
  background-color: #0b5cd5;
}

.bd-blue-700 {
  color: #fff;
  background-color: #094bac;
}

.bd-blue-800 {
  color: #fff;
  background-color: #073984;
}

.bd-blue-900 {
  color: #fff;
  background-color: #05285b;
}

.bd-indigo-100 {
  color: #212529;
  background-color: #c8a9fa;
}

.bd-indigo-200 {
  color: #212529;
  background-color: #af83f8;
}

.bd-indigo-300 {
  color: #fff;
  background-color: #975cf6;
}

.bd-indigo-400 {
  color: #fff;
  background-color: #7e36f4;
}

.bd-indigo-500 {
  color: #fff;
  background-color: #6610f2;
}

.bd-indigo-600 {
  color: #fff;
  background-color: #560dcb;
}

.bd-indigo-700 {
  color: #fff;
  background-color: #450ba5;
}

.bd-indigo-800 {
  color: #fff;
  background-color: #35087e;
}

.bd-indigo-900 {
  color: #fff;
  background-color: #250657;
}

.bd-purple-100 {
  color: #212529;
  background-color: #cbbbe9;
}

.bd-purple-200 {
  color: #212529;
  background-color: #b49ddf;
}

.bd-purple-300 {
  color: #fff;
  background-color: #9d7ed5;
}

.bd-purple-400 {
  color: #fff;
  background-color: #8660cb;
}

.bd-purple-500 {
  color: #fff;
  background-color: #6f42c1;
}

.bd-purple-600 {
  color: #fff;
  background-color: #5d37a2;
}

.bd-purple-700 {
  color: #fff;
  background-color: #4b2d83;
}

.bd-purple-800 {
  color: #fff;
  background-color: #3a2264;
}

.bd-purple-900 {
  color: #fff;
  background-color: #281845;
}

.bd-pink-100 {
  color: #212529;
  background-color: #f0b6d3;
}

.bd-pink-200 {
  color: #212529;
  background-color: #ea95bf;
}

.bd-pink-300 {
  color: #212529;
  background-color: #e374ab;
}

.bd-pink-400 {
  color: #fff;
  background-color: #dd5498;
}

.bd-pink-500 {
  color: #fff;
  background-color: #d63384;
}

.bd-pink-600 {
  color: #fff;
  background-color: #b42b6f;
}

.bd-pink-700 {
  color: #fff;
  background-color: #92235a;
}

.bd-pink-800 {
  color: #fff;
  background-color: #6f1b45;
}

.bd-pink-900 {
  color: #fff;
  background-color: #4d1230;
}

.bd-red-100 {
  color: #212529;
  background-color: #f2b6bc;
}

.bd-red-200 {
  color: #212529;
  background-color: #ed969e;
}

.bd-red-300 {
  color: #212529;
  background-color: #e77681;
}

.bd-red-400 {
  color: #fff;
  background-color: #e25563;
}

.bd-red-500 {
  color: #fff;
  background-color: #dc3545;
}

.bd-red-600 {
  color: #fff;
  background-color: #b92d3a;
}

.bd-red-700 {
  color: #fff;
  background-color: #96242f;
}

.bd-red-800 {
  color: #fff;
  background-color: #721c24;
}

.bd-red-900 {
  color: #fff;
  background-color: #4f1319;
}

.bd-orange-100 {
  color: #212529;
  background-color: #fed1aa;
}

.bd-orange-200 {
  color: #212529;
  background-color: #febc85;
}

.bd-orange-300 {
  color: #212529;
  background-color: #fea75f;
}

.bd-orange-400 {
  color: #212529;
  background-color: #fd933a;
}

.bd-orange-500 {
  color: #212529;
  background-color: #fd7e14;
}

.bd-orange-600 {
  color: #fff;
  background-color: #d56a11;
}

.bd-orange-700 {
  color: #fff;
  background-color: #ac560e;
}

.bd-orange-800 {
  color: #fff;
  background-color: #84420a;
}

.bd-orange-900 {
  color: #fff;
  background-color: #5b2d07;
}

.bd-yellow-100 {
  color: #212529;
  background-color: #ffe9a6;
}

.bd-yellow-200 {
  color: #212529;
  background-color: #ffdf7e;
}

.bd-yellow-300 {
  color: #212529;
  background-color: #ffd556;
}

.bd-yellow-400 {
  color: #212529;
  background-color: #ffcb2f;
}

.bd-yellow-500 {
  color: #212529;
  background-color: #ffc107;
}

.bd-yellow-600 {
  color: #212529;
  background-color: #d6a206;
}

.bd-yellow-700 {
  color: #fff;
  background-color: #ad8305;
}

.bd-yellow-800 {
  color: #fff;
  background-color: #856404;
}

.bd-yellow-900 {
  color: #fff;
  background-color: #5c4503;
}

.bd-green-100 {
  color: #212529;
  background-color: #b2dfbc;
}

.bd-green-200 {
  color: #212529;
  background-color: #8fd19e;
}

.bd-green-300 {
  color: #212529;
  background-color: #6dc381;
}

.bd-green-400 {
  color: #fff;
  background-color: #4ab563;
}

.bd-green-500 {
  color: #fff;
  background-color: #28a745;
}

.bd-green-600 {
  color: #fff;
  background-color: #228c3a;
}

.bd-green-700 {
  color: #fff;
  background-color: #1b722f;
}

.bd-green-800 {
  color: #fff;
  background-color: #155724;
}

.bd-green-900 {
  color: #fff;
  background-color: #0e3c19;
}

.bd-teal-100 {
  color: #212529;
  background-color: #afecda;
}

.bd-teal-200 {
  color: #212529;
  background-color: #8be3c9;
}

.bd-teal-300 {
  color: #212529;
  background-color: #67dab8;
}

.bd-teal-400 {
  color: #212529;
  background-color: #44d2a8;
}

.bd-teal-500 {
  color: #fff;
  background-color: #20c997;
}

.bd-teal-600 {
  color: #fff;
  background-color: #1ba97f;
}

.bd-teal-700 {
  color: #fff;
  background-color: #168967;
}

.bd-teal-800 {
  color: #fff;
  background-color: #11694f;
}

.bd-teal-900 {
  color: #fff;
  background-color: #0c4836;
}

.bd-cyan-100 {
  color: #212529;
  background-color: #abdee5;
}

.bd-cyan-200 {
  color: #212529;
  background-color: #86cfda;
}

.bd-cyan-300 {
  color: #212529;
  background-color: #61c0cf;
}

.bd-cyan-400 {
  color: #fff;
  background-color: #3cb1c3;
}

.bd-cyan-500 {
  color: #fff;
  background-color: #17a2b8;
}

.bd-cyan-600 {
  color: #fff;
  background-color: #13889b;
}

.bd-cyan-700 {
  color: #fff;
  background-color: #106e7d;
}

.bd-cyan-800 {
  color: #fff;
  background-color: #0c5460;
}

.bd-cyan-900 {
  color: #fff;
  background-color: #083a42;
}

/**,*/
/**::before,*/
/**::after {*/
/*  box-sizing: border-box;*/
/*}*/

/*html {*/
/*  font-size: 14px;*/
/*}*/

/*body {*/
/*  padding: 2rem;*/
/*  margin: 0;*/
/*  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
/*  font-size: 1rem;*/
/*  font-weight: 400;*/
/*  line-height: 1.5;*/
/*  color: #212529;*/
/*  background-color: #fff;*/
/*}*/

/*.p-3 {*/
/*  padding: 1rem;*/
/*}*/

/*.font-monospace {*/
/*  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;*/
/*}*/

/*.d-block {*/
/*  display: block;*/
/*}*/

/*.row {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  width: 100%;*/
/*}*/

/*.col-md-4 {*/
/*  width: 50%;*/
/*}*/
/*@media (min-width: 768px) {*/
/*  .col-md-4 {*/
/*    width: 20%;*/
/*  }*/
/*}*/
/*@media (min-width: 992px) {*/
/*  .col-md-4 {*/
/*    width: 15%;*/
/*  }*/
/*}*/
/*@media (min-width: 1280px) {*/
/*  .col-md-4 {*/
/*    width: 10%;*/
/*  }*/
/*}*/

/*h1 {*/
/*  margin-top: 0;*/
/*  margin-bottom: 0;*/
/*}*/

/*p {*/
/*  margin-top: 0;*/
/*  margin-bottom: 1.5rem;*/
/*}*/