/*
Dropdown pane

Dropdown pane from trimble css

Markup:
<div class="dropdown-pane-container">
  <div class="dropdownpane-link"> Click here</div>
  <div class="dropdown-pane">
      <ul class="dropdown-list">
          <li>FORCE LOGOFF</li>
          <li>Remove</li>
          <li>Suspend</li>
      </ul>
  </div>
</div>

Styleguide UI Elements.dropdownpane
*/
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1 {
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 300;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1rem;
}

h4, p {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

h5 {
  font-size: 0.75rem;
}

h4 {
  font-weight: 600;
}

/* @import url('https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'); */
/* @mixin border-radius{
  border-radius: 2px;
} */
/* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); */
.end {
  display: flex;
  justify-content: flex-end;
}

.align-center {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.dropdownpane-link {
  cursor: pointer;
}

.dropdown-pane {
  position: absolute;
  z-index: 10;
  padding: 1.25rem;
  visibility: hidden;
  display: none;
  box-shadow: 1px 1px 5px #b5b4c5;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
  background-color: #FFFFFF;
  width: 100%;
  max-width: 10rem;
}

.dropdown-pane.is-open {
  visibility: visible;
  display: block;
}

.dropdown-pane.left {
  left: 0;
}

.dropdown-pane.right {
  right: 0;
}

.dropdown-pane .dropdown-list li {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-pane .dropdown-list li:last-child {
  margin-bottom: 0;
}

.dropdown-pane .dropdown-list li:hover, .dropdown-pane .dropdown-list li.active {
  color: #009AD9;
  cursor: pointer;
}