.mgg-vivid-black {
    --bg-color: #000;
    --fg-color: #fff;
}

.mgg-safety-blue {
    --bg-color: #0067a7;
    --fg-color: #fff;
}

.mgg-vivid-yellowish-green {
    --bg-color: #27a64c;
    --fg-color: #fff;
}

.mgg-cranberry {
    --bg-color: #9e003a;
    --fg-color: #fff;
}

.mgg-vivid-purple {
    --bg-color: #9a4eae;
    --fg-color: #fff;
}

.mgg-camo-gray {
    --bg-color: #9495a5;
    --fg-color: #fff;
}

.mgg-vivid-greenish-blue {
    --bg-color: #0085a1;
    --fg-color: #fff;
}

.mgg-highway-brown {
    --bg-color: #633517;
    --fg-color: #fff;
}

.mgg-highway-orange {
    --bg-color: #e06000;
    --fg-color: #fff;
}

.mgg-highway-blue {
    --bg-color: #00477e;
    --fg-color: #fff;
}

.mgg-highway-red {
    --bg-color: #a6001a;
    --fg-color: #fff;
}

.mgg-highway-schoolbus {
    --bg-color: #ee9600;
    --fg-color: #fff;
}

.mgg-highway-yellow {
    --bg-color: #ffab00;
    --fg-color: #fff;
}

.mgg-highway-green {
    --bg-color: #004d33;
    --fg-color: #fff;
}

.mgg-safety-red {
    --bg-color: #bd1e24;
    --fg-color: #fff;
}

.mgg-safety-orange {
    --bg-color: #e97600;
    --fg-color: #fff;
}

.mgg-safety-yellow {
    --bg-color: #f6c700;
    --fg-color: #fff;
}

.mgg-safety-green {
    --bg-color: #007256;
    --fg-color: #fff;
}

.mgg-safety-purple {
    --bg-color: #964f8e;
    --fg-color: #fff;
}

.mgg-vivid-pink {
    --bg-color: #ffb5bA;
    --fg-color: #fff;
}

.mgg-vivid-red {
    --bg-color: #be0032;
    --fg-color: #fff;
}

.mgg-vivid-orange {
    --bg-color: #f38400;
    --fg-color: #fff;
}

.mgg-vivid-yellow {
    --bg-color: #f3c300;
    --fg-color: #fff;
}

.mgg-vivid-green {
    --bg-color: #008856;
    --fg-color: #fff;
}

.mgg-vivid-blue {
    --bg-color: #00a1c2;
    --fg-color: #fff;
}

.mgg-vivid-white {
    --bg-color: #fff;
    --fg-color: #000;
}

.mgg-vivid-yellowish-pink {
    --bg-color: #ffb7a5;
    --fg-color: #fff;
}

.mgg-vivid-reddish-orange {
    --bg-color: #e25822;
    --fg-color: #fff;
}

.mgg-vivid-orange-yellow {
    --bg-color: #f6a600;
    --fg-color: #fff;
}

.mgg-vivid-greenish-yellow {
    --bg-color: #dcd300;
    --fg-color: #fff;
}

.mgg-vivid-yellow-green {
    --bg-color: #8db600;
    --fg-color: #fff;
}

.mgg-vivid-bluish-green {
    --bg-color: #008882;
    --fg-color: #fff;
}

.mgg-vivid-purplish-blue {
    --bg-color: #30267a;
    --fg-color: #fff;
}

.mgg-vivid-reddish-purple {
    --bg-color: #870074;
    --fg-color: #fff;
}

.mgg-vivid-purplish-red {
    --bg-color: #ce4676;
    --fg-color: #fff;
}

.mgg-apple {
    --bg-color: #76cd26;
    --fg-color: #000;
}

.mgg-aspargus {
    --bg-color: #77ab56;
    --fg-color: #fff;
}

.mgg-apricot {
    --bg-color: #ffb16d;
    --fg-color: #fff;
}

.mgg-aubergine {
    --bg-color: #3d0734;
    --fg-color: #fff;
}

.mgg-avocado {
    --bg-color: #87a922;
    --fg-color: #fff;
}

.mgg-banana {
    --bg-color: #fafe4b;
    --fg-color: #000;
}

.mgg-butter {
    --bg-color: #ffff81;
    --fg-color: #000;
}

.mgg-blueberry {
    --bg-color: #464196;
    --fg-color: #fff;
}

.mgg-carrot {
    --bg-color: #e67e22;
    --fg-color: #fff;
}

.mgg-cherry {
    --bg-color: #cf0234;
    --fg-color: #fff;
}

.mgg-chocolate {
    --bg-color: #411900;
    --fg-color: #fff;
}

.mgg-coffee {
    --bg-color: #a6814c;
    --fg-color: #fff;
}

.mgg-egg {
    --bg-color: #fffcc4;
    --fg-color: #000;
}

.mgg-grape {
    --bg-color: #6c3461;
    --fg-color: #fff;
}

.mgg-kiwi {
    --bg-color: #8ee53f;
    --fg-color: #000;
}

.mgg-lemon {
    --bg-color: #fdff52;
    --fg-color: #000;
}

.mgg-lime {
    --bg-color: #bffe28;
    --fg-color: #000;
}

