/*----------------------------------------
 Accordion
------------------------------------------*/
.bb_head-text {
  color: var(--txt-color-head) !important ;
}
.bb_collapsible.bb_transparent {
  border: none;
  /* border-top: 1px solid #ddd; */
  /* border: 1px solid rgba(50, 50, 50, .07); */
}
.bb_collapsible.bb_transparent .bb_collapsible-header {
  background-color: transparent;
}
.bb_collapsible.bb_colored {
  border: none;
}
.bb_collapsible.bb_colored .bb_li:last-child .bb_collapsible-header {
  border-bottom: none;
}
.bb_collapsible .bb_collapsible-header.bb_primary-bg,
.bb_collapsible .bb_collapsible-header.bb_primary-bg:focus {
  background-color:var(--bck-grnd-color-general);
}
.bb_collapsible .bb_collapsible-header.bb_accent-bg,
.bb_collapsible .bb_collapsible-header.bb_accent-bg:focus {
  background-color: var(--accent-color);
}
.bb_collapsible-header {
  position: relative;
  background-color: #f5f5f5;
}
.bb_collapsible-header:after {
  content: "\F140";
  display: inline-block;
  font: normal normal normal 24px / 1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: 15px;
  font-size: 17px;
  opacity: 0.7;
}
.active .bb_collapsible-header:after {
  content: "\F143";
}
.bb_collapsible,
.bb_collapsible .bb_li,
.bb_collapsible-body,
.bb_collapsible-header {
  border-radius: var(--border-radius);
}
.bb_collapsible-header .bb_i {
  margin-right: 10px;
  width: 36px;
  font-size: 19px;
  display: inline-block;
  /* background: var(--primary-color);
  border-radius: var(--border-radius-50percent); */
  height: 36px;
  line-height: 36px;
  /* color: #ffffff; */
}
.bb_collapsible-header {
  /* line-height: 36px; */
  font-size: 14px;
  padding: 12px 20px;
  border: none;
}
.bb_collapsible-header,
.bb_collapsible .bb_li {
  /* box-shadow: none; */
  /* box-shadow: 0px -1px 5px rgba(0, 0, 0, .1); */
  margin-bottom: 5px;
} /* .collapsible.popout li,
.collapsible.popout li.active{
  box-shadow: none;
} */ /* .collapsible.transparent .collapsible-header,
.collapsible.transparent li{
  box-shadow: 0px -1px 3px rgba(0, 0, 0, .1);
} */ /* .collapsible-header{
  background-color: #f5f5f5;
} */
.bb_collapsible-body {
  border: none;
  background: #f5f5f5;
  /* padding-top: 12px; */
}
.bb_collapsible.bb_transparent .bb_collapsible-header,
.bb_collapsible.bb_transparent .bb_collapsible-body,
.bb_body .bb_collapsible,
.bb_body .bb_collapsible.bb_colored {
  box-shadow: none;
  border: none;
} /* .collapsible.colored .collapsible-header i {
  background: rgba(0, 0, 0, .2);
} */
.bb_collapsible .bb_img {
  border-radius: var(--border-radius);
  margin-bottom: 15px;
}
.bb_collapsible.bb_transparent .bb_collapsible-header {
  border: 1px solid rgba(0, 0, 0, 0.1);
} /* .collapsible.transparent .active .collapsible-header{
  background: #ffffff;
  border: none;
} */
.bb_collapsible.bb_transparent .bb_collapsible-header,
.bb_collapsible.bb_transparent .bb_collapsible-body {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.bb_collapsible.bb_gray .bb_collapsible-body,
.bb_collapsible.bb_gray .bb_collapsible-header {
  background-color: #f5f5f5;
}
.bb_collapsible.bb_popout > .bb_li,
.bb_collapsible.bb_popout > .bb_li.active {
  box-shadow: none;
} /*----------------------------------------
  Site - Dark Mode - collapsible
----------------------------------------*/
[data-site_mode="dark"] .bb_collapsible-header,
[data-site_mode="dark"] .bb_collapsible-header:focus {
  background-color: var(--dark-700);
  color: #f5f5f5;
  border-color: var(--dark-700);
}
[data-site_mode="dark"] .bb_collapsible-body {
  border-color: var(--dark-700);
  background-color: var(--dark-700);
}
[data-site_mode="dark"] .bb_collapsible.bb_transparent .bb_collapsible-body,
[data-site_mode="dark"]
  .bb_collapsible.bb_transparent
  .active
  .bb_collapsible-header,
[data-site_mode="dark"] .bb_collapsible.bb_transparent .bb_collapsible-header {
  background: transparent;
  border: 1px solid var(--dark-700);
}
[data-site_mode="dark"] .bb_collapsible.bb_gray .bb_collapsible-body,
[data-site_mode="dark"] .bb_collapsible.bb_gray .bb_collapsible-header {
  background-color: var(--dark-700);
}
