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

a.bg-primary {

  &:hover,
  &:focus {
    background-color: #{$primary} !important;
  }
}

.bg-transparent {
  background: transparent !important;
}

button.bg-primary {

  &:hover,
  &:focus {
    background-color: #{$primary} !important;
  }
}

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

a.bg-secondary {

  &:hover,
  &:focus {
    background-color: #{$secondary} !important;
  }
}

button.bg-secondary {

  &:hover,
  &:focus {
    background-color: #{$secondary} !important;
  }
}

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

a.bg-success {

  &:hover,
  &:focus {
    background-color: #{$success} !important;
  }
}

button.bg-success {

  &:hover,
  &:focus {
    background-color: #{$success} !important;
  }
}

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

a.bg-info {

  &:hover,
  &:focus {
    background-color: #{$info} !important;
  }
}

button.bg-info {

  &:hover,
  &:focus {
    background-color: #{$info} !important;
  }
}

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

a.bg-warning {

  &:hover,
  &:focus {
    background-color: #{$warning} !important;
  }
}

button.bg-warning {

  &:hover,
  &:focus {
    background-color: #{$warning} !important;
  }
}

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

a.bg-danger {

  &:hover,
  &:focus {
    background-color: #{$danger} !important;
  }
}

button.bg-danger {

  &:hover,
  &:focus {
    background-color: #{$danger} !important;
  }
}

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

a.bg-purple {

  &:hover,
  &:focus {
    background-color: #{$purple} !important;
  }
}

button.bg-purple {

  &:hover,
  &:focus {
    background-color: #{$purple} !important;
  }
}

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

a.bg-light {

  &:hover,
  &:focus {
    background-color: #{$bg-hover} !important;
  }
}

button.bg-light {

  &:hover,
  &:focus {
    background-color: #{$bg-hover} !important;
  }
}

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

a.bg-dark {

  &:hover,
  &:focus {
    background-color: #{$dark} !important;
  }
}

button.bg-dark {

  &:hover,
  &:focus {
    background-color: #{$dark} !important;
  }
}

.bg-white {
  background-color: rgb($white)  !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-gray+.select2-container--default .select2-selection--single {
  background-color: #{$gray-900};

  .select2-selection__rendered {
    color: #{$gray-300};
  }
}

/* ###### 9.1 Background  ###### */
.bg-transparent {
  background-color: transparent;
}

.bg-gray-100 {
  background-color: #{$gray-100} !important;
}

.bg-gray-200 {
  background-color: #{$gray-200} !important;
}

.bg-gray-300 {
  background-color: #{$gray-300} !important;
}

.bg-gray-400 {
  background-color: #{$gray-400} !important;
}

.bg-gray-500 {
  background-color: #{$gray-500} !important;
}

.bg-gray-600 {
  background-color: #{$gray-600} !important;
}

.bg-gray-700 {
  background-color: #{$gray-700} !important;
}

.bg-gray-800 {
  background-color: #{$gray-800} !important;
}

.bg-gray-900 {
  background-color: #{$gray-900} !important;
}

.bg-white-1 {
  background-color: #{$black-1};
}

.bg-white-2 {
  background-color: #{$black-2};
}

.bg-white-3 {
  background-color: #{$black-3};
}

.bg-white-4 {
  background-color: #{$black-4};
}

.bg-white-5 {
  background-color: #{$black-5};
}

.bg-white-6 {
  background-color: #{$black-6};
}

.bg-white-7 {
  background-color: #{$black-7};
}

.bg-white-8 {
  background-color: #{$black-8};
}

.bg-white-9 {
  background-color: #{$black-9};
}

.bg-black-1 {
  background-color: #{$white-1};
}

.bg-black-2 {
  background-color: #{$white-2};
}

.bg-black-3 {
  background-color: #{$white-3};
}

.bg-black-4 {
  background-color: #{$white-4};
}

.bg-black-5 {
  background-color: #{$white-5};
}

.bg-black-6 {
  background-color: #{$white-6};
}

.bg-black-7 {
  background-color: #{$white-7};
}

.bg-black-8 {
  background-color: #{$white-8};
}

.bg-black-9 {
  background: #{$white-9};
}

.bg-black-03 {
  background: #{$black-03} !important;
}


.bg-indigo {
  background: #{$indigo}  ;
}

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

.bg-orange {
  background: #{$orange};
}

.bg-teal {
  background: #{$teal} !important;
}

.bg-purple-dark {
  background: #{$purple};
}

.bg-transparent {
  background: transparent;
}

/* ###### 4.8 transparent colors ###### */

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

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

.bg-green-transparent {
  background-color: rgba($green, 0.2) !important;
}

.bg-primary-transparent {
  background: #{$primary-02} !important;
}

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

.bg-white-transparent {
  background-color: $white-2 !important;
}

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

.bg-pink-transparent {
  background-color: rgba(pink, 0.2) !important;
}

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

.bg-teal-transparent {
  background-color: rgba($teal, 0.2) !important;
}

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

.bg-orange-transparent {
  background-color: rgba($orange, 0.2);
}

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

.bg-primary-gradient {
  background-image: #{$primary-gradient} !important; 
}

.bg-danger-gradient {
  background-image: #{$danger-gradient} !important;
}

.bg-success-gradient {
  background-image: #{$success-gradient} !important;
}

.bg-warning-gradient {
  background-image: #{$warning-gradient} !important;
}

.bg-primary-gradient1 {
  background-image: linear-gradient(to top, #{$primary-05} 0%, #{$primary} 100%) !important;
}

.bg-info-gradient1 {
  background-image: linear-gradient(to top, #{$primary} 0%, #{$info} 100%) !important;
}

.bg-info-gradient {
  background-image: #{$info-gradient} !important;
}

.bg-secondary-gradient {
  background-image: #{$secondary-gradient} !important;
}

.bg-pink-gradient {
  background-image: linear-gradient(to right, #{$pink} 0%, #{$danger} 100%) !important;
}

.bg-purple-gradient {
  background-image: linear-gradient(to right, #{$purple} 0%, #{$pink} 100%) !important;
}

.bg-orange-gradient {
  background-image: #{$orange-gradient} !important;
}

.bg-teal-gradient {
  background-image: linear-gradient(to right, #{$teal} 0%, #{$info} 100%) !important;
}

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

.bg-red {
  background-color: #{$danger} !important;
  color: rgb($white)  !important;
}

.bg-yellow {
  background-color: #{$warning} !important;
  color: rgb($white)  !important;
}

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

.bg-green {
  background-color: #{$success} !important;
  color: rgb($white)  !important;
}

.gutters-xs>.col,
.gutters-xs>[class*="col-"] {
  padding-inline-end: 0.25rem;
  padding-inline-start: 0.25rem;
}

.gutters-xs {
  margin-block-start: -25px;
}

.bg-chartcustom {
  background-color: rgb($white);
}

.bg-custom-green {
  background-color: #{$success};
}

.bg-custom  {
  background: #{$bg-white} !important;
}

.bg-white-100 {
  background-color: $black-1 !important;
}