.component.accordion {
  clear: both;
  border-radius: 1px;
  border-color: transparent;
  box-shadow: none;
  margin-bottom: 15px;
}
.component.accordion svg {
  color: #000;
}
.component.accordion button.accordion-head {
  background-color: #f3f3f3;
  border-color: transparent;
  width: 100%;
  padding: 10px 15px;
}
.component.accordion button.accordion-head .title {
  font-weight: bold;
  color: #333333 !important;
  font-size: 18px;
  text-align: left;
  float: left;
  margin-bottom: 0;
}
.component.accordion button.accordion-head .title .subtitle {
  font-size: .7em;
  font-style: italic;
  color: #979797;
}
.component.accordion button.accordion-head:hover,
.component.accordion button.accordion-head:active,
.component.accordion button.accordion-head:focus {
  background-color: #979797;
}
.component.accordion button.accordion-head:hover .title,
.component.accordion button.accordion-head:active .title,
.component.accordion button.accordion-head:focus .title {
  color: #fff !important;
}
.component.accordion button.accordion-head:hover .title .subtitle,
.component.accordion button.accordion-head:active .title .subtitle,
.component.accordion button.accordion-head:focus .title .subtitle {
  color: #fff;
}
.component.accordion button.accordion-head .arrow {
  font-size: 1em;
  float: right;
  height: 1em;
  height: 15px;
  fill: #000;
  margin-top: 5px;
}
.component.accordion button.accordion-head .arrow {
  display: none;
}
.component.accordion button.accordion-head[aria-expanded=false] .arrow-right {
  display: block;
}
.component.accordion button.accordion-head[aria-expanded=true] .arrow-down {
  display: block;
}
.component.accordion .accordion-body {
  margin: 20px;
  border-left: 1px solid #f3f3f3;
  padding: 0 0 0 20px;
  display: none;
  /* default condition */
}
html.aem-AuthorLayer-Edit .component.accordion .accordion-body {
  display: block !important;
  height: auto !important;
}

@media print {
  .component.accordion .accordion-body {
    display: block !important;
    height: auto !important;
  }
}