/* Colors */

.cl-error {
    color: #f60000
}

.cl-warning {
    color: #ffae00
}

.cl-ok {
    color: #00e858
}


/*# Si queremos una división de colores. Tener en cuenta posible scss para ello #*/

.bg-restaurant {
    background-color: #f5f5f5;
}


/* Categories */

.bg-starters {
    background-color: #fdf9eb;
}

.btn-food.bg-starters {
    background-color: #fffcd1;
}

.card-category.bg-starters,
.btn-food.bg-starters:hover {
    background-color: #fff690;
}

.bg-main {
    background-color: #fbf0e8;
}

.btn-food.bg-main {
    background-color: #fdead8;
}

.card-category.bg-main,
.btn-food.bg-main:hover {
    background-color: #ffca98
}

.bg-desserts {
    background-color: #faf1fb;
}

.btn-food.bg-desserts {
    background-color: #ffeffb;
}

.card-category.bg-desserts,
.btn-food.bg-desserts:hover {
    background-color: #ffd9f5;
}

.bg-garnish {
    background-color: #e6f7e9;
}

.btn-food.bg-garnish {
    background-color: #d0ffd3;
}

.card-category.bg-garnish,
.btn-food.bg-garnish:hover {
    background-color: #8afa91;
}

.bg-drinks {
    background-color: #e7fbfc;
}

.btn-food.bg-drinks {
    background-color: #d2faff;
}

.card-category.bg-drinks,
.btn-food.bg-drinks:hover {
    background-color: #86e6f2;
}

.bg-sauces {
    background-color: #fcf5e9;
}

.btn-food.bg-sauces {
    background-color: #ffe8be;
}

.card-category.bg-sauces,
.btn-food.bg-sauces:hover {
    background-color: #ffd78f;
}


/* Subcategories */

.bg-legumes {
    background-color: #fcf8f0;
}

.btn-food.bg-legumes {
    background-color: #fff3e6;
}

.card-category.bg-legumes,
.btn-food.bg-legumes:hover {
    background-color: #fee2c5;
}

.bg-vegetables {
    background-color: #effdf1;
}

.btn-food.bg-vegetables {
    background-color: #cdf7cd;
}

.card-category.bg-vegetables,
.btn-food.bg-vegetables:hover {
    background-color: #83d783;
}

.bg-mushrooms {
    background-color: #fef5f0;
}

.btn-food.bg-mushrooms {
    background-color: #ebdfd0;
}

.card-category.bg-mushrooms,
.btn-food.bg-mushrooms:hover {
    background-color: #cfbaa0;
}

.bg-soups {
    background-color: #fef7ee;
}

.btn-food.bg-soups {
    background-color: #ffe9d1;
}

.card-category.bg-soups,
.btn-food.bg-soups:hover {
    background-color: #f9cc9c;
}

.bg-rices {
    background-color: #fff9ec;
}

.btn-food.bg-rices {
    background-color: #fff0cf;
}

.card-category.bg-rices,
.btn-food.bg-rices:hover {
    background-color: #ffda89;
}

.bg-pastas {
    background-color: #fcfbe8;
}

.btn-food.bg-pastas {
    background-color: #fffcd6;
}

.card-category.bg-pastas,
.btn-food.bg-pastas:hover {
    background-color: #fff8a6;
}

.bg-meats {
    background-color: #fbf0f0;
}

.btn-food.bg-meats {
    background-color: #fbdcdc;
}

.card-category.bg-meats,
.btn-food.bg-meats:hover {
    background-color: #efa8a8;
}

.bg-fishes {
    background-color: #e6f3fb;
}

.btn-food.bg-fishes {
    background-color: #d4e3ff;
}

.card-category.bg-fishes,
.btn-food.bg-fishes:hover {
    background-color: #a2c2fc;
}

.bg-eggs {
    background-color: #ffffeb;
}

.btn-food.bg-eggs {
    background-color: #fffcce;
}

.card-category.bg-eggs,
.btn-food.bg-eggs:hover {
    background-color: #fff890;
}

.bg-fruits {
    background-color: #e9fdf8;
}

.btn-food.bg-fruits {
    background-color: #c9ffeb;
}

.card-category.bg-fruits,
.btn-food.bg-fruits:hover {
    background-color: #a3fbda;
}

.bg-desserts {
    background-color: #fef5f9;
}

.btn-food.bg-desserts {
    background-color: #ffe3ef;
}

.card-category.bg-desserts,
.btn-food.bg-desserts:hover {
    background-color: #fccfe2;
}

.bg-bakes {
    background-color: #f9f0ea;
}

.btn-food.bg-bakes {
    background-color: #f5e8d7;
}

.card-category.bg-bakes,
.btn-food.bg-bakes:hover {
    background-color: #ecd3b1;
}

.bg-juices {
    background-color: #fdf6f0;
}

.btn-food.bg-juices {
    background-color: #ffead6;
}

.card-category.bg-juices,
.btn-food.bg-juices:hover {
    background-color: #ffcc9b;
}

.bg-cocktails {
    background-color: #eefeff;
}

