:root {
  --bg-white: #ffffff;
  --bg-black: #000000;
  --bg-gray: #ececec;
  --bg-blue: #0066cc;
  --bg-red: #d60000;
  --bg-orange: #f7a347;
  --bg-yellow: #f1ca3f;

  --text-white: #ffffff;
  --text-black: #000000;
  --text-gray: #232323;
  --text-secondary: #f8f8f8;
  --text-blue: #0066cc;
  --text-red: #d60000;
  --text-orange: #f7a347;
  --text-yellow: #f1ca3f;
}

.bg-white {
  --local-factbox-button-bg-color: #e6e6e6;
  --local-factbox-button-text-color: var(--text-black);

  background: var(--bg-white);
  color: var(--text-black);
}

.bg-black {
  --local-factbox-button-bg-color: #3d3d3d;
  --local-factbox-button-text-color: var(--text-white);

  background: var(--bg-black);
  color: var(--text-white);
}

.bg-gray {
  --local-factbox-button-bg-color: #d4d4d4;
  --local-factbox-button-text-color: var(--text-gray);

  background: var(--bg-gray);
  color: var(--text-gray);
}

.bg-blue {
  --local-factbox-button-bg-color: #027b97;
  --local-factbox-button-text-color: var(--text-white);

  background: var(--bg-blue);
  color: var(--text-white);
}

.bg-red {
  --local-factbox-button-bg-color: #b80000;
  --local-factbox-button-text-color: var(--text-white);

  background: var(--bg-red);
  color: var(--text-white);
}

.bg-orange {
  --local-factbox-button-bg-color: #fabf80;
  --local-factbox-button-text-color: var(--text-gray);

  background: var(--bg-orange);
  color: var(--text-gray);
}

.bg-yellow {
  --local-factbox-button-bg-color: #ffe66b;
  --local-factbox-button-text-color: var(--text-gray);

  background: var(--bg-yellow);
  color: var(--text-gray);
}

.bg-gold {
  background: linear-gradient(
    95deg,
    #e7d4a2 0.25%,
    #be9831 20.26%,
    #e7d4a2 69.06%,
    #e6d8b2 71.99%,
    #796120 97.86%
  );
  color: var(--text-black);
}

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

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

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

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

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

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

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

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