:root {
  /* Predifined Colors */

  --black: black;

  /* Dark Colors */
  --darkest: rgba(20, 26, 31, 1);
  --darker: rgba(23, 30, 36, 1);
  --medium-darker: rgba(34, 39, 42, 1);
  --dark: rgba(46, 52, 57, 1);
  --dark-blue: rgba(50, 64, 78, 1);
  --medium: rgba(68, 79, 85, 1);
  --light: rgba(92, 97, 101, 1);
  --lighter: rgba(115, 120, 123, 1);
  --lightest: rgba(150, 154, 156, 1);
  /* Light Colors */
  --light-darkest: rgba(23, 27, 28, 1);
  --light-darker: rgba(45, 54, 57, 1);
  --light-dark: rgba(79, 92, 99, 1);
  --light-medium-dark: rgba(128, 143, 153, 1);
  --light-medium: rgba(156, 169, 176, 1);
  --light-lighter: rgba(184, 193, 198, 1);
  --light-lightest: rgba(213, 218, 221, 1);

  /* Grey Range */
  --grey-1: rgba(24, 24, 24, 1);
  --grey-2: rgba(40, 40, 40, 1);
  --grey-3: rgba(56, 56, 56, 1);
  --grey-4: rgba(72, 72, 72, 1);
  --grey-5: rgba(88, 88, 88, 1);
  --grey-6: rgba(104, 104, 104, 1);
  --grey-7: rgba(120, 120, 120, 1);
  --grey-8: rgba(136, 136, 136, 1);
  --grey-9: rgba(152, 152, 152, 1);
  --grey-a: rgba(168, 168, 168, 1);
  --grey-b: rgba(184, 184, 184, 1);
  --grey-c: rgba(200, 200, 200, 1);
  --grey-d: rgba(216, 216, 216, 1);
  --grey-e: rgba(232, 232, 232, 1);
  --white: rgba(248, 248, 248, 1);

  /* Standard Colors */
  --standard-darkred: rgba(154, 0, 0, 1);
  --standard-red: rgba(221, 81, 76, 1);
  --standard-orange: rgba(243, 123, 29, 1);
  --standard-yellow: rgba(250, 210, 50, 1);
  --standard-green: rgba(94, 185, 94, 1);
  --standard-blue: rgba(31, 141, 214, 1);
  --standard-lightblue: rgba(103, 194, 240, 1);
  --standard-purple: rgba(128, 88, 165, 1);


  /* Base-16 Colors */
  --base16-red: rgba(204, 102, 102, 1);
  --base16-orange: rgba(222, 147, 95, 1);
  --base16-yellow: rgba(240, 198, 116, 1);
  --base16-green: rgba(181, 189, 104, 1);
  --base16-cyan: rgba(138, 190, 183, 1);
  --base16-blue: rgba(129, 162, 190, 1);
  --base16-purple: rgba(89, 74, 93, 1);
  --base16-pink: rgba(178, 148, 187, 1);
  --base16-brown: rgba(163, 104, 90, 1);

  --special: #C20000;
}

.dimmed {
  opacity: 0.75;
}

/* Color Classes */

.specialcolor {
  color: var(--special);
}

.primary {
  color: var(--primary-color) !important;
}

.grey-1 {
  color: var(--grey-1) !important;
}

.grey-2 {
  color: var(--grey-2) !important;
}

.grey-3 {
  color: var(--grey-3) !important;
}

.grey-4 {
  color: var(--grey-4) !important;
}

.grey-5 {
  color: var(--grey-5) !important;
}

.grey-6 {
  color: var(--grey-6) !important;
}

.grey-7 {
  color: var(--grey-7) !important;
}

.grey-8 {
  color: var(--grey-8) !important;
}

.grey-9 {
  color: var(--grey-9) !important;
}

.grey-a {
  color: var(--grey-a) !important;
}

.grey-b {
  color: var(--grey-b) !important;
}

.grey-c {
  color: var(--grey-c) !important;
}

.grey-d {
  color: var(--grey-d) !important;
}

.grey-e {
  color: var(--grey-e) !important;
}

.white {
  color: var(--white) !important;
}

.red {
  color: var(--red) !important;
}

.darkred {
  color: var(--darkred) !important;
}

.orange {
  color: var(--orange) !important;
}

.green {
  color: var(--green) !important;
}

.blue {
  color: var(--blue) !important;
}

.lightblue {
  color: var(--lightblue);
}

.yellow {
  color: var(--yellow) !important;
}

.purple {
  color: var(--purple) !important;
}


.background-darker {
  background-color: var(--darker) !important;
  border: 1px solid var(--base-darker) !important;
}

.background-dark {
  background-color: var(--dark) !important;
  border: 1px solid var(--base-dark) !important;
}

.background-medium {
  background-color: var(--medium) !important;
  border: 1px solid var(--medium) !important;
}

.background-light {
  background-color: var(--light) !important;
  border: 1px solid var(--light) !important;
}

.background-lighter {
  background-color: var(--lighter) !important;
  border: 1px solid var(--lighter) !important;
}

.grey-1-background {
  background-color: var(--grey-1) !important;
  border: 1px solid var(--grey-1) !important;
}

.grey-2-background {
  background-color: var(--grey-2) !important;
  border: 1px solid var(--grey-2) !important;
}

.grey-3-background {
  background-color: var(--grey-3) !important;
  border: 1px solid var(--grey-3) !important;
}

.grey-4-background {
  background-color: var(--grey-4) !important;
  border: 1px solid var(--grey-4) !important;
}

.grey-5-background {
  background-color: var(--grey-5) !important;
  border: 1px solid var(--grey-5) !important;
}

.grey-6-background {
  background-color: var(--grey-6) !important;
  border: 1px solid var(--grey-6) !important;
}

.grey-7-background {
  background-color: var(--grey-7) !important;
  border: 1px solid var(--grey-7) !important;
}

.grey-8-background {
  background-color: var(--grey-8) !important;
  border: 1px solid var(--grey-8) !important;
}

.grey-9-background {
  background-color: var(--grey-9) !important;
  border: 1px solid var(--grey-9) !important;
}

.grey-a-background {
  background-color: var(--grey-a) !important;
  border: 1px solid var(--grey-a) !important;
}

.grey-b-background {
  background-color: var(--grey-b) !important;
  border: 1px solid var(--grey-b) !important;
}

.grey-c-background {
  background-color: var(--grey-c) !important;
  border: 1px solid var(--grey-c) !important;
}

.grey-d-background {
  background-color: var(--grey-d) !important;
  border: 1px solid var(--grey-d) !important;
}

.grey-e-background {
  background-color: var(--grey-e) !important;
  border: 1px solid var(--grey-e) !important;
}

.white-background {
  background-color: var(--white) !important;
  border: 1px solid var(--white) !important;
}

.red-background {
  background-color: var(--red) !important;
  border: 1px solid var(--red) !important;
}

.darkred-background {
  background-color: var(--darkred) !important;
  border: 1px solid var(--darkred) !important;
}

.orange-background {
  background-color: var(--orange) !important;
  border: 1px solid var(--orange) !important;
}

.green-background {
  background-color: var(--green) !important;
  border: 1px solid var(--green) !important;
}

.blue-background {
  background-color: var(--blue) !important;
  border: 1px solid var(--blue) !important;
}

.lightblue-background {
  background-color: var(--lightblue) !important;
  border: 1px solid var(--lightblue) !important;
}

.yellow-background {
  background-color: var(--yellow) !important;
  border: 1px solid var(--yellow) !important;
}

.purple-background {
  background-color: var(--purple) !important;
  border: 1px solid var(--purple) !important;
}