.bg-danger {
  background-color: var(--state-danger);
  border-color: var(--state-danger);
  color: var(--surface-light);
}
.bg-danger-300 {
  background-color: var(--state-danger-300);
  border-color: var(--state-danger-300);
  color: var(--surface-light);
}
.bg-danger-400 {
  background-color: var(--state-danger-400);
  border-color: var(--state-danger-400);
  color: var(--surface-light);
}
.bg-success-400 {
  background-color: var(--state-success-400);
  border-color: var(--state-success-400);
  color: var(--surface-light);
}
.bg-warning {
  background-color: var(--state-warning);
  border-color: var(--state-warning);
  color: var(--surface-light);
}
.bg-warning-300 {
  background-color: var(--state-warning-300);
  border-color: var(--state-warning-300);
  color: var(--surface-light);
}
.bg-warning-400 {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--surface-light);
}
.bg-info {
  background-color: var(--state-info);
  border-color: var(--state-info);
  color: var(--surface-light);
}
.bg-info-300 {
  background-color: var(--state-info-300);
  border-color: var(--state-info-300);
  color: var(--surface-light);
}
.bg-info-400 {
  background-color: var(--state-info-400);
  border-color: var(--state-info-400);
  color: var(--surface-light);
}
.bg-violet {
  background-color: var(--state-violet);
  border-color: var(--state-violet);
  color: var(--surface-light);
}
.bg-violet-300 {
  background-color: var(--state-violet-300);
  border-color: var(--state-violet-300);
  color: var(--surface-light);
}
.bg-indigo {
  background-color: var(--state-indigo);
  border-color: var(--state-indigo);
  color: var(--surface-light);
}
.bg-indigo-300 {
  background-color: var(--state-indigo-300);
  border-color: var(--state-indigo-300);
  color: var(--surface-light);
}
.bg-indigo-400 {
  background-color: var(--state-indigo-400);
  border-color: var(--state-indigo-400);
  color: var(--surface-light);
}
.bg-black{
  background-color: var(--background-dark);
  border-color: var(--background-dark);
  color: var(--surface-light);
}
.bg-teal-400 {
  background-color: var(--state-teal-400);
  border-color: var(--state-teal-400);
  color: var(--surface-light);
}
.bg-green {
  background-color: var(--state-green);
  border-color: var(--state-green);
  color: var(--surface-light);
}
.bg-green-300 {
  background-color: var(--state-green-300);
  border-color: var(--state-green-300);
  color: var(--surface-light);
}
.bg-white {
  background-color: var(--surface-light);
  color: var(--text-default);
}
.alpha-info {
  background-color: var(--alpha-info-background);
  border-color: var(--alpha-info-border);
}
.border-primary {
  border-color: var(--state-primary);
}
.border-danger {
  border-color: var(--state-danger-500);
}
.border-success {
  border-color: var(--state-success);
}
.border-warning {
  border-color: var(--state-warning);
}
.border-grey {
  border-color: var(--text-grey);
}
.border-left-danger {
  border-left-color: var(--state-danger-500);
}
.border-left-success {
  border-left-color: var(--state-success);
}
.text-primary,
.text-primary:hover,
.text-primary:focus {
  color: var(--state-primary) !important;
}
.text-danger,
.text-danger:hover,
.text-danger:focus {
  color: var(--state-danger-500) !important;
}
.text-danger-400,
.text-danger-400:hover,
.text-danger-400:focus {
  color: var(--state-danger-400) !important;
}
.text-success,
.text-success:hover,
.text-success:focus {
  color: var(--state-success) !important;
}
.text-warning,
.text-warning:hover,
.text-warning:focus {
  color: var(--state-warning) !important;
}
.text-info,
.text-info:hover,
.text-info:focus {
  color: var(--state-info) !important;
}
.text-pink-400,
.text-pink-400:hover,
.text-pink-400:focus {
  color: var(--state-pink-400) !important;
}
.text-purple-400,
.text-purple-400:hover,
.text-purple-400:focus {
  color: var(--state-purple-400) !important;
}
.text-indigo-400,
.text-indigo-400:hover,
.text-indigo-400:focus {
  color: var(--state-indigo-400) !important;
}
.text-blue-400,
.text-blue-400:hover,
.text-blue-400:focus {
  color: var(--state-blue-400) !important;
}
.text-green-400,
.text-green-400:hover,
.text-green-400:focus {
  color: var(--state-green-400) !important;
}
.text-orange-400,
.text-orange-400:hover,
.text-orange-400:focus {
  color: var(--state-orange-400) !important;
}
.text-grey,
.text-grey:hover,
.text-grey:focus {
  color: var(--text-grey) !important;
}
.text-grey-800,
.text-grey-800:hover,
.text-grey-800:focus {
  color: var(--text-grey-800) !important;
}
.text-white,
.text-white:hover,
.text-white:focus {
  color: var(--surface-light)!important;
}