/* ==============
  Background
==================*/


.bg-primary {
  background-color: $primary !important;
}

.bg-secondary {
  background-color: $secondary !important;
}

.bg-success {
  background-color: $success !important;
}

.bg-warning {
  background-color: $warning !important;
}

.bg-info {
  background-color: $info !important;
}

.bg-danger {
  background-color: $danger !important;
}

.bg-dark {
  background-color: $dark !important;
}

.bg-light {
  background-color: $light !important;
}

.bg-pink {
  background-color: $pink !important;
}

.bg-purple {
  background-color: $purple !important;
}

// bg-soft

.bg-soft-primary{
  background-color: rgba($primary, 0.15) !important;
  color: $primary !important;
}

.bg-soft-secondary{
  background-color: rgba($secondary, 0.15) !important;
  color: $secondary !important;
}

.bg-soft-success{
  background-color: rgba($success, 0.15) !important;
  color: $success !important;
}

.bg-soft-warning{
  background-color: rgba($warning, 0.15) !important;
  color: $warning !important;
}

.bg-soft-info{
  background-color: rgba($info, 0.15) !important;
  color: $info !important;
}

.bg-soft-danger{
  background-color: rgba($danger, 0.15) !important;
  color: $danger !important;
}

.bg-soft-pink{
  background-color: rgba($pink, 0.15) !important;
  color: $pink !important;
}

.bg-soft-purple{
  background-color: rgba($purple, 0.15) !important;
  color: $purple !important;
}

.bg-soft-dark{
  background-color: rgba($dark, 0.15) !important;
  color: $dark !important;
}