/* ###### Backgrounds ###### */

.bg-secondary {
  background-color: $secondary !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: #37ce4f !important;
  }
}

button.bg-success {
  &:hover, &:focus {
    background-color: #37ce4f !important;
  }
}

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

a.bg-info {
  &:hover, &:focus {
    background-color: #06aff1 !important;
  }
}

button.bg-info {
  &:hover, &:focus {
    background-color: #06aff1 !important;
  }
}

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

a.bg-warning {
  &:hover, &:focus {
    background-color: #d39e00 !important;
  }
}

button.bg-warning {
  &:hover, &:focus {
    background-color: #d39e00 !important;
  }
}

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

a.bg-danger {
  &:hover, &:focus {
    background-color: #f16d75 !important;
  }
}

button.bg-danger {
  &:hover, &:focus {
    background-color: #f16d75 !important;
  }
}

.bg-light {
  background-color: #f4f4fd  !important;
  color:#55556b;
}

a.bg-light {
  &:hover, &:focus {
    background-color: #dbe0ea !important;
  }
}

button.bg-light {
  &:hover, &:focus {
    background-color: #dbe0ea !important;
  }
}

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

a.bg-dark {
  &:hover, &:focus {
    background-color: #131212 !important;
  }
}

button.bg-dark {
  &:hover, &:focus {
    background-color: #131212 !important;
  }
}

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

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

.bg-primary-gradient {
  background: linear-gradient(to right, $primary 0%, #71a7f5 100%);
}

.bg-success-gradient {
  background: linear-gradient(to right, #45e1d4 0%, #129ed3 100%);
}

.bg-warning-gradient {
  background: linear-gradient(to right, #f8c888 0%, #f45c6b 100%);
}

.bg-info-gradient {
  background: linear-gradient(to right, #9271fe 0%, #fb5ea3 100%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-teal {
  background-color: #00cccc;
}

.bg-purple-dark {
  background-color: #59339d;
}

.bg-success-transparent {
  background-color: rgba(111, 234, 163, 0.2);
}

.bg-secondary-transparent {
  background-color: rgba(240, 112, 187, 0.15);
}

.bg-primary-transparent {
  background-color: $primary-transparent;
}

.bg-info-transparent {
  background-color: rgba(1, 184, 255, 0.12);
}

.bg-warning-transparent {
  background-color: rgba(243, 202, 86, 0.15);
}

.bg-danger-transparent {
  background-color: rgba(255, 71, 61, 0.12);
}

.bg-pink-transparent {
  background-color: rgba(255, 101, 165, 0.12);
}

.bg-purple-transparent {
  background-color: rgba(111, 66, 193, 0.12);
}

.bg-dark-transparent {
  background-color: rgba(28, 39, 60, 0.12);
}

.bg-white-transparent {
  background-color: rgba(255, 255, 255, 0.12);
}
.tag-outline-primary{
   color: $primary !important;
    border-color: $primary !important;
}

.tag-outline-secondary{
   color: $secondary !important;
    border-color: $secondary !important;
}

.tag-outline-success{
   color: $success !important;
    border-color: $success !important;
}

.tag-outline-warning{
   color: $warning !important;
    border-color: $warning !important;
}

.tag-outline-info{
   color: $info !important;
    border-color: $info !important;
}

.tag-outline-danger{
   color: $danger !important;
    border-color: $danger !important;
}




.bg-light {
  color: #55556b;
  background-color: $background;
}

a.bg-light {
  &:hover {
    color: #8f9cc0;
    background-color: #d5d9e4;
  }

  &:focus {
    color: #8f9cc0;
    background-color: #d5d9e4;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(244, 245, 248, 0.5);
  }

  &.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(244, 245, 248, 0.5);
  }
}

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

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

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

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

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

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

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

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

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

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


.bg-secondary-light {
  background-color: rgba(241, 56, 139, 0.2) !important;
  color: $secondary;
}

.bg-warning-light {
  background-color: #fdf5e2;
  color: #ebb322;
}

.bg-danger-light {
  background-color: #ffe7e8;
  color: #f16d75;
}

/* ###### Backgrounds ###### */