DIV[class*="bg-"],
A.btn[class*="btn-"],
BUTTON.btn[class*="btn-"],
DIV[class*="alert-"],
CODE[class*="bg-"],
PRE[class*="bg-"],
SPAN[class*="bg-"]
{
  filter: saturate(0.5) brightness(1.2);
}

.fg-white
{
color:#FFF !important;
}

.bg-blue {
  background-color: var(--blue);
}

.bg-indigo {
  background-color: var(--indigo);
}

.bg-purple {
  background-color: var(--purple);
}

.bg-pink {
  background-color: var(--pink);
}

.bg-red {
  background-color: var(--red);
}

.bg-orange {
  background-color: var(--orange);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-green {
  background-color: var(--green);
}

.bg-teal {
  background-color: var(--teal);
}

.bg-cyan {
  background-color: var(--cyan);
}

.bg-white {
  background-color: var(--white);
}

.bg-gray {
  background-color: var(--gray);
}

.bg-gray-dark {
  background-color: var(--gray-dark);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-success {
  background-color: var(--success);
}

.bg-info {
  background-color: var(--info);
}

.bg-warning {
  background-color: var(--warning);
}

.bg-danger {
  background-color: var(--danger);
}

.bg-light {
  background-color: var(--light);
}

.bg-dark {
  background-color: var(--dark);
}

.btn-blue {
  background-color: var(--blue);
  border-color: var(--blue);
}

.btn-indigo {
  background-color: var(--indigo);
  border-color: var(--indigo);
}

.btn-purple {
  background-color: var(--purple);
  border-color: var(--purple);
}

.btn-pink {
  background-color: var(--pink);
  border-color: var(--pink);
}

.btn-red {
  background-color: var(--red);
  border-color: var(--red);
}

.btn-orange {
  background-color: var(--orange);
  border-color: var(--orange);
}

.btn-yellow {
  background-color: var(--yellow);
  border-color: var(--yellow);
}

.btn-green {
  background-color: var(--green);
  border-color: var(--green);
}

.btn-teal {
  background-color: var(--teal);
  border-color: var(--teal);
}

.btn-cyan {
  background-color: var(--cyan);
  border-color: var(--cyan);
}

.btn-white {
  background-color: var(--white);
  border-color: var(--white);
}

.btn-gray {
  background-color: var(--gray);
  border-color: var(--gray);
}

.btn-gray-dark {
  background-color: var(--gray-dark);
  border-color: var(--gray-dark);
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-success {
  background-color: var(--success);
  border-color: var(--success);
}

.btn-info {
  background-color: var(--info);
  border-color: var(--info);
}

.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
}

.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
}

.btn-light {
  background-color: var(--light);
  border-color: var(--light);
}

.btn-dark {
  background-color: var(--dark);
  border-color: var(--dark);
}

.alert-blue {
  background-color: var(--blue);
  border-color: var(--blue);
  color: var(--white); /* White for better contrast on darker colors */
}

.alert-indigo {
  background-color: var(--indigo);
  border-color: var(--indigo);
  color: var(--white);
}

.alert-purple {
  background-color: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}

.alert-pink {
  background-color: var(--pink);
  border-color: var(--pink);
  color: var(--dark); /* Dark for better contrast on lighter colors */
}

.alert-red {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.alert-orange {
  background-color: var(--orange);
  border-color: var(--orange);
  color: var(--dark);
}

.alert-yellow {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark);
}

.alert-green {
  background-color: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.alert-teal {
  background-color: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.alert-cyan {
  background-color: var(--cyan);
  border-color: var(--cyan);
  color: var(--dark);
}

.alert-white {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--dark);
}

.alert-gray {
  background-color: var(--gray);
  border-color: var(--gray);
  color: var(--dark);
}

.alert-gray-dark {
  background-color: var(--gray-dark);
  border-color: var(--gray-dark);
  color: var(--white);
}

.alert-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.alert-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--dark);
}

.alert-success {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--white);
}

.alert-info {
  background-color: var(--info);
  border-color: var(--info);
  color: var(--dark);
}

.alert-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--dark);
}

.alert-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}

.alert-light {
  background-color: var(--light);
  border-color: var(--light);
  color: var(--dark);
}

.alert-dark {
  background-color: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}