/* The container must be positioned relative: */
#brxe-lbmaxh .form-group:nth-child(4) {
    position: relative;
    max-width: 100%;
}

#brxe-lbmaxh .form-group:nth-child(4)  select {
    display: none !important; /*hide original SELECT element: */
}

#brxe-lbmaxh .select-selected {
    color: #ffffff;
    background-color: transparent;
    border-radius: 11px;
    border: 1px solid var(--bricks-color-bsygah);
    padding:  16px 20px 19px 32px;
  font-size: 16px;
  font-weight: 600;
}

/* Style the arrow inside the select element: */
#brxe-lbmaxh .select-selected:after {
    position: absolute;
    content: "";
    top: 26px;
    right: 22px;
    width: 19px;
    height: 9px;
    background-image: url("/wp-content/uploads/2024/10/form-chewron-1.png");
    z-index: 100;
}

/* Point the arrow upwards when the select box is open (active): */
#brxe-lbmaxh .select-selected.select-arrow-active:after {
    transform: rotate(180deg);
}

/* style the items (options), including the selected item: */
#brxe-lbmaxh .select-items div {
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    line-height: 30px;
}

/* Style items (options): */
#brxe-lbmaxh .select-items {
    position: absolute;
    background-color: #00507D;
    top: 0;
//top: calc(100% - 20px);
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 11px;
    box-shadow: 0px 5px 19px #000D14;
    border: 1px solid var(--bricks-color-bsygah);
    padding:20px 60px 20px 32px;
}

#brxe-lbmaxh .option-container {
    max-height: 214px;
    overflow-y: scroll;
}

#brxe-lbmaxh .option-container::-webkit-scrollbar {
    width: 2px;
}

/* Track */
#brxe-lbmaxh .option-container::-webkit-scrollbar-track {
    background: #FFFFFF;
}

/* Handle */
#brxe-lbmaxh .option-container::-webkit-scrollbar-thumb {
    background: #00507D;
}

/* Handle on hover */
#brxe-lbmaxh .option-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Hide the items when the select box is closed: */
#brxe-lbmaxh .select-hide {
    display: none;
}

#brxe-lbmaxh .select-items .option-container div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.text-uppercase {
    text-transform: uppercase;
}

document.addEventListener("DOMContentLoaded", function() {
    const csForms = document.querySelectorAll('.cs-form');
    var i, j, l, ll, selElmnt, a, b, c;
    var x = [];
    csForms.forEach((form) => {
        x.push(form.querySelectorAll('.form-group')[3]);
    })
    /*look for any elements with the class "custom-select":*/
    l = x.length;
    for (i = 0; i < l; i++) {
        selElmnt = x[i].getElementsByTagName("select")[0];
        ll = selElmnt.length;
        /*for each element, create a new DIV that will act as the selected item:*/
        a = document.createElement("DIV");
        a.setAttribute("class", "select-selected");
        a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
        x[i].appendChild(a);
        /*for each element, create a new DIV that will contain the option list:*/
        b = document.createElement("DIV");
        b.setAttribute("class", "select-items select-hide");
        for (j = 1; j < ll; j++) {
            /*for each option in the original select element,
            create a new DIV that will act as an option item:*/
            c = document.createElement("DIV");
            c.innerHTML = selElmnt.options[j].innerHTML;
            c.addEventListener("click", function(e) {
                /*when an item is clicked, update the original select box,
                and the selected item:*/
                var y, i, k, s, h, sl, yl;
                s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                sl = s.length;
                h = this.parentNode.previousSibling;
                for (i = 0; i < sl; i++) {
                    if (s.options[i].innerHTML == this.innerHTML) {
                        s.selectedIndex = i;
                        h.innerHTML = this.innerHTML;
                        y = this.parentNode.getElementsByClassName("same-as-selected");
                        yl = y.length;
                        for (k = 0; k < yl; k++) {
                            y[k].removeAttribute("class");
                        }
                        this.setAttribute("class", "same-as-selected");
                        break;
                    }
                }
                h.click();
            });
            b.appendChild(c);
        }
        x[i].appendChild(b);
        a.addEventListener("click", function(e) {
            /*when the select box is clicked, close any other select boxes,
            and open/close the current select box:*/
            e.stopPropagation();
            closeAllSelect(this);
            this.nextSibling.classList.toggle("select-hide");
            this.classList.toggle("select-arrow-active");
        });
    }
    function closeAllSelect(elmnt) {
        /*a function that will close all select boxes in the document,
        except the current select box:*/
        var x, y, i, xl, yl, arrNo = [];
        x = document.getElementsByClassName("select-items");
        y = document.getElementsByClassName("select-selected");
        xl = x.length;
        yl = y.length;
        for (i = 0; i < yl; i++) {
            if (elmnt == y[i]) {
                arrNo.push(i)
            } else {
                y[i].classList.remove("select-arrow-active");
            }
        }
        for (i = 0; i < xl; i++) {
            if (arrNo.indexOf(i)) {
                x[i].classList.add("select-hide");
            }
        }
    }
    /*if the user clicks anywhere outside the select box,
    then close all select boxes:*/
    document.addEventListener("click", closeAllSelect);
})
document.addEventListener('DOMContentLoaded', function() {
    const selectedPH = document.querySelectorAll('.select-selected');
    selectedPH.forEach((select) => {
        select.classList.add('text-uppercase');
        select.addEventListener('click', function () {
            select.classList.remove('text-uppercase');
        })
    })
})