button[data-axi="accordion"],
button[data-axi="mobile_accordion"] {
  background-color: var(--accordion-background);
  color: var(--body-text-color);
  cursor: pointer;
  width: 100%;
  min-height: 45px;
  padding-left: 15px;
  padding-right: 25px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: background-color 0.4s, color 0.4s, filter 0.8s;
  margin: 0 0 8px 0;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  position: relative;
  white-space: normal;
}

button[data-axi="mobile_accordion"] {
  display: none;
}

.active,
button[data-axi="accordion"]:hover,
button[data-axi="mobile_accordion"]:hover {
  filter: brightness(85%);
}

button[data-axi="accordion"]:after,
button[data-axi="mobile_accordion"]:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f078";
  font-size: 18px;
  float: right;
  margin-right: 10px;
  transition: transform 0.5s;
  margin-left: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.active:after {
  transform: translateY(-50%) rotate(-180deg) !important;
}

div[data-axi="accordion_panel"] {
  padding: 10px 20px;
  display: none;
  background-color: var(--accordion-panel-background);
  overflow: hidden;
  margin-bottom: 8px;
  transition: background 0.8s;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

@media (max-width: 767px) {
  button[data-axi="mobile_accordion"] {
    display: block;
  }
  div[data-axi="mobile_accordion_panel"] {
    padding: 10px 20px;
    display: none;
    background-color: var(--accordion-panel-background);
    overflow: hidden;
    margin-bottom: 8px;
    transition: background 0.8s;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
  }
}

@media print {
  button[data-axi="accordion"]:after {
    content: none;
    page-break-after: avoid;
  }

  div[data-axi="accordion_panel"] {
    page-break-inside: initial;
  }
}