/*
Accordion menu

Accordion menu styles from trimble css

Markup:
<ul class="accordion">
  <li class="accordion-menu">
    <a href="#">Item 1</a>
    <ul class="accordion-menu-container">
      <li class="accordion-menu">
        <a href="#">Item 11</a>
        <ul class="accordion-menu-container">
          <li><a href="#">Item 111</a></li>
          <li><a href="#">Item 112</a></li>
        </ul>
      </li>
      <li><a href="#">Item 12</a></li>
      <li><a href="#">Item 13</a></li>
    </ul>
  </li>
  <li class="accordion-menu">
    <a href="#">Item 2</a>
    <ul class="accordion-menu-container">
      <li><a href="#">Item 21</a></li>
    </ul>
  </li>
  <li class="accordion-menu">
    <a href="#">Item 3</a>
  </li>
</ul>

Styleguide UI Elements.accordionmenu
*/
/*
Accordion panel

Accordion panel styles from trimble css

Markup:
<div class="info-panel">
<section>
		<div class="section-title accordion accordion-panel">
			<label>Details</label>
		</div>
		<div class="accordion-content" style="max-height: 75px;">
			<ul>
				<li class="list-item">
					<label class="field">Email:</label>
					<span class="value">keysersoze@yahoo.com</span>
				</li>
				<li class="list-item">
					<label class="field">Phone:</label>
				<span class="value">001-303-709-9207</span>
				</li>
				<li class="list-item">
					<label class="field">Time Zone:</label>
				<span class="value">MST</span>
				</li>
			</ul>
		</div>
	</section>
	<section>
		<div class="section-title accordion accordion-panel">
			<label>Projects</label>
		</div>
		<div class="accordion-content">
			<ul>
				<li class="list-item-image">
					<div class="app-icon">
						<img src="../src/images/building.jpg" alt="">
					</div>
					<div class="app-details">
						<span class="name">Trimble Building</span>
						<span>Owner</span>
					</div>
				</li>
				<li class="list-item-image">
					<div class="app-icon">
						<img src="../src/images/river.jpg" alt="">
					</div>
					<div class="app-details">
						<span class="name">Riverfront Overpass</span>
						<span>Contributor</span>
					</div>
				</li>
				<li class="list-item-image">
					<div class="app-icon">
						<img src="../src/images/shopping.jpg" alt="">
					</div>
					<div class="app-details">
						<span class="name">Downtown Shopping Mall</span>
						<span>Contributor</span>
					</div>
				</li>
			</ul>
		</div>
	</section>
</div>

Styleguide UI Elements.accordionpanel
*/
.accordion .accordion-menu {
  padding: 0;
  margin: 0;
}

.accordion .accordion-menu a {
  text-decoration: none;
  cursor: pointer;
}

.accordion .accordion-menu li {
  margin: 0.625rem 0;
}

.accordion .accordion-menu .accordion-menu-container {
  padding-left: 1.25rem;
  margin: 0.625rem 0;
  display: none;
}

.accordion .accordion-menu .accordion-menu-container.is-visible {
  display: block;
  height: auto;
}

.accordion.accordion-panel {
  cursor: pointer;
  background: url("../images/Icons/add_default.svg") no-repeat right;
}

.accordion.accordion-panel.active {
  background: url("../images/Icons/remove_default.svg") no-repeat right;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: none;
}