.dot[data-bool='True']::before {
  content: '\F519';
  font-family: 'bootstrap-icons';
  color: var(--bs-green);
}

.dot[data-bool='False']::before {
  content: '\F519';
  font-family: 'bootstrap-icons';
  color: var(--bs-red);
}

.dot[data-bool='None']::before {
  content: '\F519';
  font-family: 'bootstrap-icons';
  color: var(--bs-gray);
}

.dot-small[data-bool='True']::before {
  content: '\F309';
  font-family: 'bootstrap-icons';
  color: var(--bs-green);
}

.dot-small[data-bool='False']::before {
  content: '\F309';
  font-family: 'bootstrap-icons';
  color: var(--bs-red);
}

.dot-small[data-bool='None']::before {
  content: '\F309';
  font-family: 'bootstrap-icons';
  color: var(--bs-gray);
}

.dot-big[data-bool='True']::before {
  content: '\F287';
  font-family: 'bootstrap-icons';
  color: var(--bs-green);
}

.dot-big[data-bool='False']::before {
  content: '\F287';
  font-family: 'bootstrap-icons';
  color: var(--bs-red);
}

.dot-big[data-bool='None']::before {
  content: '\F287';
  font-family: 'bootstrap-icons';
  color: var(--bs-gray);
}