.btn-food.bg-cocktails {
    background-color: #e1fffc;
}

.card-category.bg-cocktails,
.btn-food.bg-cocktails:hover {
    background-color: #aefff8;
}

.bg-infusions {
    background-color: #f3eeec;
}

.btn-food.bg-infusions {
    background-color: #f3ded2;
}

.card-category.bg-infusions,
.btn-food.bg-infusions:hover {
    background-color: #d2a185;
}


/* Ingredients */

.bg-unknown {
    background-color: #fff;
}

.bg-milk {
    background-color: rgb(254, 255, 248);
}

.bg-meat,
.bg-white-meat,
.bg-red-meat {
    background-color: rgb(255, 217, 217);
}

.bg-sausages {
    background-color: rgb(255, 225, 217);
}

.bg-fish,
.bg-white-fish,
.bg-blue-fish {
    background-color: rgb(221, 244, 255);
}

.bg-seafood {
    background-color: rgb(224, 237, 255);
}

.bg-crustacean {
    background-color: rgb(231, 238, 252);
}

.bg-mollusk {
    background-color: rgb(202, 202, 231);
}

.bg-echinoderm {
    background-color: rgb(217, 223, 245);
}

.bg-egg {
    background-color: rgb(255, 255, 230);
}

.bg-tuber {
    background-color: rgb(255, 253, 220);
}

.bg-legume {
    background-color: rgb(240, 224, 206);
}

.bg-vegetable {
    background-color: rgb(219, 255, 225);
}

.bg-mushroom {
    background-color: rgb(235, 227, 211);
}

.bg-fruit {
    background-color: rgb(200, 245, 224);
}

.bg-nuts {
    background-color: rgb(253, 246, 213);
}

.bg-cereal {
    background-color: rgb(255, 246, 206);
}

.bg-pasta {
    background-color: rgb(255, 254, 203);
}

.bg-flour {
    background-color: rgb(253, 255, 238);
}

.bg-sugar {
    background-color: rgb(239 255 255);
}

.bg-fat {
    background-color: rgb(252, 255, 214);
}

.bg-oil {
    background-color: rgb(247 255 236);
}

.bg-butter {
    background-color: rgb(255, 253, 227);
}

.bg-spice {
    background-color: rgb(235, 194, 194);
}

.bg-dressing {
    background-color: rgb(231, 235, 211);
}

.bg-infusion {
    background-color: rgb(223, 206, 187);
}

.bg-alcohol {
    background-color: rgb(215, 240, 245);
}

.bg-processed {
    background-color: rgb(255, 240, 220);
}

.bg-condiment {
    background-color: rgb(243, 210, 198);
}

.bg-seed {
    background-color: rgb(205 157 102);
}


/* Tools */

.bg-utensils {
    background-color: rgb(245, 245, 245);
}

.bg-cutlery {
    background-color: rgb(235, 222, 220);
}

.bg-accessory {
    background-color: rgb(233, 255, 215);
}

.bg-container {
    background-color: rgb(228, 241, 255);
}

.bg-cocktail {
    background-color: rgb(224, 252, 251);
}

.bg-mold {
    background-color: rgb(255, 200, 200);
}

.bg-electric-machine {
    background-color: rgb(243, 233, 255);
}

.bg-others {
    background-color: rgb(248, 255, 211);
}

.bg-crockery {
    background-color: rgb(252, 224, 241);
}

.bg-measurement {
    background-color: rgb(252, 243, 216);
}

.bg-cooking-container {
    background-color: rgb(237, 243, 245);
}

.bg-cookware {
    background-color: rgb(231, 231, 231);
}

.bg-infusions {
    background-color: rgb(229 205 198);
}

.bg-barbecue {
    background-color: rgb(241, 213, 213);
}

.bg-dessert {
    background-color: rgb(253, 230, 244);
}

.bg-creative {
    background-color: rgb(196, 253, 205);
}

.bg-hand-machine {
    background-color: rgb(255, 238, 206);
}

.bg-gadget {
    background-color: rgb(219, 253, 218);
}

.bg-protection {
    background-color: rgb(238, 229, 218);
}

.bg-holder {
    background-color: rgb(206, 200, 194);
}


/* Moods */

.bg-bad:hover,
.bg-bad.active,
.bg-angry:hover,
.bg-angry.active {
    background-color: #ffe4e4;
    /* border-radius: 50%; */
}

.bg-normal:hover,
.bg-normal.active,
.bg-neutral:hover,
.bg-neutral.active {
    background-color: #fffbed;
    /* border-radius: 50%; */
}

.bg-happy:hover,
.bg-happy.active {
    background-color: #e0fffd;
    /* border-radius: 50%; */
}

.bg-good:hover,
.bg-good.active,
.bg-excellent:hover,
.bg-excellent.active {
    background-color: #e2ffe3;
    /* border-radius: 50%; */
}

