/*
 * Use CSS variables for each grade. Allows finer control of element styling;
 */
.grade--a {
  --color: #21578A;
}

.grade--b {
  --color: #4C8C40;
}

.grade--c {
  --color: #F5B21E;
}

.grade--d {
  --color: #E87524;
}

.grade--f {
  --color: #D01F30;
}

.grade--none {
  --color: #EEE;
}

.grade--f1 {
  --color: rgb(216, 62, 72);
}

.grade--f2 {
  --color: rgb(228, 125, 134);
}

.grade--f3 {
  --color: rgb(232, 144, 152);
}

.grade--f4 {
  --color: rgb(239, 181, 186);
}

.grade--f5 {
  --color: rgb(248, 224, 225);
  --text: #1C1C1B;
}