/*
 * @package: accordion_r
 * 
 * @version: 1.3
 * @author: Robert Becker <becker.robert.93@gmail.com>
 * 
 * @description: styles for the structure (required)
 * 
 */
.accordion > .accordion-element {
  position: relative; }
  .accordion > .accordion-element > .accordion-element-head {
    padding: 0.8rem 3rem 0.8rem 0.8rem;
    position: relative; }
    .accordion > .accordion-element > .accordion-element-head > .accordion-trigger {
      width: 2.2rem;
      position: absolute;
      right: 0;
      top: -0.2rem;
      margin-top: 0.8rem; }
  .accordion > .accordion-element[data-state="inactive"] > .accordion-element-body {
    height: 0 !important;
    overflow: hidden; }
  .accordion > .accordion-element[data-state="inactive"] > .accordion-element-helper {
    height: 0 !important; }
  .accordion > .accordion-element > .accordion-element-helper {
    transition: all 0.5s ease-in-out;
    display: none; }
  .accordion > .accordion-element > .accordion-element-body {
    transition: all 0.5s ease-in-out;
    width: 100%;
    height: 0;
    left: 0; }
    .accordion > .accordion-element > .accordion-element-body > .accordion-element-body-inner {
      position: relative;
      padding: 0.8rem; }
  .accordion > .accordion-element[data-state="active"] > .accordion-element-body {
    height: auto; }
  .accordion > .accordion-element.accordion_r-toggle-animation > .accordion-element-body {
    overflow: hidden; }

.icon {
  cursor: pointer; }
  .icon:after, .icon:before {
    content: ' ';
    background-size: 100% 100%;
    background-repeat: no-repeat; }
  .icon:after {
    display: inline-block; }
  .icon.arrow-right-close:after {
    background-image: url("../../../Vendor/accordion_r/demo/img/icons/bluegrey/1427296861_arrow-right.svg"); }
  .icon.arrow-right-close:before {
    background-image: url("../../../Vendor/accordion_r/demo/img/icons/bluegrey/1427296861_arrow-right.svg"); }

.accordion {
  border: none;
  margin: 1rem 0; }
  .accordion > .accordion-element {
    position: relative;
    border: 1px solid #ddd;
    margin-top: -1px; }
    .accordion > .accordion-element > .accordion-element-head {
      padding: 0.8rem 3rem 0.8rem 0.8rem;
      color: #3C4646;
      border-bottom: 1px solid #eee;
      cursor: pointer; }
      .accordion > .accordion-element > .accordion-element-head > .accordion-trigger {
        right: 0;
        top: -0.2rem;
        margin-top: 0.8rem; }
        .accordion > .accordion-element > .accordion-element-head > .accordion-trigger .icon:after, .accordion > .accordion-element > .accordion-element-head > .accordion-trigger .icon:before {
          height: 24px;
          width: 24px;
          position: absolute; }
    .accordion > .accordion-element[data-state="inactive"] > .accordion-element-head > .accordion-trigger > .arrow-right-close, .accordion > .accordion-element > .accordion-element-head > .accordion-trigger > .arrow-right-close {
      margin-right: 1.2rem;
      padding-left: 0.2rem; }
      .accordion > .accordion-element[data-state="inactive"] > .accordion-element-head > .accordion-trigger > .arrow-right-close:before, .accordion > .accordion-element > .accordion-element-head > .accordion-trigger > .arrow-right-close:before {
        right: 8px;
        transition: all ease-in-out 0.5s;
        display: inline-block; }
      .accordion > .accordion-element[data-state="inactive"] > .accordion-element-head > .accordion-trigger > .arrow-right-close:after, .accordion > .accordion-element > .accordion-element-head > .accordion-trigger > .arrow-right-close:after {
        transition: all ease-in-out 0.5s;
        right: 8px; }
    .accordion > .accordion-element[data-state="active"] > .accordion-element-head > .accordion-trigger > .arrow-right-close:before {
      right: 15px;
      transition: all ease-in-out 0.5s;
      transform: rotateY(0deg); }
    .accordion > .accordion-element[data-state="active"] > .accordion-element-head > .accordion-trigger > .arrow-right-close:after {
      transition: all ease-in-out 0.5s;
      transform: rotateY(180deg); }

.accordion-element-head {
  font-weight: bold; }