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

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

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

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

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

.text-white {
    color: white !important;
}

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

/* Cambia el color de texto de la segunda columna */
.table td:nth-child(1),
.table th:nth-child(1) {
    color: rgb(0, 0, 0);
    font-weight: 600;
    /* Cambia 'red' por el color que desees */
}

th {
    padding: 15px !important;
}

.align-items-center {
    
    justify-content: center;
    /* Centrado horizontal */
    align-items: center;
    /* Centrado vertical */
    height: 100px;
    /* Ajusta la altura según sea necesario */
}

.tablerounededCorner {
    border: 1px solid #7a7b7b;
    background-color: #ddd;
    border-radius: 1.2em;
}

/* Redondear las esquinas de la tabla */
.rounded-table {
    border-radius: 10px;
    /* Ajusta el valor según lo necesites */
    overflow: hidden;
    /* Asegura que el contenido no sobresalga */
}


@media (min-width: 768px) {
    .color-swatch {
        width: 6rem;
        height: 6rem !important;
    }
}

.swatch-blue {
    color: #fff;
    background-color: #0d6efd !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*  *,
  *::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!important; }
  
  .font-monospace {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  } */

/* .d-block { display: block!important; }
  
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    width: 100%;
  } */

.col-md-4 {
    width: 50%;

    @media (min-width: 768px) {
        width: 20%;
    }

    @media (min-width: 992px) {
        width: 15%;
    }

    @media (min-width: 1280px) {
        width: 10%;
    }
}

.col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 15px;
}

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

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


