:root {
  --bg-white: #ffffff;
  --bg-black: #000000;
  --bg-gray: #f3f3f3;
  --bg-blue: #002d6c;
  --bg-cyan: #00ffff;
  --bg-red: #ff0000;
  --bg-yellow: #ffff00;

  --text-white: #ffffff;
  --text-black: #000000;
  --text-red: #ff0000;
  --text-yellow: #ffff00;

  --factbox-button-bg-white: #f3f3f3;
  --factbox-button-bg-black: #232323;
  --factbox-button-bg-gray: #dedede;
  --factbox-button-bg-blue: #0d4fab;
  --factbox-button-bg-cyan: #00d6d6;
  --factbox-button-bg-red: #cc0000;
  --factbox-button-bg-yellow: #e0e000;
}

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

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

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

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

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

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

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

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

.bg-cyan {
  --local-factbox-button-bg-color: var(--factbox-button-bg-cyan);
  --local-factbox-button-text-color: var(--text-black);

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

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

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

.bg-yellow {
  --local-factbox-button-bg-color: var(--factbox-button-bg-yellow);
  --local-factbox-button-text-color: var(--text-black);

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

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

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

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

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

@media (max-width: 1023px) {
  .color_mobile_bg-white {
    --local-factbox-button-bg-color: var(--factbox-button-bg-white);
    --local-factbox-button-text-color: var(--text-black);

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

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

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

  .color_mobile_bg-gray {
    --local-factbox-button-bg-color: var(--factbox-button-bg-gray);
    --local-factbox-button-text-color: var(--text-black);

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

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

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

  .color_mobile_bg-cyan {
    --local-factbox-button-bg-color: var(--factbox-button-bg-cyan);
    --local-factbox-button-text-color: var(--text-black);

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

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

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

  .color_mobile_bg-yellow {
    --local-factbox-button-bg-color: var(--factbox-button-bg-yellow);
    --local-factbox-button-text-color: var(--text-black);

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

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

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

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

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