.buttonGroup {
    display: flex;
    padding: 0;
    list-style: none;
    flex-direction: row; /* Default: horizontal */
    gap: 5px; /* Space between buttons */
    flex-wrap: nowrap;
    justify-content: center;
}

    .buttonGroup.vertical {
        flex-direction: column;
        width: fit-content; /* Prevent it from stretching full width */
    }

    .buttonGroup li {
        flex: 1; /* Default to equal distribution */
        min-width: 100px;
        max-width: 240px;
        font-weight: 900;
        font-size: 16px;
        letter-spacing: -0.1em;
        text-align: left;
        margin: 0;
        /*align-items:center;*/
    }

    .buttonGroup.xs li {
        max-width: 75px;
    }

    .buttonGroup.small li {
        max-width: 150px;
    }

    .buttonGroup li a,
    .buttonGroup li button {
        cursor: pointer;
        display: flex;
        text-align: center;
        padding: 10px 10px 10px 30px;
        color: #000;
        text-decoration: none;
        border-radius: 10px;
        border: 2px solid #000;
        text-transform: lowercase;
        transition: all 0.3s ease-in-out;
        position: relative;
        align-items: center;
        height: 40px;
        font-weight: 900;
    }

        .buttonGroup li a::before,
        .buttonGroup li button::before {
            width: 30px;
            height: 30px;
            left: 0;
            display: block;
            position: absolute;
            color: #817192;
        }

        .buttonGroup li a.noicon,
        .buttonGroup li button.noicon {
            padding-left: 10px !important;
        }

        .buttonGroup li a:hover,
        .buttonGroup li button:hover {
            background: #523e6b;
            color: #fff;
        }

        .buttonGroup li a.bg-white:hover {
            background: #73648e !important;
            color: #fff;
        }

        .buttonGroup li a .selected,
        .buttonGroup li button .selected {
            background: #523e6b;
            color: #fff;
        }

        /* Inverted style */
        .buttonGroup li a.inverted,
        .buttonGroup li button.inverted {
            background-color: #000; /* Invert background */
            color: #fff; /* Invert text color */
        }

    /* Adjust widths dynamically */
    .buttonGroup:has(li:nth-child(1):nth-last-child(1)) li {
        flex: 1;
    }

    .buttonGroup:has(li:nth-child(1):nth-last-child(2)) li {
        flex: 0 0 50%;
    }

    .buttonGroup:has(li:nth-child(1):nth-last-child(3)) li {
        flex: 0 0 33.33%;
    }

    .buttonGroup:has(li:nth-child(1):nth-last-child(4)) li {
        flex: 0 0 25%;
    }

    .buttonGroup:has(li:nth-child(1):nth-last-child(5)) li {
        flex: 0 0 20%;
    }

/* Mobile View: Stack Buttons Vertically */
@media screen and (max-width: 600px) {
    .buttonGroup {
        flex-direction: column; /* Stack vertically */
        align-items: stretch; /* Make buttons take full width */
    }

        .buttonGroup li {
            width: 100%; /* Buttons take full width */
            max-width: none;
        }
}


/* Button Icons */

/* Adding icons before links */

/* Different icons for different buttons */

/* Yes green tick svg */
.buttonGroup li a.yes::before,
.buttonGroup li button.yes::before {
    content: "";
    background: url(../images/icons/tick.svg) center center / 100% no-repeat;
}
/* No red cross svg */
.buttonGroup li a.no::before,
.buttonGroup li button.no::before {
    content: "";
    background: url(../images/icons/cross.svg) center center / 100% no-repeat;
}
/* explore svg */
.buttonGroup li a.explore::before,
.buttonGroup li button.explore::before {
    content: "";
    background: url(../images/icons/explore.svg) center center / 100% no-repeat;
}

/* sitemap svg */
.buttonGroup li a.sitemap::before,
.buttonGroup li button.sitemap::before {
    content: "";
    background: url(../images/icons/sitemap.svg) center center / 100% no-repeat;
}


/* report svg */
.buttonGroup li a.report::before,
.buttonGroup li button.report::before {
    content: "";
    background: url(../images/icons/reports.svg) center center / 100% no-repeat;
}



/* basket svg */
.buttonGroup li a.basket::before,
.buttonGroup li button.basket::before {
    content: "";
    background: url(../images/icons/basket.svg) center center / 100% no-repeat;
}



/* Thumbs up - Font awesome Icon */
.buttonGroup li a.include::before,
.buttonGroup li button.include::before {
    content: "";
    background: url(../images/icons/thumbs-up.svg) center center / 100% no-repeat;
   /* font-family: "Font Awesome 6 Free";
    font-weight: 900; 
    font-size: 1.5em;
    content: "\f164";
    color: green;
    height: auto;*/
}

/* Thumbs down - Font awesome Icon */
.buttonGroup li a.exclude::before,
.buttonGroup li button.exclude::before {
    content: "";
    background: url(../images/icons/thumbs-down.svg) center center / 100% no-repeat;
  /*  font-family: "Font Awesome 6 Free";
    font-weight: 900; 
    font-size: 1.5em;
    content: "\f165";
    color: red;
    height: auto;*/
}

.buttonGroup li a.include.all::before
.buttonGroup li button.include.all::before {
    color: blue;
}

.buttonGroup li a.exclude.all::before,
.buttonGroup li button.exclude.all::before {
    color: purple;
    background-image: url(../images/icons/thumbs-down-red.svg);
}

/* Sharing - Report builder page */

.buttonGroup li a.edit::before,
.buttonGroup li button.edit::before {
    content: '';
    background: url(../images/icons/edit.svg) center center / 80% no-repeat;
}

.buttonGroup li a.edit:hover,
.buttonGroup li button.edit:hover {
    color: #fff;
}

.buttonGroup li a.remove::before,
.buttonGroup li button.remove::before {
    content: '';
    background: url(../images/icons/delete.svg) center center / 80% no-repeat;
}

.buttonGroup li a.report::before,
.buttonGroup li button.report::before {
    content: '';
    background: url(../images/icons/reports.svg) center center / 80% no-repeat;
}

.buttonGroup li a.email::before,
.buttonGroup li button.email::before {
    content: '';
    background: url(../images/icons/email-mail.svg) center center / 80% no-repeat;
}



.buttonGroup li a.remove:hover,
.buttonGroup li button.remove:hover {
    color: #fff;
}


.buttonGroup li a.share::before,
.buttonGroup li button.share::before {
    content: '';
    background: url(../images/icons/share.svg) center center / 80% no-repeat;
}

/* Take tour button */
.fixedBottomRight {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9001; /* Ensures it stays above other elements */
}

/* sitemap svg */
.buttonGroup li button img.tour {
    height: 40px;
    width: 40px;
    margin-left: -50px;
}
/* WhatsApp button */
.whatsapp-button {
    display: block;
    position: relative;
    background: url(../images/whatsapp-button.svg) center center / 100% no-repeat;
    text-indent: -9999px;
    width: 150px;
    height: 54px;
    transition: background 0.25s ease;
}
.whatsapp-button:hover {
    background-image: url(../images/whatsapp-button-hover.svg);
}