.background-primary-transparent {
  background-color: var(--primary-color-transparent);
}

.background-primary {
  background-color: var(--primary-color);
  color: white;
}

.background-orange {
  background-color: #ff8a00;
  color: white;
}

.background-green {
  background-color: #0ba000;
  color: white;
}

.border-color-orange {
  border-color: #ff8a00;
}

.fill-orange {
  fill: #ff8a00;
}

.background-guest {
  background-color: #b0a9a2;
  color: white;
}

.background-red {
  background-color: #ff0000;
}

.background-light-grey {
  background-color: #d6d6d6;
}

.border-color-grey {
  border-color: grey;
}

.border-color-white {
  border-color: white;
}

.color-red {
  color: #ff0000;
}

.color-grey {
  color: grey;
}

.color-black {
  color: black;
}

.background-grey {
  background-color: var(--grey);
}

.background-dark-grey {
  background-color: var(--dark-grey);
}

.fill-white {
  fill: white;
  svg {
    fill: white;
  }
}

.fill-black {
  fill: black;
  svg {
    fill: black;
  }
}

.fill-red {
  fill: #ff0000;
  svg {
    fill: #ff0000;
  }
}