I’m trying to get the box-shadow off my accordion-item, but I can’t

Question

.col-flex {
  display: inline-block;
}

.accordion-item {
  box-shadow: none !important;
}

.button1 {
  text-transform: uppercase;
  font-family: 'Arial';
  font-weight: 500;
  padding-left: 2rem;
  padding-right: 2rem;
  color: var(--primary);
}

.button-bol {
  background-color: transparent;
  border-color: #84C226;
}

.button-bol:focus {
  background-color: transparent;
  border-color: #84c226;
  color: #808191;
  box-shadow: 2px 2px 10px #84c226;
}

.button-bol:hover {
  background-color: transparent;
  border-color: #84c226;
  box-shadow: 2px 2px 10px #84c226;
}

<div class="pb-3 text-center" id="myGroup">
  <h2 class="text-center fs-2" id="titulo">Boletim Informativo</h2>
  <hr style="width: 30%; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem">
  <div>
    <button class="btn btn1 button1 button-bol col-5" data-bs-toggle="collapse" href="#collapse8" role="button" area-expanded="false" aria-controls="collapseExemple"><b>Agosto - 2021</b></button>
    <button class="btn btn2 button1 button-bol col-5" data-bs-toggle="collapse" href="#collapse7" area-expanded="false" aria-controls="collapseExemple"><b>Julho - 2021</b></button>
    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <div id="collapse8" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
          <div class="col-flex accordion-body">
            <img src="img/botetimA1.jpeg" alt="Boletim-1 Agosto" width="48%" style="float: left; margin-bottom: 2rem">
            <img src="img/botetimA2.jpeg" alt="Boletim-2 Agosto" width="48%" style="float: right; margin-bottom: 2rem">
            <img src="img/botetimA1.jpeg" alt="Boletim-1 Agosto" width="48%" style="float: left;">
            <img src="img/botetimA2.jpeg" alt="Boletim-2 Agosto" width="48%" style="float: right;">
          </div>
        </div>
      </div>

Eu quero tirar essa linha que esta abaixo dos buttons. a linha fica assim quando os buttons não esta ativo

In this image you can see the images inside the button Collapse. I’m not able to attach the photos to see better in the code

Answer 1

The gray line below the buttons is in the div which has the class "accordion-item", you can hide it by overriding this css rule:

.accordion-item {
  border: 0 !important;
}

Remembering that this css rule will overwrite all elements that have this class, the ideal would be to define a class in some div above this item, in this case would look something like this:

<div class="accordion-modificado">
  <div class="accordion-item">
  ...
  </div>
</div>

.accordion-modificado .accordion-item {
  border: 0;
}