/**
 * Accordion
 *
 */
.accordion {
  position: relative;
}

.accordion div {
  position: relative;
}

.accordion > div:not(:last-child) {
  border-bottom: 1px solid #dddddd;
}

.accordion > div > div {
  padding: 12px 0;
}

.accordion > div > div:first-child {
  color: #333;
}

.accordion > div > div:first-child:hover {
  cursor: pointer;
}

.accordion > div > div > * {
  margin: 0;
}

.accordion.single > div > div:first-child,
.accordion.multiple > div > div:first-child {
  display: flex;
  align-items: center;
}

/* Arrow After */
.accordion > div > div:first-child::after {
  content: '';
  border: solid #333;
  border-width: 0 1px 1px 0;
  margin-right: .4em;
  margin-top: -6px;
  padding: 4px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: rotate(-45deg);
  transition: transform 0.2s linear;
}

.accordion > div.open > div:first-child::after {
  transform: rotate(45deg);
  transition: transform 0.2s linear;
}

.accordion > div h3 {
  margin-right: 20px;
}

/* Arrow Before */
.accordion.arrow--before > div > div:first-child::before {
  content: '';
  margin-right: 1em;
  border: solid #333;
  border-width: 0 1px 1px 0;
  padding: 4px;
  transform: rotate(-45deg);
  transition: transform 0.2s linear;
}

.accordion.arrow--before > div.open > div:first-child::before {
  transform: rotate(45deg);
  transition: transform 0.2s linear;
}

/**
 * Accordion Styles
 *
 */

.accordion .accordion__title h3 {
  transition: all 0.2s ease-in-out;
}

.accordion .open .accordion__title h3 {
  color: #cccccc;
}

/* Block */
.accordion.fill {
  background: none;
}

.accordion.fill > div {
  background: #eeeeee;
  padding: 6px 12px;
  margin-bottom: 12px;
}

.accordion.fill > div > div:first-child::after {
  margin-right: 0;
}

/* Outline */
.accordion.outline > div {
  border: 1px solid #dddddd;
  border-radius: 3px;
  padding: 6px 12px;
  margin-bottom: 12px;
}

.accordion.outline > div > div:first-child::after {
  margin-right: 0;
}

/**
 * Accordion Navigation
 *
 */

[class*="menu"] ul[id*="menu"].menu li {
  list-style-type: none;
}

[class*="menu"] ul[id*="menu"].menu li a {
  display: block;
}

[class*="menu"] ul[id*="menu"].menu li.active {
  display: block;
}

[class*="menu"] ul[id*="menu"].menu > li.active > a {
  color: #d5d5d5;
}

[class*="menu"] ul[id*="menu"].menu li.has-sub ul {
  display: none;
}

[class*="menu"] ul[id*="menu"].menu li:not(:last-child) {
  border-bottom: 1px solid #dddddd;
}

[class*="menu"] ul[id*="menu"].menu li {
  padding: 6px 0;
  position: relative;
}

[class*="menu"] > ul[id*="menu"].menu > li.has-sub::after {
  content: '';
  margin-right: .4em;
  margin-top: 1em;
  border: solid #333;
  border-width: 0 1px 1px 0;
  padding: 4px;
  transform: rotate(-45deg);
  transition: transform 0.2s linear;
  position: absolute;
  right: 0;
  top: 0;
}

[class*="menu"] ul[id*="menu"].menu > li.active::after {
  transform: rotate(45deg);
  transition: transform 0.2s linear;
}

/**
 * Alternate Accordion Nav Menu
 *
 * Used in Footer and Bottom Widget Areas.
 *
 */

[class*="span"] [class*="menu"] ul[id*="menu"].menu li:not(:last-child) {
  border-bottom: 0;
}

[class*="span"] [class*="menu"] ul[id*="menu"].menu li {
  padding: 0;
  position: relative;
  padding-left: 12px;
}

/* arrows on all items including without sub-menus */
[class*="span"] [class*="menu"] > ul[id*="menu"].menu > li::before {
  content: '';
  border: solid #333;
  border-width: 0 1px 1px 0;
  padding: 2px;
  position: absolute;
  top: 10px;
  left: 0;
  transform: rotate(-45deg);
  transition: transform 0.2s linear;
}

/* rotate arrows only on sub-menu items */
[class*="span"] [class*="menu"] ul[id*="menu"].menu > li.has-sub.active::before {
  transform: rotate(45deg);
  transition: transform 0.2s linear;
}

/* hide default arrow */
[class*="span"] [class*="menu"] > ul[id*="menu"].menu > li.has-sub::after {
  display: none;
}

/* hide default arrow */
[class*="span"] [class*="menu"] ul[id*="menu"].menu > li.active::after {
  display: none;
}