How to customize bootstrap popover design?

I want to use bootstrap popovers in my project that uses node-js also. The problem is that when I want to customize the design of that, I could not set any style to change the color or border of the small arrow that starts the popover.

You can see that with the help of custom class and bootstrap template that introduced in options part of documentation, I successfully changed the color and design of .pop-class custom class and .popover-header element. But I could not understand that which property-values of .popover-arrow I must change to have different color or border for my small arrows?

/* define varible for getting button from html */
let myButton = document.getElementById("btnSearch");
/* define bootstrap popover */
var pop = new bootstrap.Popover(myButton, {
  trigger: "manual",
  title: "You must enter some text for searching in our site!",
  placement: "bottom",
  customClass: "pop-class"
});

/* if user clicks on button checks that the input search bar is "empty" or not, if it is empty "shows" the popover */
myButton.addEventListener("click", function() {
  let searchText = document.getElementById("search-bar").value;

  if (searchText.length < 1) {
    pop.show();
  }
});

/* if user clicks outside the search button this function hides the popover */
myButton.addEventListener("blur", function() {
  pop.hide();
});

:root {
    --color1: rgb(65, 129, 171);
    --color2: rgb(124, 201, 222);
    --color3: rgb(229, 131, 185);
    --color4: white;
    --color5: rgb(236, 215, 110);
}

.pop-class {
  color: var(--color3);
  border-color: var(--color3);
}

.pop-class .popover-header {
  background-color: var(--color4);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css" integrity="sha512-1fPmaHba3v4A7PaUsComSM4TBsrrRGs+/fv0vrzafQ+Rw+siILTiJa0NtFfvGeyY5E182SDTaF5PqP+XOHgJag==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- bootstrap search bar -->
<div class="container-fluid" id="parentAll">
  <div class="row">
    <div class="col-md-9 mx-auto">
      <div class="input-group my-5">
        <button id="btnSearch" class="btn btn-outline-secondary px-5" type="button">
                    <i id="iconSearch" class="bi bi-search"></i>
                </button>
        <input type="text" class="form-control form-control-lg" id="search-bar">
      </div>

    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Although bootstrap CDNs are added to the question, but the output in my local development environment is different from the output here. So I also put my output image below:

Solution

Thanks to the comment that @isherwood put in my answer, I finally found that these codes could change the border design of my popover:

/* define varible for getting button from html */
let myButton = document.getElementById("btnSearch");
/* define bootstrap popover */
var pop = new bootstrap.Popover(myButton, {
    trigger: "manual",
    title: "You must enter some text for searching in our site!",
    placement: "bottom",
    customClass: "pop-class"
});

/* if user clicks on button checks that the input search bar is "empty" or not, if it is empty "shows" the popover */
myButton.addEventListener("click", function() {
    let searchText = document.getElementById("search-bar").value;

    if (searchText.length < 1) {
        pop.show();
    }
});

/* if user clicks outside the search button this function hides the popover */
myButton.addEventListener("blur", function() {
    pop.hide();
});

:root {
    --color1: rgb(65, 129, 171);
    --color2: rgb(124, 201, 222);
    --color3: rgb(229, 131, 185);
    --color4: white;
    --color5: rgb(236, 215, 110);
}

/* ------------------------------- */
/* customizing the style of popover */
/* ------------------------------- */

.pop-class {
    color: var(--color3);
    border-radius: 0px;
    border: 3px solid var(--color3);
}

.pop-class .popover-header {
    background-color: var(--color4);
}

.pop-class .popover-header::before {
    border-bottom: transparent;
}

.pop-class .popover-arrow {
    top: calc(-.5rem - 2px);
}


.pop-class .popover-arrow::before {
    border-color: var(--color3);
    border-right-color: transparent;
    border-left-color: transparent;
}


.pop-class .popover-arrow::after {
    border-top-width: 3px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css" integrity="sha512-1fPmaHba3v4A7PaUsComSM4TBsrrRGs+/fv0vrzafQ+Rw+siILTiJa0NtFfvGeyY5E182SDTaF5PqP+XOHgJag==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- bootstrap search bar -->
<div class="container-fluid" id="parentAll">
  <div class="row">
    <div class="col-md-9 mx-auto">
      <div class="input-group my-5">
        <button id="btnSearch" class="btn btn-outline-secondary px-5" type="button">
                    <i id="iconSearch" class="bi bi-search"></i>
                </button>
        <input type="text" class="form-control form-control-lg" id="search-bar">
      </div>

    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Although I added bootstrap CDNs to my answer, But the output in stack overflow is different from my local development environment. So I will add my final output image here: