/// <reference path="../defaults" />
/// <reference path="variables_and_mixins" />
@import "colors";
.bg-white-opacity {
  background-color: rgba(255, 255, 255, 0.5);
}

.bg-black-opacity {
  background-color: rgba(32, 43, 54, 0.5);
}

/*simple background*/
.bg-color-primary { background-color: $color-primary; }
.bg-color-primary-50 { background-color: $color-primary-50; }
.bg-color-primary-100 { background-color: $color-primary-100; }
.bg-color-primary-200 { background-color: $color-primary-200; }
.bg-color-primary-300 { background-color: $color-primary-300; }
.bg-color-primary-400 { background-color: $color-primary-400; }
.bg-color-primary-500 { background-color: $color-primary-500; }
.bg-color-primary-600 { background-color: $color-primary-600; }
.bg-color-primary-700 { background-color: $color-primary-700; }
.bg-color-primary-800 { background-color: $color-primary-800; }
.bg-color-primary-900 { background-color: $color-primary-900; }



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

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

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

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

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

.bg-color-gradient-primary {
  background: linear-gradient(to bottom, $color-primary 0, $color-primary-800 100%);
}

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

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

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

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

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

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

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

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

/* Colors */

.bg-color-dark-card {
  background-color: $color-dark-card;
}

.bg-color-dark-card {
  background-color: #212121;
}