@trumpetstech/bootwind/integrations/parcel/dist/index.0eefb65b.css

Utility and component-centric design system based on Bootstrap for fast, responsive UI development.

.fade {
  transition: opacity .2s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  transition: height .2s;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width .35s;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}

.bg-soft-primary {
  background-color: #dedffd !important;
}

.bg-soft-secondary {
  background-color: #f5f7f9 !important;
}

.bg-soft-tertiary {
  background-color: #ffddeb !important;
}

.bg-soft-success {
  background-color: #ccf5e7 !important;
}

.bg-soft-info {
  background-color: #ccf6ff !important;
}

.bg-soft-warning {
  background-color: #ffe8cc !important;
}

.bg-soft-danger {
  background-color: #ffd6e0 !important;
}

.bg-soft-white, .bg-soft-light {
  background-color: #fff !important;
}

.bg-soft-dark {
  background-color: #d0d1d5 !important;
}

.bg-none {
  background-image: none !important;
}

.bg-between {
  background-position: 0, 100%;
  background-repeat: no-repeat;
  background-size: auto 90%;
}

@media (min-width: 576px) {
  .bg-sm-none {
    background-image: none !important;
  }

  .bg-sm-between {
    background-position: 0, 100%;
    background-repeat: no-repeat;
    background-size: auto 90%;
  }
}

@media (min-width: 768px) {
  .bg-md-none {
    background-image: none !important;
  }

  .bg-md-between {
    background-position: 0, 100%;
    background-repeat: no-repeat;
    background-size: auto 90%;
  }
}

@media (min-width: 992px) {
  .bg-lg-none {
    background-image: none !important;
  }

  .bg-lg-between {
    background-position: 0, 100%;
    background-repeat: no-repeat;
    background-size: auto 90%;
  }
}

@media (min-width: 1200px) {
  .bg-xl-none {
    background-image: none !important;
  }

  .bg-xl-between {
    background-position: 0, 100%;
    background-repeat: no-repeat;
    background-size: auto 90%;
  }
}

@media (min-width: 1400px) {
  .bg-xxl-none {
    background-image: none !important;
  }

  .bg-xxl-between {
    background-position: 0, 100%;
    background-repeat: no-repeat;
    background-size: auto 90%;
  }
}

.gradient-top {
  background-image: linear-gradient(to top, var(--x-gradient)) !important;
}

.gradient-top-right {
  background-image: linear-gradient(to top right, var(--x-gradient)) !important;
}

.gradient-right {
  background-image: linear-gradient(to right, var(--x-gradient)) !important;
}

.gradient-bottom-right {
  background-image: linear-gradient(to bottom right, var(--x-gradient)) !important;
}

.gradient-bottom {
  background-image: linear-gradient(to bottom, var(--x-gradient)) !important;
}

.gradient-bottom-left {
  background-image: linear-gradient(to bottom left, var(--x-gradient)) !important;
}

.gradient-left {
  background-image: linear-gradient(to left, var(--x-gradient)) !important;
}

.gradient-top-left {
  background-image: linear-gradient(to top left, var(--x-gradient)) !important;
}