.mgg-mango {
    --bg-color: #ffa62b;
    --fg-color: #fff;
}

.mgg-mushroom {
    --bg-color: #ba9e88;
    --fg-color: #fff;
}

.mgg-mustard {
    --bg-color: #ceb301;
    --fg-color: #fff;
}

.mgg-mint {
    --bg-color: #c0fa8b;
    --fg-color: #000;
}

.mgg-olive {
    --bg-color: #6e750e;
    --fg-color: #fff;
}

.mgg-pea {
    --bg-color: #a4bf20;
    --fg-color: #fff;
}

.mgg-peach {
    --bg-color: #ffb07c;
    --fg-color: #fff;
}

.mgg-pear {
    --bg-color: #cbf85f;
    --fg-color: #000;
}

.mgg-plum {
    --bg-color: #3f012c;
    --fg-color: #fff;
}

.mgg-pomegranate {
    --bg-color: #c0392b;
    --fg-color: #fff;
}

.mgg-pumpkin {
    --bg-color: #d35400;
    --fg-color: #fff;
}

.mgg-raspberry {
    --bg-color: #b00149;
    --fg-color: #fff;
}

.mgg-saffron {
    --bg-color: #feb209;
    --fg-color: #fff;
}

.mgg-salmon {
    --bg-color: #ff796c;
    --fg-color: #fff;
}

.mgg-spearmint {
    --bg-color: #1ef876;
    --fg-color: #000;
}

.mgg-squash {
    --bg-color: #f2ab15;
    --fg-color: #fff;
}

.mgg-strawberry {
    --bg-color: #fb2943;
    --fg-color: #fff;
}

.mgg-tomato {
    --bg-color: #ec2d01;
    --fg-color: #fff;
}

.mgg-wheat {
    --bg-color: #fbdd7e;
    --fg-color: #000;
}

.mgg-wine {
    --bg-color: #80013f;
    --fg-color: #fff;
}

.mgg-camo-brown {
    --bg-color: #594d45;
    --fg-color: #fff;
}

.mgg-camo-red {
    --bg-color: #79533d;
    --fg-color: #fff;
}

.mgg-camo-olive {
    --bg-color: #595142;
    --fg-color: #fff;
}

.mgg-camo-field {
    --bg-color: #745d46;
    --fg-color: #fff;
}

.mgg-camo-earth {
    --bg-color: #ac7e54;
    --fg-color: #fff;
}

.mgg-camo-sand {
    --bg-color: #a9947b;
    --fg-color: #fff;
}

.mgg-camo-tan {
    --bg-color: #b49d80;
    --fg-color: #fff;
}

.mgg-camo-sandstone {
    --bg-color: #bcab90;
    --fg-color: #fff;
}

.mgg-camo-dark-green {
    --bg-color: #535640;
    --fg-color: #fff;
}

.mgg-camo-forest {
    --bg-color: #54504b;
    --fg-color: #fff;
}

.mgg-camo-light-green {
    --bg-color: #63613e;
    --fg-color: #fff;
}

.mgg-camo-green {
    --bg-color: #4a5444;
    --fg-color: #fff;
}

.mgg-camo-dark-gray {
    --bg-color: #5c5c5b;
    --fg-color: #fff;
}

.mgg-camo-black {
    --bg-color: #373538;
    --fg-color: #fff;
}

.mgg-yellow {
    --bg-color: #f7ba0b;
    --fg-color: #fff;
}

.mgg-orange {
    --bg-color: #d4652f;
    --fg-color: #fff;
}

.mgg-red {
    --bg-color: #a02128;
    --fg-color: #fff;
}

.mgg-violet {
    --bg-color: #904684;
    --fg-color: #fff;
}

.mgg-blue {
    --bg-color: #154889;
    --fg-color: #fff;
}

.mgg-green {
    --bg-color: #317f43;
    --fg-color: #fff;
}

.mgg-grey {
    --bg-color: #9b9b9b;
    --fg-color: #fff;
}

.mgg-brown {
    --bg-color: #7b5141;
    --fg-color: #fff;
}

.mgg-white {
    --bg-color: #f4f4f4;
    --fg-color: #000;
}

.mgg-black {
    --bg-color: #282828;
    --fg-color: #fff;
}

.mgg-noswap {
    background: var(--bg-color);
    color: var(--fg-color);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.mgg-text {
    color: var(--bg-color);
}

.mgg-btn {
    color: var(--fg-color);
    background-color: var(--bg-color);
}
    .mgg-btn:hover {
        color: var(--bg-color);
        background-color: var(--fg-color);
    }

.mgg-btn-outline {
    border-width: 1px;
    border-style: solid;
    border-color: var(--bg-color);
    background-color: var(--fg-color);
    color: var(--bg-color);
}

    .mgg-btn-outline:hover {
        background-color: var(--bg-color);
        color: var(--fg-color);
    }


.mgg-border-1 {
    border-width: 1px;
    border-style: solid;
    border-color: var(--bg-color);
}

.mgg-swap {
    background: var(--bg-color);
    color: var(--fg-color);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

    .mgg-swap:hover, .mgg-swap:focus {
        background: var(--fg-color);
        color: var(--bg-color);
        box-shadow: 0 0 8px 2px var(--fg-color);
    }