:root {
  --bg-white: #ffffff;
  --bg-black: #000000;
  --bg-gray: #ececec;
  --bg-blue: #0066cc;
  --bg-red: #d60000;
  --bg-orange: #f7a347;
  --bg-yellow: #f1ca3f;
  --bg-gold: linear-gradient(
    95deg,
    #e7d4a2 0.25%,
    #be9831 20.26%,
    #e7d4a2 69.06%,
    #e6d8b2 71.99%,
    #796120 97.86%
  );

  --text-white: #ffffff;
  --text-black: #000000;
  --text-gray: #232323;
  --text-blue: #0066cc;
  --text-red: #d60000;
  --text-orange: #f7a347;
  --text-yellow: #f1ca3f;
  --text-gold: linear-gradient(
    95deg,
    #e7d4a2 0.25%,
    #be9831 20.26%,
    #e7d4a2 69.06%,
    #e6d8b2 71.99%,
    #796120 97.86%
  );

  --factbox-bg-white: #e6e6e6;
  --factbox-bg-black: #3d3d3d;
  --factbox-bg-gray: #d4d4d4;
  --factbox-bg-blue: #027b97;
  --factbox-bg-red: #b80000;
  --factbox-bg-orange: #fabf80;
  --factbox-bg-yellow: #ffe66b;
}

.bg-white {
  --local-factbox-button-bg-color: var(--factbox-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-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-bg-gray);
  --local-factbox-button-text-color: var(--text-gray);

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

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

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

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

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

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

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

.bg-yellow {
  --local-factbox-button-bg-color: var(--factbox-bg-yellow);
  --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-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;
}

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

@media (max-width: 1023px) {
  .color_mobile_bg-white {
    --local-factbox-button-bg-color: var(--factbox-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-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-bg-gray);
    --local-factbox-button-text-color: var(--text-gray);

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

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

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

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

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

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

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

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

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

  .color_mobile_bg-gold {
    background: var(--bg-gold);
    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-gray {
    color: var(--text-gray) !important;
  }

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

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

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

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

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