.bg-less:hover,
.bg-less.active {
    background: linear-gradient( 90deg, #eedec1 0%, #eedec1 50%, #ffefbf 50%, #ffefbf 100%);
    /* background: linear-gradient( 90deg, #eec1c1 0%, #eec1c1 50%, #ffefbf 50%, #ffefbf 100%); */
    /* border-radius: 50%; */
}


/* commodities */

.btn-food.bg-menu:hover,
.bg-menu {
    background-color: #80bd7e;
}

.btn-food.bg-parking:hover,
.bg-parking {
    background-color: #6a6aad;
}

.btn-food.bg-takeaway:hover,
.bg-takeaway {
    background-color: #ffd78e;
}

.btn-food.bg-valet:hover,
.bg-valet {
    background-color: #FFD5DD;
}

.btn-food.bg-nobooking:hover,
.bg-nobooking {
    background-color: #67b6f5;
}

.btn-food.bg-terrace:hover,
.bg-terrace {
    background: linear-gradient(0deg, #34db61 35%, #42d1f5 40%);
}

.btn-food.bg-menu {
    background-color: #bde3bb;
}

.btn-food.bg-takeaway {
    background-color: #ffeed0;
}

.btn-food.bg-parking {
    background-color: #c4c4e0;
}

.btn-food.bg-valet {
    background-color: #ffeff2;
}

.btn-food.bg-nobooking {
    background-color: #b0dcff;
}

.btn-food.bg-terrace {
    background: linear-gradient(0deg, #7aff9e 35%, #b0efff 40%);
}


/* Ocassions */

.bg-lunch-dinner {
    background-color: #ffac92;
}

.bg-breakfast-snack {
    background-color: #e8b694;
}

.bg-brunch {
    background-color: #ffc261;
}

.bg-snack-food {
    background-color: #ffe3a3;
}

.bg-drinks-cocktails {
    background-color: #b2f7f1;
}

.bg-little-time {
    background-color: #aee7f7;
}

.bg-big-events {
    background-color: #f1e4fd;
}

.bg-special-ocassions {
    background-color: #b2f7c0;
}

.bg-romantic {
    background-color: #ffc5c5;
}

.bg-business {
    background-color: #b6bbd8;
}

.bg-family {
    background-color: #cbf988;
}

.bg-friends {
    background-color: #ffdf85;
}


/* Media */

@media (max-width: 576px) {
    /* Categories */
    .bg-starters {
        background-color: #fffcd1;
    }
    .bg-main {
        background-color: #fdead8;
    }
    .bg-desserts {
        background-color: #ffeffb;
    }
    .bg-garnish {
        background-color: #d0ffd3;
    }
    .bg-drinks {
        background-color: #d2faff;
    }
    .bg-sauces {
        background-color: #ffe8be;
    }
    /* Subcategories */
    .bg-legumes {
        background-color: #fff3e6;
    }
    .bg-vegetables {
        background-color: #cdf7cd;
    }
    .bg-mushrooms {
        background-color: #ebdfd0;
    }
    .bg-soups {
        background-color: #ffe9d1;
    }
    .bg-rices {
        background-color: #fff0cf;
    }
    .bg-pastas {
        background-color: #fffcd6;
    }
    .bg-meats {
        background-color: #fbdcdc;
    }
    .bg-fishes {
        background-color: #d4e3ff;
    }
    .bg-eggs {
        background-color: #fffcce;
    }
    .bg-fruits {
        background-color: #c9ffeb;
    }
    .bg-desserts {
        background-color: #ffe3ef;
    }
    .bg-bakes {
        background-color: #f5e8d7;
    }
    .bg-juices {
        background-color: #ffead6;
    }
    .bg-cocktails {
        background-color: #e1fffc;
    }
    .bg-infusions {
        background-color: #f3ded2;
    }
    /* Moods */
    .bg-bad:hover,
    .bg-bad,
    .bg-angry:hover,
    .bg-angry {
        background-color: rgba(0, 0, 0, 0);
    }
    .bg-normal:hover,
    .bg-normal,
    .bg-neutral:hover,
    .bg-neutral {
        background-color: rgba(0, 0, 0, 0);
    }
    .bg-happy:hover,
    .bg-happy {
        background-color: rgba(0, 0, 0, 0);
    }
    .bg-good:hover,
    .bg-good,
    .bg-excellent:hover,
    .bg-excellent {
        background-color: rgba(0, 0, 0, 0);
    }
    .bg-less:hover,
    .bg-less {
        background-color: rgba(0, 0, 0, 0);
    }
    /* Moods active */
    .bg-bad.active:hover,
    .bg-bad.active,
    .bg-angry.active:hover,
    .bg-angry.active {
        background-color: #ffe4e4;
    }
    .bg-normal.active:hover,
    .bg-normal.active,
    .bg-neutral.active:hover,
    .bg-neutral.active {
        background-color: #fffbed;
    }
    .bg-happy.active:hover,
    .bg-happy.active {
        background-color: #e0fffd;
    }
    .bg-good.active:hover,
    .bg-good.active,
    .bg-excellent.active:hover,
    .bg-excellent.active {
        background-color: #e2ffe3;
    }
    .bg-less.active:hover,
    .bg-less.active {
        background: linear-gradient( 90deg, #eedec1 0%, #eedec1 50%, #ffefbf 50%, #ffefbf 100%);
    }
}