/* Ejemplo de clases Bootstrap personalizadas para colores de texto */
.text-aliceblue { color: AliceBlue!important; }
.text-antiquewhite { color: AntiqueWhite!important; }
.text-aqua { color: Aqua!important; }
.text-aquamarine { color: Aquamarine!important; }
.text-azure { color: Azure!important; }
.text-beige { color: Beige!important; }
.text-bisque { color: Bisque!important; }
.text-black { color: Black!important; }
.text-blanchedalmond { color: BlanchedAlmond!important; }
.text-blue { color: Blue!important; }
.text-blueviolet { color: BlueViolet!important; }
.text-brown { color: Brown!important; }
.text-burlywood { color: BurlyWood!important; }
.text-cadetblue { color: CadetBlue!important; }
.text-chartreuse { color: Chartreuse!important; }
.text-chocolate { color: Chocolate!important; }
.text-coral { color: Coral!important; }
.text-cornflowerblue { color: CornflowerBlue!important; }
.text-cornsilk { color: Cornsilk!important; }
.text-crimson { color: Crimson!important; }
.text-cyan { color: Cyan!important; }
.text-darkblue { color: DarkBlue!important; }
.text-darkcyan { color: DarkCyan!important; }
.text-darkgoldenrod { color: DarkGoldenRod!important; }
.text-darkgray { color: DarkGray!important; }
.text-darkgreen { color: DarkGreen!important; }
.text-darkkhaki { color: DarkKhaki!important; }
.text-darkmagenta { color: DarkMagenta!important; }
.text-darkolivegreen { color: DarkOliveGreen!important; }
.text-darkorange { color: DarkOrange!important; }
.text-darkorchid { color: DarkOrchid!important; }
.text-darkred { color: DarkRed!important; }
.text-darksalmon { color: DarkSalmon!important; }
.text-darkseagreen { color: DarkSeaGreen!important; }
.text-darkslateblue { color: DarkSlateBlue!important; }
.text-darkslategray { color: DarkSlateGray!important; }
.text-darkturquoise { color: DarkTurquoise!important; }
.text-darkviolet { color: DarkViolet!important; }
.text-deeppink { color: DeepPink!important; }
.text-deepskyblue { color: DeepSkyBlue!important; }
.text-dimgray { color: DimGray!important; }
.text-dodgerblue { color: DodgerBlue!important; }
.text-firebrick { color: FireBrick!important; }
.text-floralwhite { color: FloralWhite!important; }
.text-forestgreen { color: ForestGreen!important; }
.text-fuchsia { color: Fuchsia!important; }
.text-gainsboro { color: Gainsboro!important; }
.text-ghostwhite { color: GhostWhite!important; }
.text-gold { color: Gold!important; }
.text-goldenrod { color: GoldenRod!important; }
.text-gray { color: Gray!important; }
.text-green { color: Green!important; }
.text-greenyellow { color: GreenYellow!important; }
.text-honeydew { color: HoneyDew!important; }
.text-hotpink { color: HotPink!important; }
.text-indianred { color: IndianRed!important; }
.text-indigo { color: Indigo!important; }
.text-ivory { color: Ivory!important; }
.text-khaki { color: Khaki!important; }
.text-lavender { color: Lavender!important; }
.text-lavenderblush { color: LavenderBlush!important; }
.text-lawngreen { color: LawnGreen!important; }
.text-lemonchiffon { color: LemonChiffon!important; }
.text-lightblue { color: LightBlue!important; }
.text-lightcoral { color: LightCoral!important; }
.text-lightcyan { color: LightCyan!important; }
.text-lightgoldenrodyellow { color: LightGoldenRodYellow!important; }
.text-lightgray { color: LightGray!important; }
.text-lightgreen { color: LightGreen!important; }
.text-lightpink { color: LightPink!important; }
.text-lightsalmon { color: LightSalmon!important; }
.text-lightseagreen { color: LightSeaGreen!important; }
.text-lightskyblue { color: LightSkyBlue!important; }
.text-lightslategray { color: LightSlateGray!important; }
.text-lightsteelblue { color: LightSteelBlue!important; }
.text-lightyellow { color: LightYellow!important; }
.text-lime { color: Lime!important; }
.text-limegreen { color: LimeGreen!important; }
.text-linen { color: Linen!important; }
.text-magenta { color: Magenta!important; }
.text-maroon { color: Maroon!important; }
.text-mediumaquamarine { color: MediumAquaMarine!important; }
.text-mediumblue { color: MediumBlue!important; }
.text-mediumorchid { color: MediumOrchid!important; }
.text-mediumpurple { color: MediumPurple!important; }
.text-mediumseagreen { color: MediumSeaGreen!important; }
.text-mediumslateblue { color: MediumSlateBlue!important; }
.text-mediumspringgreen { color: MediumSpringGreen!important; }
.text-mediumturquoise { color: MediumTurquoise!important; }
.text-mediumvioletred { color: MediumVioletRed!important; }
.text-midnightblue { color: MidnightBlue!important; }
.text-mintcream { color: MintCream!important; }
.text-mistyrose { color: MistyRose!important; }
.text-moccasin { color: Moccasin!important; }
.text-navajowhite { color: NavajoWhite!important; }
.text-navy { color: Navy!important; }
.text-oldlace { color: OldLace!important; }
.text-olive { color: Olive!important; }
.text-olivedrab { color: OliveDrab!important; }
.text-orange { color: Orange!important; }
.text-orangered { color: OrangeRed!important; }
.text-orchid { color: Orchid!important; }
.text-palegoldenrod { color: PaleGoldenRod!important; }
.text-palegreen { color: PaleGreen!important; }
.text-paleturquoise { color: PaleTurquoise!important; }
.text-palevioletred { color: PaleVioletRed!important; }
.text-papayawhip { color: PapayaWhip!important; }
.text-peachpuff { color: PeachPuff!important; }
.text-peru { color: Peru!important; }
.text-pink { color: Pink!important; }
.text-plum { color: Plum!important; }
.text-powderblue { color: PowderBlue!important; }
.text-purple { color: Purple!important; }
.text-rebeccapurple { color: RebeccaPurple!important; }
.text-red { color: Red!important; }
.text-rosybrown { color: RosyBrown!important; }
.text-royalblue { color: RoyalBlue!important; }
.text-saddlebrown { color: SaddleBrown!important; }
.text-salmon { color: Salmon!important; }
.text-sandybrown { color: SandyBrown!important; }
.text-seagreen { color: SeaGreen!important; }
.text-seashell { color: SeaShell!important; }
.text-sienna { color: Sienna!important; }
.text-silver { color: Silver!important; }
.text-skyblue { color: SkyBlue!important; }
.text-slateblue { color: SlateBlue!important; }
.text-slategray { color: SlateGray!important; }
.text-snow { color: Snow!important; }
.text-springgreen { color: SpringGreen!important; }
.text-steelblue { color: SteelBlue!important; }
.text-tan { color: Tan!important; }
.text-teal { color: Teal!important; }
.text-thistle { color: Thistle!important; }
.text-tomato { color: Tomato!important; }
.text-turquoise { color: Turquoise!important; }
.text-violet { color: Violet!important; }
.text-wheat { color: Wheat!important; }
.text-white { color: White!important; }
.text-whitesmoke { color: WhiteSmoke!important; }
.text-yellow { color: Yellow!important; }
.text-yellowgreen { color: YellowGreen!important; }