// COLORS used throughout the web app
$translucent: rgba(0, 0, 0, 0.2);
$translucent2: rgba(0, 0, 0, 0.6);
$white: #fff;
$off_white: #f4f4f4;
$light_gray: #ddd;
$gray: #ccc;
$medium_light_gray: #bcbcbc;
$medium_gray: #666;
$placeholder_gray: #999;
$dark_gray: #434343;
$black: #000;
$light_blue: #cdf;
$blue: #a4c2f4;
$dark_blue: #37d;
$light_cyan: #d0e0e3;
$cyan: #45818e;
$light_green: #d9ead3;
$green: #6a4;
$dark_green: #371;
$light_yellow: #ffc;
$yellow: #fd6;
$gold: #b90;
$beige: #fec;
$light_brown: #e9d5c3;
$brown: #ca8;
$dark_brown: #783f04;
$light_orange: #fc9;
$orange: #fa0;
$dark_orange: #e93;
$light_purple: #bad;
$purple: #c68ed2;
$light_magenta: #ead1dc;
$magenta: #a64d79;
$pink: #ebb;
$light_red: #e99;
$red: #e66;
$dark_red: #f00;
$darkest_red: #900;
.dark-gray {
  background-color: $dark_gray !important;
}

.medium-gray {
  background-color: $medium_gray !important;
}

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

.orange {
  background-color: $orange !important;
}

.gray {
  background-color: $medium_light_gray !important;
}

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

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

.black {
  background-color: $black !important;
}

.brown {
  background-color: $brown !important;
}

.magenta {
  background-color: $magenta !important;
}

.green,
.success,
.saucer-success {
  background: $green !important;
}

.red {
  background: $red !important;
}

.dark-red,
.error,
.saucer-error {
  background: $dark_red !important;
}

.dark-orange,
.warn,
.saucer-warn {
  background: $dark_orange !important;
}

.yellow,
.busy,
.saucer-busy {
  background: $yellow !important;
}

.blue,
.info,
.saucer-info {
  background: $blue !important;
}

.dark-blue,
.fun,
.saucer-fun {
  background: $dark_blue !important;
}