.start-white, .start-white-hover:hover {
  --x-start-color: var(--x-white);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-black, .start-black-hover:hover {
  --x-start-color: var(--x-black);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-50, .start-gray-50-hover:hover {
  --x-start-color: var(--x-gray-50);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-100, .start-gray-100-hover:hover {
  --x-start-color: var(--x-gray-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-200, .start-gray-200-hover:hover {
  --x-start-color: var(--x-gray-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-300, .start-gray-300-hover:hover {
  --x-start-color: var(--x-gray-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-400, .start-gray-400-hover:hover {
  --x-start-color: var(--x-gray-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-500, .start-gray-500-hover:hover {
  --x-start-color: var(--x-gray-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-600, .start-gray-600-hover:hover {
  --x-start-color: var(--x-gray-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-700, .start-gray-700-hover:hover {
  --x-start-color: var(--x-gray-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-800, .start-gray-800-hover:hover {
  --x-start-color: var(--x-gray-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-gray-900, .start-gray-900-hover:hover {
  --x-start-color: var(--x-gray-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-blue-100, .start-blue-100-hover:hover {
  --x-start-color: var(--x-blue-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-blue-200, .start-blue-200-hover:hover {
  --x-start-color: var(--x-blue-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-blue-300, .start-blue-300-hover:hover {
  --x-start-color: var(--x-blue-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-blue-400, .start-blue-400-hover:hover {
  --x-start-color: var(--x-blue-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-blue-500, .start-blue-500-hover:hover {
  --x-start-color: var(--x-blue-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-blue-600, .start-blue-600-hover:hover {
  --x-start-color: var(--x-blue-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-blue-700, .start-blue-700-hover:hover {
  --x-start-color: var(--x-blue-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-blue-800, .start-blue-800-hover:hover {
  --x-start-color: var(--x-blue-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-blue-900, .start-blue-900-hover:hover {
  --x-start-color: var(--x-blue-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-indigo-100, .start-indigo-100-hover:hover {
  --x-start-color: var(--x-indigo-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-indigo-200, .start-indigo-200-hover:hover {
  --x-start-color: var(--x-indigo-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-indigo-300, .start-indigo-300-hover:hover {
  --x-start-color: var(--x-indigo-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-indigo-400, .start-indigo-400-hover:hover {
  --x-start-color: var(--x-indigo-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-indigo-500, .start-indigo-500-hover:hover {
  --x-start-color: var(--x-indigo-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-indigo-600, .start-indigo-600-hover:hover {
  --x-start-color: var(--x-indigo-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-indigo-700, .start-indigo-700-hover:hover {
  --x-start-color: var(--x-indigo-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-indigo-800, .start-indigo-800-hover:hover {
  --x-start-color: var(--x-indigo-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-indigo-900, .start-indigo-900-hover:hover {
  --x-start-color: var(--x-indigo-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-purple-100, .start-purple-100-hover:hover {
  --x-start-color: var(--x-purple-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-purple-200, .start-purple-200-hover:hover {
  --x-start-color: var(--x-purple-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-purple-300, .start-purple-300-hover:hover {
  --x-start-color: var(--x-purple-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-purple-400, .start-purple-400-hover:hover {
  --x-start-color: var(--x-purple-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-purple-500, .start-purple-500-hover:hover {
  --x-start-color: var(--x-purple-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-purple-600, .start-purple-600-hover:hover {
  --x-start-color: var(--x-purple-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-purple-700, .start-purple-700-hover:hover {
  --x-start-color: var(--x-purple-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-purple-800, .start-purple-800-hover:hover {
  --x-start-color: var(--x-purple-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-purple-900, .start-purple-900-hover:hover {
  --x-start-color: var(--x-purple-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-pink-100, .start-pink-100-hover:hover {
  --x-start-color: var(--x-pink-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-pink-200, .start-pink-200-hover:hover {
  --x-start-color: var(--x-pink-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-pink-300, .start-pink-300-hover:hover {
  --x-start-color: var(--x-pink-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-pink-400, .start-pink-400-hover:hover {
  --x-start-color: var(--x-pink-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-pink-500, .start-pink-500-hover:hover {
  --x-start-color: var(--x-pink-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-pink-600, .start-pink-600-hover:hover {
  --x-start-color: var(--x-pink-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-pink-700, .start-pink-700-hover:hover {
  --x-start-color: var(--x-pink-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-pink-800, .start-pink-800-hover:hover {
  --x-start-color: var(--x-pink-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-pink-900, .start-pink-900-hover:hover {
  --x-start-color: var(--x-pink-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-magenta-100, .start-magenta-100-hover:hover {
  --x-start-color: var(--x-magenta-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-magenta-200, .start-magenta-200-hover:hover {
  --x-start-color: var(--x-magenta-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-magenta-300, .start-magenta-300-hover:hover {
  --x-start-color: var(--x-magenta-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-magenta-400, .start-magenta-400-hover:hover {
  --x-start-color: var(--x-magenta-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-magenta-500, .start-magenta-500-hover:hover {
  --x-start-color: var(--x-magenta-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-magenta-600, .start-magenta-600-hover:hover {
  --x-start-color: var(--x-magenta-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-magenta-700, .start-magenta-700-hover:hover {
  --x-start-color: var(--x-magenta-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-magenta-800, .start-magenta-800-hover:hover {
  --x-start-color: var(--x-magenta-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-magenta-900, .start-magenta-900-hover:hover {
  --x-start-color: var(--x-magenta-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-red-100, .start-red-100-hover:hover {
  --x-start-color: var(--x-red-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-red-200, .start-red-200-hover:hover {
  --x-start-color: var(--x-red-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-red-300, .start-red-300-hover:hover {
  --x-start-color: var(--x-red-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-red-400, .start-red-400-hover:hover {
  --x-start-color: var(--x-red-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-red-500, .start-red-500-hover:hover {
  --x-start-color: var(--x-red-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-red-600, .start-red-600-hover:hover {
  --x-start-color: var(--x-red-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-red-700, .start-red-700-hover:hover {
  --x-start-color: var(--x-red-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-red-800, .start-red-800-hover:hover {
  --x-start-color: var(--x-red-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-red-900, .start-red-900-hover:hover {
  --x-start-color: var(--x-red-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-orange-100, .start-orange-100-hover:hover {
  --x-start-color: var(--x-orange-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-orange-200, .start-orange-200-hover:hover {
  --x-start-color: var(--x-orange-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-orange-300, .start-orange-300-hover:hover {
  --x-start-color: var(--x-orange-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-orange-400, .start-orange-400-hover:hover {
  --x-start-color: var(--x-orange-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-orange-500, .start-orange-500-hover:hover {
  --x-start-color: var(--x-orange-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-orange-600, .start-orange-600-hover:hover {
  --x-start-color: var(--x-orange-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-orange-700, .start-orange-700-hover:hover {
  --x-start-color: var(--x-orange-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-orange-800, .start-orange-800-hover:hover {
  --x-start-color: var(--x-orange-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-orange-900, .start-orange-900-hover:hover {
  --x-start-color: var(--x-orange-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-yellow-100, .start-yellow-100-hover:hover {
  --x-start-color: var(--x-yellow-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-yellow-200, .start-yellow-200-hover:hover {
  --x-start-color: var(--x-yellow-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-yellow-300, .start-yellow-300-hover:hover {
  --x-start-color: var(--x-yellow-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-yellow-400, .start-yellow-400-hover:hover {
  --x-start-color: var(--x-yellow-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-yellow-500, .start-yellow-500-hover:hover {
  --x-start-color: var(--x-yellow-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-yellow-600, .start-yellow-600-hover:hover {
  --x-start-color: var(--x-yellow-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-yellow-700, .start-yellow-700-hover:hover {
  --x-start-color: var(--x-yellow-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-yellow-800, .start-yellow-800-hover:hover {
  --x-start-color: var(--x-yellow-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-yellow-900, .start-yellow-900-hover:hover {
  --x-start-color: var(--x-yellow-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-green-100, .start-green-100-hover:hover {
  --x-start-color: var(--x-green-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-green-200, .start-green-200-hover:hover {
  --x-start-color: var(--x-green-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-green-300, .start-green-300-hover:hover {
  --x-start-color: var(--x-green-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-green-400, .start-green-400-hover:hover {
  --x-start-color: var(--x-green-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-green-500, .start-green-500-hover:hover {
  --x-start-color: var(--x-green-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-green-600, .start-green-600-hover:hover {
  --x-start-color: var(--x-green-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-green-700, .start-green-700-hover:hover {
  --x-start-color: var(--x-green-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-green-800, .start-green-800-hover:hover {
  --x-start-color: var(--x-green-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-green-900, .start-green-900-hover:hover {
  --x-start-color: var(--x-green-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-teal-100, .start-teal-100-hover:hover {
  --x-start-color: var(--x-teal-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-teal-200, .start-teal-200-hover:hover {
  --x-start-color: var(--x-teal-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-teal-300, .start-teal-300-hover:hover {
  --x-start-color: var(--x-teal-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-teal-400, .start-teal-400-hover:hover {
  --x-start-color: var(--x-teal-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-teal-500, .start-teal-500-hover:hover {
  --x-start-color: var(--x-teal-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-teal-600, .start-teal-600-hover:hover {
  --x-start-color: var(--x-teal-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-teal-700, .start-teal-700-hover:hover {
  --x-start-color: var(--x-teal-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-teal-800, .start-teal-800-hover:hover {
  --x-start-color: var(--x-teal-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-teal-900, .start-teal-900-hover:hover {
  --x-start-color: var(--x-teal-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-cyan-100, .start-cyan-100-hover:hover {
  --x-start-color: var(--x-cyan-100);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-cyan-200, .start-cyan-200-hover:hover {
  --x-start-color: var(--x-cyan-200);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-cyan-300, .start-cyan-300-hover:hover {
  --x-start-color: var(--x-cyan-300);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-cyan-400, .start-cyan-400-hover:hover {
  --x-start-color: var(--x-cyan-400);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-cyan-500, .start-cyan-500-hover:hover {
  --x-start-color: var(--x-cyan-500);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-cyan-600, .start-cyan-600-hover:hover {
  --x-start-color: var(--x-cyan-600);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-cyan-700, .start-cyan-700-hover:hover {
  --x-start-color: var(--x-cyan-700);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-cyan-800, .start-cyan-800-hover:hover {
  --x-start-color: var(--x-cyan-800);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.start-cyan-900, .start-cyan-900-hover:hover {
  --x-start-color: var(--x-cyan-900);
  --x-gradient: var(--x-start-color), var(--x-end-color, #0000);
}

.middle-white, .middle-white-hover:hover {
  --x-middle-color: var(--x-white);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #fff0);
}

.middle-black, .middle-black-hover:hover {
  --x-middle-color: var(--x-black);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #0000);
}

.middle-gray-50, .middle-gray-50-hover:hover {
  --x-middle-color: var(--x-gray-50);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #fafafa00);
}

.middle-gray-100, .middle-gray-100-hover:hover {
  --x-middle-color: var(--x-gray-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #f5f9fc00);
}

.middle-gray-200, .middle-gray-200-hover:hover {
  --x-middle-color: var(--x-gray-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #e7eaf000);
}

.middle-gray-300, .middle-gray-300-hover:hover {
  --x-middle-color: var(--x-gray-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #cfd6df00);
}

.middle-gray-400, .middle-gray-400-hover:hover {
  --x-middle-color: var(--x-gray-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #abb6c500);
}

.middle-gray-500, .middle-gray-500-hover:hover {
  --x-middle-color: var(--x-gray-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #8898a900);
}

.middle-gray-600, .middle-gray-600-hover:hover {
  --x-middle-color: var(--x-gray-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #6b7b9300);
}

.middle-gray-700, .middle-gray-700-hover:hover {
  --x-middle-color: var(--x-gray-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #525f7f00);
}

.middle-gray-800, .middle-gray-800-hover:hover {
  --x-middle-color: var(--x-gray-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #2d374800);
}

.middle-gray-900, .middle-gray-900-hover:hover {
  --x-middle-color: var(--x-gray-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #16192c00);
}

.middle-blue-100, .middle-blue-100-hover:hover {
  --x-middle-color: var(--x-blue-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ccebff00);
}

.middle-blue-200, .middle-blue-200-hover:hover {
  --x-middle-color: var(--x-blue-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #99d6ff00);
}

.middle-blue-300, .middle-blue-300-hover:hover {
  --x-middle-color: var(--x-blue-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #66c2ff00);
}

.middle-blue-400, .middle-blue-400-hover:hover {
  --x-middle-color: var(--x-blue-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #33adff00);
}

.middle-blue-500, .middle-blue-500-hover:hover {
  --x-middle-color: var(--x-blue-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #09f0);
}

.middle-blue-600, .middle-blue-600-hover:hover {
  --x-middle-color: var(--x-blue-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #007acc00);
}

.middle-blue-700, .middle-blue-700-hover:hover {
  --x-middle-color: var(--x-blue-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #005c9900);
}

.middle-blue-800, .middle-blue-800-hover:hover {
  --x-middle-color: var(--x-blue-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #003d6600);
}

.middle-blue-900, .middle-blue-900-hover:hover {
  --x-middle-color: var(--x-blue-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #001f3300);
}

.middle-indigo-100, .middle-indigo-100-hover:hover {
  --x-middle-color: var(--x-indigo-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #dedffd00);
}

.middle-indigo-200, .middle-indigo-200-hover:hover {
  --x-middle-color: var(--x-indigo-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #bebffb00);
}

.middle-indigo-300, .middle-indigo-300-hover:hover {
  --x-middle-color: var(--x-indigo-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #9da0f900);
}

.middle-indigo-400, .middle-indigo-400-hover:hover {
  --x-middle-color: var(--x-indigo-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #7d80f700);
}

.middle-indigo-500, .middle-indigo-500-hover:hover {
  --x-middle-color: var(--x-indigo-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #5c60f500);
}

.middle-indigo-600, .middle-indigo-600-hover:hover {
  --x-middle-color: var(--x-indigo-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #4a4dc400);
}

.middle-indigo-700, .middle-indigo-700-hover:hover {
  --x-middle-color: var(--x-indigo-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #373a9300);
}

.middle-indigo-800, .middle-indigo-800-hover:hover {
  --x-middle-color: var(--x-indigo-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #25266200);
}

.middle-indigo-900, .middle-indigo-900-hover:hover {
  --x-middle-color: var(--x-indigo-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #12133100);
}

.middle-purple-100, .middle-purple-100-hover:hover {
  --x-middle-color: var(--x-purple-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #e7ddff00);
}

.middle-purple-200, .middle-purple-200-hover:hover {
  --x-middle-color: var(--x-purple-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #d0bcff00);
}

.middle-purple-300, .middle-purple-300-hover:hover {
  --x-middle-color: var(--x-purple-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #b89aff00);
}

.middle-purple-400, .middle-purple-400-hover:hover {
  --x-middle-color: var(--x-purple-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #a179ff00);
}

.middle-purple-500, .middle-purple-500-hover:hover {
  --x-middle-color: var(--x-purple-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #8957ff00);
}

.middle-purple-600, .middle-purple-600-hover:hover {
  --x-middle-color: var(--x-purple-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #6e46cc00);
}

.middle-purple-700, .middle-purple-700-hover:hover {
  --x-middle-color: var(--x-purple-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #52349900);
}

.middle-purple-800, .middle-purple-800-hover:hover {
  --x-middle-color: var(--x-purple-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #37236600);
}

.middle-purple-900, .middle-purple-900-hover:hover {
  --x-middle-color: var(--x-purple-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #1b113300);
}

.middle-pink-100, .middle-pink-100-hover:hover {
  --x-middle-color: var(--x-pink-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffddeb00);
}

.middle-pink-200, .middle-pink-200-hover:hover {
  --x-middle-color: var(--x-pink-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffbcd700);
}

.middle-pink-300, .middle-pink-300-hover:hover {
  --x-middle-color: var(--x-pink-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ff9ac200);
}

.middle-pink-400, .middle-pink-400-hover:hover {
  --x-middle-color: var(--x-pink-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ff79ae00);
}

.middle-pink-500, .middle-pink-500-hover:hover {
  --x-middle-color: var(--x-pink-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ff579a00);
}

.middle-pink-600, .middle-pink-600-hover:hover {
  --x-middle-color: var(--x-pink-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #cc467b00);
}

.middle-pink-700, .middle-pink-700-hover:hover {
  --x-middle-color: var(--x-pink-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #99345c00);
}

.middle-pink-800, .middle-pink-800-hover:hover {
  --x-middle-color: var(--x-pink-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #66233e00);
}

.middle-pink-900, .middle-pink-900-hover:hover {
  --x-middle-color: var(--x-pink-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #33111f00);
}

.middle-magenta-100, .middle-magenta-100-hover:hover {
  --x-middle-color: var(--x-magenta-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #fcd6ff00);
}

.middle-magenta-200, .middle-magenta-200-hover:hover {
  --x-middle-color: var(--x-magenta-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #f8adff00);
}

.middle-magenta-300, .middle-magenta-300-hover:hover {
  --x-middle-color: var(--x-magenta-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #f585ff00);
}

.middle-magenta-400, .middle-magenta-400-hover:hover {
  --x-middle-color: var(--x-magenta-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #f15cff00);
}

.middle-magenta-500, .middle-magenta-500-hover:hover {
  --x-middle-color: var(--x-magenta-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #e3f0);
}

.middle-magenta-600, .middle-magenta-600-hover:hover {
  --x-middle-color: var(--x-magenta-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #be29cc00);
}

.middle-magenta-700, .middle-magenta-700-hover:hover {
  --x-middle-color: var(--x-magenta-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #8f1f9900);
}

.middle-magenta-800, .middle-magenta-800-hover:hover {
  --x-middle-color: var(--x-magenta-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #5f146600);
}

.middle-magenta-900, .middle-magenta-900-hover:hover {
  --x-middle-color: var(--x-magenta-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #300a3300);
}

.middle-red-100, .middle-red-100-hover:hover {
  --x-middle-color: var(--x-red-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffd6e000);
}

.middle-red-200, .middle-red-200-hover:hover {
  --x-middle-color: var(--x-red-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffadc200);
}

.middle-red-300, .middle-red-300-hover:hover {
  --x-middle-color: var(--x-red-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ff85a300);
}

.middle-red-400, .middle-red-400-hover:hover {
  --x-middle-color: var(--x-red-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ff5c8500);
}

.middle-red-500, .middle-red-500-hover:hover {
  --x-middle-color: var(--x-red-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #f360);
}

.middle-red-600, .middle-red-600-hover:hover {
  --x-middle-color: var(--x-red-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #cc295200);
}

.middle-red-700, .middle-red-700-hover:hover {
  --x-middle-color: var(--x-red-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #991f3d00);
}

.middle-red-800, .middle-red-800-hover:hover {
  --x-middle-color: var(--x-red-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #66142900);
}

.middle-red-900, .middle-red-900-hover:hover {
  --x-middle-color: var(--x-red-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #330a1400);
}

.middle-orange-100, .middle-orange-100-hover:hover {
  --x-middle-color: var(--x-orange-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffe8cc00);
}

.middle-orange-200, .middle-orange-200-hover:hover {
  --x-middle-color: var(--x-orange-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffd19900);
}

.middle-orange-300, .middle-orange-300-hover:hover {
  --x-middle-color: var(--x-orange-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffba6600);
}

.middle-orange-400, .middle-orange-400-hover:hover {
  --x-middle-color: var(--x-orange-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffa33300);
}

.middle-orange-500, .middle-orange-500-hover:hover {
  --x-middle-color: var(--x-orange-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ff8c0000);
}

.middle-orange-600, .middle-orange-600-hover:hover {
  --x-middle-color: var(--x-orange-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #cc700000);
}

.middle-orange-700, .middle-orange-700-hover:hover {
  --x-middle-color: var(--x-orange-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #99540000);
}

.middle-orange-800, .middle-orange-800-hover:hover {
  --x-middle-color: var(--x-orange-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #66380000);
}

.middle-orange-900, .middle-orange-900-hover:hover {
  --x-middle-color: var(--x-orange-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #331c0000);
}

.middle-yellow-100, .middle-yellow-100-hover:hover {
  --x-middle-color: var(--x-yellow-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #fff1cc00);
}

.middle-yellow-200, .middle-yellow-200-hover:hover {
  --x-middle-color: var(--x-yellow-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffe49900);
}

.middle-yellow-300, .middle-yellow-300-hover:hover {
  --x-middle-color: var(--x-yellow-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffd66600);
}

.middle-yellow-400, .middle-yellow-400-hover:hover {
  --x-middle-color: var(--x-yellow-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ffc93300);
}

.middle-yellow-500, .middle-yellow-500-hover:hover {
  --x-middle-color: var(--x-yellow-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #fb00);
}

.middle-yellow-600, .middle-yellow-600-hover:hover {
  --x-middle-color: var(--x-yellow-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #cc960000);
}

.middle-yellow-700, .middle-yellow-700-hover:hover {
  --x-middle-color: var(--x-yellow-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #99700000);
}

.middle-yellow-800, .middle-yellow-800-hover:hover {
  --x-middle-color: var(--x-yellow-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #664b0000);
}

.middle-yellow-900, .middle-yellow-900-hover:hover {
  --x-middle-color: var(--x-yellow-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #33250000);
}

.middle-green-100, .middle-green-100-hover:hover {
  --x-middle-color: var(--x-green-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ccf5e700);
}

.middle-green-200, .middle-green-200-hover:hover {
  --x-middle-color: var(--x-green-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #99ebcf00);
}

.middle-green-300, .middle-green-300-hover:hover {
  --x-middle-color: var(--x-green-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #66e0b800);
}

.middle-green-400, .middle-green-400-hover:hover {
  --x-middle-color: var(--x-green-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #33d6a000);
}

.middle-green-500, .middle-green-500-hover:hover {
  --x-middle-color: var(--x-green-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #0c80);
}

.middle-green-600, .middle-green-600-hover:hover {
  --x-middle-color: var(--x-green-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #00a36d00);
}

.middle-green-700, .middle-green-700-hover:hover {
  --x-middle-color: var(--x-green-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #007a5200);
}

.middle-green-800, .middle-green-800-hover:hover {
  --x-middle-color: var(--x-green-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #00523600);
}

.middle-green-900, .middle-green-900-hover:hover {
  --x-middle-color: var(--x-green-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #00291b00);
}

.middle-teal-100, .middle-teal-100-hover:hover {
  --x-middle-color: var(--x-teal-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #d3f8f800);
}

.middle-teal-200, .middle-teal-200-hover:hover {
  --x-middle-color: var(--x-teal-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #a7f1f100);
}

.middle-teal-300, .middle-teal-300-hover:hover {
  --x-middle-color: var(--x-teal-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #7aebeb00);
}

.middle-teal-400, .middle-teal-400-hover:hover {
  --x-middle-color: var(--x-teal-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #4ee4e400);
}

.middle-teal-500, .middle-teal-500-hover:hover {
  --x-middle-color: var(--x-teal-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #2dd0);
}

.middle-teal-600, .middle-teal-600-hover:hover {
  --x-middle-color: var(--x-teal-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #1bb1b100);
}

.middle-teal-700, .middle-teal-700-hover:hover {
  --x-middle-color: var(--x-teal-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #14858500);
}

.middle-teal-800, .middle-teal-800-hover:hover {
  --x-middle-color: var(--x-teal-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #0e585800);
}

.middle-teal-900, .middle-teal-900-hover:hover {
  --x-middle-color: var(--x-teal-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #072c2c00);
}

.middle-cyan-100, .middle-cyan-100-hover:hover {
  --x-middle-color: var(--x-cyan-100);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #ccf6ff00);
}

.middle-cyan-200, .middle-cyan-200-hover:hover {
  --x-middle-color: var(--x-cyan-200);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #9ef0);
}

.middle-cyan-300, .middle-cyan-300-hover:hover {
  --x-middle-color: var(--x-cyan-300);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #66e5ff00);
}

.middle-cyan-400, .middle-cyan-400-hover:hover {
  --x-middle-color: var(--x-cyan-400);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #3df0);
}

.middle-cyan-500, .middle-cyan-500-hover:hover {
  --x-middle-color: var(--x-cyan-500);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #00d4ff00);
}

.middle-cyan-600, .middle-cyan-600-hover:hover {
  --x-middle-color: var(--x-cyan-600);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #0ac0);
}

.middle-cyan-700, .middle-cyan-700-hover:hover {
  --x-middle-color: var(--x-cyan-700);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #007f9900);
}

.middle-cyan-800, .middle-cyan-800-hover:hover {
  --x-middle-color: var(--x-cyan-800);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #0560);
}

.middle-cyan-900, .middle-cyan-900-hover:hover {
  --x-middle-color: var(--x-cyan-900);
  --x-gradient: var(--x-start-color), var(--x-middle-color), var(--x-end-color, #002a3300);
}

.end-white, .end-white-hover:hover {
  --x-end-color: var(--x-white);
}

.end-black, .end-black-hover:hover {
  --x-end-color: var(--x-black);
}

.end-gray-50, .end-gray-50-hover:hover {
  --x-end-color: var(--x-gray-50);
}

.end-gray-100, .end-gray-100-hover:hover {
  --x-end-color: var(--x-gray-100);
}

.end-gray-200, .end-gray-200-hover:hover {
  --x-end-color: var(--x-gray-200);
}

.end-gray-300, .end-gray-300-hover:hover {
  --x-end-color: var(--x-gray-300);
}

.end-gray-400, .end-gray-400-hover:hover {
  --x-end-color: var(--x-gray-400);
}

.end-gray-500, .end-gray-500-hover:hover {
  --x-end-color: var(--x-gray-500);
}

.end-gray-600, .end-gray-600-hover:hover {
  --x-end-color: var(--x-gray-600);
}

.end-gray-700, .end-gray-700-hover:hover {
  --x-end-color: var(--x-gray-700);
}

.end-gray-800, .end-gray-800-hover:hover {
  --x-end-color: var(--x-gray-800);
}

.end-gray-900, .end-gray-900-hover:hover {
  --x-end-color: var(--x-gray-900);
}

.end-blue-100, .end-blue-100-hover:hover {
  --x-end-color: var(--x-blue-100);
}

.end-blue-200, .end-blue-200-hover:hover {
  --x-end-color: var(--x-blue-200);
}

.end-blue-300, .end-blue-300-hover:hover {
  --x-end-color: var(--x-blue-300);
}

.end-blue-400, .end-blue-400-hover:hover {
  --x-end-color: var(--x-blue-400);
}

.end-blue-500, .end-blue-500-hover:hover {
  --x-end-color: var(--x-blue-500);
}

.end-blue-600, .end-blue-600-hover:hover {
  --x-end-color: var(--x-blue-600);
}

.end-blue-700, .end-blue-700-hover:hover {
  --x-end-color: var(--x-blue-700);
}

.end-blue-800, .end-blue-800-hover:hover {
  --x-end-color: var(--x-blue-800);
}

.end-blue-900, .end-blue-900-hover:hover {
  --x-end-color: var(--x-blue-900);
}

.end-indigo-100, .end-indigo-100-hover:hover {
  --x-end-color: var(--x-indigo-100);
}

.end-indigo-200, .end-indigo-200-hover:hover {
  --x-end-color: var(--x-indigo-200);
}

.end-indigo-300, .end-indigo-300-hover:hover {
  --x-end-color: var(--x-indigo-300);
}

.end-indigo-400, .end-indigo-400-hover:hover {
  --x-end-color: var(--x-indigo-400);
}

.end-indigo-500, .end-indigo-500-hover:hover {
  --x-end-color: var(--x-indigo-500);
}

.end-indigo-600, .end-indigo-600-hover:hover {
  --x-end-color: var(--x-indigo-600);
}

.end-indigo-700, .end-indigo-700-hover:hover {
  --x-end-color: var(--x-indigo-700);
}

.end-indigo-800, .end-indigo-800-hover:hover {
  --x-end-color: var(--x-indigo-800);
}

.end-indigo-900, .end-indigo-900-hover:hover {
  --x-end-color: var(--x-indigo-900);
}

.end-purple-100, .end-purple-100-hover:hover {
  --x-end-color: var(--x-purple-100);
}

.end-purple-200, .end-purple-200-hover:hover {
  --x-end-color: var(--x-purple-200);
}

.end-purple-300, .end-purple-300-hover:hover {
  --x-end-color: var(--x-purple-300);
}

.end-purple-400, .end-purple-400-hover:hover {
  --x-end-color: var(--x-purple-400);
}

.end-purple-500, .end-purple-500-hover:hover {
  --x-end-color: var(--x-purple-500);
}

.end-purple-600, .end-purple-600-hover:hover {
  --x-end-color: var(--x-purple-600);
}

.end-purple-700, .end-purple-700-hover:hover {
  --x-end-color: var(--x-purple-700);
}

.end-purple-800, .end-purple-800-hover:hover {
  --x-end-color: var(--x-purple-800);
}

.end-purple-900, .end-purple-900-hover:hover {
  --x-end-color: var(--x-purple-900);
}

.end-pink-100, .end-pink-100-hover:hover {
  --x-end-color: var(--x-pink-100);
}

.end-pink-200, .end-pink-200-hover:hover {
  --x-end-color: var(--x-pink-200);
}

.end-pink-300, .end-pink-300-hover:hover {
  --x-end-color: var(--x-pink-300);
}

.end-pink-400, .end-pink-400-hover:hover {
  --x-end-color: var(--x-pink-400);
}

.end-pink-500, .end-pink-500-hover:hover {
  --x-end-color: var(--x-pink-500);
}

.end-pink-600, .end-pink-600-hover:hover {
  --x-end-color: var(--x-pink-600);
}

.end-pink-700, .end-pink-700-hover:hover {
  --x-end-color: var(--x-pink-700);
}

.end-pink-800, .end-pink-800-hover:hover {
  --x-end-color: var(--x-pink-800);
}

.end-pink-900, .end-pink-900-hover:hover {
  --x-end-color: var(--x-pink-900);
}

.end-magenta-100, .end-magenta-100-hover:hover {
  --x-end-color: var(--x-magenta-100);
}

.end-magenta-200, .end-magenta-200-hover:hover {
  --x-end-color: var(--x-magenta-200);
}

.end-magenta-300, .end-magenta-300-hover:hover {
  --x-end-color: var(--x-magenta-300);
}

.end-magenta-400, .end-magenta-400-hover:hover {
  --x-end-color: var(--x-magenta-400);
}

.end-magenta-500, .end-magenta-500-hover:hover {
  --x-end-color: var(--x-magenta-500);
}

.end-magenta-600, .end-magenta-600-hover:hover {
  --x-end-color: var(--x-magenta-600);
}

.end-magenta-700, .end-magenta-700-hover:hover {
  --x-end-color: var(--x-magenta-700);
}

.end-magenta-800, .end-magenta-800-hover:hover {
  --x-end-color: var(--x-magenta-800);
}

.end-magenta-900, .end-magenta-900-hover:hover {
  --x-end-color: var(--x-magenta-900);
}

.end-red-100, .end-red-100-hover:hover {
  --x-end-color: var(--x-red-100);
}

.end-red-200, .end-red-200-hover:hover {
  --x-end-color: var(--x-red-200);
}

.end-red-300, .end-red-300-hover:hover {
  --x-end-color: var(--x-red-300);
}

.end-red-400, .end-red-400-hover:hover {
  --x-end-color: var(--x-red-400);
}

.end-red-500, .end-red-500-hover:hover {
  --x-end-color: var(--x-red-500);
}

.end-red-600, .end-red-600-hover:hover {
  --x-end-color: var(--x-red-600);
}

.end-red-700, .end-red-700-hover:hover {
  --x-end-color: var(--x-red-700);
}

.end-red-800, .end-red-800-hover:hover {
  --x-end-color: var(--x-red-800);
}

.end-red-900, .end-red-900-hover:hover {
  --x-end-color: var(--x-red-900);
}

.end-orange-100, .end-orange-100-hover:hover {
  --x-end-color: var(--x-orange-100);
}

.end-orange-200, .end-orange-200-hover:hover {
  --x-end-color: var(--x-orange-200);
}

.end-orange-300, .end-orange-300-hover:hover {
  --x-end-color: var(--x-orange-300);
}

.end-orange-400, .end-orange-400-hover:hover {
  --x-end-color: var(--x-orange-400);
}

.end-orange-500, .end-orange-500-hover:hover {
  --x-end-color: var(--x-orange-500);
}

.end-orange-600, .end-orange-600-hover:hover {
  --x-end-color: var(--x-orange-600);
}

.end-orange-700, .end-orange-700-hover:hover {
  --x-end-color: var(--x-orange-700);
}

.end-orange-800, .end-orange-800-hover:hover {
  --x-end-color: var(--x-orange-800);
}

.end-orange-900, .end-orange-900-hover:hover {
  --x-end-color: var(--x-orange-900);
}

.end-yellow-100, .end-yellow-100-hover:hover {
  --x-end-color: var(--x-yellow-100);
}

.end-yellow-200, .end-yellow-200-hover:hover {
  --x-end-color: var(--x-yellow-200);
}

.end-yellow-300, .end-yellow-300-hover:hover {
  --x-end-color: var(--x-yellow-300);
}

.end-yellow-400, .end-yellow-400-hover:hover {
  --x-end-color: var(--x-yellow-400);
}

.end-yellow-500, .end-yellow-500-hover:hover {
  --x-end-color: var(--x-yellow-500);
}

.end-yellow-600, .end-yellow-600-hover:hover {
  --x-end-color: var(--x-yellow-600);
}

.end-yellow-700, .end-yellow-700-hover:hover {
  --x-end-color: var(--x-yellow-700);
}

.end-yellow-800, .end-yellow-800-hover:hover {
  --x-end-color: var(--x-yellow-800);
}

.end-yellow-900, .end-yellow-900-hover:hover {
  --x-end-color: var(--x-yellow-900);
}

.end-green-100, .end-green-100-hover:hover {
  --x-end-color: var(--x-green-100);
}

.end-green-200, .end-green-200-hover:hover {
  --x-end-color: var(--x-green-200);
}

.end-green-300, .end-green-300-hover:hover {
  --x-end-color: var(--x-green-300);
}

.end-green-400, .end-green-400-hover:hover {
  --x-end-color: var(--x-green-400);
}

.end-green-500, .end-green-500-hover:hover {
  --x-end-color: var(--x-green-500);
}

.end-green-600, .end-green-600-hover:hover {
  --x-end-color: var(--x-green-600);
}

.end-green-700, .end-green-700-hover:hover {
  --x-end-color: var(--x-green-700);
}

.end-green-800, .end-green-800-hover:hover {
  --x-end-color: var(--x-green-800);
}

.end-green-900, .end-green-900-hover:hover {
  --x-end-color: var(--x-green-900);
}

.end-teal-100, .end-teal-100-hover:hover {
  --x-end-color: var(--x-teal-100);
}

.end-teal-200, .end-teal-200-hover:hover {
  --x-end-color: var(--x-teal-200);
}

.end-teal-300, .end-teal-300-hover:hover {
  --x-end-color: var(--x-teal-300);
}

.end-teal-400, .end-teal-400-hover:hover {
  --x-end-color: var(--x-teal-400);
}

.end-teal-500, .end-teal-500-hover:hover {
  --x-end-color: var(--x-teal-500);
}

.end-teal-600, .end-teal-600-hover:hover {
  --x-end-color: var(--x-teal-600);
}

.end-teal-700, .end-teal-700-hover:hover {
  --x-end-color: var(--x-teal-700);
}

.end-teal-800, .end-teal-800-hover:hover {
  --x-end-color: var(--x-teal-800);
}

.end-teal-900, .end-teal-900-hover:hover {
  --x-end-color: var(--x-teal-900);
}

.end-cyan-100, .end-cyan-100-hover:hover {
  --x-end-color: var(--x-cyan-100);
}

.end-cyan-200, .end-cyan-200-hover:hover {
  --x-end-color: var(--x-cyan-200);
}

.end-cyan-300, .end-cyan-300-hover:hover {
  --x-end-color: var(--x-cyan-300);
}

.end-cyan-400, .end-cyan-400-hover:hover {
  --x-end-color: var(--x-cyan-400);
}

.end-cyan-500, .end-cyan-500-hover:hover {
  --x-en