@charset "UTF-8";
/*

# Styleguide
*/
/*

## Settings
*/
/*

### Colors
*/
/*
  <div class="ph__color-primary">$color-primary</div>
*/
/*
  <div class="ph__color-secondary">$color-secondary</div>
*/
/*
  <div class="ph__color-base-font">$color-base-font</div>
*/
[class*="ph__color"] {
  margin-bottom: 1.5em;
  width: 100%;
  font-family: Monaco, Courier, monospace;
  line-height: 2.25em;
}
[class*="ph__color"]:before {
  display: block;
  content: "";
  height: 3em;
}
[class*="ph__color"]:after {
  display: block;
  padding: 0 0.75em;
  background-color: rgba(0, 0, 0, 0.025);
}
@media (min-width: 79.375em) {
  [class*="ph__color"] {
    line-height: 4.5em;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.025);
  }
  [class*="ph__color"]:before {
    height: 4.5em;
    float: left;
    width: 20%;
    margin-right: 0.75em;
  }
  [class*="ph__color"]:after {
    float: right;
    width: 20%;
    text-align: center;
    margin-left: 0.75em;
  }
}

.ph__color-primary:before {
  background-color: #03A6D7;
}
.ph__color-primary:after {
  content: "#03A6D7";
}

.ph__color-secondary:before {
  background-color: #20718A;
}
.ph__color-secondary:after {
  content: "#20718A";
}

.ph__color-base-font:before {
  background-color: #444c54;
}
.ph__color-base-font:after {
  content: "#444c54";
}

/*
### Font (Font Family)

*/
/*
  <div class="ph__font-family-base">$font-family-base</div>
*/
/*
  <div class="ph__font-family-heading">$font-family-heading</div>
*/
[class*="ph__font"] {
  margin-bottom: 1.5em;
  padding: 0 0.75em;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.025);
  font-family: Monaco, Courier, monospace;
  line-height: 2.25em;
  line-height: 3em;
}
[class*="ph__font"]:before {
  display: block;
  margin: 0 -0.75em;
  padding: 0 0.75em;
  background-color: rgba(0, 0, 0, 0.025);
  content: "";
}

.ph__font-family-base:before {
  font-family: "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  content: "Source Sans Pro, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif";
}

.ph__font-family-heading:before {
  font-family: "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  content: "Source Sans Pro, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif";
}

.ph__block, .ph__inline-block {
  line-height: 7.5em;
  text-align: center;
  background-color: #e6e6e6;
  display: block;
}

.ph__inline-block {
  display: inline-block;
}

/*

## Elements
NOTE: No classes should go in element files

*/
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
.new-zanata *,
.new-zanata *:before,
.new-zanata *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.new-zanata article,
.new-zanata aside,
.new-zanata details,
.new-zanata figcaption,
.new-zanata figure,
.new-zanata footer,
.new-zanata header,
.new-zanata main,
.new-zanata hgroup,
.new-zanata nav,
.new-zanata section,
.new-zanata summary {
  display: block;
}
.new-zanata [hidden] {
  display: none;
}
.new-zanata html,
.new-zanata body {
  height: 100%;
  margin: 0;
}

.new-zanata-body,
.new-zanata-html {
  height: 100%;
  margin: 0;
  padding: 0;
}

html.new-zanata,
.new-zanata-base {
  line-height: 1.5;
  color: #444c54;
  font-size: 16px;
  font-family: "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  min-width: 20em;
}

body.new-zanata,
.new-zanata-base-inner {
  margin: 0;
  background: #fff;
}

.new-zanata main {
  padding-top: 1.5em;
}
@media (min-width: 79.375em) {
  .new-zanata main {
    padding-top: 3em;
  }
}

/*
### Headings

#### General headings

Used to section content and create hierarchy

```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```
```
<div class="alpha">Alpha</div>
<div class="beta">Beta</div>
<div class="gamma">Gamma</div>
<div class="delta">Delta</div>
<div class="epsilon">Epsilon</div>
<div class="zeta">Zeta</div>
```

*/
.new-zanata h1,
.new-zanata .alpha, .new-zanata h2,
.new-zanata .beta, .new-zanata h3,
.new-zanata .gamma, .new-zanata h4,
.new-zanata .delta, .new-zanata h5,
.new-zanata .epsilon, .new-zanata h6,
.new-zanata .zeta {
  color: #20718A;
  margin: 0;
  font-family: "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  hyphens: auto;
}
.new-zanata h1 a,
.new-zanata .alpha a, .new-zanata h2 a,
.new-zanata .beta a, .new-zanata h3 a,
.new-zanata .gamma a, .new-zanata h4 a,
.new-zanata .delta a, .new-zanata h5 a,
.new-zanata .epsilon a, .new-zanata h6 a,
.new-zanata .zeta a {
  display: inline-block;
}
.new-zanata h1,
.new-zanata .alpha {
  font-size: 2.25em;
  line-height: 1em;
  letter-spacing: -0.05em;
}
.new-zanata h1 {
  margin-bottom: 0.33333em;
}
.new-zanata h2,
.new-zanata .beta {
  font-size: 1.75em;
  line-height: 1.28571em;
  letter-spacing: -0.05em;
}
.new-zanata h2 {
  margin-top: 0.85714em;
  margin-bottom: 0.42857em;
}
.new-zanata h3,
.new-zanata .gamma {
  font-size: 1.5em;
  line-height: 1.5em;
  letter-spacing: -0.05em;
}
.new-zanata h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
.new-zanata h4,
.new-zanata .delta {
  font-size: 1.25em;
  line-height: 1.2em;
}
.new-zanata h4 {
  margin-top: 0.6em;
  margin-bottom: 0.3em;
}
.new-zanata h5,
.new-zanata .epsilon {
  font-size: 1.125em;
  line-height: 1.33333em;
}
.new-zanata h5 {
  margin-top: 0.66667em;
  margin-bottom: 0.66667em;
}
.new-zanata h6,
.new-zanata .zeta {
  font-size: 1em;
  line-height: 1.5em;
}
.new-zanata h6 {
  margin-top: 0.75em;
}

/*

### Text

#### Standard Paragraph

```
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</p>
```

*/
.new-zanata p {
  margin: 0 0 0.75em;
  word-wrap: break-word;
  hyphens: auto;
}
.new-zanata p:last-child {
  margin-bottom: 0;
}
.new-zanata abbr[title] {
  border-bottom: 1px dotted;
}
.new-zanata b,
.new-zanata strong {
  font-weight: 600;
}
.new-zanata em {
  font-style: italic;
}
.new-zanata dfn {
  font-style: italic;
}
.new-zanata mark {
  background: #ff0;
  color: #000;
}
.new-zanata code,
.new-zanata kbd,
.new-zanata pre,
.new-zanata samp {
  padding: 0 0.21429em;
  font-family: "Monaco", Courier, "Courier New", monospace;
  font-weight: 700;
  color: #575e65;
  font-size: 0.875em;
  line-height: 1.71429em;
  margin: 0;
}
.new-zanata p code,
.new-zanata p kbd,
.new-zanata p pre,
.new-zanata p samp {
  line-height: 1;
}
.new-zanata code {
  display: inline-block;
  background-color: #fff;
}
.new-zanata pre {
  white-space: pre;
  padding: 0.75em;
  margin: 0.85714em 0;
  border-top: 1px solid rgba(32, 113, 138, 0.15);
  border-bottom: 1px solid rgba(32, 113, 138, 0.15);
  background-color: rgba(32, 113, 138, 0.05);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.new-zanata pre code {
  background-color: transparent;
  font-size: 1em;
}
.new-zanata q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.new-zanata small {
  font-size: 80%;
}
.new-zanata sub,
.new-zanata sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.new-zanata sup {
  top: -0.5em;
}
.new-zanata sub {
  bottom: -0.25em;
}

/*

### Links

```
<a href="#">Link</a>
<br>
<a href="#" class=":hover">Link (Hover)</a>
<br>
<a href="#" class=":active">Link (Active)</a>
<br>
<a href="#" class=":focus">Link (Focus)</a>
```

*/
.new-zanata a {
  color: #03A6D7;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  word-wrap: break-word;
  hyphens: auto;
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
}
.new-zanata a h1,
.new-zanata a h2,
.new-zanata a h3,
.new-zanata a h4,
.new-zanata a h5,
.new-zanata a h6 {
  color: #03A6D7;
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
}
.new-zanata a:hover,
.new-zanata .\3A hover,
.new-zanata a:focus,
.new-zanata .\3A focus {
  color: #026c8c;
}
.new-zanata a:hover h1,
.new-zanata a:hover h2,
.new-zanata a:hover h3,
.new-zanata a:hover h4,
.new-zanata a:hover h5,
.new-zanata a:hover h6,
.new-zanata .\3A hover h1,
.new-zanata .\3A hover h2,
.new-zanata .\3A hover h3,
.new-zanata .\3A hover h4,
.new-zanata .\3A hover h5,
.new-zanata .\3A hover h6,
.new-zanata a:focus h1,
.new-zanata a:focus h2,
.new-zanata a:focus h3,
.new-zanata a:focus h4,
.new-zanata a:focus h5,
.new-zanata a:focus h6,
.new-zanata .\3A focus h1,
.new-zanata .\3A focus h2,
.new-zanata .\3A focus h3,
.new-zanata .\3A focus h4,
.new-zanata .\3A focus h5,
.new-zanata .\3A focus h6 {
  color: #026c8c;
}
.new-zanata a:focus {
  -moz-box-shadow: 0 0 0 4px rgba(3, 166, 215, 0.3);
  -webkit-box-shadow: 0 0 0 4px rgba(3, 166, 215, 0.3);
  box-shadow: 0 0 0 4px rgba(3, 166, 215, 0.3);
  outline: 0;
  border-radius: 4px;
}
.new-zanata a:active:focus {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.new-zanata a:active,
.new-zanata .\3A active
a:hover,
.new-zanata .\3A hover {
  outline: 0;
}
.new-zanata a:active,
.new-zanata a.is-active,
.new-zanata .\3A active {
  color: #20718A;
}
.new-zanata a:active h1,
.new-zanata a:active h2,
.new-zanata a:active h3,
.new-zanata a:active h4,
.new-zanata a:active h5,
.new-zanata a:active h6,
.new-zanata a.is-active h1,
.new-zanata a.is-active h2,
.new-zanata a.is-active h3,
.new-zanata a.is-active h4,
.new-zanata a.is-active h5,
.new-zanata a.is-active h6,
.new-zanata .\3A active h1,
.new-zanata .\3A active h2,
.new-zanata .\3A active h3,
.new-zanata .\3A active h4,
.new-zanata .\3A active h5,
.new-zanata .\3A active h6 {
  color: #20718A;
}

/*

### Lists

#### Unordered List

```
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
```

#### Ordered List

```
<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
```

*/
.new-zanata ul,
.new-zanata ol {
  margin: 0.75em 0;
  padding: 0 0 0 1.5em;
}
.new-zanata ul li,
.new-zanata ol li {
  font-size: 1em;
  line-height: 1.5em;
  list-style-type: disc;
  word-wrap: break-word;
  hyphens: auto;
}
.new-zanata ul:empty,
.new-zanata ol:empty {
  display: none;
}

/*

#### Definition List

```
<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>
```

*/
.new-zanata dd {
  margin: 0 0 0 1.5em;
}

/*

### Tables


```
<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Dolor</th>
      <th>Sit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Sit</th>
      <td>Dolor</td>
      <td>03.788</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td>32.210</td>
      <td>Lorem</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td>47.797</td>
      <td>Lorem</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <th>Sit</th>
      <td>Dolor</td>
      <td>09.640</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td>12.117</td>
      <td>Lorem</td>
      <td>Lorem</td>
    </tr>
  </tbody>
</table>
```

*/
.new-zanata table {
  position: relative;
  display: block;
  overflow: auto;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}
.new-zanata thead {
  border-bottom: 1px solid #b3b3b3;
}
.new-zanata th,
.new-zanata td {
  padding: 0.1875em 0.375em;
  text-align: left;
}
@media (min-width: 46.25em) {
  .new-zanata th,
  .new-zanata td {
    padding: 0.375em 0.75em;
  }
}
.new-zanata [colspan] {
  text-align: center;
}
.new-zanata [colspan="1"] {
  text-align: left;
}
.new-zanata [rowspan] {
  vertical-align: middle;
}
.new-zanata [rowspan="1"] {
  vertical-align: top;
}
.new-zanata .numerical {
  text-align: right;
}

/*

### Forms

#### Basic Elements

```
<div class="l__wrapper">
  <form>
    <label for="basic-input">This is a label.</label>
    <input type="text" id="basic-input" name="basic-input" placeholder="Standard Input">
    <fieldset>
      <legend>Fieldset Name</legend>
      <input type="text" placeholder="Street">
      <div class="g--tight">
        <div class="w--2-4 w--s-2-4 g__item">
          <input type="text" placeholder="City">
        </div>
        <div class="w--1-4 w--s-1-4 g__item">
          <input type="text" placeholder="State">
        </div>
        <div class="w--1-4 w--s-1-4 g__item">
          <input type="text" placeholder="ZIP">
        </div>
      </div>
    </fieldset>
    <textarea placeholder="Message"></textarea>
  </form>
</div>
```

*/
.new-zanata form {
  margin: 0 0 0.75em;
  font-family: "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.5em;
}
.new-zanata ::-webkit-input-placeholder {
  color: #90b8c5;
  font-weight: 300;
}
.new-zanata :-moz-placeholder {
  color: #90b8c5;
  font-weight: 300;
}
.new-zanata ::-moz-placeholder {
  color: #90b8c5;
  font-weight: 300;
}
.new-zanata :-ms-input-placeholder {
  color: #90b8c5;
  font-weight: 300;
}
.new-zanata fieldset {
  border-width: 0.0625em;
  border-style: solid;
  padding: 0.6875em;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin: 1.125em 0;
  padding-bottom: 0;
  border-color: #d2e3e8;
}
.new-zanata legend {
  border: 0;
  font-weight: 600;
  background: #fff;
  padding: 0 0.1875em;
  margin-left: -0.1875em;
}
.new-zanata label {
  font-size: 1em;
  line-height: 1.5em;
  display: inline-block;
  margin-bottom: 0.375em;
  color: #444c54;
  font-weight: 600;
  font-family: inherit;
}
.new-zanata button,
.new-zanata input,
.new-zanata select,
.new-zanata textarea {
  margin: 0;
  font-size: 100%;
  font-family: inherit;
}
.new-zanata button,
.new-zanata input {
  line-height: 1.5em;
}
.new-zanata button,
.new-zanata html input[type="button"],
.new-zanata input[type="reset"],
.new-zanata input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  outline: none;
}
.new-zanata button[disabled],
.new-zanata input[disabled] {
  cursor: default;
  opacity: 0.5;
}
.new-zanata input[type="checkbox"],
.new-zanata input[type="radio"] {
  padding: 0;
}
.new-zanata input[type="checkbox"] {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-bottom: 0.20625em;
}
.new-zanata input[type="search"]::-webkit-search-cancel-button,
.new-zanata input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
.new-zanata button::-moz-focus-inner,
.new-zanata input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.new-zanata input[type="text"],
.new-zanata input[type="password"],
.new-zanata input[type="date"],
.new-zanata input[type="datetime"],
.new-zanata input[type="email"],
.new-zanata input[type="number"],
.new-zanata input[type="search"],
.new-zanata input[type="tel"],
.new-zanata input[type="time"],
.new-zanata input[type="url"],
.new-zanata textarea {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  font-size: 1em;
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.1875em 0.375em;
  display: block;
  width: 100%;
  font-weight: 400;
  border: 1px solid #bcd4dc;
  background-color: #fcfcfc;
  margin: 0 0 0.75em;
  -webkit-appearance: none;
}
.new-zanata input[type="text"]:focus,
.new-zanata input[type="password"]:focus,
.new-zanata input[type="date"]:focus,
.new-zanata input[type="datetime"]:focus,
.new-zanata input[type="email"]:focus,
.new-zanata input[type="number"]:focus,
.new-zanata input[type="search"]:focus,
.new-zanata input[type="tel"]:focus,
.new-zanata input[type="time"]:focus,
.new-zanata input[type="url"]:focus,
.new-zanata textarea:focus {
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  outline: none !important;
  border: 1px solid #639cad;
  background: #fff;
}
.new-zanata input[type="text"][disabled],
.new-zanata input[type="password"][disabled],
.new-zanata input[type="date"][disabled],
.new-zanata input[type="datetime"][disabled],
.new-zanata input[type="email"][disabled],
.new-zanata input[type="number"][disabled],
.new-zanata input[type="search"][disabled],
.new-zanata input[type="tel"][disabled],
.new-zanata input[type="time"][disabled],
.new-zanata input[type="url"][disabled],
.new-zanata textarea[disabled] {
  background-color: #f7f7f7;
}
.new-zanata [contenteditable]:focus {
  outline: none !important;
}
.new-zanata textarea {
  overflow: auto;
  height: auto;
  vertical-align: top;
  min-height: 4.5em;
}
.new-zanata select {
  width: 100%;
  margin: 0;
  height: 1.875em;
  border: 1px solid #ccc;
  color: #444c54;
  border-radius: 4px;
}

.new-zanata audio,
.new-zanata canvas,
.new-zanata video {
  display: inline-block;
}
.new-zanata img {
  max-width: 100%;
  border: 0;
}
.new-zanata svg:not(:root) {
  overflow: hidden;
}
.new-zanata figure {
  margin: 0;
}
.new-zanata figcaption {
  color: gray;
}

/*

### Miscellaneous

#### Horizontal Rule

```
<hr>
```

*/
.new-zanata hr {
  height: 0;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(32, 113, 138, 0.15);
  margin: 1.5em 0;
  background: transparent;
}

/*

## Global Components

These are components that can be utilised or are depended on by other components
*/
/*

### Layout Helpers

#### Clearfix

<div class="ph__block l--clearfix">
  .l--clearfix
  (use overflow:hidden)
</div>

<div class="ph__block l--clearfix-overflow">
  .l--clearfix-overflow
  (old style)
</div>

*/
.new-zanata .l--clearfix,
.new-zanata .l--cf {
  overflow: hidden;
  *zoom: 1;
}
.new-zanata .l--clearfix-overflow,
.new-zanata .l--cf-of,
.new-zanata .media,
.new-zanata .panel__results,
.new-zanata .edit-item,
.new-zanata .header {
  *zoom: 1;
}
.new-zanata .l--clearfix-overflow:after,
.new-zanata .l--cf-of:after,
.new-zanata .media:after,
.new-zanata .panel__results:after,
.new-zanata .edit-item:after,
.new-zanata .header:after {
  content: "";
  display: table;
  clear: both;
}

/*

#### Floats

```
<div class="ph__block l--float-left">
  .l--float-left
</div>

<div class="ph__block l--float-right">
  .l--float-right
</div>
```

*/
.new-zanata .l--float-left {
  float: left !important;
}
.new-zanata .l--float-right {
  float: right !important;
}

/*

#### Constraints

```
<div class="ph__block l--constrain-small">
  .l--constrain-small
</div>

<div class="ph__block l--constrain-medium">
  .l--constrain-medium
</div>

<div class="ph__block l--constrain-large">
  .l--constrain-large
</div>
```

*/
.new-zanata .l--constrain-small {
  max-width: 22.5em;
}
.new-zanata .l--constrain-medium {
  max-width: 48em;
}
.new-zanata .l--constrain-large {
  max-width: 63em;
}
@media (min-width: 46.25em) and (max-width: 79.3125em) {
  .new-zanata .l--constrain-small-m {
    max-width: 22.5em;
  }
  .new-zanata .l--constrain-medium-m {
    max-width: 48em;
  }
  .new-zanata .l--constrain-large-m {
    max-width: 63em;
  }
}
@media (min-width: 79.375em) and (max-width: 96.1875em) {
  .new-zanata .l--constrain-small-l {
    max-width: 22.5em;
  }
  .new-zanata .l--constrain-medium-l {
    max-width: 48em;
  }
  .new-zanata .l--constrain-large-l {
    max-width: 63em;
  }
}
@media (min-width: 96.25em) {
  .new-zanata .l--constrain-small-h {
    max-width: 22.5em;
  }
  .new-zanata .l--constrain-medium-h {
    max-width: 48em;
  }
  .new-zanata .l--constrain-large-h {
    max-width: 63em;
  }
}

/*

#### Limits

```
<div class="ph__block l--limit-small">
  .l--limit-small
</div>

<div class="ph__block l--limit-medium">
  .l--limit-medium
</div>

<div class="ph__block l--limit-large">
  .l--limit-large
</div>
```

*/
.new-zanata .l--limit-small {
  min-width: 22.5em;
}
.new-zanata .l--limit-medium {
  min-width: 48em;
}
.new-zanata .l--limit-large {
  min-width: 63em;
}
@media (min-width: 46.25em) and (max-width: 79.3125em) {
  .new-zanata .l--limit-small-m {
    min-width: 22.5em;
  }
  .new-zanata .l--limit-medium-m {
    min-width: 48em;
  }
  .new-zanata .l--limit-large-m {
    min-width: 63em;
  }
}
@media (min-width: 79.375em) and (max-width: 96.1875em) {
  .new-zanata .l--limit-small-l {
    min-width: 22.5em;
  }
  .new-zanata .l--limit-medium-l {
    min-width: 48em;
  }
  .new-zanata .l--limit-large-l {
    min-width: 63em;
  }
}
@media (min-width: 96.25em) {
  .new-zanata .l--limit-small-h {
    min-width: 22.5em;
  }
  .new-zanata .l--limit-medium-h {
    min-width: 48em;
  }
  .new-zanata .l--limit-large-h {
    min-width: 63em;
  }
}

/*

#### Wrapper

$max-site-width is assigned to this

*/
.new-zanata .l__wrapper {
  max-width: 120em;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0.75em;
}
@media (min-width: 46.25em) {
  .new-zanata .l__wrapper {
    padding: 0 1.5em;
  }
}
@media (min-width: 96.25em) {
  .new-zanata .l__wrapper {
    padding: 0 3em;
  }
}

/*

#### Spacing

These classes use `!important` as you would not be applying these should always "win".
Only use them if it does not make sense to add this styling to another element/component.

*/
/*
```
<div class="ph__block l--push-top-0">
  .l--push-top-0
</div>

<div class="ph__block l--pad-top-0">
  .l--pad-top-0
</div>
```
*/
/*
```
<div class="ph__block l--push-bottom-0">
  .l--push-bottom-0
</div>

<div class="ph__block l--pad-bottom-0">
  .l--pad-bottom-0
</div>
```
*/
/*
```
<div class="ph__block l--push-left-0">
  .l--push-left-0
</div>

<div class="ph__block l--pad-left-0">
  .l--pad-left-0
</div>
```
*/
/*
```
<div class="ph__block l--push-right-0">
  .l--push-right-0
</div>

<div class="ph__block l--pad-right-0">
  .l--pad-right-0
</div>
```
*/
/*
```
<div class="ph__block l--push-v-0">
  .l--push-v-0
</div>

<div class="ph__block l--pad-v-0">
  .l--pad-v-0
</div>

<div class="ph__block l--push-h-0">
  .l--push-h-0
</div>

<div class="ph__block l--pad-h-0">
  .l--pad-h-0
</div>

<div class="ph__block l--push-all-0">
  .l--push-v-0
</div>

<div class="ph__block l--pad-all-0">
  .l--pad-v-0
</div>
```
*/
/*
```
<div class="ph__block l--push-top-quarter">
  .l--push-top-quarter
</div>

<div class="ph__block l--pad-top-quarter">
  .l--pad-top-quarter
</div>
```
*/
/*
```
<div class="ph__block l--push-bottom-quarter">
  .l--push-bottom-quarter
</div>

<div class="ph__block l--pad-bottom-quarter">
  .l--pad-bottom-quarter
</div>
```
*/
/*
```
<div class="ph__block l--push-left-quarter">
  .l--push-left-quarter
</div>

<div class="ph__block l--pad-left-quarter">
  .l--pad-left-quarter
</div>
```
*/
/*
```
<div class="ph__block l--push-right-quarter">
  .l--push-right-quarter
</div>

<div class="ph__block l--pad-right-quarter">
  .l--pad-right-quarter
</div>
```
*/
/*
```
<div class="ph__block l--push-v-quarter">
  .l--push-v-quarter
</div>

<div class="ph__block l--pad-v-quarter">
  .l--pad-v-quarter
</div>

<div class="ph__block l--push-h-quarter">
  .l--push-h-quarter
</div>

<div class="ph__block l--pad-h-quarter">
  .l--pad-h-quarter
</div>

<div class="ph__block l--push-all-quarter">
  .l--push-v-quarter
</div>

<div class="ph__block l--pad-all-quarter">
  .l--pad-v-quarter
</div>
```
*/
/*
```
<div class="ph__block l--push-top-half">
  .l--push-top-half
</div>

<div class="ph__block l--pad-top-half">
  .l--pad-top-half
</div>
```
*/
/*
```
<div class="ph__block l--push-bottom-half">
  .l--push-bottom-half
</div>

<div class="ph__block l--pad-bottom-half">
  .l--pad-bottom-half
</div>
```
*/
/*
```
<div class="ph__block l--push-left-half">
  .l--push-left-half
</div>

<div class="ph__block l--pad-left-half">
  .l--pad-left-half
</div>
```
*/
/*
```
<div class="ph__block l--push-right-half">
  .l--push-right-half
</div>

<div class="ph__block l--pad-right-half">
  .l--pad-right-half
</div>
```
*/
/*
```
<div class="ph__block l--push-v-half">
  .l--push-v-half
</div>

<div class="ph__block l--pad-v-half">
  .l--pad-v-half
</div>

<div class="ph__block l--push-h-half">
  .l--push-h-half
</div>

<div class="ph__block l--pad-h-half">
  .l--pad-h-half
</div>

<div class="ph__block l--push-all-half">
  .l--push-v-half
</div>

<div class="ph__block l--pad-all-half">
  .l--pad-v-half
</div>
```
*/
/*
```
<div class="ph__block l--push-top-1">
  .l--push-top-1
</div>

<div class="ph__block l--pad-top-1">
  .l--pad-top-1
</div>
```
*/
/*
```
<div class="ph__block l--push-bottom-1">
  .l--push-bottom-1
</div>

<div class="ph__block l--pad-bottom-1">
  .l--pad-bottom-1
</div>
```
*/
/*
```
<div class="ph__block l--push-left-1">
  .l--push-left-1
</div>

<div class="ph__block l--pad-left-1">
  .l--pad-left-1
</div>
```
*/
/*
```
<div class="ph__block l--push-right-1">
  .l--push-right-1
</div>

<div class="ph__block l--pad-right-1">
  .l--pad-right-1
</div>
```
*/
/*
```
<div class="ph__block l--push-v-1">
  .l--push-v-1
</div>

<div class="ph__block l--pad-v-1">
  .l--pad-v-1
</div>

<div class="ph__block l--push-h-1">
  .l--push-h-1
</div>

<div class="ph__block l--pad-h-1">
  .l--pad-h-1
</div>

<div class="ph__block l--push-all-1">
  .l--push-v-1
</div>

<div class="ph__block l--pad-all-1">
  .l--pad-v-1
</div>
```
*/
/*
```
<div class="ph__block l--push-top-1half">
  .l--push-top-1half
</div>

<div class="ph__block l--pad-top-1half">
  .l--pad-top-1half
</div>
```
*/
/*
```
<div class="ph__block l--push-bottom-1half">
  .l--push-bottom-1half
</div>

<div class="ph__block l--pad-bottom-1half">
  .l--pad-bottom-1half
</div>
```
*/
/*
```
<div class="ph__block l--push-left-1half">
  .l--push-left-1half
</div>

<div class="ph__block l--pad-left-1half">
  .l--pad-left-1half
</div>
```
*/
/*
```
<div class="ph__block l--push-right-1half">
  .l--push-right-1half
</div>

<div class="ph__block l--pad-right-1half">
  .l--pad-right-1half
</div>
```
*/
/*
```
<div class="ph__block l--push-v-1half">
  .l--push-v-1half
</div>

<div class="ph__block l--pad-v-1half">
  .l--pad-v-1half
</div>

<div class="ph__block l--push-h-1half">
  .l--push-h-1half
</div>

<div class="ph__block l--pad-h-1half">
  .l--pad-h-1half
</div>

<div class="ph__block l--push-all-1half">
  .l--push-v-1half
</div>

<div class="ph__block l--pad-all-1half">
  .l--pad-v-1half
</div>
```
*/
/*
```
<div class="ph__block l--push-top-2">
  .l--push-top-2
</div>

<div class="ph__block l--pad-top-2">
  .l--pad-top-2
</div>
```
*/
/*
```
<div class="ph__block l--push-bottom-2">
  .l--push-bottom-2
</div>

<div class="ph__block l--pad-bottom-2">
  .l--pad-bottom-2
</div>
```
*/
/*
```
<div class="ph__block l--push-left-2">
  .l--push-left-2
</div>

<div class="ph__block l--pad-left-2">
  .l--pad-left-2
</div>
```
*/
/*
```
<div class="ph__block l--push-right-2">
  .l--push-right-2
</div>

<div class="ph__block l--pad-right-2">
  .l--pad-right-2
</div>
```
*/
/*
```
<div class="ph__block l--push-v-2">
  .l--push-v-2
</div>

<div class="ph__block l--pad-v-2">
  .l--pad-v-2
</div>

<div class="ph__block l--push-h-2">
  .l--push-h-2
</div>

<div class="ph__block l--pad-h-2">
  .l--pad-h-2
</div>

<div class="ph__block l--push-all-2">
  .l--push-v-2
</div>

<div class="ph__block l--pad-all-2">
  .l--pad-v-2
</div>
```
*/
.new-zanata .l--push-top-0 {
  margin-top: 0em !important;
}
.new-zanata .l--pad-top-0 {
  padding-top: 0em !important;
}
.new-zanata .l--push-bottom-0 {
  margin-bottom: 0em !important;
}
.new-zanata .l--pad-bottom-0 {
  padding-bottom: 0em !important;
}
.new-zanata .l--push-left-0 {
  margin-left: 0em !important;
}
.new-zanata .l--pad-left-0 {
  padding-left: 0em !important;
}
.new-zanata .l--push-right-0 {
  margin-right: 0em !important;
}
.new-zanata .l--pad-right-0 {
  padding-right: 0em !important;
}
.new-zanata .l--push-v-0 {
  margin-top: 0em !important;
  margin-bottom: 0em !important;
}
.new-zanata .l--pad-v-0 {
  padding-top: 0em !important;
  padding-bottom: 0em !important;
}
.new-zanata .l--push-h-0 {
  margin-left: 0em !important;
  margin-right: 0em !important;
}
.new-zanata .l--pad-h-0 {
  padding-left: 0em !important;
  padding-right: 0em !important;
}
.new-zanata .l--push-all-0 {
  margin: 0em !important;
}
.new-zanata .l--pad-all-0 {
  padding: 0em !important;
}
.new-zanata .l--push-top-quarter {
  margin-top: 0.375em !important;
}
.new-zanata .l--pad-top-quarter {
  padding-top: 0.375em !important;
}
.new-zanata .l--push-bottom-quarter {
  margin-bottom: 0.375em !important;
}
.new-zanata .l--pad-bottom-quarter {
  padding-bottom: 0.375em !important;
}
.new-zanata .l--push-left-quarter {
  margin-left: 0.375em !important;
}
.new-zanata .l--pad-left-quarter {
  padding-left: 0.375em !important;
}
.new-zanata .l--push-right-quarter {
  margin-right: 0.375em !important;
}
.new-zanata .l--pad-right-quarter {
  padding-right: 0.375em !important;
}
.new-zanata .l--push-v-quarter {
  margin-top: 0.375em !important;
  margin-bottom: 0.375em !important;
}
.new-zanata .l--pad-v-quarter {
  padding-top: 0.375em !important;
  padding-bottom: 0.375em !important;
}
.new-zanata .l--push-h-quarter {
  margin-left: 0.375em !important;
  margin-right: 0.375em !important;
}
.new-zanata .l--pad-h-quarter {
  padding-left: 0.375em !important;
  padding-right: 0.375em !important;
}
.new-zanata .l--push-all-quarter {
  margin: 0.375em !important;
}
.new-zanata .l--pad-all-quarter {
  padding: 0.375em !important;
}
.new-zanata .l--push-top-half {
  margin-top: 0.75em !important;
}
.new-zanata .l--pad-top-half {
  padding-top: 0.75em !important;
}
.new-zanata .l--push-bottom-half {
  margin-bottom: 0.75em !important;
}
.new-zanata .l--pad-bottom-half {
  padding-bottom: 0.75em !important;
}
.new-zanata .l--push-left-half {
  margin-left: 0.75em !important;
}
.new-zanata .l--pad-left-half {
  padding-left: 0.75em !important;
}
.new-zanata .l--push-right-half {
  margin-right: 0.75em !important;
}
.new-zanata .l--pad-right-half {
  padding-right: 0.75em !important;
}
.new-zanata .l--push-v-half {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}
.new-zanata .l--pad-v-half {
  padding-top: 0.75em !important;
  padding-bottom: 0.75em !important;
}
.new-zanata .l--push-h-half {
  margin-left: 0.75em !important;
  margin-right: 0.75em !important;
}
.new-zanata .l--pad-h-half {
  padding-left: 0.75em !important;
  padding-right: 0.75em !important;
}
.new-zanata .l--push-all-half {
  margin: 0.75em !important;
}
.new-zanata .l--pad-all-half {
  padding: 0.75em !important;
}
.new-zanata .l--push-top-1 {
  margin-top: 1.5em !important;
}
.new-zanata .l--pad-top-1 {
  padding-top: 1.5em !important;
}
.new-zanata .l--push-bottom-1 {
  margin-bottom: 1.5em !important;
}
.new-zanata .l--pad-bottom-1 {
  padding-bottom: 1.5em !important;
}
.new-zanata .l--push-left-1 {
  margin-left: 1.5em !important;
}
.new-zanata .l--pad-left-1 {
  padding-left: 1.5em !important;
}
.new-zanata .l--push-right-1 {
  margin-right: 1.5em !important;
}
.new-zanata .l--pad-right-1 {
  padding-right: 1.5em !important;
}
.new-zanata .l--push-v-1 {
  margin-top: 1.5em !important;
  margin-bottom: 1.5em !important;
}
.new-zanata .l--pad-v-1 {
  padding-top: 1.5em !important;
  padding-bottom: 1.5em !important;
}
.new-zanata .l--push-h-1 {
  margin-left: 1.5em !important;
  margin-right: 1.5em !important;
}
.new-zanata .l--pad-h-1 {
  padding-left: 1.5em !important;
  padding-right: 1.5em !important;
}
.new-zanata .l--push-all-1 {
  margin: 1.5em !important;
}
.new-zanata .l--pad-all-1 {
  padding: 1.5em !important;
}
.new-zanata .l--push-top-1half {
  margin-top: 2.25em !important;
}
.new-zanata .l--pad-top-1half {
  padding-top: 2.25em !important;
}
.new-zanata .l--push-bottom-1half {
  margin-bottom: 2.25em !important;
}
.new-zanata .l--pad-bottom-1half {
  padding-bottom: 2.25em !important;
}
.new-zanata .l--push-left-1half {
  margin-left: 2.25em !important;
}
.new-zanata .l--pad-left-1half {
  padding-left: 2.25em !important;
}
.new-zanata .l--push-right-1half {
  margin-right: 2.25em !important;
}
.new-zanata .l--pad-right-1half {
  padding-right: 2.25em !important;
}
.new-zanata .l--push-v-1half {
  margin-top: 2.25em !important;
  margin-bottom: 2.25em !important;
}
.new-zanata .l--pad-v-1half {
  padding-top: 2.25em !important;
  padding-bottom: 2.25em !important;
}
.new-zanata .l--push-h-1half {
  margin-left: 2.25em !important;
  margin-right: 2.25em !important;
}
.new-zanata .l--pad-h-1half {
  padding-left: 2.25em !important;
  padding-right: 2.25em !important;
}
.new-zanata .l--push-all-1half {
  margin: 2.25em !important;
}
.new-zanata .l--pad-all-1half {
  padding: 2.25em !important;
}
.new-zanata .l--push-top-2 {
  margin-top: 3em !important;
}
.new-zanata .l--pad-top-2 {
  padding-top: 3em !important;
}
.new-zanata .l--push-bottom-2 {
  margin-bottom: 3em !important;
}
.new-zanata .l--pad-bottom-2 {
  padding-bottom: 3em !important;
}
.new-zanata .l--push-left-2 {
  margin-left: 3em !important;
}
.new-zanata .l--pad-left-2 {
  padding-left: 3em !important;
}
.new-zanata .l--push-right-2 {
  margin-right: 3em !important;
}
.new-zanata .l--pad-right-2 {
  padding-right: 3em !important;
}
.new-zanata .l--push-v-2 {
  margin-top: 3em !important;
  margin-bottom: 3em !important;
}
.new-zanata .l--pad-v-2 {
  padding-top: 3em !important;
  padding-bottom: 3em !important;
}
.new-zanata .l--push-h-2 {
  margin-left: 3em !important;
  margin-right: 3em !important;
}
.new-zanata .l--pad-h-2 {
  padding-left: 3em !important;
  padding-right: 3em !important;
}
.new-zanata .l--push-all-2 {
  margin: 3em !important;
}
.new-zanata .l--pad-all-2 {
  padding: 3em !important;
}

/*

###  The Grid

#### Standard Grid

```
<div class="l__wrapper">
  <div class="g">
    <div class="w--1 g__item"><div class="ph__block">One Whole</div></div>
  </div>

  <div class="g">
    <div class="w--5-6 g__item">
      <div class="g">
        <div class="w--1-2 g__item"><div class="ph__block">One Half of Five Sixths</div></div>
        <div class="w--1-2 g__item"><div class="ph__block">One Half of Five Sixths</div></div>
      </div>
    </div>
    <div class="w--1-6 g__item"><div class="ph__block">One Sixth</div></div>
  </div>

  <div class="g">
    <div class="w--2-3 g__item"><div class="ph__block">Two Thirds</div></div>
    <div class="w--1-3 g__item"><div class="ph__block">One Third</div></div>
  </div>

  <div class="g">
    <div class="w--3-10 g__item"><div class="ph__block">Three Tenths</div></div>
    <div class="w--7-10 g__item"><div class="ph__block">Seven Tenths</div></div>
  </div>
</div>
```

*/
.new-zanata .g, .new-zanata .g--fit, .new-zanata .g--loose, .new-zanata .g--tight, .new-zanata .g--tighter, .new-zanata .g--collapsed, .new-zanata .g--rev, .new-zanata .g--right, .new-zanata .g--centered {
  *zoom: 1;
  margin: 0;
  margin-left: -0.375em;
  margin-right: -0.375em;
  padding: 0;
  list-style: none;
  letter-spacing: -0.31em;
}
.new-zanata .g:after, .new-zanata .g--fit:after, .new-zanata .g--loose:after, .new-zanata .g--tight:after, .new-zanata .g--tighter:after, .new-zanata .g--collapsed:after, .new-zanata .g--rev:after, .new-zanata .g--right:after, .new-zanata .g--centered:after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 46.25em) {
  .new-zanata .g, .new-zanata .g--fit, .new-zanata .g--loose, .new-zanata .g--tight, .new-zanata .g--tighter, .new-zanata .g--collapsed, .new-zanata .g--rev, .new-zanata .g--right, .new-zanata .g--centered {
    margin-left: -0.75em;
    margin-right: -0.75em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .g, .new-zanata .g--fit, .new-zanata .g--loose, .new-zanata .g--tight, .new-zanata .g--tighter, .new-zanata .g--collapsed, .new-zanata .g--rev, .new-zanata .g--right, .new-zanata .g--centered {
    margin-left: -1.5em;
    margin-right: -1.5em;
  }
}
.new-zanata .g > .g, .new-zanata .g--fit > .g, .new-zanata .g--loose > .g, .new-zanata .g--tight > .g, .new-zanata .g--tighter > .g, .new-zanata .g--collapsed > .g, .new-zanata .g--rev > .g, .new-zanata .g--right > .g, .new-zanata .g--centered > .g, .new-zanata .g > .g--fit, .new-zanata .g--fit > .g--fit, .new-zanata .g--loose > .g--fit, .new-zanata .g--tight > .g--fit, .new-zanata .g--tighter > .g--fit, .new-zanata .g--collapsed > .g--fit, .new-zanata .g--rev > .g--fit, .new-zanata .g--right > .g--fit, .new-zanata .g--centered > .g--fit, .new-zanata .g > .g--loose, .new-zanata .g--fit > .g--loose, .new-zanata .g--loose > .g--loose, .new-zanata .g--tight > .g--loose, .new-zanata .g--tighter > .g--loose, .new-zanata .g--collapsed > .g--loose, .new-zanata .g--rev > .g--loose, .new-zanata .g--right > .g--loose, .new-zanata .g--centered > .g--loose, .new-zanata .g > .g--tight, .new-zanata .g--fit > .g--tight, .new-zanata .g--loose > .g--tight, .new-zanata .g--tight > .g--tight, .new-zanata .g--tighter > .g--tight, .new-zanata .g--collapsed > .g--tight, .new-zanata .g--rev > .g--tight, .new-zanata .g--right > .g--tight, .new-zanata .g--centered > .g--tight, .new-zanata .g > .g--tighter, .new-zanata .g--fit > .g--tighter, .new-zanata .g--loose > .g--tighter, .new-zanata .g--tight > .g--tighter, .new-zanata .g--tighter > .g--tighter, .new-zanata .g--collapsed > .g--tighter, .new-zanata .g--rev > .g--tighter, .new-zanata .g--right > .g--tighter, .new-zanata .g--centered > .g--tighter, .new-zanata .g > .g--collapsed, .new-zanata .g--fit > .g--collapsed, .new-zanata .g--loose > .g--collapsed, .new-zanata .g--tight > .g--collapsed, .new-zanata .g--tighter > .g--collapsed, .new-zanata .g--collapsed > .g--collapsed, .new-zanata .g--rev > .g--collapsed, .new-zanata .g--right > .g--collapsed, .new-zanata .g--centered > .g--collapsed, .new-zanata .g > .g--rev, .new-zanata .g--fit > .g--rev, .new-zanata .g--loose > .g--rev, .new-zanata .g--tight > .g--rev, .new-zanata .g--tighter > .g--rev, .new-zanata .g--collapsed > .g--rev, .new-zanata .g--rev > .g--rev, .new-zanata .g--right > .g--rev, .new-zanata .g--centered > .g--rev, .new-zanata .g > .g--right, .new-zanata .g--fit > .g--right, .new-zanata .g--loose > .g--right, .new-zanata .g--tight > .g--right, .new-zanata .g--tighter > .g--right, .new-zanata .g--collapsed > .g--right, .new-zanata .g--rev > .g--right, .new-zanata .g--right > .g--right, .new-zanata .g--centered > .g--right, .new-zanata .g > .g--centered, .new-zanata .g--fit > .g--centered, .new-zanata .g--loose > .g--centered, .new-zanata .g--tight > .g--centered, .new-zanata .g--tighter > .g--centered, .new-zanata .g--collapsed > .g--centered, .new-zanata .g--rev > .g--centered, .new-zanata .g--right > .g--centered, .new-zanata .g--centered > .g--centered {
  margin-left: 0;
  margin-right: 0;
}
.new-zanata .opera:-o-prefocus,
.new-zanata .grid {
  word-spacing: -0.43em;
}
.new-zanata .g__item {
  display: inline-block;
  margin: 0;
  padding: 0;
  padding-left: 0.375em;
  padding-right: 0.375em;
  width: 100%;
  vertical-align: top;
  word-spacing: normal;
  letter-spacing: normal;
  *zoom: 1;
}
@media (min-width: 46.25em) {
  .new-zanata .g__item {
    padding-left: 0.75em;
    padding-right: 0.75em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .g__item {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
}

/*

#### Fit Grid

Technically not a grid, but used when you want the grid spacing but no widths on grid items

```
<div class="l__wrapper">
  <div class="g--tight g--fit">
    <div class="g__item"><div class="ph__block">Five Sixths</div></div>
    <div class="g__item"><div class="ph__block">One Sixth</div></div>
  </div>
</div>
```

*/
.g--fit > .g__item {
  width: auto !important;
}

/*

#### Loose Grid

Loose grids have all the properties of regular grids, but with half the spacing.

```
<div class="l__wrapper">
  <div class="g--loose">
    <div class="g__item"><div class="ph__block">Five Sixths</div></div>
    <div class="g__item"><div class="ph__block">One Sixth</div></div>
  </div>
</div>
```

*/
.new-zanata .g--loose {
  margin-left: -0.75em;
  margin-right: -0.75em;
}
@media (min-width: 46.25em) {
  .new-zanata .g--loose {
    margin-left: -1.5em;
    margin-right: -1.5em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .g--loose {
    margin-left: -3em;
    margin-right: -3em;
  }
}
.new-zanata .g--loose > .g__item {
  padding-left: 0.75em;
  padding-right: 0.75em;
}
@media (min-width: 46.25em) {
  .new-zanata .g--loose > .g__item {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .g--loose > .g__item {
    padding-left: 3em;
    padding-right: 3em;
  }
}

/*

#### Tight Grid

Tight grids have all the properties of regular grids, but with half the spacing.

```
<div class="l__wrapper">
  <div class="g--tight">
    <div class="g__item"><div class="ph__block">Five Sixths</div></div>
    <div class="g__item"><div class="ph__block">One Sixth</div></div>
  </div>
</div>
```

*/
.new-zanata .g--tight {
  margin-left: -0.1875em;
  margin-right: -0.1875em;
}
@media (min-width: 46.25em) {
  .new-zanata .g--tight {
    margin-left: -0.375em;
    margin-right: -0.375em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .g--tight {
    margin-left: -0.75em;
    margin-right: -0.75em;
  }
}
.new-zanata .g--tight > .g__item {
  padding-left: 0.1875em;
  padding-right: 0.1875em;
}
@media (min-width: 46.25em) {
  .new-zanata .g--tight > .g__item {
    padding-left: 0.375em;
    padding-right: 0.375em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .g--tight > .g__item {
    padding-left: 0.75em;
    padding-right: 0.75em;
  }
}

/*

#### Tighter Grid

Tighter grids have all the properties of regular grids, but with a quarter the spacing.

```
<div class="l__wrapper">
  <div class="g--tighter">
    <div class="w--5-6 g__item"><div class="ph__block">Five Sixths</div></div>
    <div class="w--1-6 g__item"><div class="ph__block">One Sixth</div></div>
  </div>
</div>
```

*/
.new-zanata .g--tighter {
  margin-left: -0.1875em;
}
@media (min-width: 46.25em) {
  .new-zanata .g--tighter {
    margin-left: -0.375em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .g--tighter {
    margin-left: -0.75em;
  }
}
.new-zanata .g--tighter > .g__item {
  padding-left: 0.1875em;
}
@media (min-width: 46.25em) {
  .new-zanata .g--tighter > .g__item {
    padding-left: 0.375em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .g--tighter > .g__item {
    padding-left: 0.75em;
  }
}

/*

#### Collapsed Grid

Collapsed grids have all the properties of regular grids, minus any spacing.

```
<div class="l__wrapper">
  <div class="g--collapsed">
    <div class="w--5-6 g__item"><div class="ph__block">Five Sixths</div></div>
    <div class="w--1-6 g__item"><div class="ph__block">One Sixth</div></div>
  </div>
</div>
```

*/
.new-zanata .g--collapsed {
  margin-left: 0;
  margin-right: 0;
}
.new-zanata .g--collapsed > .g__item {
  padding-left: 0;
  padding-right: 0;
}

/*

#### Reversed Grid

```
<div class="l__wrapper">
  <div class="g--rev">
    <div class="w--5-6 g__item"><div class="ph__block">Five Sixths</div></div>
    <div class="w--1-6 g__item"><div class="ph__block">One Sixth</div></div>
  </div>
</div>
```

*/
.new-zanata .g--rev {
  direction: rtl;
  text-align: left;
}
.new-zanata .g--rev > .g__item {
  direction: ltr;
  text-align: left;
}

/*

#### Right Aligned Grid

Align the entire grid to the right.

```
<div class="l__wrapper">
  <div class="g--right">
    <div class="w--3-6 g__item"><div class="ph__block">Three Sixths</div></div>
    <div class="w--1-6 g__item"><div class="ph__block">One Sixth</div></div>
  </div>
</div>
```
*/
.new-zanata .g--right {
  text-align: right;
}
.new-zanata .g--right > .g__item {
  text-align: left;
}

/*

#### Center Aligned Grid

Centered grids align grid items centrally without needing to use push or pull classes.

```
<div class="l__wrapper">
  <div class="g--centered">
    <div class="w--3-6 g__item"><div class="ph__block">Three Sixths</div></div>
    <div class="w--1-6 g__item"><div class="ph__block">One Sixth</div></div>
  </div>
</div>
```
*/
.new-zanata .g--centered {
  text-align: center;
}
.new-zanata .g--centered > .g__item {
  text-align: left;
}

@media (min-width: 46.25em) {
  .new-zanata .w--1 {
    width: 100% !important;
  }
  .new-zanata .w--1-2, .new-zanata .w--2-4, .new-zanata .w--3-6, .new-zanata .w--4-8, .new-zanata .w--5-10, .new-zanata .w--6-12 {
    width: 50% !important;
  }
  .new-zanata .w--1-3, .new-zanata .w--2-6, .new-zanata .w--4-12 {
    width: 33.333% !important;
  }
  .new-zanata .w--2-3, .new-zanata .w--4-6, .new-zanata .w--8-12 {
    width: 66.666% !important;
  }
  .new-zanata .w--1-4, .new-zanata .w--2-8, .new-zanata .w--3-12 {
    width: 25% !important;
  }
  .new-zanata .w--3-4, .new-zanata .w--6-8, .new-zanata .w--9-12 {
    width: 75% !important;
  }
  .new-zanata .w--1-5, .new-zanata .w--2-10 {
    width: 20% !important;
  }
  .new-zanata .w--2-5, .new-zanata .w--4-10 {
    width: 40% !important;
  }
  .new-zanata .w--3-5, .new-zanata .w--6-10 {
    width: 60% !important;
  }
  .new-zanata .w--4-5, .new-zanata .w--8-10 {
    width: 80% !important;
  }
  .new-zanata .w--1-6, .new-zanata .w--2-12 {
    width: 16.666% !important;
  }
  .new-zanata .w--5-6, .new-zanata .w--10-12 {
    width: 83.333% !important;
  }
  .new-zanata .w--1-8 {
    width: 12.5% !important;
  }
  .new-zanata .w--3-8 {
    width: 37.5% !important;
  }
  .new-zanata .w--5-8 {
    width: 62.5% !important;
  }
  .new-zanata .w--7-8 {
    width: 87.5% !important;
  }
  .new-zanata .w--1-10 {
    width: 10% !important;
  }
  .new-zanata .w--3-10 {
    width: 30% !important;
  }
  .new-zanata .w--7-10 {
    width: 70% !important;
  }
  .new-zanata .w--9-10 {
    width: 90% !important;
  }
  .new-zanata .w--1-12 {
    width: 8.333% !important;
  }
  .new-zanata .w--5-12 {
    width: 41.666% !important;
  }
  .new-zanata .w--7-12 {
    width: 58.333% !important;
  }
  .new-zanata .w--11-12 {
    width: 91.666% !important;
  }
}
@media (max-width: 46.1875em) {
  .new-zanata .w--1-s {
    width: 100% !important;
  }
  .new-zanata .w--1-2-s, .new-zanata .w--2-4-s, .new-zanata .w--3-6-s, .new-zanata .w--4-8-s, .new-zanata .w--5-10-s, .new-zanata .w--6-12-s {
    width: 50% !important;
  }
  .new-zanata .w--1-3-s, .new-zanata .w--2-6-s, .new-zanata .w--4-12-s {
    width: 33.333% !important;
  }
  .new-zanata .w--2-3-s, .new-zanata .w--4-6-s, .new-zanata .w--8-12-s {
    width: 66.666% !important;
  }
  .new-zanata .w--1-4-s, .new-zanata .w--2-8-s, .new-zanata .w--3-12-s {
    width: 25% !important;
  }
  .new-zanata .w--3-4-s, .new-zanata .w--6-8-s, .new-zanata .w--9-12-s {
    width: 75% !important;
  }
  .new-zanata .w--1-5-s, .new-zanata .w--2-10-s {
    width: 20% !important;
  }
  .new-zanata .w--2-5-s, .new-zanata .w--4-10-s {
    width: 40% !important;
  }
  .new-zanata .w--3-5-s, .new-zanata .w--6-10-s {
    width: 60% !important;
  }
  .new-zanata .w--4-5-s, .new-zanata .w--8-10-s {
    width: 80% !important;
  }
  .new-zanata .w--1-6-s, .new-zanata .w--2-12-s {
    width: 16.666% !important;
  }
  .new-zanata .w--5-6-s, .new-zanata .w--10-12-s {
    width: 83.333% !important;
  }
  .new-zanata .w--1-8-s {
    width: 12.5% !important;
  }
  .new-zanata .w--3-8-s {
    width: 37.5% !important;
  }
  .new-zanata .w--5-8-s {
    width: 62.5% !important;
  }
  .new-zanata .w--7-8-s {
    width: 87.5% !important;
  }
  .new-zanata .w--1-10-s {
    width: 10% !important;
  }
  .new-zanata .w--3-10-s {
    width: 30% !important;
  }
  .new-zanata .w--7-10-s {
    width: 70% !important;
  }
  .new-zanata .w--9-10-s {
    width: 90% !important;
  }
  .new-zanata .w--1-12-s {
    width: 8.333% !important;
  }
  .new-zanata .w--5-12-s {
    width: 41.666% !important;
  }
  .new-zanata .w--7-12-s {
    width: 58.333% !important;
  }
  .new-zanata .w--11-12-s {
    width: 91.666% !important;
  }
}
@media (min-width: 46.25em) and (max-width: 79.3125em) {
  .new-zanata .w--1-m {
    width: 100% !important;
  }
  .new-zanata .w--1-2-m, .new-zanata .w--2-4-m, .new-zanata .w--3-6-m, .new-zanata .w--4-8-m, .new-zanata .w--5-10-m, .new-zanata .w--6-12-m {
    width: 50% !important;
  }
  .new-zanata .w--1-3-m, .new-zanata .w--2-6-m, .new-zanata .w--4-12-m {
    width: 33.333% !important;
  }
  .new-zanata .w--2-3-m, .new-zanata .w--4-6-m, .new-zanata .w--8-12-m {
    width: 66.666% !important;
  }
  .new-zanata .w--1-4-m, .new-zanata .w--2-8-m, .new-zanata .w--3-12-m {
    width: 25% !important;
  }
  .new-zanata .w--3-4-m, .new-zanata .w--6-8-m, .new-zanata .w--9-12-m {
    width: 75% !important;
  }
  .new-zanata .w--1-5-m, .new-zanata .w--2-10-m {
    width: 20% !important;
  }
  .new-zanata .w--2-5-m, .new-zanata .w--4-10-m {
    width: 40% !important;
  }
  .new-zanata .w--3-5-m, .new-zanata .w--6-10-m {
    width: 60% !important;
  }
  .new-zanata .w--4-5-m, .new-zanata .w--8-10-m {
    width: 80% !important;
  }
  .new-zanata .w--1-6-m, .new-zanata .w--2-12-m {
    width: 16.666% !important;
  }
  .new-zanata .w--5-6-m, .new-zanata .w--10-12-m {
    width: 83.333% !important;
  }
  .new-zanata .w--1-8-m {
    width: 12.5% !important;
  }
  .new-zanata .w--3-8-m {
    width: 37.5% !important;
  }
  .new-zanata .w--5-8-m {
    width: 62.5% !important;
  }
  .new-zanata .w--7-8-m {
    width: 87.5% !important;
  }
  .new-zanata .w--1-10-m {
    width: 10% !important;
  }
  .new-zanata .w--3-10-m {
    width: 30% !important;
  }
  .new-zanata .w--7-10-m {
    width: 70% !important;
  }
  .new-zanata .w--9-10-m {
    width: 90% !important;
  }
  .new-zanata .w--1-12-m {
    width: 8.333% !important;
  }
  .new-zanata .w--5-12-m {
    width: 41.666% !important;
  }
  .new-zanata .w--7-12-m {
    width: 58.333% !important;
  }
  .new-zanata .w--11-12-m {
    width: 91.666% !important;
  }
}
@media (min-width: 79.375em) and (max-width: 96.1875em) {
  .new-zanata .w--1-l {
    width: 100% !important;
  }
  .new-zanata .w--1-2-l, .new-zanata .w--2-4-l, .new-zanata .w--3-6-l, .new-zanata .w--4-8-l, .new-zanata .w--5-10-l, .new-zanata .w--6-12-l {
    width: 50% !important;
  }
  .new-zanata .w--1-3-l, .new-zanata .w--2-6-l, .new-zanata .w--4-12-l {
    width: 33.333% !important;
  }
  .new-zanata .w--2-3-l, .new-zanata .w--4-6-l, .new-zanata .w--8-12-l {
    width: 66.666% !important;
  }
  .new-zanata .w--1-4-l, .new-zanata .w--2-8-l, .new-zanata .w--3-12-l {
    width: 25% !important;
  }
  .new-zanata .w--3-4-l, .new-zanata .w--6-8-l, .new-zanata .w--9-12-l {
    width: 75% !important;
  }
  .new-zanata .w--1-5-l, .new-zanata .w--2-10-l {
    width: 20% !important;
  }
  .new-zanata .w--2-5-l, .new-zanata .w--4-10-l {
    width: 40% !important;
  }
  .new-zanata .w--3-5-l, .new-zanata .w--6-10-l {
    width: 60% !important;
  }
  .new-zanata .w--4-5-l, .new-zanata .w--8-10-l {
    width: 80% !important;
  }
  .new-zanata .w--1-6-l, .new-zanata .w--2-12-l {
    width: 16.666% !important;
  }
  .new-zanata .w--5-6-l, .new-zanata .w--10-12-l {
    width: 83.333% !important;
  }
  .new-zanata .w--1-8-l {
    width: 12.5% !important;
  }
  .new-zanata .w--3-8-l {
    width: 37.5% !important;
  }
  .new-zanata .w--5-8-l {
    width: 62.5% !important;
  }
  .new-zanata .w--7-8-l {
    width: 87.5% !important;
  }
  .new-zanata .w--1-10-l {
    width: 10% !important;
  }
  .new-zanata .w--3-10-l {
    width: 30% !important;
  }
  .new-zanata .w--7-10-l {
    width: 70% !important;
  }
  .new-zanata .w--9-10-l {
    width: 90% !important;
  }
  .new-zanata .w--1-12-l {
    width: 8.333% !important;
  }
  .new-zanata .w--5-12-l {
    width: 41.666% !important;
  }
  .new-zanata .w--7-12-l {
    width: 58.333% !important;
  }
  .new-zanata .w--11-12-l {
    width: 91.666% !important;
  }
}
@media (min-width: 96.25em) {
  .new-zanata .w--1-h {
    width: 100% !important;
  }
  .new-zanata .w--1-2-h, .new-zanata .w--2-4-h, .new-zanata .w--3-6-h, .new-zanata .w--4-8-h, .new-zanata .w--5-10-h, .new-zanata .w--6-12-h {
    width: 50% !important;
  }
  .new-zanata .w--1-3-h, .new-zanata .w--2-6-h, .new-zanata .w--4-12-h {
    width: 33.333% !important;
  }
  .new-zanata .w--2-3-h, .new-zanata .w--4-6-h, .new-zanata .w--8-12-h {
    width: 66.666% !important;
  }
  .new-zanata .w--1-4-h, .new-zanata .w--2-8-h, .new-zanata .w--3-12-h {
    width: 25% !important;
  }
  .new-zanata .w--3-4-h, .new-zanata .w--6-8-h, .new-zanata .w--9-12-h {
    width: 75% !important;
  }
  .new-zanata .w--1-5-h, .new-zanata .w--2-10-h {
    width: 20% !important;
  }
  .new-zanata .w--2-5-h, .new-zanata .w--4-10-h {
    width: 40% !important;
  }
  .new-zanata .w--3-5-h, .new-zanata .w--6-10-h {
    width: 60% !important;
  }
  .new-zanata .w--4-5-h, .new-zanata .w--8-10-h {
    width: 80% !important;
  }
  .new-zanata .w--1-6-h, .new-zanata .w--2-12-h {
    width: 16.666% !important;
  }
  .new-zanata .w--5-6-h, .new-zanata .w--10-12-h {
    width: 83.333% !important;
  }
  .new-zanata .w--1-8-h {
    width: 12.5% !important;
  }
  .new-zanata .w--3-8-h {
    width: 37.5% !important;
  }
  .new-zanata .w--5-8-h {
    width: 62.5% !important;
  }
  .new-zanata .w--7-8-h {
    width: 87.5% !important;
  }
  .new-zanata .w--1-10-h {
    width: 10% !important;
  }
  .new-zanata .w--3-10-h {
    width: 30% !important;
  }
  .new-zanata .w--7-10-h {
    width: 70% !important;
  }
  .new-zanata .w--9-10-h {
    width: 90% !important;
  }
  .new-zanata .w--1-12-h {
    width: 8.333% !important;
  }
  .new-zanata .w--5-12-h {
    width: 41.666% !important;
  }
  .new-zanata .w--7-12-h {
    width: 58.333% !important;
  }
  .new-zanata .w--11-12-h {
    width: 91.666% !important;
  }
}
.new-zanata .w--r-1-2 {
  width: 0.75em;
}
.new-zanata .w--r-1 {
  width: 1.5em;
}
.new-zanata .w--r-2 {
  width: 3em;
}

.h--1-2,
.h--1,
.h--1-1-2,
.h--2 {
  vertical-align: middle;
}

.h--1-2 {
  line-height: 0.75em !important;
}

.h--1 {
  line-height: 1.5em !important;
}

.h--1-1-4 {
  line-height: 1.875em !important;
}

.h--1-1-2 {
  line-height: 2.25em !important;
}

.h--2 {
  line-height: 3em !important;
}

.new-zanata .is-hidden {
  display: none !important;
}
@media (max-width: 46.1875em) {
  .new-zanata .is-hidden--s {
    display: none !important;
  }
}
@media (min-width: 46.25em) and (max-width: 79.3125em) {
  .new-zanata .is-hidden--m {
    display: none !important;
  }
}
@media (max-width: 79.3125em) {
  .new-zanata .is-hidden--m-down {
    display: none !important;
  }
}
@media (min-width: 46.25em) {
  .new-zanata .is-hidden--m-up {
    display: none !important;
  }
}
@media (max-width: 58.0625em) {
  .new-zanata .is-hidden--m-l-down {
    display: none !important;
  }
}
@media (min-width: 58.125em) {
  .new-zanata .is-hidden--m-l-up {
    display: none !important;
  }
}
@media (min-width: 79.375em) and (max-width: 96.1875em) {
  .new-zanata .is-hidden--l {
    display: none !important;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .is-hidden--l-up {
    display: none !important;
  }
}
@media (min-width: 96.25em) {
  .new-zanata .is-hidden--h {
    display: none !important;
  }
}
.new-zanata .is-invisible, .new-zanata .form--search__label,
.new-zanata .is-sr-only {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.new-zanata .is-disabled {
  opacity: 0.6;
}
.new-zanata .is-transition, .new-zanata .is-removed, .new-zanata .bg--faint, .new-zanata .bg--high, .new-zanata .bg--pop-high, .new-zanata .modal__dialog, .new-zanata .panel, .new-zanata .header__user-nav__menu, .new-zanata .tabs--accent .tabs__nav a:hover, .new-zanata .loader--center, .new-zanata .modal__content,
.new-zanata .bg--high:hover,
.new-zanata .bg--pop-high:hover,
.new-zanata .modal__dialog:hover,
.new-zanata .panel:hover,
.new-zanata .header__user-nav__menu:hover,
.new-zanata .loader--center:hover,
.new-zanata .modal__content:hover,
.new-zanata .bg--high--hover:hover, .new-zanata .bg--higher, .new-zanata .bg--pop-higher, .new-zanata .dropdown__content, .new-zanata .panel__sub-header, .new-zanata .tabs--accent .tabs__nav a.is-active, .new-zanata .tabs--accent .tabs__nav a.is-active:after,
.new-zanata .bg--higher:hover,
.new-zanata .bg--pop-higher:hover,
.new-zanata .dropdown__content:hover,
.new-zanata .panel__sub-header:hover,
.new-zanata .tabs--accent .tabs__nav a.is-active:hover,
.new-zanata .tabs--accent .tabs__nav a.is-active:hover:after,
.new-zanata .bg--higher--hover:hover, .new-zanata .bg--highest, .new-zanata .bg--pop-highest, .new-zanata .tabs--vertical .tabs__nav > li.is-active a,
.new-zanata .tabs--vertical .tabs__nav > li > a.is-active, .new-zanata .tabs--vertical .tabsContent > li, .new-zanata .dropdown.is-active .dropdown__toggle, .new-zanata .panel__header, .new-zanata .panels__panel.is-active, .new-zanata .autocomplete__results, .new-zanata .rf-au-lst-dcrtn, .new-zanata .tabs--accent .tabs__nav,
.new-zanata .bg--highest:hover,
.new-zanata .bg--pop-highest:hover,
.new-zanata .tabs--vertical .tabs__nav > li.is-active a:hover,
.new-zanata .tabs--vertical .tabs__nav > li > a.is-active:hover,
.new-zanata .tabs--vertical .tabsContent > li:hover,
.new-zanata .dropdown.is-active .dropdown__toggle:hover,
.new-zanata .panel__header:hover,
.new-zanata .panels__panel.is-active:hover,
.new-zanata .autocomplete__results:hover,
.new-zanata .rf-au-lst-dcrtn:hover,
.new-zanata .tabs--accent .tabs__nav:hover,
.new-zanata .bg--highest--hover:hover,
.new-zanata .list--panel > li:hover,
.new-zanata .list--stats > li:hover, .new-zanata .bg--low,
.new-zanata .bg--low--hover:hover, .new-zanata .bg--lower,
.new-zanata .bg--lower--hover:hover, .new-zanata .bg--lowest,
.new-zanata .bg--lowest--hover:hover, .new-zanata .list--highlight > li, .new-zanata .form--search:before, .new-zanata .tabs--lined > .tabs__nav > ul > li > a:after,
.new-zanata .tabs--lined > .tabs__nav > li > a:after, .new-zanata .progress-bar__expander .progress-bar, .new-zanata .progress-bar__expander .progress-bar--large, .new-zanata .progress-bar--large__expander .progress-bar--large, .new-zanata .dropdown__toggle, .new-zanata input[type="submit"],
.new-zanata button,
.new-zanata .button,
.new-zanata .button--small,
.new-zanata .button--large,
.new-zanata .button--huge,
.new-zanata .button--snug,
.new-zanata .button--full,
.new-zanata .button--inline-right,
.new-zanata .button--inline-left,
.new-zanata .button--primary,
.new-zanata .button--secondary,
.new-zanata input.button--secondary,
.new-zanata .button--success,
.new-zanata input.button--success,
.new-zanata .button--warning,
.new-zanata input.button--warning,
.new-zanata .button--danger,
.new-zanata input.button--danger,
.new-zanata input.button--primary,
.new-zanata .button--unsure,
.new-zanata input.button--unsure, .no-touch .new-zanata .reveal__target, .new-zanata .reveal__target--slide, .new-zanata .modal, .new-zanata .drag-drop:after, .new-zanata .edit-item, .new-zanata .header__logo-only .header__site-logo,
.new-zanata .header__logo-only img, .new-zanata .header__user-nav__toggle, .new-zanata .header__user-nav__toggle:before {
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
}
.new-zanata .is-transition-fast, .new-zanata .form__checkbox,
.new-zanata .form__radio, .new-zanata .form__checkbox__item:before,
.new-zanata .form__radio__item:before, .new-zanata .form__checkbox__item:after {
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.1s;
}
.new-zanata .is-transition-bounce, .new-zanata .dropdown, .csstransforms3d .new-zanata .dropdown__content, .new-zanata .panels, .new-zanata .panels--2, .new-zanata .panels--3 {
  -moz-transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
  -o-transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
  -webkit-transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
  transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
}
.new-zanata .is-removed {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transform: scale3d(1, 0, 1);
  -ms-transform: scale3d(1, 0, 1);
  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);
}

/*

### Text Modifiers

#### Text Transforms

```example
<p class="txt--lowercase">Lowercase</p>
<p class="txt--uppercase">Uppercase</p>
<p class="txt--capitalize">capitalize</p>
```

#### Text Alignment

```example
<p class="txt--align-left">Align Left</p>
<p class="txt--align-right">Align Right</p>
<p class="txt--align-center">Align Center</p>
```

#### Text No Wrap

```example
<p class="txt--nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</p>
```


*/
.new-zanata .txt--lowercase {
  text-transform: lowercase;
}
.new-zanata .txt--uppercase {
  text-transform: uppercase;
}
.new-zanata .txt--capitalize {
  text-transform: capitalize;
}
.new-zanata .txt--nowrap {
  white-space: nowrap;
}
@media (max-width: 46.1875em) {
  .new-zanata .txt--align-left-s,
  .new-zanata .txt--s-align-left {
    text-align: left;
  }
  .new-zanata .txt--align-right-s,
  .new-zanata .txt--s-align-right {
    text-align: right;
  }
  .new-zanata .txt--align-center-s,
  .new-zanata .txt--s-align-center {
    text-align: center;
  }
}
@media (min-width: 46.25em) {
  .new-zanata .txt--align-left {
    text-align: left !important;
  }
  .new-zanata .txt--align-right {
    text-align: right !important;
  }
  .new-zanata .txt--align-center {
    text-align: center !important;
  }
}

/*

#### Text Invert

```example
<p class="txt--invert">Invert text with <a href="#">a link</a></p>
```

*/
.new-zanata .txt--invert {
  color: #fff;
}
.new-zanata .txt--invert a {
  color: #d9d9d9 !important;
}
.new-zanata .txt--invert a:hover {
  color: white !important;
}
.new-zanata .txt--invert a:active, .new-zanata .txt--invert a.is-active {
  color: white !important;
}

/*

#### Text Lead

```
<p class="txt--lead">Lead text</p>
```

*/
.new-zanata .txt--lead {
  font-size: 1.25em;
  line-height: 1.2em;
  font-weight: 300;
}
.new-zanata .txt--lead strong {
  font-weight: 600;
}

/*

#### Text Hero

```
<p class="txt--hero">Hero text</p>
```

*/
.new-zanata .txt--hero {
  font-size: 1.5em;
  line-height: 1.5em;
  font-weight: 300;
}
.new-zanata .txt--hero strong {
  font-weight: 600;
}
@media (min-width: 46.25em) {
  .new-zanata .txt--hero {
    font-size: 1.75em;
    line-height: 1.07143em;
  }
}

/*

#### Text Mini

```
<p class="txt--mini">Mini text</p>
```

*/
.new-zanata .txt--mini {
  font-size: 0.875em;
  line-height: 1.28571em;
}

/*

#### Text Meta

```
<p class="txt--meta">Meta text</p>
```

*/
.new-zanata .textMeta {
  font-size: 0.875em;
  line-height: 1.28571em;
  color: #639cad;
  font-weight: 400;
  letter-spacing: 0;
}

/*

#### Text Understated

```
<p class="txt--understated">Understated text</p>
```

*/
.new-zanata .u-textUnderstated, .new-zanata .i--understated:before {
  color: #639cad;
}

/*

#### Text Important

```example
<p class="txt--important">Important</p>
```

*/
.new-zanata .txt--important {
  font-weight: 700;
}

/*

#### Text Hyphenate

```example
<p class="txt--hyphen">https://access.redhat.com/site/products/Red_Hat_Enterprise_Linux/Get-Beta</p>
```

*/
.new-zanata .txt--hyphenate {
  word-break: break-all;
  word-break: break-word;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/*

#### Text States

```example
<p class="txt--highlight">State Highlight</p>
<p class="txt--success">State Success</p>
<p class="txt--unsure">State Unsure</p>
<p class="txt--warning">State Warning</p>
<p class="txt--danger">State Danger</p>
<p class="txt--neutral">State Neutral</p>
```

*/
.new-zanata .txt--highlight,
.new-zanata .txt--state-highlight {
  color: #03A6D7 !important;
}
.new-zanata .txt--success, .new-zanata .message--success,
.new-zanata .txt--state-success {
  color: #5CCA7B !important;
}
.new-zanata .txt--unsure, .new-zanata .message--unsure,
.new-zanata .txt--state-unsure {
  color: #E9DF1B !important;
}
.new-zanata .txt--warning, .new-zanata .message--warning,
.new-zanata .txt--state-warning {
  color: #FFA800 !important;
}
.new-zanata .txt--danger, .new-zanata .message--danger,
.new-zanata .txt--state-danger,
.new-zanata .txt--required {
  color: #FF3B3D !important;
}
.new-zanata .u-textNeutral, .new-zanata .message--neutral,
.new-zanata .txt--state-neutral {
  color: #bcd4dc !important;
}

/*

#### Text Hyphenate

```example
<p class="txt--select-none">Don't let any text inside here be selected</p>
```

*/
.new-zanata .txt--select-none {
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.new-zanata .divide, .new-zanata .d--right, .new-zanata .d--left, .new-zanata .d--bottom, .new-zanata .d--top {
  border-width: 0;
  border-style: solid;
  border-color: rgba(32, 113, 138, 0.15);
}
.new-zanata .d--right {
  border-right-width: 1px;
}
.new-zanata .d--left {
  border-left-width: 1px;
}
.new-zanata .d--bottom {
  border-bottom-width: 1px;
}
.new-zanata .d--top {
  border-top-width: 1px;
}

/*

### Backgrounds

#### Background Levels

```
<div class="bg--lowest l--pad-all-1 l--push-bottom-half">I am so so very low. Go away.</div>

<div class="bg--lower l--pad-all-1 l--push-bottom-half">I am very low</div>

<div class="bg--low l--pad-all-1 l--push-bottom-half">I am low</div>

<div class="bg--neutral l--pad-all-1 l--push-bottom-half">I am keeping the peace. I mean I am neutral.</div>

<div class="bg--high l--pad-all-1 l--push-bottom-half">I am soooo high</div>

<div class="bg--higher l--pad-all-1 l--push-bottom-half">I am way higher</div>

<div class="bg--highest l--pad-all-1 l--push-bottom-half">I am the highest, wooo!</div>

<div class="bg--highest l--pad-all-1 l--push-bottom-half">I am the highest, wooo!</div>

<div class="bg--high--hover l--pad-all-1 l--push-bottom-half">I am just hovering around.</div>

<div class="bg--pop-highest l--pad-all-1 l--push-bottom-half">Yeah, but I am poppin.</div>

```

*/
.new-zanata .bg--faint {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.9;
}
.no-touch .new-zanata .bg--faint:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.new-zanata .bg--high, .new-zanata .bg--pop-high, .new-zanata .modal__dialog, .new-zanata .panel, .new-zanata .header__user-nav__menu, .new-zanata .tabs--accent .tabs__nav a:hover, .new-zanata .loader--center, .new-zanata .modal__content,
.new-zanata .bg--high:hover,
.new-zanata .bg--pop-high:hover,
.new-zanata .modal__dialog:hover,
.new-zanata .panel:hover,
.new-zanata .header__user-nav__menu:hover,
.new-zanata .tabs--accent .tabs__nav a:hover,
.new-zanata .loader--center:hover,
.new-zanata .modal__content:hover,
.new-zanata .bg--high--hover:hover {
  background-color: #fafafa;
}
.new-zanata .bg--higher, .new-zanata .bg--pop-higher, .new-zanata .dropdown__content, .new-zanata .panel__sub-header, .new-zanata .tabs--accent .tabs__nav a.is-active, .new-zanata .tabs--accent .tabs__nav a.is-active:after,
.new-zanata .bg--higher:hover,
.new-zanata .bg--pop-higher:hover,
.new-zanata .dropdown__content:hover,
.new-zanata .panel__sub-header:hover,
.new-zanata .tabs--accent .tabs__nav a.is-active:hover,
.new-zanata .tabs--accent .tabs__nav a.is-active:hover:after,
.new-zanata .bg--higher--hover:hover {
  background-color: #fcfcfc;
}
.new-zanata .bg--highest, .new-zanata .bg--pop-highest, .new-zanata .tabs--vertical .tabs__nav > li.is-active a,
.new-zanata .tabs--vertical .tabs__nav > li > a.is-active, .new-zanata .tabs--vertical .tabsContent > li, .new-zanata .dropdown.is-active .dropdown__toggle, .new-zanata .panel__header, .new-zanata .panels__panel.is-active, .new-zanata .autocomplete__results, .new-zanata .rf-au-lst-dcrtn, .new-zanata .tabs--accent .tabs__nav,
.new-zanata .bg--highest:hover,
.new-zanata .bg--pop-highest:hover,
.new-zanata .tabs--vertical .tabs__nav > li.is-active a:hover,
.new-zanata .tabs--vertical .tabs__nav > li > a.is-active:hover,
.new-zanata .tabs--vertical .tabsContent > li:hover,
.new-zanata .dropdown.is-active .dropdown__toggle:hover,
.new-zanata .panel__header:hover,
.new-zanata .panels__panel.is-active:hover,
.new-zanata .autocomplete__results:hover,
.new-zanata .rf-au-lst-dcrtn:hover,
.new-zanata .tabs--accent .tabs__nav:hover,
.new-zanata .bg--highest--hover:hover,
.new-zanata .list--panel > li:hover,
.new-zanata .list--stats > li:hover {
  background-color: #fff;
}
.new-zanata .bg--low,
.new-zanata .bg--low--hover:hover {
  background-color: #e6e6e6;
}
.new-zanata .bg--lower,
.new-zanata .bg--lower--hover:hover {
  background-color: #bfbfbf;
}
.new-zanata .bg--lowest,
.new-zanata .bg--lowest--hover:hover {
  background-color: #999999;
}
.new-zanata .bg--pop-high, .new-zanata .modal__dialog, .new-zanata .panel, .new-zanata .header__user-nav__menu {
  border: 1px solid rgba(32, 113, 138, 0.15);
  border-bottom-width: 2px;
}
.new-zanata .bg--pop-higher, .new-zanata .dropdown__content, .new-zanata .panel__sub-header {
  border: 1px solid rgba(32, 113, 138, 0.15);
  border-bottom-width: 2px;
}
.new-zanata .bg--pop-highest, .new-zanata .tabs--vertical .tabs__nav > li.is-active a,
.new-zanata .tabs--vertical .tabs__nav > li > a.is-active, .new-zanata .tabs--vertical .tabsContent > li, .new-zanata .dropdown.is-active .dropdown__toggle, .new-zanata .panel__header, .new-zanata .panels__panel.is-active, .new-zanata .autocomplete__results, .new-zanata .rf-au-lst-dcrtn {
  border: 1px solid rgba(32, 113, 138, 0.15);
  border-bottom-width: 2px;
}
.new-zanata .bg--neutral, .new-zanata .message--neutral {
  background-color: #fff;
}

/*

#### Background States

```
<div class="bg--primary l--pad-all-1 l--push-bottom-half">I am Primary.</div>

<div class="bg--secondary l--pad-all-1 l--push-bottom-half">I am Secondary.</div>

<div class="bg--danger l--pad-all-1 l--push-bottom-half">Oh noes.</div>

<div class="bg--warning l--pad-all-1 l--push-bottom-half">Careful.</div>

<div class="bg--unsure l--pad-all-1 l--push-bottom-half">Are you sure.</div>

<div class="bg--success l--pad-all-1 l--push-bottom-half">Woo hoo!.</div>

<div class="bg--highlight l--pad-all-1 l--push-bottom-half">Hi.</div>

```

*/
.new-zanata .bg--primary {
  background-color: #03A6D7;
}
.new-zanata .bg--secondary {
  background-color: #20718A;
}
.new-zanata .bg--danger, .new-zanata .message--danger {
  background-color: #ffd8d8;
}
.new-zanata .bg--warning, .new-zanata .message--warning {
  background-color: #ffeecc;
}
.new-zanata .bg--unsure, .new-zanata .message--unsure {
  background-color: #fdfce8;
}
.new-zanata .bg--success, .new-zanata .message--success {
  background-color: #def4e5;
}
.new-zanata .bg--highlight, .new-zanata .message--highlight {
  background-color: #cdedf7;
}

/*

### Box

#### Box Round

Only apply to block level content, otherwise .bx--inline-block or bx--block is needed.

```
<div class="bx--round">
  <a href="/profile"><img src="http://placehold.it/115x115" alt="Luke Brooker"></a>
</div>
```

*/
.new-zanata .bx--round, .new-zanata .media--circle {
  border-radius: 1000px !important;
  overflow: hidden;
}
.new-zanata .bx--round img, .new-zanata .media--circle img {
  display: block;
}

.bx--table {
  display: table;
}

.bx--table__cell {
  display: table-cell;
}

/*

#### Box Block

Display an element with `display: block`

```example
<span class="bx--block ph__block">Box Block</span>
```

*/
.bx--block {
  display: block !important;
}

/*

#### Box Inline

Display an element with `display: inline`

```example
<span class="bx--inline ph__block">Box Inline</span>
```

*/
.bx--inline {
  display: inline !important;
}

/*

#### Box Inline Block

Display an element with `display: inline-block`

```example
<span class="bx--inline-block ph__block">Box Inline Block</span>
```

*/
.bx--inline-block, .new-zanata .bx--round, .new-zanata .media--circle {
  display: inline-block !important;
  vertical-align: middle;
}

/*

#### Box Break All

Wrap long words that expand the boundaries of their container.
Beware this will break words at arbitary points.
Also adds a hyphen to these words, except in Chrome, Opera and Android.

```example
<div class="bx--break-all l--constrain-small">WowThisIsALongWordISureHopeItEndsSoonOtherwiseTHisLineIsGoingToBreak</div>
```

*/
.bx--break-all {
  word-break: break-all;
  hyphens: auto;
}

/*

#### Box Break Word

Wrap long words that expand the boundaries of their container. This wont break words with no breakable characters.
Also adds a hyphen to these words, except in Chrome, Opera and Android.

```example
<div class="bx--break-word l--constrain-small">WowThisIsALongWordISureHopeItEnds-SoonOtherwiseTHisLineIsGoingToBreak</div>
```

*/
.bx--break-word, .new-zanata .message, .new-zanata .message--danger, .new-zanata .message--warning, .new-zanata .message--unsure, .new-zanata .message--success, .new-zanata .message--highlight, .new-zanata .message--neutral {
  word-wrap: break-word;
  hyphens: auto;
}

@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
  50% {
    -moz-transform: scale3d(0.8, 0.8, 1);
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
  }
  100% {
    -moz-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
}
@-webkit-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/*

### Icons

All icons also need the class `.i` added to them.


Zanata icon webfont is preloaded in the following pages:
   1. gwt-editor/../webtrans/Application.xhtml
   2. zanata-war/../WEB-INF/template/template.xhtml
   3. zanata-war/../WEB-INF/template/template_nobanner.xhtml

*/
@font-face {
  font-family: 'zanata';
  src: url("../fonts/zanata-v6/zanata.eot?ds8ffm");
  src: url("../fonts/zanata-v6/zanata.eot?ds8ffm#iefix") format("embedded-opentype"), url("../fonts/zanata-v6/zanata.ttf?ds8ffm") format("truetype"), url("../fonts/zanata-v6/zanata.woff?ds8ffm") format("woff"), url("../fonts/zanata-v6/zanata.svg?ds8ffm#zanata") format("svg");
  font-weight: normal;
  font-style: normal;
}
.new-zanata .i, .new-zanata .i--inline, .new-zanata .i--left, .new-zanata .i--right, .new-zanata .i--understated, .new-zanata .i--small, .new-zanata .i--large, .new-zanata .header__user-nav__toggle:before, .new-zanata .i--huge, .new-zanata .form__checkbox__item:after, .new-zanata .form--search:before {
  vertical-align: middle;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.new-zanata .i:before, .new-zanata .i--inline:before, .new-zanata .i--left:before, .new-zanata .i--right:before, .new-zanata .i--understated:before, .new-zanata .i--small:before, .new-zanata .i--large:before, .new-zanata .header__user-nav__toggle:before, .new-zanata .i--huge:before, .new-zanata .form__checkbox__item:after, .new-zanata .form--search:before, .new-zanata .dropdown__toggle:after {
  font-family: 'Zanata';
  text-align: center;
}
.new-zanata .i--inline:before {
  line-height: 1.5em;
}
.new-zanata .i--left:before {
  margin-right: 0.1875em;
}
.new-zanata .i--right:before {
  margin-left: 0.1875em;
}
.new-zanata .i--small:before {
  font-size: 0.875em;
}
.new-zanata .i--large:before, .new-zanata .header__user-nav__toggle:before {
  font-size: 1.25em;
}
.new-zanata .i--huge:before {
  font-size: 1.5em;
}

/*

#### Icon Item

Use to display icons to the far side of text, either left or right. Usually used in a list.

<ul class="list--no-bullets">
    <li class="i__item--left">Text <i class="i i__item__icon i--export"></i></li>
    <li class="i__item--right">Text <i class="i i__item__icon i--export"></i></li>
    <li>
        <a href="" class="i__item--left">Text <i class="i i__item__icon i--export"></i></a>
    </li>
</ul>

*/
.new-zanata .i__item--left, .new-zanata .i__item--right {
  white-space: nowrap;
}
.new-zanata .i__item--left .i__item__icon, .new-zanata .i__item--right .i__item__icon {
  line-height: 1.5em;
}
.new-zanata .i__item--left {
  text-align: right;
  padding-left: 2.25em !important;
}
.new-zanata .i__item--left .i__item__icon {
  float: left;
  margin-left: -1.5em;
}
.new-zanata .i__item--right {
  padding-right: 2.25em !important;
}
.new-zanata .i__item--right .i__item__icon {
  float: right;
  margin-right: -1.5em;
}
.new-zanata .i__text--right {
  margin-left: 0.1875em;
}
.new-zanata .i__text--left {
  margin-right: 0.1875em;
}
.new-zanata i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'zanata' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.new-zanata .i--code:before {
  content: "\e000";
}
.new-zanata .i--star:before {
  content: "\e001";
}
.new-zanata .i--review:before {
  content: "\e002";
}
.new-zanata .i--language:before {
  content: "\e003";
}
.new-zanata .i--notification:before {
  content: "\e004";
}
.new-zanata .i--project:before {
  content: "\e005";
}
.new-zanata .i--cancel:before {
  content: "\e006";
}
.new-zanata .i--document:before {
  content: "\e007";
}
.new-zanata .i--clock:before {
  content: "\e008";
}
.new-zanata .i--history:before {
  content: "\e009";
}
.new-zanata .i--all:before {
  content: "\e00a";
}
.new-zanata .i--translate:before {
  content: "\e00b";
}
.new-zanata .i--users:before {
  content: "\e00c";
}
.new-zanata .i--checkmark:before, .new-zanata .form__checkbox__item:after {
  content: "\e00d";
}
.new-zanata .i--user:before {
  content: "\e00e";
}
.new-zanata .i--settings:before {
  content: "\e00f";
}
.new-zanata .i--arrow-left:before {
  content: "\e010";
}
.new-zanata .i--add:before {
  content: "\e011";
}
.new-zanata .i--arrow-down:before, .new-zanata .dropdown__toggle:after, .new-zanata .header__user-nav__toggle:before {
  content: "\e012";
}
.new-zanata .i--arrow-up:before {
  content: "\e013";
}
.new-zanata .i--edit:before {
  content: "\e014";
}
.new-zanata .i--arrow-right:before {
  content: "\e015";
}
.new-zanata .i--star-outline:before {
  content: "\e016";
}
.new-zanata .i--search:before, .new-zanata .form--search:before {
  content: "\e017";
}
.new-zanata .i--keyboard:before {
  content: "\e018";
}
.new-zanata .i--comment:before {
  content: "\e019";
}
.new-zanata .i--version:before {
  content: "\e01a";
}
.new-zanata .i--tm:before {
  content: "\e9e1";
}
.new-zanata .i--user-roles:before {
  content: "\ea45";
}
.new-zanata .i--stats:before {
  content: "\ea77";
}
.new-zanata .i--translate-up:before {
  content: "\ea7c";
}
.new-zanata .i--maintain:before {
  content: "\e01c";
}
.new-zanata .i--group:before {
  content: "\e601";
}
.new-zanata .i--dashboard:before {
  content: "\e600";
}
.new-zanata .i--folder:before {
  content: "\e601";
}
.new-zanata .i--book:before {
  content: "\e602";
}
.new-zanata .i--info:before {
  content: "\e603";
}
.new-zanata .i--question:before {
  content: "\e604";
}
.new-zanata .i--logout:before {
  content: "\e605";
}
.new-zanata .i--archive:before {
  content: "\e606";
}
.new-zanata .i--attachment:before {
  content: "\e607";
}
.new-zanata .i--cogs:before {
  content: "\e608";
}
.new-zanata .i--list:before {
  content: "\e609";
}
.new-zanata .i--upload:before {
  content: "\e60a";
}
.new-zanata .i--logout:before {
  content: "\e60b";
}
.new-zanata .i--ellipsis:before {
  content: "\e60c";
}
.new-zanata .i--lock:before {
  content: "\e60d";
}
.new-zanata .i--unlock:before {
  content: "\e60e";
}
.new-zanata .i--export:before {
  content: "\e60f";
}
.new-zanata .i--filter:before {
  content: "\e610";
}
.new-zanata .i--location:before {
  content: "\e611";
}
.new-zanata .i--trash:before {
  content: "\e612";
}
.new-zanata .i--circle:before {
  content: "\e613";
}
.new-zanata .i--monitor:before {
  content: "\ea79";
}

/*

## Componenents
*/
/*

### Headings

#### Sub Heading

Sub-headings can be used when placing a heading under another heading.

```
<h2>Heading 1</h2>
<h2 class="heading--sub">Heading Sub 2</h2>
<br>
<h3>Heading 3</h3>
<h4 class="heading--sub">Heading Sub 4</h4>
```

*/
.new-zanata .heading--sub {
  margin-top: 0;
  font-weight: 400;
  color: #53b8d7;
  display: inline-block;
}

/*
#### Heading secondary

```
<h2 class="heading--secondary">Heading Secondary 2</h2>

<h3 class="heading--secondary">Heading Secondary 3</h3>

<h4 class="heading--secondary">Heading Secondary 4</h4>

<h5 class="heading--secondary">Heading Secondary 5</h5>

<h6 class="heading--secondary">Heading Secondary 6</h6>
```

*/
.new-zanata .heading--secondary {
  margin-top: 0;
  font-weight: 400;
}

/*
### Lists

#### No Bullet List

```
<ul class="list--no-bullets">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
```

*/
.new-zanata .list--no-bullets, .new-zanata nav ul,
.new-zanata nav ol, .new-zanata .list--horizontal, .new-zanata .list--panel .list__item__list, .new-zanata .list--stats .list__item__list, .new-zanata .panel__pager, .new-zanata .list--slat, .new-zanata .list--slat-horizontal, .new-zanata .list--panel, .new-zanata .list--stats, .new-zanata .autocomplete__results, .new-zanata .rf-au-lst-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.new-zanata .list--no-bullets > li, .new-zanata nav ul > li,
.new-zanata nav ol > li, .new-zanata .list--horizontal > li, .new-zanata .list--panel .list__item__list > li, .new-zanata .list--stats .list__item__list > li, .new-zanata .panel__pager > li, .new-zanata .list--slat > li, .new-zanata .list--slat-horizontal > li, .new-zanata .list--panel > li, .new-zanata .list--stats > li, .new-zanata .autocomplete__results > li, .new-zanata .rf-au-lst-ul > li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

/*

#### Navigation list

```
<nav>
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>
</nav>
```

*/
/*

#### Horizontal List

```
<ul class="list--horizontal">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
```

*/
.new-zanata .list--horizontal > li, .new-zanata .list--panel .list__item__list > li, .new-zanata .list--stats .list__item__list > li, .new-zanata .panel__pager > li {
  display: inline-block;
  margin-right: 0.375em;
}
.new-zanata .list--horizontal > li:last-child, .new-zanata .list--panel .list__item__list > li:last-child, .new-zanata .list--stats .list__item__list > li:last-child, .new-zanata .panel__pager > li:last-child {
  margin-right: 0;
}

/*

#### List Slat

```
<ul class="list--slat">
  <li>Standard</li>
  <li><a href="#">Link</a></li>
  <li><span class="list__title">Title</span></li>
  <li><span class="list__title"><a href="#">Title Link</a></span></li>
</ul>
```

*/
.new-zanata .list--slat > li {
  padding: 0.375em 0;
  border-top: 1px solid rgba(32, 113, 138, 0.1);
}
.new-zanata .list--slat > li > a {
  display: inline-block;
}
.new-zanata .list--slat > li:first-child {
  border-top: none;
}
.new-zanata .list__title {
  margin: 0;
  font-weight: 600;
  word-break: break-all;
  word-break: break-word;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: 1em;
  line-height: 1.5em;
}

/*

#### List Icon

```
<ul class="list--no-bullets">
  <li><i class="i i--translate list__icon"></i>Brisbane</li>
  <li><i class="i i--language list__icon"></i>English</li>
</ul>
```

*/
.new-zanata .list__icon {
  display: inline-block;
  width: 1.125em;
  margin-right: 0.1875em;
  text-align: center;
  height: 1.2em;
}

/*

#### List Slat Horizontal

```
<ul class="list--slat-horizontal">
  <li>Standard</li>
  <li><a href="#">Link</a></li>
  <li><span class="list__title">Title</span></li>
  <li><span class="list__title"><a href="#">Title Link</a></span></li>
</ul>
```

*/
.new-zanata .list--slat-horizontal > li {
  display: inline-block;
  padding: 0 0.375em;
  border-left: 1px solid rgba(32, 113, 138, 0.1);
}
.new-zanata .list--slat-horizontal > li > a {
  display: inline-block;
}
.new-zanata .list--slat-horizontal > li:first-child {
  border-left: none;
  padding-left: 0;
}
.new-zanata .list--slat-horizontal > li.list__right {
  padding: 0;
  border-left: none;
}
@media (min-width: 46.25em) {
  .new-zanata .list--slat-horizontal > li.list__right {
    float: right;
  }
}

/*

#### List Block Links

```
<ul class="list--block-links">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>
```

*/
.new-zanata .list--block-links > li {
  padding: 0;
}
.new-zanata .list--block-links > li > a {
  display: block;
  padding: 0.75em;
}
.new-zanata .list--block-links > li > a:hover {
  background-color: #fff;
}
.new-zanata .txt--invert.list--block-links li > a:hover {
  background-color: #393f46 !important;
}
.new-zanata .txt--invert.list--block-links li > a:active {
  background-color: #2d3338 !important;
}

/*

#### List Panel

```example
<ul class="list--panel">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
```
*/
.new-zanata .list--panel > li, .new-zanata .list--stats > li {
  border-bottom: 1px solid rgba(32, 113, 138, 0.15);
  position: relative;
}
.new-zanata .list--panel > li.is-active, .new-zanata .list--stats > li.is-active {
  background-color: #fff;
}
.new-zanata .list--panel > li.is-active > a, .new-zanata .list--stats > li.is-active > a {
  color: #20718A;
}
.new-zanata .list--panel .list__item, .new-zanata .list--stats .list__item,
.new-zanata .list--panel .list__item__content,
.new-zanata .list--stats .list__item__content {
  display: table;
  table-layout: fixed;
  padding: 0.375em 0.75em;
}
.new-zanata .list--stats .list__item__content {
  width: 100%;
}
.new-zanata .list--panel .list__item__info, .new-zanata .list--stats .list__item__info {
  display: table-cell;
  min-width: 100%;
  vertical-align: middle;
  line-height: 1em;
}
.new-zanata .list--panel .list__item--actionable, .new-zanata .list--stats .list__item--actionable {
  position: relative;
}
.new-zanata .list--panel .list__item--actionable .list__item__content, .new-zanata .list--stats .list__item--actionable .list__item__content {
  padding-left: 2.0625em;
}
.new-zanata .list--panel .list__item__action, .new-zanata .list--stats .list__item__action {
  position: absolute;
  left: 0.3em;
  top: 50%;
  margin-top: -1em;
  width: 0.75em;
}
.new-zanata .list--panel .list__item__actions, .new-zanata .list--stats .list__item__actions {
  margin-left: 0.75em;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}
.new-zanata .list--panel .list__item__list, .new-zanata .list--stats .list__item__list {
  display: inline-block;
  line-height: .75em;
}
.new-zanata .list--panel .list__item__list > li, .new-zanata .list--stats .list__item__list > li {
  margin-right: 0.1875em;
  line-height: 1em;
}
.new-zanata .list--panel .list__item__list > li:last-child, .new-zanata .list--stats .list__item__list > li:last-child {
  margin-right: 0;
}
.new-zanata .list--panel .list__item__meta, .new-zanata .list--stats .list__item__meta {
  font-size: 0.875em;
  display: block;
  margin: 0 0 0.42857em;
  color: #90b8c5;
  font-weight: 400;
  line-height: 1em;
  word-break: break-all;
  word-break: break-word;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/*

#### List Stats

```example
<ul class="list--stats">
  <li class="progress-bar__expander panels__panel__item is-active">
    <a href="#">
      <div class="list__item">
        <div class="list__item__info">
          <span class="list__title">Russian</span>
        </div>
        <div class="list__item__stats">
          <span class="stats--small txt--state-neutral">
            <span class="stats__figure">0%</span>
            <span class="stats__unit">translated</span>
          </span>
        </div>
      </div>
      <div class="progress-bar">
        <span class="progress-bar__item"></span>
      </div>
    </a>
  </li>
  <li class="progress-bar__expander bg--highest--hover">
    <a href="#">
      <div class="list__item">
        <div class="list__item__info">
          <span class="list__title">Japanese</span>
        </div>
        <div class="list__item__stats">
          <span class="stats--small txt--state-neutral">
            <span class="stats__figure">0%</span>
            <span class="stats__unit">translated</span>
          </span>
        </div>
      </div>
      <div class="progress-bar">
        <span class="progress-bar__item"></span>
      </div>
    </a>
  </li>
</ul>
```

*/
.new-zanata .list--stats > li {
  padding-bottom: 0.375em;
}
.new-zanata .list--stats > li:first-child {
  margin-top: 0;
}
.new-zanata .list--stats > li.is-active {
  background-color: #20718A;
}
.new-zanata .list--stats > li.is-active > a,
.new-zanata .list--stats > li.is-active .dropdown__toggle,
.new-zanata .list--stats > li.is-active .list__title,
.new-zanata .list--stats > li.is-active .list__item__stats,
.new-zanata .list--stats > li.is-active .list__item__stats span {
  color: #fff;
}
.new-zanata .list--stats > li.is-active .list__item__meta {
  color: #e6e6e6;
}
.new-zanata .list--stats .list__item,
.new-zanata .list--stats .list__item__content {
  padding: 0.75em 0.75em 0.375em;
  min-height: 3em;
}
.new-zanata .list--stats .list__item__stats {
  margin-left: 0.75em;
  text-align: right;
  color: #20718A;
  vertical-align: middle;
}
.new-zanata .list--stats .list__title {
  line-height: 1em;
}
.new-zanata .list--stats .list__item__meta {
  margin: 0.34286em 0 0;
}

/*

#### List Highlight

```example
<ul class="list--slat list--highlight">
  <li class="reveal--list-item">
    Assamese<span class="txt--understated l--push-left-quarter">&#91;as&#93;</span>
    <a href="#" class="l--float-right txt--danger reveal__target"><i class="i--large i--remove"></i></a>
  </li>
  <li class="reveal--list-item">
    Chinese (Simplified Han)<span class="txt--understated l--push-left-quarter">&#91;zh-Hans&#93;</span>
    <a href="#" class="txt--danger reveal__target"><i class="i--large i--remove"></i></a>
  </li>
  <li class="reveal--list-item">
    Chinese (Traditional Han)<span class="txt--understated l--push-left-quarter">&#91;zh-Hant&#93;</span>
    <a href="#" class="txt--danger reveal__target"><i class="i--large i--remove"></i></a>
  </li>
  <li class="reveal--list-item">
    English (United States)<span class="txt--understated l--push-left-quarter">&#91;en-US&#93;</span>
    <a href="#" class="txt--danger reveal__target"><i class="i--large i--remove"></i></a>
  </li>
  <li>
    <label for="settings-project">Add a Language</label>
    <input type="text" placeholder="Search Languages">
  </li>
</ul>
```

*/
.new-zanata .list--highlight > li:hover {
  background-color: rgba(32, 113, 138, 0.05);
}
.new-zanata .list--highlight__item--none:hover {
  background-color: inherit !important;
}

/*

#### List Highlight

```example
<ul class="list--slat">
  <li class="list__item--google">Google</li>
  <li class="list__item--yahoo">Yahoo</li>
  <li class="list__item--fedora">Fedora</li>
</ul>
```

*/
.new-zanata .list__item--fedora:before, .new-zanata .list__item--google:before, .new-zanata .list__item--yahoo:before, .new-zanata .list__item--openid:before, .new-zanata .list__item--zanata:before {
  background-repeat: no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
  content: "";
  display: inline-block;
  margin-right: 0.375em;
  width: 1.125em;
  height: 1.125em;
  border-radius: 50px;
  vertical-align: middle;
  margin-top: -0.15em;
}
.new-zanata .list__item--fedora:before {
  background-image: url(../img/fedora-logo.svg);
}
.new-zanata .list__item--google:before {
  background-image: url(../img/google-logo.svg);
}
.new-zanata .list__item--yahoo:before {
  background-image: url(../img/yahoo-logo.svg);
}
.new-zanata .list__item--openid:before {
  background-image: url(../img/openid-logo.svg);
}
.new-zanata .list__item--zanata:before {
  background-image: url(../img/logo/logo.svg);
}

/*

### Links

<a class="link--success" href="#">Success Link</a>
<a class="link--unsure" href="#">Unsure Link</a>
<a class="link--warning" href="#">Warning Link</a>
<a class="link--danger" href="#">Danger Link</a>
<a class="link--secondary" href="#">Secondary Link</a>

*/
.new-zanata .link--success, .new-zanata .message--success a,
.new-zanata .message--success button {
  color: #5CCA7B !important;
}
.new-zanata .link--success:hover, .new-zanata .message--success a:hover,
.new-zanata .message--success button:hover, .new-zanata .link--success:focus, .new-zanata .message--success a:focus,
.new-zanata .message--success button:focus {
  color: #408d56 !important;
}
.new-zanata .link--success:active, .new-zanata .message--success a:active,
.new-zanata .message--success button:active, .new-zanata .link--success.is-active, .new-zanata .message--success a.is-active,
.new-zanata .message--success button.is-active {
  color: #255131 !important;
}
.new-zanata .link--unsure, .new-zanata .message--unsure a,
.new-zanata .message--unsure button {
  color: #E9DF1B !important;
}
.new-zanata .link--unsure:hover, .new-zanata .message--unsure a:hover,
.new-zanata .message--unsure button:hover, .new-zanata .link--unsure:focus, .new-zanata .message--unsure a:focus,
.new-zanata .message--unsure button:focus {
  color: #a39c13 !important;
}
.new-zanata .link--unsure:active, .new-zanata .message--unsure a:active,
.new-zanata .message--unsure button:active, .new-zanata .link--unsure.is-active, .new-zanata .message--unsure a.is-active,
.new-zanata .message--unsure button.is-active {
  color: #5d590b !important;
}
.new-zanata .link--warning, .new-zanata .message--warning a,
.new-zanata .message--warning button {
  color: #FFA800 !important;
}
.new-zanata .link--warning:hover, .new-zanata .message--warning a:hover,
.new-zanata .message--warning button:hover, .new-zanata .link--warning:focus, .new-zanata .message--warning a:focus,
.new-zanata .message--warning button:focus {
  color: #b37600 !important;
}
.new-zanata .link--warning:active, .new-zanata .message--warning a:active,
.new-zanata .message--warning button:active, .new-zanata .link--warning.is-active, .new-zanata .message--warning a.is-active,
.new-zanata .message--warning button.is-active {
  color: #664300 !important;
}
.new-zanata .link--danger, .new-zanata .message--danger a,
.new-zanata .message--danger button {
  color: #FF3B3D !important;
}
.new-zanata .link--danger:hover, .new-zanata .message--danger a:hover,
.new-zanata .message--danger button:hover, .new-zanata .link--danger:focus, .new-zanata .message--danger a:focus,
.new-zanata .message--danger button:focus {
  color: #b3292b !important;
}
.new-zanata .link--danger:active, .new-zanata .message--danger a:active,
.new-zanata .message--danger button:active, .new-zanata .link--danger.is-active, .new-zanata .message--danger a.is-active,
.new-zanata .message--danger button.is-active {
  color: #661818 !important;
}
.new-zanata .link--neutral {
  color: #bcd4dc !important;
}
.new-zanata .link--neutral:hover, .new-zanata .link--neutral:focus {
  color: #84949a !important;
}
.new-zanata .link--neutral:active, .new-zanata .link--neutral.is-active {
  color: #4b5558 !important;
}
.new-zanata .link--secondary {
  color: #20718A !important;
}
.new-zanata .link--secondary:hover, .new-zanata .link--secondary:focus {
  color: #164f61 !important;
}
.new-zanata .link--secondary:active, .new-zanata .link--secondary.is-active {
  color: #0d2d37 !important;
}

/*

### Custom Form Components

#### Form Errors

```example
<div class="form__item--error" >
  <label for="error">Error example</label>
  <input type="text" id="error" value="form error"/>
</div>

<div class="form__item--warning" >
  <label for="warning">Warning example</label>
  <input type="text" id="warning" value="form warning"/>
</div>

<div class="form__item--radio-vertical">
  <input name="validation-1" id="validation-1-off" value="Off" type="radio">
  <label for="validation-1-off">Off</label>
</div>
```

*/
.new-zanata .form__item, .new-zanata .form__item--error, .new-zanata .form__item--warning {
  margin-bottom: 0.75em;
}
.new-zanata .form__item--error input,
.new-zanata .form__item--error textarea, .new-zanata .form__item--warning input,
.new-zanata .form__item--warning textarea {
  margin-bottom: 0;
}
.new-zanata .form__item--error input,
.new-zanata .form__item--error textarea {
  border: 2px solid #FF3B3D !important;
}
.new-zanata .form__item--warning input,
.new-zanata .form__item--warning textarea {
  border: 2px solid #FFA800 !important;
}
.new-zanata .form__item--radio-vertical {
  text-align: center;
  display: inline-block;
}
.new-zanata .form__item--radio-vertical .form__item__label,
.new-zanata .form__item--radio-vertical .form__item__input {
  margin: 0;
}
.new-zanata .form__item--radio-vertical .form__item__label {
  display: block;
  padding: 0 0.42857em;
  font-size: 0.875em;
  line-height: 1.71429em;
}
.new-zanata .form__item--radio-vertical .form__item__input {
  display: inline-block;
}

/*

#### Form Checkbox & Radio

```example
<div class="form__checkbox js-form__checkbox">
  <input type="checkbox" id="form-checkbox-1" class="form__checkbox__input js-form__checkbox__input" name="form-checkbox" checked/>
  <label for="form-checkbox-1" class="form__checkbox__label">Checkbox Label</label>
</div>

<div class="form__checkbox js-form__checkbox form__checkbox--right">
  <input type="checkbox" id="form-checkbox-2" class="form__checkbox__input js-form__checkbox__input" name="form-checkbox"/>
  <label for="form-checkbox-2" class="form__checkbox__label">Checkbox Label</label>
</div>
```

```example
<div class="form__radio js-form__radio">
  <input type="radio" id="form-radio-1" class="form__radio__input js-form__radio__input" name="form-radio" checked/>
  <label for="form-radio-1" class="form__radio__label">Radio Label</label>
</div>

<div class="form__radio js-form__radio form__radio--right">
  <input type="radio" id="form-radio-2" class="form__radio__input js-form__radio__input" name="form-radio"/>
  <label for="form-radio-2" class="form__radio__label">Radio Label</label>
</div>
```

*/
.new-zanata .form__checkbox,
.new-zanata .form__radio {
  position: relative;
  padding-left: 1.6875em;
  padding-right: 0.5625em;
  cursor: pointer;
  border-radius: 4px;
}
.new-zanata .form__checkbox:hover, .new-zanata .form__checkbox.is-focused,
.new-zanata .form__radio:hover,
.new-zanata .form__radio.is-focused {
  background-color: rgba(3, 166, 215, 0.06);
}
.new-zanata .form__checkbox.is-checked, .new-zanata .form__checkbox.is-checked:hover,
.new-zanata .form__radio.is-checked,
.new-zanata .form__radio.is-checked:hover {
  background-color: rgba(3, 166, 215, 0.12);
}
.new-zanata .form__checkbox.is-disabled, .new-zanata .form__checkbox.is-disabled:hover,
.new-zanata .form__radio.is-disabled,
.new-zanata .form__radio.is-disabled:hover {
  cursor: default;
  pointer-events: none;
}
.new-zanata .form__checkbox__item,
.new-zanata .form__radio__item {
  position: absolute;
  top: 0;
  left: 0;
}
.new-zanata .form__checkbox__item:before,
.new-zanata .form__radio__item:before {
  position: absolute;
  top: .3em;
  left: .43em;
  width: 1em;
  height: 1em;
  border: 1px solid #90b8c5;
  content: "";
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #f7f7f7;
}
.new-zanata .form__checkbox__item.is-checked:before,
.new-zanata .form__radio__item.is-checked:before {
  border-color: #20718A;
}
.new-zanata .form__checkbox__item:before {
  border-radius: 4px;
}
.new-zanata .form__checkbox__item:after {
  -moz-transform: scale(0.1, 0.1);
  -ms-transform: scale(0.1, 0.1);
  -webkit-transform: scale(0.1, 0.1);
  transform: scale(0.1, 0.1);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  position: absolute;
  top: .3em;
  left: .43em;
  color: #20718A;
}
.new-zanata .form__checkbox__item.is-checked:before {
  background-color: #fff;
}
.new-zanata .form__checkbox__item.is-checked:after {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.new-zanata .form__radio__item:before {
  border-radius: 100px;
  top: .33em;
  left: .45em;
  box-shadow: inset 0 0 0 0.75em #fff, inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
@media (min-width: 96.25em) {
  .new-zanata .form__radio__item:before {
    top: .27em;
    width: 1.05em;
    height: 1.05em;
  }
}
.new-zanata .form__radio__item.is-checked:before {
  background-color: #20718A;
  box-shadow: inset 0 0 0 0.225em #fff, inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.new-zanata .form__checkbox__label,
.new-zanata .form__radio__label {
  display: block;
  margin: 0;
  cursor: inherit;
}
.new-zanata .form__checkbox__input,
.new-zanata .form__radio__input {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  position: absolute;
  height: 1px;
  width: 1px;
  left: -1px;
}
.new-zanata .form__checkbox__input:disabled,
.new-zanata .form__radio__input:disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.new-zanata .form__checkbox__input:disabled + .form__checkbox__label,
.new-zanata .form__checkbox__input:disabled + .form__radio__label,
.new-zanata .form__radio__input:disabled + .form__checkbox__label,
.new-zanata .form__radio__input:disabled + .form__radio__label {
  pointer-events: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  cursor: default;
}
.new-zanata .form__checkbox--spaced .form__checkbox__item,
.new-zanata .form__checkbox--spaced .form__radio__item,
.new-zanata .form__radio--spaced .form__checkbox__item,
.new-zanata .form__radio--spaced .form__radio__item {
  top: 0.375em;
}
.new-zanata .form__checkbox--heading {
  width: 2.25em;
  height: 3em;
  float: left;
  margin-right: -0.9375em;
  background-color: transparent !important;
}
.new-zanata .form__checkbox--heading .form__checkbox__item,
.new-zanata .form__checkbox--heading .form__radio__item {
  top: 0.75em;
  left: 0.1875em;
}

/*

#### Form search

```example
<form action="" class="form--search js-form--search">
  <label class="form--search__label">Search Projects</label>
  <input type="text" class="form--search__input js-form--search__input js-form__input--load js-form__input--clear" placeholder="Search projects etc">
</form>
```

*/
.new-zanata .form--search {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
.new-zanata .form--search:before {
  z-index: 11;
  position: absolute;
  left: 0.5625em;
  margin-top: 0.1875em;
  line-height: 1.5em;
  color: #90b8c5;
  pointer-events: none;
}
.new-zanata .form--search.is-active:before {
  color: #20718A;
}
.new-zanata input.form--search__input {
  margin: 0;
  padding-right: 1.5em;
  padding-left: 1.875em;
  height: 1.875em;
  border-radius: 4px;
}
.new-zanata input.form--search__input:hover {
  border-color: #90b8c5;
}
.new-zanata .form--search .form--search__submit {
  position: absolute;
  right: 0.375em;
  top: 0.75em;
  color: #a6c6d0;
  height: 1.5em;
}
.new-zanata .form--search.is-active .form--search__submit {
  color: #03A6D7;
}
.new-zanata .form--search.is-active .form--search__submit:hover, .new-zanata .form--search.is-active .form--search__submit:focus {
  color: #026c8c;
}
.new-zanata .form--search.is-active .form--search__submit:active {
  color: #20718A;
}
.new-zanata .form--search.is-loading:before {
  opacity: 0;
  visibility: hidden;
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}
.new-zanata .form--search.is-loading .form--search__loader {
  opacity: 1;
  visibility: visible;
}

/*

#### Form Load and Clear

##### Load and Clear

```example
<label class="form__label">Search Projects</label>
<div>
  <input type="text" class="form__input js-form__input--clear js-form__input--load" placeholder="Search projects etc">
</div>
```

##### Just Load

```example
<label class="form__label">Search Projects</label>
<div>
  <input type="text" class="form__input js-form__input--load" placeholder="Search projects etc">
</div>
```

*/
.new-zanata .form__clear,
.new-zanata .form__load {
  position: relative;
}
.new-zanata input.form__input--load,
.new-zanata input.form__input--clear {
  padding-right: 1.875em;
}
.new-zanata .form__loader {
  position: absolute;
  right: 0.1875em;
  top: 0;
  width: 2.25em;
  height: 2.25em;
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}
.new-zanata .form__loader.is-active {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.new-zanata .form__button--clear {
  position: absolute;
  right: 0.375em;
  top: 0;
  height: 1.875em;
}
.new-zanata .form__load.form--search .form__loader {
  left: 0.1875em;
  right: auto;
}
.new-zanata .form__load.form--search:not(.form__clear) .form--search__input {
  padding-right: 0.375em;
}
.new-zanata .form__load.is-loading .form__button--clear {
  opacity: 0;
  visibility: hidden;
}
.new-zanata .form--search.is-loading .form__button--clear {
  opacity: 1;
  visibility: visible;
}

/*

#### Form Password Show/Hide

Keep focus while showing and hiding a password field

```example
<div class="form__password js-form-password">
  <input id="password" class="js-form-password-input form__input" name="password" type="password">
  <a href="#" class="form__toggle js-form-password-toggle">Show</a>
</div>
```

*/
.new-zanata .form__password {
  position: relative;
}
.new-zanata .form__password .form__input {
  padding-right: 3em;
}
.new-zanata .form__password .form__toggle {
  font-size: 0.875em;
  line-height: 2.57143em;
  position: absolute;
  top: 0;
  right: 0.85714em;
  font-weight: 600;
  text-transform: uppercase;
}
.new-zanata .form__list--full input[type="text"],
.new-zanata .form__list--full input[type="password"],
.new-zanata .form__list--full input[type="date"],
.new-zanata .form__list--full input[type="datetime"],
.new-zanata .form__list--full input[type="email"],
.new-zanata .form__list--full input[type="number"],
.new-zanata .form__list--full input[type="search"],
.new-zanata .form__list--full input[type="tel"],
.new-zanata .form__list--full input[type="time"],
.new-zanata .form__list--full input[type="url"],
.new-zanata .form__list--full label,
.new-zanata .form__list--full textarea {
  display: block;
  width: 100%;
  margin: 0;
}

/*

#### Form Inline

```example
<div class="form--inline l--push-bottom-1">
  <div class="form--inline__prefix">
    <button class="form--inline__addon">Submit</button>
  </div>
  <input type="text" class="form--inline__input" placeholder="Search projects">
</div>

<div class="form--inline">
  <input type="text" class="form--inline__input" placeholder="Search projects">
  <div class="form--inline__suffix">
    <button class="form--inline__addon button--primary">Submit</button>
  </div>
</div>
```

*/
.new-zanata .form--inline {
  display: table !important;
  border-collapse: separate;
  position: relative;
  width: 100%;
}
.new-zanata .form--inline__input {
  display: table-cell !important;
  width: 100% !important;
  margin: 0 !important;
  vertical-align: top;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.new-zanata .form--inline__prefix,
.new-zanata .form--inline__suffix {
  display: table-cell !important;
  width: 1%;
  vertical-align: top;
}
.new-zanata .form--inline__prefix .form--inline__addon,
.new-zanata .form--inline__suffix .form--inline__addon {
  display: block;
  white-space: nowrap;
}
.new-zanata .form--inline__prefix .form--inline__addon {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}
.new-zanata .form--inline__suffix .form--inline__addon {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

/*

#### Form Placeholder

```example
<input type="text" class="form__placeholder" value="Placeholder text">
```

*/
.new-zanata .form__placeholder {
  color: #90b8c5 !important;
  font-weight: 300 !important;
}

/*

#### Form Input Copyable

```example
<input type="text" class="form__input--copyable" value="Copy this text">
```

*/
.new-zanata input.form__input--copyable {
  line-height: 1.5em;
  height: 1.5em;
  padding: 0.09375em;
  margin: 0;
  background-color: #fafafa;
  border-color: transparent;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #03A6D7;
}
.new-zanata input.form__input--copyable:focus {
  color: #444c54;
}

.off-canvas__outer {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #444c54;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.off-canvas__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  height: 100%;
  overflow: auto;
  background-color: #fff;
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

.off-canvas--left-over .off-canvas__inner:after,
.off-canvas--right-over .off-canvas__inner:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.5);
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
}

@media (max-width: 96.1875em) {
  .no-csstransforms3d .off-canvas--left-under .off-canvas__inner {
    left: 270px;
  }
  .csstransforms3d .off-canvas--left-under .off-canvas__inner {
    -moz-transform: translate3d(270px, 0, 0);
    -webkit-transform: translate3d(270px, 0, 0);
    transform: translate3d(270px, 0, 0);
  }

  .no-csstransforms3d .off-canvas--right-under .off-canvas__inner {
    right: 270px;
  }
  .csstransforms3d .off-canvas--right-under .off-canvas__inner {
    -moz-transform: translate3d(-270px, 0, 0);
    -webkit-transform: translate3d(-270px, 0, 0);
    transform: translate3d(-270px, 0, 0);
  }
}
@media (min-width: 96.25em) {
  .off-canvas--left-under {
    padding-left: 270px;
  }

  .off-canvas--right-under {
    padding-right: 270px;
  }
}
.off-canvas__toggle, .off-canvas__toggle--left, .off-canvas__toggle--right, .new-zanata .off-canvas__close {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  padding: 0.375em;
  text-align: center;
  height: 3em;
}
.off-canvas__toggle img, .off-canvas__toggle--left img, .off-canvas__toggle--right img, .new-zanata .off-canvas__close img {
  -moz-border-radius: 3em;
  -webkit-border-radius: 3em;
  border-radius: 3em;
  max-width: 2.25em;
}
.off-canvas__toggle .i, .off-canvas__toggle--left .i, .off-canvas__toggle--right .i, .new-zanata .off-canvas__close .i, .off-canvas__toggle .new-zanata .i--inline, .new-zanata .off-canvas__toggle .i--inline, .off-canvas__toggle--left .new-zanata .i--inline, .new-zanata .off-canvas__toggle--left .i--inline, .off-canvas__toggle--right .new-zanata .i--inline, .new-zanata .off-canvas__toggle--right .i--inline, .new-zanata .off-canvas__close .i--inline, .off-canvas__toggle .new-zanata .i--left, .new-zanata .off-canvas__toggle .i--left, .off-canvas__toggle--left .new-zanata .i--left, .new-zanata .off-canvas__toggle--left .i--left, .off-canvas__toggle--right .new-zanata .i--left, .new-zanata .off-canvas__toggle--right .i--left, .new-zanata .off-canvas__close .i--left, .off-canvas__toggle .new-zanata .i--right, .new-zanata .off-canvas__toggle .i--right, .off-canvas__toggle--left .new-zanata .i--right, .new-zanata .off-canvas__toggle--left .i--right, .off-canvas__toggle--right .new-zanata .i--right, .new-zanata .off-canvas__toggle--right .i--right, .new-zanata .off-canvas__close .i--right, .off-canvas__toggle .new-zanata .i--understated, .new-zanata .off-canvas__toggle .i--understated, .off-canvas__toggle--left .new-zanata .i--understated, .new-zanata .off-canvas__toggle--left .i--understated, .off-canvas__toggle--right .new-zanata .i--understated, .new-zanata .off-canvas__toggle--right .i--understated, .new-zanata .off-canvas__close .i--understated, .off-canvas__toggle .new-zanata .i--small, .new-zanata .off-canvas__toggle .i--small, .off-canvas__toggle--left .new-zanata .i--small, .new-zanata .off-canvas__toggle--left .i--small, .off-canvas__toggle--right .new-zanata .i--small, .new-zanata .off-canvas__toggle--right .i--small, .new-zanata .off-canvas__close .i--small, .off-canvas__toggle .new-zanata .i--large, .new-zanata .off-canvas__toggle .i--large, .off-canvas__toggle--left .new-zanata .i--large, .new-zanata .off-canvas__toggle--left .i--large, .off-canvas__toggle--right .new-zanata .i--large, .new-zanata .off-canvas__toggle--right .i--large, .new-zanata .off-canvas__close .i--large, .off-canvas__toggle .new-zanata .header__user-nav__toggle:before, .new-zanata .off-canvas__toggle .header__user-nav__toggle:before, .off-canvas__toggle--left .new-zanata .header__user-nav__toggle:before, .new-zanata .off-canvas__toggle--left .header__user-nav__toggle:before, .off-canvas__toggle--right .new-zanata .header__user-nav__toggle:before, .new-zanata .off-canvas__toggle--right .header__user-nav__toggle:before, .new-zanata .off-canvas__close .header__user-nav__toggle:before, .off-canvas__toggle .new-zanata .i--huge, .new-zanata .off-canvas__toggle .i--huge, .off-canvas__toggle--left .new-zanata .i--huge, .new-zanata .off-canvas__toggle--left .i--huge, .off-canvas__toggle--right .new-zanata .i--huge, .new-zanata .off-canvas__toggle--right .i--huge, .new-zanata .off-canvas__close .i--huge, .off-canvas__toggle .new-zanata .form__checkbox__item:after, .new-zanata .off-canvas__toggle .form__checkbox__item:after, .off-canvas__toggle--left .new-zanata .form__checkbox__item:after, .new-zanata .off-canvas__toggle--left .form__checkbox__item:after, .off-canvas__toggle--right .new-zanata .form__checkbox__item:after, .new-zanata .off-canvas__toggle--right .form__checkbox__item:after, .new-zanata .off-canvas__close .form__checkbox__item:after, .off-canvas__toggle .new-zanata .form--search:before, .new-zanata .off-canvas__toggle .form--search:before, .off-canvas__toggle--left .new-zanata .form--search:before, .new-zanata .off-canvas__toggle--left .form--search:before, .off-canvas__toggle--right .new-zanata .form--search:before, .new-zanata .off-canvas__toggle--right .form--search:before, .new-zanata .off-canvas__close .form--search:before {
  padding: 0.1875em;
}
.off-canvas__toggle .i--large, .off-canvas__toggle--left .i--large, .off-canvas__toggle--right .i--large, .new-zanata .off-canvas__close .i--large, .off-canvas__toggle .new-zanata .header__user-nav__toggle:before, .new-zanata .off-canvas__toggle .header__user-nav__toggle:before, .off-canvas__toggle--left .new-zanata .header__user-nav__toggle:before, .new-zanata .off-canvas__toggle--left .header__user-nav__toggle:before, .off-canvas__toggle--right .new-zanata .header__user-nav__toggle:before, .new-zanata .off-canvas__toggle--right .header__user-nav__toggle:before, .new-zanata .off-canvas__close .header__user-nav__toggle:before {
  padding: 0.15em;
}
.off-canvas__toggle .i--huge, .off-canvas__toggle--left .i--huge, .off-canvas__toggle--right .i--huge, .new-zanata .off-canvas__close .i--huge {
  padding: 0.125em;
}
.off-canvas__toggle.is-active, .is-active.off-canvas__toggle--left, .is-active.off-canvas__toggle--right, .new-zanata .is-active.off-canvas__close {
  color: #444c54;
}

.off-canvas__toggle--left {
  border-right: 1px solid #d2e3e8;
}

.off-canvas__toggle--right {
  border-left: 1px solid #d2e3e8;
}

.off-canvas__header {
  background-color: #5b6670;
  height: 3em;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-off-canvas=over] .off-canvas__header {
  background-color: white;
}

.off-canvas--left, .off-canvas--right {
  width: 270px;
  background-color: #444c54;
  height: 100%;
  position: absolute;
  top: 0;
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
  -webkit-backface-visibility: hidden;
}
[data-off-canvas=over].off-canvas--left, [data-off-canvas=over].off-canvas--right {
  background-color: #fcfcfc;
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.off-canvas--left {
  left: 0;
  -webkit-backface-visibility: hidden;
}
.off-canvas--left[data-off-canvas=over] {
  left: -270px;
}
.js .off-canvas--left[data-off-canvas=over] {
  left: 0;
}
.no-csstransforms3d .off-canvas--left[data-off-canvas=over] {
  left: -270px;
}
.csstransforms3d .off-canvas--left[data-off-canvas=over] {
  -moz-transform: translate3d(-270px, 0, 0);
  -webkit-transform: translate3d(-270px, 0, 0);
  transform: translate3d(-270px, 0, 0);
}

.no-csstransforms3d .off-canvas--left-over .off-canvas--left {
  left: 0;
}
.csstransforms3d .off-canvas--left-over .off-canvas--left {
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@media (min-width: 96.25em) {
  .no-csstransforms3d .off-canvas--left-under .off-canvas--left {
    left: 0;
  }
  .csstransforms3d .off-canvas--left-under .off-canvas--left {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.off-canvas--right {
  right: 0;
  -webkit-backface-visibility: hidden;
}
.off-canvas--right[data-off-canvas=over] {
  right: -270px;
}
.js .off-canvas--right[data-off-canvas=over] {
  right: 0;
}
.no-csstransforms3d .off-canvas--right[data-off-canvas=over] {
  right: -270px;
}
.csstransforms3d .off-canvas--right[data-off-canvas=over] {
  -moz-transform: translate3d(270px, 0, 0);
  -webkit-transform: translate3d(270px, 0, 0);
  transform: translate3d(270px, 0, 0);
}

.no-csstransforms3d .off-canvas--right-over .off-canvas--right {
  right: 270px;
}
.csstransforms3d .off-canvas--right-over .off-canvas--right {
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.new-zanata .off-canvas__close {
  font-size: 1.5em;
  line-height: 1em;
  margin: 0.5em;
  padding: 0;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #8e99a3;
  color: #5b6670;
  float: right;
}
.new-zanata .off-canvas__close .i, .new-zanata .off-canvas__close .i--inline, .new-zanata .off-canvas__close .i--left, .new-zanata .off-canvas__close .i--right, .new-zanata .off-canvas__close .i--understated, .new-zanata .off-canvas__close .i--small, .new-zanata .off-canvas__close .i--large, .new-zanata .off-canvas__close .header__user-nav__toggle:before, .new-zanata .off-canvas__close .i--huge, .new-zanata .off-canvas__close .form__checkbox__item:after, .new-zanata .off-canvas__close .form--search:before {
  vertical-align: top;
  line-height: 1em;
  padding: 0;
}
.new-zanata .off-canvas__close:hover {
  background-color: #9ca5af;
  color: #444c54;
}

.off-canvas--left .off-canvas__close {
  float: left;
}

[data-off-canvas=over] .off-canvas__close {
  background-color: #ededed;
  color: white;
}
[data-off-canvas=over] .off-canvas__close:hover {
  background-color: #d9d9d9;
  color: white;
}

/*

### Tabs

*/
.new-zanata .tabs__nav {
  letter-spacing: -0.2em;
  margin: 0;
  padding: 0;
}
.new-zanata .tabs__nav > ul > li,
.new-zanata .tabs__nav > li {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  letter-spacing: normal;
}
.new-zanata .tabs__nav > ul > li.is-active > a,
.new-zanata .tabs__nav > li.is-active > a {
  color: #20718A;
  cursor: default;
}
.new-zanata .tabs__nav > ul > li > a,
.new-zanata .tabs__nav > li > a {
  padding: 0.375em;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  font-weight: 600;
}
.new-zanata .tabs__nav .tab__end {
  float: right;
}
@media (min-width: 46.25em) {
  .new-zanata .tabs__nav > ul > li > a,
  .new-zanata .tabs__nav > li > a {
    padding: 0.75em;
  }
}
.new-zanata .tabsContent {
  list-style: none;
  margin: 0;
  padding: 0;
}
.new-zanata .tabsContent > li {
  display: none;
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}
.new-zanata .tabsContent > li.is-active {
  display: block;
}
.new-zanata .tabs--lined > .tabs__nav {
  border-bottom: 2px solid rgba(32, 113, 138, 0.15);
  max-height: 3em;
}
.new-zanata .tabs--lined > .tabs__nav > ul > li > a,
.new-zanata .tabs--lined > .tabs__nav > li > a {
  text-align: center;
  padding: 0.75em;
  max-height: 3em;
  position: relative;
}
.new-zanata .tabs--lined > .tabs__nav > ul > li > a:after,
.new-zanata .tabs--lined > .tabs__nav > li > a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: transparent;
}
.new-zanata .tabs--lined > .tabs__nav > ul > li > a.is-active:after,
.new-zanata .tabs--lined > .tabs__nav > li > a.is-active:after {
  background-color: #20718A;
}
.new-zanata .tabs--lined > .tabs__nav > ul > li:hover > a:after,
.new-zanata .tabs--lined > .tabs__nav > ul > li > a:hover:after,
.new-zanata .tabs--lined > .tabs__nav > li:hover > a:after,
.new-zanata .tabs--lined > .tabs__nav > li > a:hover:after {
  background-color: #bcd4dc;
}
.new-zanata .tabs--lined > .tabs__nav > ul > li.is-active > a:after,
.new-zanata .tabs--lined > .tabs__nav > ul > li > a.is-active:after,
.new-zanata .tabs--lined > .tabs__nav > li.is-active > a:after,
.new-zanata .tabs--lined > .tabs__nav > li > a.is-active:after {
  background-color: #20718A;
}
.new-zanata .tabs--lined > .tabs__nav .i, .new-zanata .tabs--lined > .tabs__nav .i--inline, .new-zanata .tabs--lined > .tabs__nav .i--left, .new-zanata .tabs--lined > .tabs__nav .i--right, .new-zanata .tabs--lined > .tabs__nav .i--understated, .new-zanata .tabs--lined > .tabs__nav .i--small, .new-zanata .tabs--lined > .tabs__nav .i--large, .new-zanata .tabs--lined > .tabs__nav .header__user-nav__toggle:before, .new-zanata .tabs--lined > .tabs__nav .i--huge, .new-zanata .tabs--lined > .tabs__nav .form__checkbox__item:after, .new-zanata .tabs--lined > .tabs__nav .form--search:before {
  line-height: 1.5em;
  padding: 0 0 0.1125em;
}
@media (min-width: 46.25em) {
  .new-zanata .tabs--lined > .tabs__nav > ul > li > a,
  .new-zanata .tabs--lined > .tabs__nav > li > a {
    max-height: 3em;
  }
}
.new-zanata .tabs--accent .tabs__nav {
  z-index: 1;
  position: relative;
}
.new-zanata .tabs--accent .tabs__nav a {
  text-align: center;
  line-height: 1.5em;
  min-width: 3em;
  max-height: 3em;
}
.new-zanata .tabs--accent .tabs__nav a .i, .new-zanata .tabs--accent .tabs__nav a .i--inline, .new-zanata .tabs--accent .tabs__nav a .i--left, .new-zanata .tabs--accent .tabs__nav a .i--right, .new-zanata .tabs--accent .tabs__nav a .i--understated, .new-zanata .tabs--accent .tabs__nav a .i--small, .new-zanata .tabs--accent .tabs__nav a .i--large, .new-zanata .tabs--accent .tabs__nav a .header__user-nav__toggle:before, .new-zanata .tabs--accent .tabs__nav a .i--huge, .new-zanata .tabs--accent .tabs__nav a .form__checkbox__item:after, .new-zanata .tabs--accent .tabs__nav a .form--search:before {
  font-size: 1em;
  line-height: 1.5em;
}
.new-zanata .tabs--accent .tabs__nav a .i--large, .new-zanata .tabs--accent .tabs__nav a .header__user-nav__toggle:before {
  font-size: 1.25em;
  line-height: 1.2em;
}
.new-zanata .tabs--accent .tabs__nav a.is-active {
  border-left: 1px solid rgba(32, 113, 138, 0.15);
  border-right: 1px solid rgba(32, 113, 138, 0.15);
  position: relative;
  cursor: default;
}
.new-zanata .tabs--accent .tabs__nav a.is-active:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
}
.new-zanata .tabs--accent .tabs__nav li:first-child a.is-active {
  border-left: none;
}
.new-zanata .tabs--accent .tabs__nav .tab__end a.is-active {
  border-right: none;
}
.new-zanata .tabs--accent .tabsContent {
  z-index: 0;
}

/*

#### Tabs Vertical

```example
<div class="tabs--vertical js-tabs">
  <ul class="tabs__nav js-tabs-nav">
    <li class="is-active"><a href="#tab-vertical-1"><i class="i i--language"></i> <span class="is-hidden--s">Tab 1</span></a></li>
    <li><a href="#tab-vertical-2"><i class="i i--language"></i> <span class="is-hidden--s">Tab 2</span></a></li>
    <li><a href="#tab-vertical-3"><i class="i i--language"></i> <span class="is-hidden--s">Tab 3</span></a></li>
  </ul>
  <ul class="tabs__content js-tabs-content">
    <li class="is-active" id="tab-vertical-1">Tab content here, more tab content and maybe some more. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</li>
    <li id="tab-vertical-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.Tab content here, more tab content and maybe some more.</li>
    <li id="tab-vertical-3">Tab content here, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem. more tab content and maybe some more.</li>
  </ul>
</div>
```

*/
.new-zanata .tabs--vertical .tabs__nav {
  float: left;
  width: 16%;
  z-index: 5;
  position: relative;
}
.new-zanata .tabs--vertical .tabs__nav > li {
  display: block;
  z-index: 4;
}
.new-zanata .tabs--vertical .tabs__nav > li > a {
  padding: 0.75em;
  border: 1px solid transparent;
  display: block;
}
.new-zanata .tabs--vertical .tabs__nav > li > a:after {
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  position: absolute;
  top: 0;
  right: -2px;
  width: 2px;
  height: 100%;
  background-color: transparent;
  content: "";
}
.new-zanata .tabs--vertical .tabs__nav > li.is-active a,
.new-zanata .tabs--vertical .tabs__nav > li > a.is-active {
  border-right-width: 0;
  position: relative;
}
.new-zanata .tabs--vertical .tabs__nav > li.is-active a:after,
.new-zanata .tabs--vertical .tabs__nav > li > a.is-active:after {
  background-color: #fff;
}
.new-zanata .tabs--vertical .tabsContent {
  float: left;
  width: 84%;
}
.new-zanata .tabs--vertical .tabsContent > li {
  padding: 0.75em;
  min-height: 16.5em;
}
@media (min-width: 46.25em) {
  .new-zanata .tabs--vertical .tabsContent > li {
    padding: 1.5em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .tabs--vertical .tabs__nav {
    width: 20% !important;
  }
  .new-zanata .tabs--vertical .tabsContent {
    width: 80% !important;
  }
}

/*

### Media


*/
.new-zanata .media__body {
  overflow: hidden;
}
.new-zanata .media__item--left {
  float: left;
  margin-right: 1.5em;
}
.new-zanata .media__item--right {
  float: right;
  margin-left: 1.5em;
}

.new-zanata .progress-bar, .new-zanata .progress-bar--large {
  position: relative;
  width: 100%;
  height: 0.375em;
  margin: 0;
}
.new-zanata .progress-bar--full {
  height: 0.75em;
}
.new-zanata .progress-bar--large {
  height: 0.75em;
}
.new-zanata .progress-bar__expander {
  position: relative;
  margin-top: -0.375em;
  padding-bottom: 0.75em !important;
  border-bottom: none !important;
}
.no-touch .new-zanata .progress-bar__expander:hover .progress-bar, .no-touch .new-zanata .progress-bar__expander:hover .progress-bar--large, .no-touch .new-zanata .progress-bar__expander.is-active .progress-bar, .no-touch .new-zanata .progress-bar__expander.is-active .progress-bar--large {
  height: 0.75em;
}
.new-zanata .progress-bar__expander .progress-bar, .new-zanata .progress-bar__expander .progress-bar--large {
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: -0.75em;
}
.new-zanata .progress-bar--large__expander {
  position: relative;
  padding-bottom: 0.75em !important;
  border-bottom: none !important;
}
.no-touch .new-zanata .progress-bar--large__expander:hover .progress-bar--large, .no-touch .new-zanata .progress-bar--large__expander.is-active .progress-bar--large {
  height: 1.5em;
}
.new-zanata .progress-bar--large__expander .progress-bar--large {
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: -0.75em;
}
.new-zanata .progress-bar__item, .new-zanata .progress-bar__untranslated, .new-zanata .progress-bar__success,
.new-zanata .progress-bar__translated, .new-zanata .progress-bar__fuzzy, .new-zanata .progress-bar__rejected, .new-zanata .progress-bar__approved {
  position: absolute;
  left: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #bcd4dc;
  list-style: none;
}
.new-zanata .progress-bar__success,
.new-zanata .progress-bar__translated {
  background-color: #5CCA7B;
  z-index: 1;
}
.new-zanata .progress-bar__fuzzy {
  background-color: #E9DF1B;
  z-index: 2;
}
.new-zanata .progress-bar__rejected {
  background-color: #FFA800;
  z-index: 3;
}
.new-zanata .progress-bar__approved {
  background-color: #03A6D7;
  z-index: 4;
}

/*

### Dropdown

```
<span class="dropdown dropdown--toggle-right js-dropdown">
  <a class="dropdown__toggle dropdown__toggle--large js-dropdown__toggle" href="#">Most active projects</a>
  <ul class="dropdown__content js-dropdown__content">
    <li><a class="is-active" href="#">Most active projects</a></li>
    <li><a href="#">Most starred projects</a></li>
    <li><a href="#">Projects requiring the most help</a></li>
  </ul>
</span>
<span class="dropdown js-dropdown">
  <a class="dropdown__toggle js-dropdown__toggle" href="#"><span>Most active projects</span></a>
  <ul class="dropdown__content js-dropdown__content">
    <li><a class="is-active" href="#">Most active projects</a></li>
    <li><a href="#">Most starred projects</a></li>
    <li><a href="#">Projects requiring the most help</a></li>
  </ul>
</span>
<span class="dropdown dropdown--inline dropdown--inline--initial dropdown--toggle-right js-dropdown">
  <a class="dropdown__toggle dropdown__toggle--large js-dropdown__toggle" href="#">Most active projects</a>
  <ul class="dropdown__content js-dropdown__content">
    <li><a class="is-active" href="#">Most active projects</a></li>
    <li><a href="#">Most starred projects</a></li>
    <li><a href="#">Projects requiring the most help</a></li>
  </ul>
</span>
<span class="dropdown dropdown--inline js-dropdown">
  <a class="dropdown__toggle dropdown__toggle--large js-dropdown__toggle" href="#">Most active projects</a>
  <ul class="dropdown__content js-dropdown__content">
    <li><a class="is-active" href="#">Most active projects</a></li>
    <li><a href="#">Most starred projects</a></li>
    <li><a href="#">Projects requiring the most help</a></li>
  </ul>
</span>
<div class="dropdown dropdown--small dropdown--inline dropdown--single js-dropdown">
  <a class="dropdown__toggle js-dropdown__toggle txt--meta" title="Document Options" href="#"><span class="is-invisible">Document Options</span></a>
  <ul class="dropdown__content js-dropdown__content">
    <li><a href="#"class="i__item--right">Translate online <i class="i i--translate i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Upload translation<i class="i i--import i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for translation<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right">Download for use<i class="i i--export i__item__icon"></i></a></li>
  </ul>
</div>
<div class="dropdown dropdown--header dropdown--small dropdown--right js-dropdown">
  <a class="dropdown__toggle js-dropdown__toggle" href="#" title="More Actions"><i class="i i--ellipsis" ></i></a>
  <ul class="dropdown__content js-dropdown__content" role="content" aria-labelledby="dropdownContent">
    <li><a href="#"class="i__item--right">Download All for Offline Translation<i class="i i--export i__item__icon"></i></a></li>
    <li><a href="#" class="i__item--right" title="Export Spanish Documents to translation memory">Export Spanish Documents to TMX<i class="i i--export i__item__icon"></i></a></li>
  </ul>
</div>
```

*/
.new-zanata .dropdown__container {
  z-index: 1;
  position: relative;
}
.new-zanata .dropdown__container.is-active {
  z-index: 2;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.new-zanata .dropdown {
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  z-index: 90;
  display: inline-block;
  width: 100%;
}
.new-zanata .dropdown.is-active {
  z-index: 901;
}
.new-zanata .dropdown__toggle {
  position: relative;
  z-index: 12;
  display: inline-block;
  padding: 0.375em 0.5625em;
  padding-left: 1.5em !important;
  min-height: 1.5em;
  border: 1px solid transparent;
  border-bottom-width: 2px;
  color: #03A6D7;
  vertical-align: middle;
  cursor: pointer;
  width: 100%;
}
.new-zanata .dropdown__toggle:hover {
  background-color: rgba(32, 113, 138, 0.03);
}
.new-zanata .dropdown__toggle:active {
  background-color: #fff;
  border: 1px solid rgba(32, 113, 138, 0.15);
}
.new-zanata .dropdown__toggle:after {
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  position: absolute;
  top: 0;
  left: 0.375em;
  line-height: 3em;
}
.new-zanata .dropdown__toggle--large {
  font-size: 1.5em;
  line-height: 1em;
  padding: 0.25em 0.375em;
  padding-left: 1em !important;
}
.new-zanata .dropdown__toggle--large:after {
  font-size: 0.75em;
  left: 0.25em;
}
@media (min-width: 46.25em) {
  .new-zanata .dropdown__toggle--large {
    font-size: 1.75em;
    line-height: 1.07143em;
    padding: 0.21429em 0.32143em;
    padding-left: 0.85714em !important;
  }
}
.new-zanata .dropdown__container.is-active .dropdown__toggle {
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  color: #20718A !important;
}
.new-zanata .dropdown.is-active .dropdown__toggle {
  color: #20718A !important;
}
.new-zanata .dropdown:hover .dropdown__toggle {
  color: #026c8c;
}
.new-zanata .dropdown__toggle__icon {
  display: none;
}
.new-zanata .dropdown.is-active .dropdown__toggle:after {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.new-zanata .dropdown__content {
  position: absolute !important;
  top: 100%;
  left: 0;
  z-index: 11;
  visibility: hidden;
  margin: 0;
  padding: 0;
  float: left;
  min-width: 100%;
  max-height: 19.5em;
  overflow: auto;
}
.csstransforms3d .new-zanata .dropdown__content {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.new-zanata .dropdown__content > li {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.125em;
}
.new-zanata .dropdown__content > li .i__item__icon {
  line-height: 1.125em;
}
.new-zanata .dropdown__content > li > a,
.new-zanata .dropdown__content > li > .dropdown__content__link {
  padding: 0.5625em;
  display: block;
  width: 100%;
  margin: 0;
}
.new-zanata .dropdown__content > li > a.is-active,
.new-zanata .dropdown__content > li > .dropdown__content__link.is-active {
  font-weight: 600;
}
.no-touch .new-zanata .dropdown__content > li > a:hover, .no-touch
.new-zanata .dropdown__content > li > .dropdown__content__link:hover {
  background-color: #03A6D7;
  color: #fcfcfc;
}
.no-touch .new-zanata .dropdown__content > li > a.txt--danger:hover, .no-touch .new-zanata .dropdown__content > li > a.message--danger:hover, .no-touch
.new-zanata .dropdown__content > li > .dropdown__content__link.txt--danger:hover, .no-touch
.new-zanata .dropdown__content > li > .dropdown__content__link.message--danger:hover {
  background-color: #FF3B3D;
  color: #fcfcfc !important;
}
.new-zanata .dropdown__content > li > a[disabled],
.new-zanata .dropdown__content > li > .dropdown__content__link[disabled] {
  pointer-events: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.new-zanata .dropdown__content--full {
  width: 100% !important;
}
.new-zanata .dropdown__header {
  border-bottom: 1px solid #fff;
  text-transform: uppercase;
  background-color: #fff !important;
  padding: 0 0.75em !important;
  width: auto;
}
.new-zanata .dropdown__divider {
  display: block;
  overflow: hidden;
  padding: 0 !important;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid transparent;
  background-color: #fff;
}
.new-zanata .dropdown.is-active .dropdown__content {
  visibility: visible;
}
.csstransforms3d .new-zanata .dropdown.is-active .dropdown__content {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.new-zanata .dropdown--right .dropdown__toggle__icon {
  right: 0;
}
.new-zanata .dropdown--right .dropdown__content {
  left: auto;
  right: 0;
  float: right;
}
.new-zanata .dropdown--inline {
  display: inline-block;
  width: auto;
}
.new-zanata .dropdown--inline .dropdown__toggle:after {
  display: inline-block;
}
.new-zanata .dropdown--inline .dropdown__content {
  width: auto;
  min-width: auto;
}
.new-zanata .dropdown--inline--initial {
  position: relative;
  margin-left: -0.5625em;
}
.new-zanata .dropdown--small .dropdown__content {
  font-size: 0.875em;
  line-height: 1.71429em;
}

/*

#### Dropdown Header

Used in panel headers to match the header layout

*/
.new-zanata .dropdown--header {
  margin: 0;
  vertical-align: top;
  margin-right: -1px;
  display: inline-block;
  width: auto;
}
.new-zanata .dropdown--header .dropdown__toggle {
  font-size: 0.875em;
  line-height: 1.71429em;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0.85714em;
  border: none;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 2px solid transparent;
  line-height: 3.42857em;
  max-height: 3.51429em;
}
.new-zanata .dropdown--header .dropdown__toggle:active {
  border-bottom: 2px solid rgba(32, 113, 138, 0.15);
  background-color: #fafafa;
}
.new-zanata .dropdown--header .dropdown__toggle:after,
.new-zanata .dropdown--header .dropdown__toggle i {
  line-height: 3.42857em;
  vertical-align: inherit;
}
.new-zanata .dropdown--header.is-active .dropdown__toggle {
  border: none;
  border-left: 1px solid rgba(32, 113, 138, 0.15);
  border-right: 1px solid rgba(32, 113, 138, 0.15);
  border-bottom: 2px solid rgba(32, 113, 138, 0.15);
  background-color: #fafafa;
}
.new-zanata .dropdown--header.is-active .dropdown__toggle:hover {
  background-color: #fafafa;
}
.new-zanata .dropdown--header .dropdown__content {
  width: auto;
  border-top: none;
  margin-top: 1px;
}
.new-zanata .dropdown--header .dropdown__content > li {
  padding: 0;
}
.new-zanata .dropdown--header .dropdown__content > li > a {
  padding: 0.5625em 0.75em;
}

.new-zanata .dropdown--single .dropdown__toggle {
  font-size: 1em;
  padding: 0;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
}
.new-zanata .dropdown--single .dropdown__toggle:after {
  left: 0.3em;
  line-height: 1.5em;
}
.new-zanata .dropdown--single .dropdown__content {
  margin-top: -1px;
  width: auto;
  min-width: 0;
}
.new-zanata .dropdown--single .dropdown__content > li {
  padding: 0;
}
.new-zanata .dropdown--single.is-active .dropdown__toggle:after {
  left: 0.375em;
}

.new-zanata .dropdown--tab .dropdown__toggle {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
  max-height: 3em;
}

.new-zanata {
  /**
   * Modifiers
   */
}
.new-zanata .dropdown--toggle-right .dropdown__toggle {
  padding-left: 0.5625em !important;
  padding-right: 1.5em !important;
}
.new-zanata .dropdown--toggle-right .dropdown__toggle:after {
  left: auto !important;
  right: 0.375em !important;
}
.new-zanata .dropdown--toggle-right .dropdown__toggle--large {
  padding-left: 0.375em !important;
  padding-right: 1em !important;
}
.new-zanata .dropdown--toggle-right .dropdown__toggle--large:after {
  left: auto !important;
  right: 0.25em !important;
}
@media (min-width: 46.25em) {
  .new-zanata .dropdown--toggle-right .dropdown__toggle--large {
    padding-left: 0.32143em !important;
    padding-right: 0.96429em !important;
  }
}
.new-zanata .Dropdown--simple {
  position: relative;
  z-index: 100;
  display: inline-block;
  user-select: none;
}
.new-zanata .Dropdown--simple.is-active {
  z-index: 900;
}
.new-zanata .Dropdown--simple .Dropdown-toggleIcon {
  display: inline-block;
  -moz-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
}
.new-zanata .Dropdown--simple.is-active .Dropdown-toggleIcon {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.new-zanata .Dropdown--simple .Dropdown-content {
  position: absolute;
  z-index: 800;
  top: 100%;
  left: 0;
  visibility: hidden;
  float: left;
  min-width: 100%;
  margin: 0;
  padding: 0;
  -moz-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateY(-50%);
  text-align: left;
  opacity: 0;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.1);
}
.new-zanata .Dropdown--simple .Dropdown-content--Bordered {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom-width: 2px;
}
.new-zanata .Dropdown--simple.is-active > .Dropdown-content {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}
.new-zanata .Dropdown--simple .Dropdown-title {
  font-size: calc(14/16 * 1rem);
  padding: 0.1875em 0.375em;
  background-color: #e9f1f3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  color: #4d8da1;
}
.new-zanata .Dropdown--simple .Dropdown-item {
  display: block;
  padding: 0.1875em 0.375em;
  transition: all .2s ease-out;
  color: #03A6D7;
}
.new-zanata .Dropdown--simple .Dropdown-item:hover {
  color: #fff;
  background-color: #03A6D7;
}
.new-zanata .Dropdown--simple .Dropdown-item button,
.new-zanata .Dropdown--simple .Dropdown-item button:hover {
  color: inherit !important;
  background-color: transparent !important;
  transition: none !important;
}
.new-zanata .Dropdown--simple.Dropdown--right .Dropdown-content {
  left: auto;
  right: 0;
}

/*

### Labels

```
<span class="label">Label</span>
<span class="label--highlight">Highlight</span>
<span class="label--success">Success</span>
<span class="label--unsure">Unsure</span>
<span class="label--warning">Warning</span>
<span class="label--danger">Danger</span>
<span class="label--neutral">Neutral</span>
```

*/
.new-zanata .label, .new-zanata .label--highlight, .new-zanata .label--success, .new-zanata .label--unsure, .new-zanata .label--warning, .new-zanata .label--danger, .new-zanata .label--neutral, .new-zanata .label--approved {
  background-color: #d2e3e8;
  padding: 0 0.23077em;
  margin: 0 0.12462em;
  font-size: 0.8125em;
}
.new-zanata .label--highlight {
  background-color: #03A6D7;
  color: #fff;
}
.new-zanata .label--success {
  background-color: #5CCA7B;
  color: #fff;
}
.new-zanata .label--unsure {
  background-color: #E9DF1B;
  color: #fff;
}
.new-zanata .label--warning {
  background-color: #FFA800;
  color: #fff;
}
.new-zanata .label--danger {
  background-color: #FF3B3D;
  color: #fff;
}
.new-zanata .label--neutral {
  background-color: #bcd4dc;
  color: #fff;
}
.new-zanata .label--approved {
  background-color: #03A6D7;
  color: #fff;
}

/*

### Alerts

#### Alert
```
<div class="alert">
  <h2 class="alert__heading">Welcome</h2>
  <div class="alert__content">
    <p>Welcome to Zanata</p>
    <p>We hope you enjoy your stay</p>
    <p><button class="button--primary">Continue</button></p>
  </div>
</div>
```

*/
.new-zanata .alert, .new-zanata .alert--danger {
  margin-bottom: 0.75em;
  text-align: center;
  background-color: #fafafa;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.new-zanata .alert__heading {
  margin: 0;
  font-size: 1.5em;
  line-height: 1.5em;
  background-color: #03A6D7;
  color: #f2f2f2;
}
.new-zanata .alert__content {
  padding: 1.5em;
}
.new-zanata .alert__highlight {
  color: #03A6D7;
  font-weight: 600;
}

/*
#### Alert Danger
```
<div class="alert--danger">
  <h2 class="alert__heading">We're Sorry</h2>
  <div class="alert__content">
    <p class="alert__highlight">An unexpected error has occurred.</p>
    <p>But you can help us fix it!</p>
    <p><button class="button--danger">Report this problem</button></p>
  </div>
</div>
```
*/
.new-zanata .alert--danger {
  border-top: 2px solid #FF3B3D;
}
.new-zanata .alert--danger .alert__heading {
  background-color: #FF3B3D;
}
.new-zanata .alert--danger .alert__highlight {
  color: #FF3B3D;
}

.new-zanata .cursor--pointer {
  cursor: pointer !important;
}

/*

### Messages

```
<div class="message--danger l--push-bottom-half">Oh noes! Don't do that.<a href="#" class="message__remove"><i class="i i--remove"></i></a></div>

<div class="message--warning l--push-bottom-half">Ooooh that looks risky…</div>

<div class="message--unsure l--push-bottom-half">Wait, are you sure?</div>

<div class="message--success l--push-bottom-half">Yay! Way to GO!!!!!</div>

<div class="message--highlight l--push-bottom-half">Oh look, a squirrel!</div>

<div class="message--neutral l--push-bottom-half">Blah di blah blah.</div>

<div class="message--highlight message--removable message--global l--push-bottom-half js-message-removable is-active">Use the menu on the left to naviagte.<button class="message__remove js-message-remove"><i class="i i--remove"></i></button></div>
```

*/
.new-zanata .message, .new-zanata .message--danger, .new-zanata .message--warning, .new-zanata .message--unsure, .new-zanata .message--success, .new-zanata .message--highlight, .new-zanata .message--neutral {
  padding: 0.375em 0.75em;
  position: relative;
}
.new-zanata .message--removable {
  padding-right: 3em;
}
.new-zanata .message--removable:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 0;
  right: 2.25em;
  top: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.03);
}
.new-zanata .message__remove {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
  position: absolute;
  top: 0;
  right: 0;
  width: 2.25em;
  text-align: center !important;
  padding: 0.375em !important;
}
.new-zanata .message__remove .i, .new-zanata .message__remove .i--inline, .new-zanata .message__remove .i--left, .new-zanata .message__remove .i--right, .new-zanata .message__remove .i--understated, .new-zanata .message__remove .i--small, .new-zanata .message__remove .i--large, .new-zanata .message__remove .header__user-nav__toggle:before, .new-zanata .message__remove .i--huge, .new-zanata .message__remove .form__checkbox__item:after, .new-zanata .message__remove .form--search:before {
  font-size: 1.125em;
}
.new-zanata .message--global {
  -moz-transition: opacity 0.25s cubic-bezier(0.55, -0.38, 0.22, 1.01), -moz-transform 0.25s cubic-bezier(0.55, -0.38, 0.22, 1.01);
  -o-transition: opacity 0.25s cubic-bezier(0.55, -0.38, 0.22, 1.01), -o-transform 0.25s cubic-bezier(0.55, -0.38, 0.22, 1.01);
  -webkit-transition: opacity 0.25s cubic-bezier(0.55, -0.38, 0.22, 1.01), -webkit-transform 0.25s cubic-bezier(0.55, -0.38, 0.22, 1.01);
  transition: opacity 0.25s cubic-bezier(0.55, -0.38, 0.22, 1.01), transform 0.25s cubic-bezier(0.55, -0.38, 0.22, 1.01);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
  opacity: 0.95;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-transform: translateY(-250%);
  -ms-transform: translateY(-250%);
  -webkit-transform: translateY(-250%);
  transform: translateY(-250%);
  position: absolute;
  top: 3em;
  right: 0.75em;
  left: 0.75em;
  z-index: 9999;
  margin: 0 auto;
  max-width: 30em;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.new-zanata .message--global.is-fixed {
  -moz-transform: translateY(-150%);
  -ms-transform: translateY(-150%);
  -webkit-transform: translateY(-150%);
  transform: translateY(-150%);
  position: fixed;
  top: 0;
}
.new-zanata .message--global.is-active {
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.9;
}
.new-zanata .message--highlight {
  color: #20718A;
}

/*

### Pills

```example
<span class="pill">Pill</span>
<span class="pill pill--highlight is-active">Pill highlight</span>
<span class="pill pill--success">Pill Success</span>
<span class="pill pill--unsure">Pill unsure</span>
<span class="pill pill--warning">Pill warning</span>
<span class="pill pill--danger">Pill danger</span>
<span class="pill pill--neutral">Pill Neutral</span>
<span class="pill pill--secondary">Pill Secondary</span>
```

*/
.new-zanata .pill {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  text-align: center;
  display: block;
  padding: 0 0.75em;
  margin: 0;
  background-color: #d2e3e8;
  font-weight: 400;
  background-color: transparent;
  cursor: pointer;
  -moz-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -o-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  -webkit-transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
  transition: cubic-bezier(0.26, 0.47, 0.36, 0.94) 0.2s;
}
.new-zanata .pill:hover, .new-zanata .pill:focus {
  background-color: #eee;
}
.new-zanata .pill:active, .new-zanata .pill.is-active {
  cursor: default;
  color: #fff;
}
.new-zanata .pill--inline {
  display: inline-block;
  margin-right: 0.375em;
}
.new-zanata .pill--inline:last-child {
  margin-right: 0;
}
.new-zanata .pill--highlight {
  color: #03A6D7;
}
.new-zanata .pill--highlight:hover, .new-zanata .pill--highlight:focus {
  background-color: rgba(3, 166, 215, 0.2);
}
.new-zanata .pill--highlight:active, .new-zanata .pill--highlight.is-active {
  background-color: #03A6D7;
}
.new-zanata .pill--success {
  color: #5CCA7B;
}
.new-zanata .pill--success:hover, .new-zanata .pill--success:focus {
  background-color: rgba(92, 202, 123, 0.2);
}
.new-zanata .pill--success:active, .new-zanata .pill--success.is-active {
  background-color: #5CCA7B;
}
.new-zanata .pill--unsure {
  color: #E9DF1B;
}
.new-zanata .pill--unsure:hover, .new-zanata .pill--unsure:focus {
  background-color: rgba(233, 223, 27, 0.2);
}
.new-zanata .pill--unsure:active, .new-zanata .pill--unsure.is-active {
  background-color: #E9DF1B;
}
.new-zanata .pill--warning {
  color: #FFA800;
}
.new-zanata .pill--warning:hover, .new-zanata .pill--warning:focus {
  background-color: rgba(255, 168, 0, 0.2);
}
.new-zanata .pill--warning:active, .new-zanata .pill--warning.is-active {
  background-color: #FFA800;
}
.new-zanata .pill--danger {
  color: #FF3B3D;
}
.new-zanata .pill--danger:hover, .new-zanata .pill--danger:focus {
  background-color: rgba(255, 59, 61, 0.2);
}
.new-zanata .pill--danger:active, .new-zanata .pill--danger.is-active {
  background-color: #FF3B3D;
}
.new-zanata .pill--neutral {
  color: #bcd4dc;
}
.new-zanata .pill--neutral:hover, .new-zanata .pill--neutral:focus {
  background-color: rgba(188, 212, 220, 0.2);
}
.new-zanata .pill--neutral:active, .new-zanata .pill--neutral.is-active {
  background-color: #bcd4dc;
  color: #639cad;
}
.new-zanata .pill--secondary {
  color: #20718A;
}
.new-zanata .pill--secondary:hover, .new-zanata .pill--secondary:focus {
  background-color: rgba(32, 113, 138, 0.2);
}
.new-zanata .pill--secondary:active, .new-zanata .pill--secondary.is-active {
  background-color: #20718A;
}

/*

### Badges

```example
<span class="badge">6</span>
<span class="badge--highlight">1</span>
<span class="badge--success">2</span>
<span class="badge--unsure">3</span>
<span class="badge--warning">4</span>
<span class="badge--danger">5</span>
<span class="badge--neutral">6</span>
```

*/
.new-zanata .badge, .new-zanata .badge--highlight, .new-zanata .badge--success, .new-zanata .badge--unsure, .new-zanata .badge--warning, .new-zanata .badge--danger, .new-zanata .badge--neutral, .new-zanata .badge--bl, .new-zanata .badge--br {
  font-size: 0.875em;
  line-height: 1.28571em;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  min-width: 1.28571em;
  height: 1.28571em;
  text-align: center;
  display: inline-block;
  padding: 0 0.34286em;
  background-color: #d2e3e8;
  font-weight: 400;
}
.new-zanata .badge__container {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.new-zanata .badge--inline {
  position: relative;
  margin-top: 0.21429em;
}
.new-zanata .badge--highlight {
  background-color: #03A6D7;
  color: #fff;
}
.new-zanata .badge--success {
  background-color: #5CCA7B;
  color: #fff;
}
.new-zanata .badge--unsure {
  background-color: #E9DF1B;
  color: #fff;
}
.new-zanata .badge--warning {
  background-color: #FFA800;
  color: #fff;
}
.new-zanata .badge--danger {
  background-color: #FF3B3D;
  color: #fff;
}
.new-zanata .badge--neutral {
  background-color: #bcd4dc;
  color: #639cad;
}
.new-zanata .badge--bl, .new-zanata .badge--br {
  position: absolute;
  z-index: 2;
}
.new-zanata .badge--bl {
  bottom: -0.21429em;
  left: -0.21429em;
}
.new-zanata .badge--br {
  bottom: -0.21429em;
  right: -0.21429em;
}

/*

### Calendar

```example
<div class="w--1-2">
  <table class="cal cal--highlight">
    <thead class="cal__head">
      <tr>
        <th class="cal__heading" title="Sunday">S</th>
        <th class="cal__heading" title="Monday">M</th>
        <th class="cal__heading" title="Tuesday">T</th>
        <th class="cal__heading" title="Wednesday">W</th>
        <th class="cal__heading" title="Thursday">T</th>
        <th class="cal__heading" title="Friday">F</th>
        <th class="cal__heading" title="Saturday">S</th>
      </tr>
    </thead>
    <tbody>
      <tr class="cal__week">
        <td class="cal__day">
        </td>
        <td class="cal__day">
          <div class="cal__date">1</div>
          <div class="cal__date-info" title="245 words">245</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">2</div>
          <div class="cal__date-info" title="355 words">355</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">3</div>
          <div class="cal__date-info" title="125 words">125</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">4</div>
          <div class="cal__date-info" title="3546 words">3546</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">5</div>
          <div class="cal__date-info" title="23 words">23</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">6</div>
          <div class="cal__date-info" title="0 words">0</div>
        </td>
      </tr>
      <tr class="cal__week">
        <td class="cal__day">
          <div class="cal__date">7</div>
          <div class="cal__date-info" title="245 words">245</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">8</div>
          <div class="cal__date-info" title="245 words">245</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">9</div>
          <div class="cal__date-info" title="355 words">355</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">10</div>
          <div class="cal__date-info" title="125 words">125</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">11</div>
          <div class="cal__date-info" title="3546 words">3546</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">12</div>
          <div class="cal__date-info" title="23 words">23</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">13</div>
          <div class="cal__date-info" title="0 words">0</div>
        </td>
      </tr>
      <tr class="cal__week">
        <td class="cal__day">
          <div class="cal__date">14</div>
          <div class="cal__date-info" title="245 words">245</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">15</div>
          <div class="cal__date-info" title="245 words">245</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">16</div>
          <div class="cal__date-info" title="355 words">355</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">17</div>
          <div class="cal__date-info" title="125 words">125</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">18</div>
          <div class="cal__date-info" title="3546 words">3546</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">19</div>
          <div class="cal__date-info" title="23 words">23</div>
        </td>
        <td class="cal__day is-active">
          <div class="cal__date">20</div>
          <div class="cal__date-info" title="0 words">0</div>
        </td>
      </tr>
      <tr class="cal__week">
        <td class="cal__day">
          <div class="cal__date">21</div>
          <div class="cal__date-info" title="245 words">245</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">22</div>
          <div class="cal__date-info" title="245 words">245</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">23</div>
          <div class="cal__date-info" title="355 words">355</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">24</div>
          <div class="cal__date-info" title="125 words">125</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">25</div>
          <div class="cal__date-info" title="3546 words">3546</div>
        </td>
        <td class="cal__day">
          <div class="cal__date">26</div>
          <div class="cal__date-info" title="23 words">23</div>
        </td>
        <td class="cal__day is-disabled">
          <div class="cal__date">27</div>
          <div class="cal__date-info"></div>
        </td>
      </tr>
      <tr class="cal__week">
        <td class="cal__day is-disabled">
          <div class="cal__date">28</div>
          <div class="cal__date-info"></div>
        </td>
        <td class="cal__day">
        </td>
        <td class="cal__day">
        </td>
        <td class="cal__day">
        </td>
        <td class="cal__day">
        </td>
        <td class="cal__day">
        </td>
        <td class="cal__day">
        </td>
      </tr>
    </tbody>
  </table>
</div>
```

*/
.new-zanata .cal {
  display: table;
  table-layout: fixed;
}
.new-zanata .cal__head {
  border: none;
}
.new-zanata .cal__heading,
.new-zanata .cal__day {
  display: table-cell;
  width: 14.2857%;
  text-align: center;
  border: 2px solid transparent;
  background-clip: padding-box;
  padding: 0;
}
.new-zanata .cal__heading:first-child,
.new-zanata .cal__day:first-child {
  border-left: none;
}
.new-zanata .cal__heading:last-child,
.new-zanata .cal__day:last-child {
  border-right: none;
}
.new-zanata .cal__heading {
  color: #20718A;
  font-weight: 400;
}
.new-zanata .cal__day {
  background-color: #deeaed;
  color: #20718A;
  border-radius: 0.75em;
  overflow: hidden;
}
.new-zanata .cal__day:focus .cal__date, .new-zanata .cal__day:hover .cal__date {
  background-color: #9bbfca;
}
.new-zanata .cal__day:focus .cal__date-info, .new-zanata .cal__day:hover .cal__date-info {
  background-color: #bcd4dc;
}
.new-zanata .cal__day:active, .new-zanata .cal__day.is-active {
  color: #fff !important;
}
.new-zanata .cal__day:active .cal__date, .new-zanata .cal__day.is-active .cal__date {
  background-color: #20718A;
}
.new-zanata .cal__day:active .cal__date-info, .new-zanata .cal__day.is-active .cal__date-info {
  background-color: #639cad;
}
.new-zanata .cal__day[disabled], .new-zanata .cal__day.is-disabled {
  pointer-events: none;
  opacity: 1;
}
.new-zanata .cal__day[disabled] .cal__date,
.new-zanata .cal__day[disabled] .cal__date-info, .new-zanata .cal__day.is-disabled .cal__date,
.new-zanata .cal__day.is-disabled .cal__date-info {
  opacity: .8;
  cursor: default;
}
.new-zanata .cal__date,
.new-zanata .cal__date-info {
  cursor: pointer;
  transition: all .25s ease-out;
}
.new-zanata .cal__date {
  padding: 0.10714em 0.21429em;
  background-color: #bcd4dc;
  border-radius: 0.75em 0.75em 0 0;
  font-size: 0.875em;
  line-height: 1.71429em;
}
.new-zanata .cal__date-info {
  font-weight: 700;
  min-height: 1.875em;
  padding: 0.1875em;
  border-radius: 0 0 0.75em 0.75em;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.new-zanata .cal--highlight .cal__heading {
  color: #03A6D7;
}
.new-zanata .cal--highlight .cal__day {
  background-color: #d9f2f9;
  color: #03A6D7;
}
.new-zanata .cal--highlight .cal__day:focus .cal__date, .new-zanata .cal--highlight .cal__day:hover .cal__date {
  background-color: #8ed7ed;
}
.new-zanata .cal--highlight .cal__day:focus .cal__date-info, .new-zanata .cal--highlight .cal__day:hover .cal__date-info {
  background-color: #b3e4f3;
}
.new-zanata .cal--highlight .cal__day:active .cal__date, .new-zanata .cal--highlight .cal__day.is-active .cal__date {
  background-color: #03A6D7;
}
.new-zanata .cal--highlight .cal__day:active .cal__date-info, .new-zanata .cal--highlight .cal__day.is-active .cal__date-info {
  background-color: #4fc1e3;
}
.new-zanata .cal--highlight .cal__date {
  background-color: #b3e4f3;
}
.new-zanata .cal--success .cal__heading {
  color: #5CCA7B;
}
.new-zanata .cal--success .cal__day {
  background-color: #e7f7eb;
  color: #5CCA7B;
}
.new-zanata .cal--success .cal__day:focus .cal__date, .new-zanata .cal--success .cal__day:hover .cal__date {
  background-color: #b6e7c4;
}
.new-zanata .cal--success .cal__day:focus .cal__date-info, .new-zanata .cal--success .cal__day:hover .cal__date-info {
  background-color: #ceefd7;
}
.new-zanata .cal--success .cal__day:active .cal__date, .new-zanata .cal--success .cal__day.is-active .cal__date {
  background-color: #5CCA7B;
}
.new-zanata .cal--success .cal__day:active .cal__date-info, .new-zanata .cal--success .cal__day.is-active .cal__date-info {
  background-color: #8ddaa3;
}
.new-zanata .cal--success .cal__date {
  background-color: #ceefd7;
}
.new-zanata .cal--unsure .cal__heading {
  color: #E9DF1B;
}
.new-zanata .cal--unsure .cal__day {
  background-color: #fcfadd;
  color: #E9DF1B;
}
.new-zanata .cal--unsure .cal__day:focus .cal__date, .new-zanata .cal--unsure .cal__day:hover .cal__date {
  background-color: #f5f198;
}
.new-zanata .cal--unsure .cal__day:focus .cal__date-info, .new-zanata .cal--unsure .cal__day:hover .cal__date-info {
  background-color: #f8f5bb;
}
.new-zanata .cal--unsure .cal__day:active .cal__date, .new-zanata .cal--unsure .cal__day.is-active .cal__date {
  background-color: #E9DF1B;
}
.new-zanata .cal--unsure .cal__day:active .cal__date-info, .new-zanata .cal--unsure .cal__day.is-active .cal__date-info {
  background-color: #f0e95f;
}
.new-zanata .cal--unsure .cal__date {
  background-color: #f8f5bb;
}

/*

### Buttons

```
<p><a class="button">Button</a></p>
<p><a class="button--snug">Button Snug</a></p>
<p><a class="button--small">Button Small</a></p>
<p><a class="button--large">Button Large</a></p>
<p><a class="button--huge">Button Huge</a></p>
<p><a class="button--full">Button Full</a></p>
<p><a class="button--link">Button Link</a></p>
<p><a class="button--inline-right">Button Inline Right</a></p>
<p><a class="button--inline-left">Button Inline Left</a></p>
<p><a class="button--primary">Button Primary</a></p>
<p><a class="button--secondary">Button Secondary</a></p>
<p><a class="button--success">Button Success</a></p>
<p><a class="button--unsure">Button Unsure</a></p>
<p><a class="button--warning">Button Warning</a></p>
<p><a class="button--danger">Button Danger</a></p>
```

*/
.new-zanata input[type="submit"],
.new-zanata button,
.new-zanata .button,
.new-zanata .button--small,
.new-zanata .button--large,
.new-zanata .button--huge,
.new-zanata .button--snug,
.new-zanata .button--full,
.new-zanata .button--inline-right,
.new-zanata .button--inline-left,
.new-zanata .button--primary,
.new-zanata .button--secondary,
.new-zanata input.button--secondary,
.new-zanata .button--success,
.new-zanata input.button--success,
.new-zanata .button--warning,
.new-zanata input.button--warning,
.new-zanata .button--danger,
.new-zanata input.button--danger,
.new-zanata input.button--primary,
.new-zanata .button--unsure,
.new-zanata input.button--unsure {
  -moz-box-shadow: inset 0 -1px 0 rgba(32, 113, 138, 0.09);
  -webkit-box-shadow: inset 0 -1px 0 rgba(32, 113, 138, 0.09);
  box-shadow: inset 0 -1px 0 rgba(32, 113, 138, 0.09);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
  padding: 0.1875em 0.75em;
  border: none;
  border: 1px solid rgba(32, 113, 138, 0.15);
  background-color: #f9f9f9;
  color: #575e65;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.new-zanata input[type="submit"]:hover, .new-zanata input[type="submit"]:focus,
.new-zanata button:hover,
.new-zanata button:focus,
.new-zanata .button:hover,
.new-zanata .button--small:hover,
.new-zanata .button--large:hover,
.new-zanata .button--huge:hover,
.new-zanata .button--snug:hover,
.new-zanata .button--full:hover,
.new-zanata .button--inline-right:hover,
.new-zanata .button--inline-left:hover,
.new-zanata .button--primary:hover,
.new-zanata .button--secondary:hover,
.new-zanata .button--success:hover,
.new-zanata .button--warning:hover,
.new-zanata .button--danger:hover,
.new-zanata .button--unsure:hover,
.new-zanata .button:focus,
.new-zanata .button--small:focus,
.new-zanata .button--large:focus,
.new-zanata .button--huge:focus,
.new-zanata .button--snug:focus,
.new-zanata .button--full:focus,
.new-zanata .button--inline-right:focus,
.new-zanata .button--inline-left:focus,
.new-zanata .button--primary:focus,
.new-zanata .button--secondary:focus,
.new-zanata .button--success:focus,
.new-zanata .button--warning:focus,
.new-zanata .button--danger:focus,
.new-zanata .button--unsure:focus {
  background-color: #fff;
  border-color: rgba(32, 113, 138, 0.25);
  -moz-box-shadow: inset 0 -2px 0 rgba(32, 113, 138, 0.17);
  -webkit-box-shadow: inset 0 -2px 0 rgba(32, 113, 138, 0.17);
  box-shadow: inset 0 -2px 0 rgba(32, 113, 138, 0.17);
  color: #000;
  outline: none;
}
.new-zanata input[type="submit"]:active, .new-zanata input[type="submit"].is-active,
.new-zanata button:active,
.new-zanata button.is-active,
.new-zanata .button:active,
.new-zanata .button--small:active,
.new-zanata .button--large:active,
.new-zanata .button--huge:active,
.new-zanata .button--snug:active,
.new-zanata .button--full:active,
.new-zanata .button--inline-right:active,
.new-zanata .button--inline-left:active,
.new-zanata .button--primary:active,
.new-zanata .button--secondary:active,
.new-zanata .button--success:active,
.new-zanata .button--warning:active,
.new-zanata .button--danger:active,
.new-zanata .button--unsure:active,
.new-zanata .button.is-active,
.new-zanata .is-active.button--small,
.new-zanata .is-active.button--large,
.new-zanata .is-active.button--huge,
.new-zanata .is-active.button--snug,
.new-zanata .is-active.button--full,
.new-zanata .is-active.button--inline-right,
.new-zanata .is-active.button--inline-left,
.new-zanata .is-active.button--primary,
.new-zanata .is-active.button--secondary,
.new-zanata .is-active.button--success,
.new-zanata .is-active.button--warning,
.new-zanata .is-active.button--danger,
.new-zanata .is-active.button--unsure {
  background-color: #f7f7f7;
  -moz-box-shadow: inset 0 2px 0 rgba(32, 113, 138, 0.17);
  -webkit-box-shadow: inset 0 2px 0 rgba(32, 113, 138, 0.17);
  box-shadow: inset 0 2px 0 rgba(32, 113, 138, 0.17);
}
.new-zanata .button--disabled,
.new-zanata .button[disbaled],
.new-zanata [disbaled].button--small,
.new-zanata [disbaled].button--large,
.new-zanata [disbaled].button--huge,
.new-zanata [disbaled].button--snug,
.new-zanata [disbaled].button--full,
.new-zanata [disbaled].button--inline-right,
.new-zanata [disbaled].button--inline-left,
.new-zanata [disbaled].button--primary,
.new-zanata [disbaled].button--secondary,
.new-zanata [disbaled].button--success,
.new-zanata [disbaled].button--warning,
.new-zanata [disbaled].button--danger,
.new-zanata [disbaled].button--unsure,
.new-zanata .button--group[disabled] .button,
.new-zanata .button--group[disabled] .button--small,
.new-zanata .button--group[disabled] .button--large,
.new-zanata .button--group[disabled] .button--huge,
.new-zanata .button--group[disabled] .button--snug,
.new-zanata .button--group[disabled] .button--full,
.new-zanata .button--group[disabled] .button--inline-right,
.new-zanata .button--group[disabled] .button--inline-left,
.new-zanata .button--group[disabled] .button--primary,
.new-zanata .button--group[disabled] .button--secondary,
.new-zanata .button--group[disabled] .button--success,
.new-zanata .button--group[disabled] .button--warning,
.new-zanata .button--group[disabled] .button--danger,
.new-zanata .button--group[disabled] .button--unsure,
.new-zanata button[disabled],
.new-zanata input[type="submit"][disabled] {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}
.new-zanata .button--disabled:hover, .new-zanata .button--disabled:focus, .new-zanata .button--disabled:active, .new-zanata .button--disabled.is-active,
.new-zanata .button[disbaled]:hover,
.new-zanata [disbaled].button--small:hover,
.new-zanata [disbaled].button--large:hover,
.new-zanata [disbaled].button--huge:hover,
.new-zanata [disbaled].button--snug:hover,
.new-zanata [disbaled].button--full:hover,
.new-zanata [disbaled].button--inline-right:hover,
.new-zanata [disbaled].button--inline-left:hover,
.new-zanata [disbaled].button--primary:hover,
.new-zanata [disbaled].button--secondary:hover,
.new-zanata [disbaled].button--success:hover,
.new-zanata [disbaled].button--warning:hover,
.new-zanata [disbaled].button--danger:hover,
.new-zanata [disbaled].button--unsure:hover,
.new-zanata .button--group[disabled] .button:hover,
.new-zanata .button--group[disabled] .button--small:hover,
.new-zanata .button--group[disabled] .button--large:hover,
.new-zanata .button--group[disabled] .button--huge:hover,
.new-zanata .button--group[disabled] .button--snug:hover,
.new-zanata .button--group[disabled] .button--full:hover,
.new-zanata .button--group[disabled] .button--inline-right:hover,
.new-zanata .button--group[disabled] .button--inline-left:hover,
.new-zanata .button--group[disabled] .button--primary:hover,
.new-zanata .button--group[disabled] .button--secondary:hover,
.new-zanata .button--group[disabled] .button--success:hover,
.new-zanata .button--group[disabled] .button--warning:hover,
.new-zanata .button--group[disabled] .button--danger:hover,
.new-zanata .button--group[disabled] .button--unsure:hover,
.new-zanata .button[disbaled]:focus,
.new-zanata [disbaled].button--small:focus,
.new-zanata [disbaled].button--large:focus,
.new-zanata [disbaled].button--huge:focus,
.new-zanata [disbaled].button--snug:focus,
.new-zanata [disbaled].button--full:focus,
.new-zanata [disbaled].button--inline-right:focus,
.new-zanata [disbaled].button--inline-left:focus,
.new-zanata [disbaled].button--primary:focus,
.new-zanata [disbaled].button--secondary:focus,
.new-zanata [disbaled].button--success:focus,
.new-zanata [disbaled].button--warning:focus,
.new-zanata [disbaled].button--danger:focus,
.new-zanata [disbaled].button--unsure:focus,
.new-zanata .button--group[disabled] .button:focus,
.new-zanata .button--group[disabled] .button--small:focus,
.new-zanata .button--group[disabled] .button--large:focus,
.new-zanata .button--group[disabled] .button--huge:focus,
.new-zanata .button--group[disabled] .button--snug:focus,
.new-zanata .button--group[disabled] .button--full:focus,
.new-zanata .button--group[disabled] .button--inline-right:focus,
.new-zanata .button--group[disabled] .button--inline-left:focus,
.new-zanata .button--group[disabled] .button--primary:focus,
.new-zanata .button--group[disabled] .button--secondary:focus,
.new-zanata .button--group[disabled] .button--success:focus,
.new-zanata .button--group[disabled] .button--warning:focus,
.new-zanata .button--group[disabled] .button--danger:focus,
.new-zanata .button--group[disabled] .button--unsure:focus,
.new-zanata .button[disbaled]:active,
.new-zanata [disbaled].button--small:active,
.new-zanata [disbaled].button--large:active,
.new-zanata [disbaled].button--huge:active,
.new-zanata [disbaled].button--snug:active,
.new-zanata [disbaled].button--full:active,
.new-zanata [disbaled].button--inline-right:active,
.new-zanata [disbaled].button--inline-left:active,
.new-zanata [disbaled].button--primary:active,
.new-zanata [disbaled].button--secondary:active,
.new-zanata [disbaled].button--success:active,
.new-zanata [disbaled].button--warning:active,
.new-zanata [disbaled].button--danger:active,
.new-zanata [disbaled].button--unsure:active,
.new-zanata .button--group[disabled] .button:active,
.new-zanata .button--group[disabled] .button--small:active,
.new-zanata .button--group[disabled] .button--large:active,
.new-zanata .button--group[disabled] .button--huge:active,
.new-zanata .button--group[disabled] .button--snug:active,
.new-zanata .button--group[disabled] .button--full:active,
.new-zanata .button--group[disabled] .button--inline-right:active,
.new-zanata .button--group[disabled] .button--inline-left:active,
.new-zanata .button--group[disabled] .button--primary:active,
.new-zanata .button--group[disabled] .button--secondary:active,
.new-zanata .button--group[disabled] .button--success:active,
.new-zanata .button--group[disabled] .button--warning:active,
.new-zanata .button--group[disabled] .button--danger:active,
.new-zanata .button--group[disabled] .button--unsure:active,
.new-zanata .button[disbaled].is-active,
.new-zanata [disbaled].is-active.button--small,
.new-zanata [disbaled].is-active.button--large,
.new-zanata [disbaled].is-active.button--huge,
.new-zanata [disbaled].is-active.button--snug,
.new-zanata [disbaled].is-active.button--full,
.new-zanata [disbaled].is-active.button--inline-right,
.new-zanata [disbaled].is-active.button--inline-left,
.new-zanata [disbaled].is-active.button--primary,
.new-zanata [disbaled].is-active.button--secondary,
.new-zanata [disbaled].is-active.button--success,
.new-zanata [disbaled].is-active.button--warning,
.new-zanata [disbaled].is-active.button--danger,
.new-zanata [disbaled].is-active.button--unsure,
.new-zanata .button--group[disabled] .is-active.button,
.new-zanata .button--group[disabled] .is-active.button--small,
.new-zanata .button--group[disabled] .is-active.button--large,
.new-zanata .button--group[disabled] .is-active.button--huge,
.new-zanata .button--group[disabled] .is-active.button--snug,
.new-zanata .button--group[disabled] .is-active.button--full,
.new-zanata .button--group[disabled] .is-active.button--inline-right,
.new-zanata .button--group[disabled] .is-active.button--inline-left,
.new-zanata .button--group[disabled] .is-active.button--primary,
.new-zanata .button--group[disabled] .is-active.button--secondary,
.new-zanata .button--group[disabled] .is-active.button--success,
.new-zanata .button--group[disabled] .is-active.button--warning,
.new-zanata .button--group[disabled] .is-active.button--danger,
.new-zanata .button--group[disabled] .is-active.button--unsure,
.new-zanata button[disabled]:hover,
.new-zanata button[disabled]:focus,
.new-zanata button[disabled]:active,
.new-zanata button[disabled].is-active,
.new-zanata input[type="submit"][disabled]:hover,
.new-zanata input[type="submit"][disabled]:focus,
.new-zanata input[type="submit"][disabled]:active,
.new-zanata input[type="submit"][disabled].is-active {
  background-color: inherit !important;
  color: inherit !important;
  -moz-box-shadow: inherit !important;
  -webkit-box-shadow: inherit !important;
  box-shadow: inherit !important;
  pointer-events: none;
}
.new-zanata .button--small {
  font-size: 0.875em;
  line-height: 1.2em;
  height: 1.71429em;
  padding: 0.21429em 0.42857em;
}
.new-zanata .button--large {
  font-size: 1.25em;
  line-height: 1.2em;
}
.new-zanata .button--huge {
  font-size: 1.5em;
  line-height: 1.5em;
}
.new-zanata .button--snug {
  padding: 0.375em;
}
.new-zanata .button--full {
  display: block;
  width: 100%;
}
.new-zanata .button--link, .new-zanata .message__remove,
.new-zanata .button--link:hover,
.new-zanata .message__remove:hover,
.new-zanata .button--link:focus,
.new-zanata .message__remove:focus,
.new-zanata .button--link:active,
.new-zanata .message__remove:active,
.new-zanata .button--link.is-active,
.new-zanata .is-active.message__remove {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  text-align: inherit;
  color: #03A6D7;
  font-weight: 400;
  line-height: inherit;
}
.new-zanata .button--link:hover, .new-zanata .message__remove:hover, .new-zanata .button--link:focus, .new-zanata .message__remove:focus {
  color: #026c8c;
}
.new-zanata .button--link:active, .new-zanata .message__remove:active, .new-zanata .button--link.is-active, .new-zanata .is-active.message__remove {
  color: #20718A;
}
.new-zanata .button--inline-right {
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
}
.new-zanata .button--inline-left {
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
.new-zanata .button--primary, .new-zanata .button--secondary,
.new-zanata input.button--secondary, .new-zanata .button--success,
.new-zanata input.button--success, .new-zanata .button--warning,
.new-zanata input.button--warning, .new-zanata .button--danger,
.new-zanata input.button--danger,
.new-zanata input.button--primary,
.new-zanata input.button--secondary,
.new-zanata input.button--success,
.new-zanata input.button--warning,
.new-zanata input.button--danger {
  border: 1px solid rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
  background-color: #039ecc;
  color: #f2f2f2;
}
.new-zanata .button--primary:hover, .new-zanata .button--secondary:hover, .new-zanata .button--success:hover, .new-zanata .button--warning:hover, .new-zanata .button--danger:hover, .new-zanata .button--primary:focus, .new-zanata .button--secondary:focus, .new-zanata .button--success:focus, .new-zanata .button--warning:focus, .new-zanata .button--danger:focus,
.new-zanata input.button--primary:hover,
.new-zanata input.button--secondary:hover,
.new-zanata input.button--success:hover,
.new-zanata input.button--warning:hover,
.new-zanata input.button--danger:hover,
.new-zanata input.button--primary:focus,
.new-zanata input.button--secondary:focus,
.new-zanata input.button--success:focus,
.new-zanata input.button--warning:focus,
.new-zanata input.button--danger:focus {
  -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #03A6D7;
  color: #fff;
}
.new-zanata .button--primary:active, .new-zanata .button--secondary:active, .new-zanata .button--success:active, .new-zanata .button--warning:active, .new-zanata .button--danger:active, .new-zanata .button--primary.is-active, .new-zanata .is-active.button--secondary, .new-zanata .is-active.button--success, .new-zanata .is-active.button--warning, .new-zanata .is-active.button--danger,
.new-zanata input.button--primary:active,
.new-zanata input.button--secondary:active,
.new-zanata input.button--success:active,
.new-zanata input.button--warning:active,
.new-zanata input.button--danger:active,
.new-zanata input.button--primary.is-active,
.new-zanata input.is-active.button--secondary,
.new-zanata input.is-active.button--success,
.new-zanata input.is-active.button--warning,
.new-zanata input.is-active.button--danger {
  background-color: #0285ac;
  -moz-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2);
}
.new-zanata .button--secondary,
.new-zanata input.button--secondary {
  background-color: #1e6b83;
}
.new-zanata .button--secondary:hover, .new-zanata .button--secondary:focus,
.new-zanata input.button--secondary:hover,
.new-zanata input.button--secondary:focus {
  background-color: #20718A;
}
.new-zanata .button--secondary:active, .new-zanata .button--secondary.is-active,
.new-zanata input.button--secondary:active,
.new-zanata input.button--secondary.is-active {
  background-color: #1a5a6e;
}
.new-zanata .button--success,
.new-zanata input.button--success {
  background-color: #57c075;
}
.new-zanata .button--success:hover, .new-zanata .button--success:focus,
.new-zanata input.button--success:hover,
.new-zanata input.button--success:focus {
  background-color: #5CCA7B;
}
.new-zanata .button--success:active, .new-zanata .button--success.is-active,
.new-zanata input.button--success:active,
.new-zanata input.button--success.is-active {
  background-color: #4aa262;
}
.new-zanata .button--unsure,
.new-zanata input.button--unsure {
  background-color: #ddd41a;
}
.new-zanata .button--unsure:hover, .new-zanata .button--unsure:focus,
.new-zanata input.button--unsure:hover,
.new-zanata input.button--unsure:focus {
  background-color: #E9DF1B;
}
.new-zanata .button--unsure:active, .new-zanata .button--unsure.is-active,
.new-zanata input.button--unsure:active,
.new-zanata input.button--unsure.is-active {
  background-color: #bab216;
}
.new-zanata .button--warning,
.new-zanata input.button--warning {
  background-color: #f2a000;
}
.new-zanata .button--warning:hover, .new-zanata .button--warning:focus,
.new-zanata input.button--warning:hover,
.new-zanata input.button--warning:focus {
  background-color: #FFA800;
}
.new-zanata .button--warning:active, .new-zanata .button--warning.is-active,
.new-zanata input.button--warning:active,
.new-zanata input.button--warning.is-active {
  background-color: #cc8600;
}
.new-zanata .button--danger,
.new-zanata input.button--danger {
  background-color: #f2383a;
}
.new-zanata .button--danger:hover, .new-zanata .button--danger:focus,
.new-zanata input.button--danger:hover,
.new-zanata input.button--danger:focus {
  background-color: #FF3B3D;
}
.new-zanata .button--danger:active, .new-zanata .button--danger.is-active,
.new-zanata input.button--danger:active,
.new-zanata input.button--danger.is-active {
  background-color: #cc2f31;
}
.new-zanata .button--fedora, .new-zanata .button--google, .new-zanata .button--yahoo, .new-zanata .button--openid {
  background-repeat: no-repeat;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}
.new-zanata .button--fedora {
  background-image: url(../img/fedora-logo.svg);
}
.new-zanata .button--google {
  background-image: url(../img/google-logo.svg);
}
.new-zanata .button--yahoo {
  background-image: url(../img/yahoo-logo.svg);
}
.new-zanata .button--openid {
  background-image: url(../img/openid-logo.svg);
}

/*

#### Button Group

```example
<div class="button--group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button--primary">Button</button>
</div>
```

*/
.new-zanata .button--group .button, .new-zanata .button--group .button--small, .new-zanata .button--group .button--large, .new-zanata .button--group .button--huge, .new-zanata .button--group .button--snug, .new-zanata .button--group .button--full, .new-zanata .button--group .button--inline-right, .new-zanata .button--group .button--inline-left, .new-zanata .button--group .button--primary, .new-zanata .button--group .button--secondary, .new-zanata .button--group .button--success, .new-zanata .button--group .button--warning, .new-zanata .button--group .button--danger, .new-zanata .button--group .button--unsure {
  position: relative;
  margin: 0;
  margin-left: -0.3em;
  border-radius: 0;
}
.new-zanata .button--group .button:first-of-type, .new-zanata .button--group .button--small:first-of-type, .new-zanata .button--group .button--large:first-of-type, .new-zanata .button--group .button--huge:first-of-type, .new-zanata .button--group .button--snug:first-of-type, .new-zanata .button--group .button--full:first-of-type, .new-zanata .button--group .button--inline-right:first-of-type, .new-zanata .button--group .button--inline-left:first-of-type, .new-zanata .button--group .button--primary:first-of-type, .new-zanata .button--group .button--secondary:first-of-type, .new-zanata .button--group .button--success:first-of-type, .new-zanata .button--group .button--warning:first-of-type, .new-zanata .button--group .button--danger:first-of-type, .new-zanata .button--group .button--unsure:first-of-type {
  margin-left: 0;
  border-radius: 4px 0 0 4px;
}
.new-zanata .button--group .button:last-of-type, .new-zanata .button--group .button--small:last-of-type, .new-zanata .button--group .button--large:last-of-type, .new-zanata .button--group .button--huge:last-of-type, .new-zanata .button--group .button--snug:last-of-type, .new-zanata .button--group .button--full:last-of-type, .new-zanata .button--group .button--inline-right:last-of-type, .new-zanata .button--group .button--inline-left:last-of-type, .new-zanata .button--group .button--primary:last-of-type, .new-zanata .button--group .button--secondary:last-of-type, .new-zanata .button--group .button--success:last-of-type, .new-zanata .button--group .button--warning:last-of-type, .new-zanata .button--group .button--danger:last-of-type, .new-zanata .button--group .button--unsure:last-of-type {
  border-radius: 0 4px 4px 0;
}
.new-zanata .button--group input[type="radio"] {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.new-zanata .button--group input[type="radio"] + .button, .new-zanata .button--group input[type="radio"] + .button--small, .new-zanata .button--group input[type="radio"] + .button--large, .new-zanata .button--group input[type="radio"] + .button--huge, .new-zanata .button--group input[type="radio"] + .button--snug, .new-zanata .button--group input[type="radio"] + .button--full, .new-zanata .button--group input[type="radio"] + .button--inline-right, .new-zanata .button--group input[type="radio"] + .button--inline-left, .new-zanata .button--group input[type="radio"] + .button--primary, .new-zanata .button--group input[type="radio"] + .button--secondary, .new-zanata .button--group input[type="radio"] + .button--success, .new-zanata .button--group input[type="radio"] + .button--warning, .new-zanata .button--group input[type="radio"] + .button--danger, .new-zanata .button--group input[type="radio"] + .button--unsure {
  -moz-box-shadow: inset 0 -1px 0 rgba(32, 113, 138, 0.09);
  -webkit-box-shadow: inset 0 -1px 0 rgba(32, 113, 138, 0.09);
  box-shadow: inset 0 -1px 0 rgba(32, 113, 138, 0.09);
  border: none;
  border: 1px solid rgba(32, 113, 138, 0.15);
  background-color: #f9f9f9;
  color: #575e65;
}
.new-zanata .button--group input[type="radio"] + .button:hover, .new-zanata .button--group input[type="radio"] + .button--small:hover, .new-zanata .button--group input[type="radio"] + .button--large:hover, .new-zanata .button--group input[type="radio"] + .button--huge:hover, .new-zanata .button--group input[type="radio"] + .button--snug:hover, .new-zanata .button--group input[type="radio"] + .button--full:hover, .new-zanata .button--group input[type="radio"] + .button--inline-right:hover, .new-zanata .button--group input[type="radio"] + .button--inline-left:hover, .new-zanata .button--group input[type="radio"] + .button--primary:hover, .new-zanata .button--group input[type="radio"] + .button--secondary:hover, .new-zanata .button--group input[type="radio"] + .button--success:hover, .new-zanata .button--group input[type="radio"] + .button--warning:hover, .new-zanata .button--group input[type="radio"] + .button--danger:hover, .new-zanata .button--group input[type="radio"] + .button--unsure:hover, .new-zanata .button--group input[type="radio"] + .button:focus, .new-zanata .button--group input[type="radio"] + .button--small:focus, .new-zanata .button--group input[type="radio"] + .button--large:focus, .new-zanata .button--group input[type="radio"] + .button--huge:focus, .new-zanata .button--group input[type="radio"] + .button--snug:focus, .new-zanata .button--group input[type="radio"] + .button--full:focus, .new-zanata .button--group input[type="radio"] + .button--inline-right:focus, .new-zanata .button--group input[type="radio"] + .button--inline-left:focus, .new-zanata .button--group input[type="radio"] + .button--primary:focus, .new-zanata .button--group input[type="radio"] + .button--secondary:focus, .new-zanata .button--group input[type="radio"] + .button--success:focus, .new-zanata .button--group input[type="radio"] + .button--warning:focus, .new-zanata .button--group input[type="radio"] + .button--danger:focus, .new-zanata .button--group input[type="radio"] + .button--unsure:focus {
  background-color: #fff;
  border-color: rgba(32, 113, 138, 0.25);
  -moz-box-shadow: inset 0 -2px 0 rgba(32, 113, 138, 0.17);
  -webkit-box-shadow: inset 0 -2px 0 rgba(32, 113, 138, 0.17);
  box-shadow: inset 0 -2px 0 rgba(32, 113, 138, 0.17);
  color: #000;
  outline: none;
}
.new-zanata .button--group input[type="radio"]:checked + .button, .new-zanata .button--group input[type="radio"]:checked + .button--small, .new-zanata .button--group input[type="radio"]:checked + .button--large, .new-zanata .button--group input[type="radio"]:checked + .button--huge, .new-zanata .button--group input[type="radio"]:checked + .button--snug, .new-zanata .button--group input[type="radio"]:checked + .button--full, .new-zanata .button--group input[type="radio"]:checked + .button--inline-right, .new-zanata .button--group input[type="radio"]:checked + .button--inline-left, .new-zanata .button--group input[type="radio"]:checked + .button--primary, .new-zanata .button--group input[type="radio"]:checked + .button--secondary, .new-zanata .button--group input[type="radio"]:checked + .button--success, .new-zanata .button--group input[type="radio"]:checked + .button--warning, .new-zanata .button--group input[type="radio"]:checked + .button--danger, .new-zanata .button--group input[type="radio"]:checked + .button--unsure {
  background-color: #f7f7f7;
  -moz-box-shadow: inset 0 2px 0 rgba(32, 113, 138, 0.17);
  -webkit-box-shadow: inset 0 2px 0 rgba(32, 113, 138, 0.17);
  box-shadow: inset 0 2px 0 rgba(32, 113, 138, 0.17);
  cursor: default;
}
.new-zanata .button--group input[type="radio"]:checked + .button--primary, .new-zanata .button--group input[type="radio"]:checked + .button--secondary, .new-zanata .button--group input[type="radio"]:checked + .button--success, .new-zanata .button--group input[type="radio"]:checked + .button--warning, .new-zanata .button--group input[type="radio"]:checked + .button--danger,
.new-zanata .button--group input[type="radio"]:checked + .button--secondary,
.new-zanata .button--group input[type="radio"]:checked + .button--success,
.new-zanata .button--group input[type="radio"]:checked + .button--warning,
.new-zanata .button--group input[type="radio"]:checked + .button--danger {
  color: #f2f2f2;
  -moz-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2);
}
.new-zanata .button--group input[type="radio"]:checked + .button--primary, .new-zanata .button--group input[type="radio"]:checked + .button--secondary, .new-zanata .button--group input[type="radio"]:checked + .button--success, .new-zanata .button--group input[type="radio"]:checked + .button--warning, .new-zanata .button--group input[type="radio"]:checked + .button--danger {
  background-color: #03A6D7;
}
.new-zanata .button--group input[type="radio"]:checked + .button--secondary {
  background-color: #20718A;
}
.new-zanata .button--group input[type="radio"]:checked + .button--success {
  background-color: #5CCA7B;
}
.new-zanata .button--group input[type="radio"]:checked + .button--unsure {
  background-color: #E9DF1B;
  color: #000;
}
.new-zanata .button--group input[type="radio"]:checked + .button--warning {
  background-color: #FFA800;
}
.new-zanata .button--group input[type="radio"]:checked + .button--danger {
  background-color: #FF3B3D;
}

/*
### Reveal

Used to show extra information on hover of the parent element

```
<div class="reveal">
  <p>Hover over this area to show the hidden items</p>
  <p class="reveal__target">Look at me!</p>
</div>

<ul>
  <li class="reveal--list-item">
    <p>Hover over this area to show the hidden items</p>
    <span class="reveal__target"><i class="i i--remove"></i></span>
  </li>
</ul>

```

*/
.no-touch .new-zanata .reveal:hover .reveal__target, .no-touch .new-zanata .reveal--list-item:hover .reveal__target, .no-touch .new-zanata .reveal:focus .reveal__target, .no-touch .new-zanata .reveal--list-item:focus .reveal__target {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.no-touch .new-zanata .reveal__target {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.no-touch .new-zanata .reveal__target:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.new-zanata .reveal__target--slide {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  max-height: 0;
}
.new-zanata .reveal__target--slide.is-active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  max-height: 4.5em;
}
.new-zanata .reveal__target--appear {
  display: none !important;
}
.new-zanata .reveal__target--appear.is-active {
  display: block !important;
}
.new-zanata .reveal--list-item {
  position: relative;
  padding-right: 1.5em !important;
}
.new-zanata .reveal--list-item .reveal__target {
  position: absolute;
  right: 0;
}
.new-zanata .reveal--list-item .reveal__target .i, .new-zanata .reveal--list-item .reveal__target .i--inline, .new-zanata .reveal--list-item .reveal__target .i--left, .new-zanata .reveal--list-item .reveal__target .i--right, .new-zanata .reveal--list-item .reveal__target .i--understated, .new-zanata .reveal--list-item .reveal__target .i--small, .new-zanata .reveal--list-item .reveal__target .i--large, .new-zanata .reveal--list-item .reveal__target .header__user-nav__toggle:before, .new-zanata .reveal--list-item .reveal__target .i--huge, .new-zanata .reveal--list-item .reveal__target .form__checkbox__item:after, .new-zanata .reveal--list-item .reveal__target .form--search:before {
  line-height: 1.5em;
}
.new-zanata .reveal--list-item .reveal__target .i--large, .new-zanata .reveal--list-item .reveal__target .header__user-nav__toggle:before {
  line-height: 1.5em;
}

.tooltip {
  position: absolute;
  z-index: 9999;
  display: block;
  visibility: visible;
  font-size: 0.875em;
  line-height: 1.4;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  text-transform: normal;
}

.tooltip.in {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.9;
}

.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}

.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}

.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}

.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}

.tooltip__inner {
  max-width: 20em;
  padding: 3px 8px;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  background-color: #20718A;
  border-radius: 4px;
}

.tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip__arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #20718A;
}

.tooltip.top-left .tooltip__arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: #20718A;
}

.tooltip.top-right .tooltip__arrow {
  bottom: 0;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: #20718A;
}

.tooltip.right .tooltip__arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #20718A;
}

.tooltip.left .tooltip__arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #20718A;
}

.tooltip.bottom .tooltip__arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #20718A;
}

.tooltip.bottom-left .tooltip__arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #20718A;
}

.tooltip.bottom-right .tooltip__arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #20718A;
}

/*

### Loader

```
<a href="#" class="loader"><span class="loader__label">Loader Label</span></a>

<button class="button loader"><span class="loader__label">Loader Button Label</span></button>

<a href="#" class="loader is-active">
  <span class="loader__label">
    (Active) Loader Label
    <span class="loader__spinner">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </span>
</a>

<div class="loader--mini is-active">
  <span class="loader__spinner">
    <span></span>
    <span></span>
    <span></span>
  </span>
</div>

<div class="loader--small is-active">
  <span class="loader__spinner">
    <span></span>
    <span></span>
    <span></span>
  </span>
</div>

<div class="loader--large is-active">
  <span class="loader__spinner">
    <span></span>
    <span></span>
    <span></span>
  </span>
</div>

<div class="loader--huge is-active">
  <span class="loader__spinner">
    <span></span>
    <span></span>
    <span></span>
  </span>
</div>
```

*/
.loader, .loader--mini, .loader--small, .loader--large, .loader--huge, .loader__label, .loader__spinner {
  -moz-transition: all 0.15s cubic-bezier(0.26, 0.47, 0.36, 0.94);
  -o-transition: all 0.15s cubic-bezier(0.26, 0.47, 0.36, 0.94);
  -webkit-transition: all 0.15s cubic-bezier(0.26, 0.47, 0.36, 0.94);
  transition: all 0.15s cubic-bezier(0.26, 0.47, 0.36, 0.94);
}

.loader, .loader--mini, .loader--small, .loader--large, .loader--huge {
  position: relative;
  display: block;
  text-align: center;
  margin: 0 auto;
  line-height: 1.5em;
  min-height: 1.5em;
}
.loader.is-active, .is-active.loader--mini, .is-active.loader--small, .is-active.loader--large, .is-active.loader--huge {
  min-width: 1.5em;
}

a.loader:hover, a.loader--mini:hover, a.loader--small:hover, a.loader--large:hover, a.loader--huge:hover {
  background-color: rgba(32, 113, 138, 0.03);
}
a.loader:active, a.loader--mini:active, a.loader--small:active, a.loader--large:active, a.loader--huge:active {
  background-color: rgba(32, 113, 138, 0.03);
}
a.loader.is-active, a.is-active.loader--mini, a.is-active.loader--small, a.is-active.loader--large, a.is-active.loader--huge {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background-color: rgba(32, 113, 138, 0.03);
  cursor: default;
}

.loader__label {
  position: relative;
  transform-style: preserve-3d;
}
.loader.is-active .loader__label, .is-active.loader--mini .loader__label, .is-active.loader--small .loader__label, .is-active.loader--large .loader__label, .is-active.loader--huge .loader__label {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  padding-left: 2.25em;
  color: #20718A;
}

.loader__spinner {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  left: 0;
  top: 50%;
  height: 0.375em;
}
.loader.is-active .loader__spinner, .is-active.loader--mini .loader__spinner, .is-active.loader--small .loader__spinner, .is-active.loader--large .loader__spinner, .is-active.loader--huge .loader__spinner {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.loader__spinner span {
  -moz-animation-name: loading;
  -webkit-animation-name: loading;
  animation-name: loading;
  -moz-animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  position: absolute;
  width: 0.375em;
  height: 0.375em;
  border-radius: 1.5em;
  background-color: #20718A;
}
.loader__spinner span:nth-child(1) {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  left: 0;
}
.loader__spinner span:nth-child(2) {
  -moz-animation-delay: -0.15s;
  -webkit-animation-delay: -0.15s;
  animation-delay: -0.15s;
  left: 0.5625em;
}
.loader__spinner span:nth-child(3) {
  -moz-animation-delay: -0.3s;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
  left: 1.125em;
}

.loader > .loader__spinner, .loader--mini > .loader__spinner, .loader--small > .loader__spinner, .loader--large > .loader__spinner, .loader--huge > .loader__spinner {
  left: 50%;
  margin-left: -0.75em;
}

.loader--inline {
  min-height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  margin-left: -0.3em;
}
.loader--inline.is-active {
  min-width: 1.5em;
  margin-left: 0.1875em;
  margin-right: 0.1875em;
}

.loader--center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.loader--mini {
  font-size: 0.75em;
  line-height: 2em;
}

.loader--small {
  font-size: 0.875em;
  line-height: 1.71429em;
}

.loader--large {
  font-size: 1.5em;
  line-height: 1.5em;
}

.loader--huge {
  font-size: 2.25em;
  line-height: 1.33333em;
}

@-moz-keyframes loading {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@-webkit-keyframes loading {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes loading {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
/*

### Modal

```example
<button class="js-modal__show" data-target="modal-1">Show modal</button>

<div class="modal" id="model-1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</p>
</div>
```

*/
.new-zanata .modal {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  overflow: hidden;
  margin: 0 auto;
  padding: 0.75em;
  width: 100%;
  height: 100%;
  background-color: rgba(247, 247, 247, 0.9);
  -moz-perspective: 75em;
  -webkit-perspective: 75em;
  perspective: 75em;
  -webkit-overflow-scrolling: touch;
}
.new-zanata .modal.is-active {
  visibility: visible;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.new-zanata .modal__dialog {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0 auto;
  max-height: 100%;
  width: 100%;
  -moz-transform: translateY(50%);
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.new-zanata .modal.is-active .modal__dialog {
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.new-zanata .modal__header {
  background-color: #fff;
  border-bottom: 1px solid rgba(32, 113, 138, 0.15);
  height: 3em;
}
.new-zanata .modal__title {
  margin: 0;
  font-size: 1.25em;
  line-height: 1.2em;
  padding: 0.6em 1.8em 0.6em 1.2em;
}
.new-zanata .modal__close {
  position: absolute;
  height: 3em;
  width: 3em;
  top: 0;
  right: 0;
  text-align: center !important;
  border-left: 1px solid rgba(32, 113, 138, 0.15);
  color: rgba(32, 113, 138, 0.3);
}
.new-zanata .modal__close:hover {
  background-color: rgba(32, 113, 138, 0.05);
  border-left: 1px solid rgba(32, 113, 138, 0.15);
}
.new-zanata .modal__close:active {
  background-color: rgba(32, 113, 138, 0.1);
  border-left: 1px solid rgba(32, 113, 138, 0.15);
}
.new-zanata .modal__content {
  overflow: auto;
  overflow-x: hidden;
  max-height: 100%;
  margin-bottom: 3.375em;
}
.new-zanata .modal__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.375em;
  border-top: 1px solid rgba(32, 113, 138, 0.15);
}
.new-zanata .is-modal {
  overflow: hidden;
  height: 100%;
}

.new-zanata .stats, .new-zanata .stats--mini, .new-zanata .stats--small, .new-zanata .stats--large {
  color: #20718A;
  font-size: 0.875em;
  line-height: 1.71429em;
}
.new-zanata .stats--mini {
  font-size: 0.75em;
  line-height: 2em;
}
.new-zanata .stats--mini .stats__figure {
  font-size: 1.75em;
  padding-top: .1em;
}
.new-zanata .stats--mini .stats__unit {
  margin-top: .45em;
}
.new-zanata .stats--small {
  font-size: 0.75em;
  line-height: 2em;
}
.new-zanata .stats--large {
  font-size: 1.0625em;
  line-height: 1.41176em;
}
@media (min-width: 46.25em) {
  .new-zanata .stats--large {
    font-size: 1.3125em;
    line-height: 1.71429em;
  }
}
.new-zanata .stats__figure {
  font-size: 2.625em;
  display: block;
  font-weight: 300;
  line-height: .7em;
  white-space: nowrap;
}
.new-zanata .stats__unit {
  font-size: 1.125em;
  display: block;
  margin-top: .15em;
  white-space: nowrap;
  font-weight: 300;
  line-height: 1em;
}

/*

### Panels

```example
<div class="g">
  <div class="g__item w--1-2-h l--push-v-1">
    <div class="panel">
      <div class="tabs--accent">
        <nav class="tabs__nav panel__header">
          <ul>
            <li>
              <a href="#" class="is-active"><i  class="i i--infinity"></i><span class="is-invisible">All</span></a>
            </li>
            <li>
              <a href="#"><i  class="i i--pencil"></i><span class="is-invisible">Maintainer</span></a>
            </li>
            <li>
              <a href="#"><i  class="i i--network"></i><span class="is-invisible">Translator</span></a>
            </li>
            <li>
              <a href="#"><i  class="i i--eye"></i><span class="is-invisible">Reviewer</span></a>
            </li>
            <li>
              <a href="#"><i  class="i i--star"></i><span class="is-invisible">Starred</span></a>
            </li>
            <li class="tab__end">
              <a href="#"><i  class="i i--plus i i--large"></i><span class="is-invisible">New Project</span></a>
            </li>
          </ul>
        </nav>
        <div class="tabs__content">
          <header class="l--pad-all-half panel__sub-header">
            <div class="g--tight">
              <div class="g__item w--6-10 w--6-10-s">
                <h2 class="delta heading--secondary">All Projects</h2>
              </div>
              <div class="g__item w--4-10 w--4-10-s txt--align-right txt--s-align-right">
                <span class="txt--meta">5 of 12 <i  class="i i--clipboard"></i></span>
                <div class="dropdown dropdown--inline dropdown--right">
                  <div class="dropdown__toggle" href="#">
                    <i  class="i i--clock"></i><span class="is-invisible">Recent</span>
                    <i class="i i--arrow-down dropdown__toggle__icon"></i>
                  </div>
                  <ul class="dropdown__content">
                    <li class="dropdown__header">Sort by:</li>
                    <li><a href="#">Recent <i  class="i i--clock"></i></a></li>
                    <li><a href="#">Alphabetically <i  class="i i--clock"></i></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </header>
          <ul class="list--no-bullets">
            <li class="bg--faint l--pad-top-half bg--highest--hover progress-bar__expander dropdown__container">
              <div class="g--tight l--pad-h-half">
                <div class="g__item w--3-4 w--3-4-s">
                  <h3 class="epsilon"><a href="#">Zanata</a></h3>
                </div>
                <div class="g__item w--1-4 w--1-4-s txt--align-right txt--s-align-right">
                  <ul class=" list--horizontal">
                    <li>
                      <span class="txt--meta"><i  class="i i--network"></i><span class="is-invisible">Translator</span></span>
                    </li>
                    <li>
                      <span class="txt--meta"><i  class="i i--pencil"></i><span class="is-invisible">Maintainer</span></span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="l--pad-h-half l--pad-bottom-half">
                <div class="dropdown">
                  <div class="dropdown__toggle" href="#">
                    <i class="i i--arrow-down dropdown__toggle__icon"></i>
                    <ul class="dropdown__toggle__content list--horizontal ">
                      <li>
                        <a href="new-page.html" title="Version 3.0"><i  class="i i--star-2"></i><span class="is-invisible">Version</span> 3.0</a>
                      </li>
                      <li>
                        <a href="#" title="43 Documents"><i  class="i i--document-alt-fill"></i><span class="is-invisible">Documents</span> 43</a>
                      </li>
                      <li>
                        <a href="#" title="16 Languages"><i  class="i i--globe"></i><span class="is-invisible">Languages</span> 16</a>
                      </li>
                      <li>
                        <a href="#" title="Go to Japanese translation">JP</a>
                      </li>
                      <li class="l--float-right">
                        <span class="txt--state-success">73%</span>
                      </li>
                    </ul>
                  </div>
                  <ul class="dropdown__content">
                    <li>
                      <ul class="list--horizontal">
                        <li>
                          <a href="#" title="Version"><i  class="i i--star-2"></i><span class="is-invisible">Version</span> 2.6</a>
                        </li>
                        <li>
                          <a href="#" title="Documents"><i  class="i i--document-alt-fill"></i><span class="is-invisible">Documents</span> 35</a>
                        </li>
                        <li>
                          <a href="#" title="Languages"><i  class="i i--globe"></i><span class="is-invisible">Languages</span> 13</a>
                        </li>
                      </ul>
                    </li>
                    <li class="dropdown__divider"></li>
                    <li>
                      <span class="txt--meta">Last updated 2 days ago</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="progress-bar">
                <span class="progress-bar__translated" title="73% Translated" style="width: 73%;">
                  <span class="is-invisible">Translated</span>
                </span>
                <span class="progress-bar__fuzzy" title="8% Fuzzy" style="width: 8%; margin-left: 73%;">
                  <span class="is-invisible">Fuzzy</span>
                </span>
                <span class="progress-bar__rejected" title="3% Rejected" style="width: 3%; margin-left: 81%;">
                  <span class="is-invisible">Rejected</span>
                </span>
                <span class="progress-bar__approved" title="52% Approved" style="width: 52%;">
                  <span class="is-invisible">Approved</span>
                </span>
              </div>
            </li>
            <li class="bg--faint l--pad-top-half bg--highest--hover progress-bar__expander dropdown__container">
              <div class="g--tight l--pad-h-half">
                <div class="g__item w--3-4 w--3-4-s">
                  <h3 class="epsilon"><a href="#">Zanata</a></h3>
                </div>
                <div class="g__item w--1-4 w--1-4-s txt--align-right txt--s-align-right">
                  <ul class=" list--horizontal">
                    <li>
                      <span class="txt--meta"><i  class="i i--network"></i><span class="is-invisible">Translator</span></span>
                    </li>
                    <li>
                      <span class="txt--meta"><i  class="i i--pencil"></i><span class="is-invisible">Maintainer</span></span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="l--pad-h-half l--pad-bottom-half">
                <div class="dropdown">
                  <div class="dropdown__toggle" href="#">
                    <i class="i i--arrow-down dropdown__toggle__icon"></i>
                    <ul class="dropdown__toggle__content list--horizontal ">
                      <li>
                        <a href="new-page.html" title="Version 3.0"><i  class="i i--star-2"></i><span class="is-invisible">Version</span> 3.0</a>
                      </li>
                      <li>
                        <a href="#" title="43 Documents"><i  class="i i--document-alt-fill"></i><span class="is-invisible">Documents</span> 43</a>
                      </li>
                      <li>
                        <a href="#" title="16 Languages"><i  class="i i--globe"></i><span class="is-invisible">Languages</span> 16</a>
                      </li>
                      <li>
                        <a href="#" title="Go to Japanese translation">JP</a>
                      </li>
                      <li class="l--float-right">
                        <span class="txt--state-success">73%</span>
                      </li>
                    </ul>
                  </div>
                  <ul class="dropdown__content">
                    <li>
                      <ul class="list--horizontal">
                        <li>
                          <a href="#" title="Version"><i  class="i i--star-2"></i><span class="is-invisible">Version</span> 2.6</a>
                        </li>
                        <li>
                          <a href="#" title="Documents"><i  class="i i--document-alt-fill"></i><span class="is-invisible">Documents</span> 35</a>
                        </li>
                        <li>
                          <a href="#" title="Languages"><i  class="i i--globe"></i><span class="is-invisible">Languages</span> 13</a>
                        </li>
                      </ul>
                    </li>
                    <li class="dropdown__divider"></li>
                    <li>
                      <span class="txt--meta">Last updated 2 days ago</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="progress-bar">
                <span class="progress-bar__translated" title="73% Translated" style="width: 73%;">
                  <span class="is-invisible">Translated</span>
                </span>
                <span class="progress-bar__fuzzy" title="8% Fuzzy" style="width: 8%; margin-left: 73%;">
                  <span class="is-invisible">Fuzzy</span>
                </span>
                <span class="progress-bar__rejected" title="3% Rejected" style="width: 3%; margin-left: 81%;">
                  <span class="is-invisible">Rejected</span>
                </span>
                <span class="progress-bar__approved" title="52% Approved" style="width: 52%;">
                  <span class="is-invisible">Approved</span>
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
```

*/
.new-zanata .panel {
  position: relative;
}
.new-zanata .panel__header {
  border-width: 0 0 2px 0;
  width: 100%;
  position: relative;
  max-height: 3.075em;
}
.new-zanata .panel__header__button {
  margin-top: 0.75em;
  margin-right: 0.375em;
  margin-left: 0.375em;
  padding-right: 0.42857em;
  padding-left: 0.42857em;
  font-size: 0.875em;
  line-height: 1.5em;
}
.new-zanata .panel__sub-header {
  border-width: 0 0 2px 0;
}
.new-zanata .panel__heading {
  font-size: 1em;
  line-height: 3em;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  padding: 0 0.75em;
  font-weight: 400;
  overflow: hidden;
  margin: 0;
}
@media (min-width: 46.25em) {
  .new-zanata .panel__heading {
    font-size: 1.125em;
    line-height: 2.66667em;
    padding: 0 0.66667em;
  }
}
.new-zanata .panel__header__info {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  padding: 0.675em 0.75em;
  overflow: hidden;
  margin: 0;
}
.new-zanata .panel__heading--small {
  font-size: 0.875em;
  line-height: 1.71429em;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  padding: 0 0.85714em;
  font-weight: 400;
  overflow: hidden;
  margin: 0;
  text-transform: uppercase;
}
.new-zanata .panel__header__sort,
.new-zanata .panel__header__actions {
  float: right;
  white-space: nowrap;
}
.new-zanata .panel__header__back {
  height: 3em;
  width: 2.25em;
  text-align: center;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.75em 0;
}
.new-zanata .panel__header__back i:before {
  height: 3em;
}
.new-zanata .panel__header__back + .panel__heading {
  padding-left: 2.25em;
}
@media (min-width: 0) {
  .new-zanata .panel__header__back + .panel__heading {
    padding-left: 2em;
  }
}
@media (min-width: 46.25em) {
  .new-zanata .panel__header__back {
    display: none;
  }
  .new-zanata .panel__header__back + .panel__heading {
    padding-left: 0.66667em;
  }
}
.new-zanata .panel__search {
  display: block;
}
.new-zanata .panel__search:before {
  left: 0.6375em;
  top: 0em;
  line-height: 1.5em;
}
.new-zanata .panel__search input {
  font-size: 0.875em;
  line-height: 1.37143em;
  padding: 0.21429em 3.42857em 0.21429em 2.35714em;
  height: 1.8em;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(32, 113, 138, 0.15);
  margin: 0;
}
.new-zanata .panel__search input:focus, .new-zanata .panel__search input:hover {
  border: none;
  border-bottom: 1px solid rgba(32, 113, 138, 0.15);
}
.new-zanata .panel__results {
  position: relative;
  padding: 0 0.375em 0 2.0625em;
}
.new-zanata .panel__results .textMeta {
  line-height: inherit;
}
.new-zanata .panel__results--bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid rgba(32, 113, 138, 0.15);
}
.new-zanata .panel__results__type {
  position: absolute;
  top: 0.42857em;
  left: 0.85714em;
  font-size: 0.875em;
  line-height: 1.71429em;
}
.new-zanata .panel__search__reset,
.new-zanata .panel__search__button {
  vertical-align: inherit;
}
.new-zanata .panel__search__button {
  margin-left: 0.21429em !important;
  font-weight: 400;
}
.new-zanata .panel__search__cancel {
  font-size: 0.875em;
  line-height: 1.71429em;
  position: absolute;
  top: 0;
  right: 0.85714em;
  font-weight: 400;
}
.new-zanata .panel__body {
  min-height: 16rem;
  max-height: 80vh;
  overflow: auto;
  overflow-x: hidden;
  margin-bottom: 0;
  -webkit-overflow-scrolling: touch;
}
.new-zanata .panel__pager {
  height: 1.5em;
  float: right;
}
.new-zanata .panel__pager li {
  vertical-align: top;
  margin: 0 0 0 -0.1875em;
}
.new-zanata .panel__pager__button {
  line-height: 1.5em;
  height: 1.5em;
  width: 1.5em;
  padding: 0;
  border: none;
  background-color: transparent;
  color: #03A6D7;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.new-zanata .panel__pager__button:hover, .new-zanata .panel__pager__button:focus, .new-zanata .panel__pager__button:active {
  color: #026c8c;
  background-color: #fff;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.new-zanata .panel__pager__button:active {
  color: #20718A;
}

.new-zanata .panels__container {
  position: relative;
  min-height: 18em;
}
.new-zanata .panels, .new-zanata .panels--2, .new-zanata .panels--3 {
  display: table;
  table-layout: fixed;
}
.new-zanata .panels--2 {
  position: relative;
  left: 0;
  width: 200%;
}
.new-zanata .panels--2 .panels__panel {
  width: 50%;
}
@media (max-width: 46.1875em) {
  .new-zanata .panels--2 .panels__panel:nth-child(2) {
    visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  .new-zanata .panels--2.panel__active-2 {
    -moz-transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  .new-zanata .panels--2.panel__active-2 .panels__panel:first-child {
    visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  .new-zanata .panels--2.panel__active-2 .panels__panel:nth-child(2) {
    visibility: visible;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
  }
}
@media (min-width: 46.25em) {
  .new-zanata .panels--2 {
    width: 100%;
  }
  .new-zanata .panels--2 .panels__panel:first-child {
    border-right: none;
  }
}
.new-zanata .panels--3 {
  width: 300%;
}
@media (min-width: 79.375em) {
  .new-zanata .panels--3 {
    width: 150%;
  }
}
.new-zanata .panels__panel {
  display: table-cell;
  position: relative;
}
.new-zanata .panels__panel__item.is-active {
  background-color: #fcfcfc;
}

.new-zanata .auto-complete {
  border-width: initial;
  border-style: initial;
  border-color: initial;
  display: initial;
  background-image: none;
  background-repeat: no-repeat;
  background-position: 0%;
  background-color: initial;
  font-size: inherit;
}
.new-zanata .auto-complete input {
  background-image: none;
}

/*

### Autocomplete

```example
<div class="autocomplete">
  <input type="text" class="autocomplete__input" placeholder="Search…">
  <ul class="autocomplete__results">
    <li class="autocomplete__result">Result 1</li>
    <li class="autocomplete__result">Result 2 <span class="txt--understated">Understated</span></li>
    <li class="autocomplete__result is-selected">Result 3 <span class="txt--understated">Understated</span></li>
    <li class="autocomplete__result">Result 4</li>
    <li class="autocomplete__result"><a href="#">Result 5</a></li>
    <li class="autocomplete__result">Result 6</li>
    <li class="autocomplete__result">Result 7</li>
    <li class="autocomplete__result">Result 8</li>
  </ul>
</div>
```

*/
.new-zanata .autocomplete {
  position: relative;
  z-index: 10;
}
.new-zanata .autocomplete__results {
  position: absolute;
  top: 100%;
  z-index: 200;
  overflow: auto;
  max-height: 13.5em;
  width: 100%;
  border-radius: 4px;
  -webkit-overflow-scrolling: touch;
}
.new-zanata .autocomplete__result {
  padding: 0.1875em 0.375em;
  cursor: pointer;
}
.new-zanata .autocomplete__result a {
  color: #444c54;
}
.new-zanata .autocomplete__result.is-selected {
  color: #fff;
  background-color: #03A6D7;
}
.new-zanata .autocomplete__result.is-selected a {
  color: #fff;
}
.new-zanata .autocomplete__result.is-selected .u-textUnderstated, .new-zanata .autocomplete__result.is-selected .i--understated:before {
  color: #d2e3e8;
}

/*

### Drag and drop

```example
<div class="drag-drop l--push-all-1">
  <p class="txt--lead l--push-bottom-0"><i class="i i--left i--document"></i>Drag and drop or <a href="#">browse files</a></p>
  <small class="txt--meta">Maximum file size is 5mb</small>
</div>
```

*/
.drag-drop {
  border: 2px dashed rgba(32, 113, 138, 0.15);
  padding: 1.5em;
  text-align: center;
  position: relative;
}
.drag-drop:after {
  font-size: 1.625em;
  line-height: 1.38462em;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.92308em;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #639cad;
  content: "Drop files";
  font-weight: 300;
  visibility: hidden;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.drag-drop.is-active {
  border-color: #20718A;
}
.drag-drop.is-active:after {
  visibility: visible;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

.new-zanata .edit-field {
  position: relative;
  border-top: 1px solid rgba(32, 113, 138, 0.15);
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.new-zanata .edit-field__underlay,
.new-zanata .edit-field__overlay {
  cursor: text;
  width: 100%;
  border: none;
  -webkit-appearance: none;
  overflow: hidden;
  border: none;
  min-height: 1.5em;
}
.new-zanata .edit-field__underlay {
  box-shadow: none;
  background-color: transparent;
  color: transparent;
  word-wrap: break-word;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.new-zanata .edit-field__underlay:focus {
  background-color: transparent;
}
.new-zanata .edit-field__overlay,
.new-zanata .edit-field__underlay,
.new-zanata .edit-field__readonly {
  font-family: "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  padding: 1.5em 0.75em;
  margin: 0;
  white-space: pre-wrap;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}
.new-zanata .edit-field__underlay {
  resize: none;
}
.new-zanata .edit-field__underlay:focus {
  box-shadow: none;
  border: none;
}
.new-zanata .edit-field__readonly pre,
.new-zanata .edit-field__readonly code,
.new-zanata .edit-field__overlay pre,
.new-zanata .edit-field__overlay code {
  font-weight: 400;
  font-family: "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  background-color: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  display: block;
}
.new-zanata .edit-field__readonly span,
.new-zanata .edit-field__overlay span {
  font-weight: 400 !important;
  font-style: normal !important;
}
.new-zanata .edit-field__readonly code {
  -moz-user-select: all;
  -ms-user-select: all;
  -webkit-user-select: all;
  user-select: all;
}
.new-zanata .edit-field__overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  height: 100%;
  width: 100%;
}
.new-zanata .edit-field__cursor {
  position: absolute;
  width: 2px;
  height: 1.35em;
  margin-left: -1px;
  background-color: #90b8c5;
}
.new-zanata .edit-field__cursor.is-blinking {
  -moz-animation: 1s blink step-end infinite;
  -webkit-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}
.new-zanata .edit-field__cursor-text {
  color: transparent;
}

.new-zanata .edit-item {
  position: relative;
  margin: 0;
  padding: 0;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.new-zanata .edit-item:hover {
  cursor: text;
}
.new-zanata .edit-item.is-focused {
  background-color: #fcfcfc;
}
.new-zanata .edit-item.is-unfocused {
  opacity: 0.6;
}
.new-zanata .edit-item.is-unfocused:hover {
  opacity: 0.8;
}
.new-zanata .edit-item__panel {
  list-style: none;
}
.new-zanata .edit-item__panel:hover {
  cursor: text;
}
@media (min-width: 46.25em) {
  .new-zanata .edit-item__panel {
    float: left;
    width: 50%;
  }
}
@media (min-width: 46.25em) {
  .new-zanata .edit-item__translation {
    float: right;
  }
}
.new-zanata .edit-item__status {
  background-color: #bcd4dc;
  text-indent: -9999px;
  height: 0.375em;
  width: 100%;
}
@media (min-width: 46.25em) {
  .new-zanata .edit-item__status {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -0.1875em;
    width: 0.375em;
    height: 100%;
  }
}
.new-zanata .edit-item__header,
.new-zanata .edit-item__footer {
  position: absolute;
  z-index: 2;
  padding-right: 0.75em;
  padding-left: 0.75em;
  border-top: 1px solid rgba(32, 113, 138, 0.15);
  border-bottom: 1px solid rgba(32, 113, 138, 0.15);
  background-color: #fff;
  height: 1.5em;
  width: 50%;
}
.new-zanata .edit-item__header:hover,
.new-zanata .edit-item__footer:hover {
  cursor: default;
}
.new-zanata .edit-item__header {
  top: -0.75em;
}
.new-zanata .edit-item__footer {
  bottom: -0.75em;
}
.new-zanata .edit-item__heading {
  font-size: 0.875em;
  line-height: 1.57143em;
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
  display: inline-block;
  vertical-align: top;
}
.new-zanata .edit-item--translated .edit-item__status {
  background-color: #5CCA7B;
}
.new-zanata .edit-item--unsure .edit-item__status {
  background-color: #E9DF1B;
}
.new-zanata .edit-item--highlight .edit-item__status {
  background-color: #03A6D7;
}
.new-zanata .edit-item--danger .edit-item__status {
  background-color: #FF3B3D;
}
.new-zanata .edit-item--warning .edit-item__status {
  background-color: #FFA800;
}
.new-zanata .edit-item__source--vertical {
  position: absolute;
  bottom: 100%;
  right: 0;
  z-index: 2;
  float: none;
  margin-bottom: 0.75em;
  width: 50%;
  background-color: #fcfcfc;
}
.new-zanata .edit-item__source--vertical .edit-item__header {
  width: 100%;
}

.new-zanata .toolbar__button,
.new-zanata .toolbar__button:hover,
.new-zanata .toolbar__button:focus,
.new-zanata .toolbar__button:active,
.new-zanata .toolbar__button.is-active {
  box-shadow: none;
  position: relative;
  margin-top: -1px;
  padding: 0 0.42857em;
  height: 1.71429em;
  border: none;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  background-clip: padding-box;
  color: #03A6D7;
  vertical-align: top;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.71429em;
}
.new-zanata .toolbar__button:hover {
  background-color: #fafafa;
}
.new-zanata .toolbar__button.is-active {
  background-color: #fcfcfc;
  border-left-color: rgba(32, 113, 138, 0.15);
  border-right-color: rgba(32, 113, 138, 0.15);
}
.new-zanata .toolbar__button--inline,
.new-zanata .toolbar__button__toggle {
  margin-left: -0.375em;
}
.new-zanata .toolbar__button__toggle.is-active {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.new-zanata .toolbar__button--top.is-active {
  border-top-color: #fcfcfc;
}
.new-zanata .toolbar__button--bottom.is-active {
  border-bottom-color: #fcfcfc;
}
.new-zanata .toolbar__button--success {
  background-color: #57c075;
  color: #f2f2f2;
}
.new-zanata .toolbar__button--success:hover, .new-zanata .toolbar__button--success:focus {
  background-color: #5CCA7B;
  color: #fff;
}
.new-zanata .toolbar__button--success:active, .new-zanata .toolbar__button--success.is-active {
  background-color: #4aa262;
}

/*

### Rich Faces Components

#### RF - Autocomplete

```example
<div id="settings-projects-form:newVersionField">
  <div>
    <span class="rf-au auto-complete" id="settings-projects-form:newVersionField:newVersion">
      <input id="settings-projects-form:newVersionField:newVersionValue" name="settings-projects-form:newVersionField:newVersionValue" type="hidden" value="tes">
      <span>
        <input autocomplete="off" class="rf-au-fnt rf-au-inp " id="settings-projects-form:newVersionField:newVersionInput" name="settings-projects-form:newVersionField:newVersionInput" type="text" value="test-project 1.0"></span>
    </span>
  </div>
</div>

<div class="rf-au-lst-cord" id="settings-projects-form:newVersionField:newVersionList" style="left: 13px; top: 74px; display: block;">
  <div class="rf-au-shdw">
    <div class="rf-au-shdw-t"></div>
    <div class="rf-au-shdw-l"></div>
    <div class="rf-au-shdw-r"></div>
    <div class="rf-au-shdw-b"></div>
    <div class="rf-au-lst-dcrtn auto-complete-list">
      <div class="rf-au-lst-scrl">
        <ul id="settings-projects-form:newVersionField:newVersionItems" class="rf-au-lst-ul">
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp rf-au-itm-sel rf-au-opt-sel"><a href="#">Test Project</a> (ignore)<span class="txt--understated l--push-left-quarter">1.0</span></li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">Test Project (ignore)<span class="txt--understated l--push-left-quarter">1.1</span></li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">JBoss EAP - Release Notes <span class="txt--meta">5.1.0</span></li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">JBoss EAP - Release Notes - 6.1.0</li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">JBoss EAP - Release Notes - 6.1.1</li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">ZTESTING - Python Test Project (ignore) - 1.0</li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">ZTESTING - Python Test Project (ignore) - 1.2</li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">JBoss EBP - BRMS Release Notes - 5.2.0</li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">JBoss EBP - BRMS Release Notes - 5.3</li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">JBoss SOA - Release Notes - 4.3.5</li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">JBoss SOA - Release Notes - 6.1.0</li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">JBoss AS Console - test</li>
          <li class="rf-au-itm rf-au-opt rf-au-fnt rf-au-inp">JBoss AS Console - another_test</li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

*/
.new-zanata .rf-au-fnt {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}
.new-zanata .rf-au-shdw {
  border: none;
  padding: 0;
  top: 0;
  left: 0;
}
.new-zanata .rf-au-shdw-t, .new-zanata .rf-au-shdw-l, .new-zanata .rf-au-shdw-r, .new-zanata .rf-au-shdw-b {
  background-image: none;
  background-position: 0%;
  width: 0;
  top: 0;
  bottom: 0;
  left: 0;
}
.new-zanata .rf-au-lst-scrl {
  width: auto;
}
.new-zanata .rf-au-itm {
  font-size: 0.875em;
  line-height: 1.71429em;
  padding: 0.21429em 1.71429em 0.21429em 0.42857em;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  cursor: pointer;
}
.new-zanata .rf-au-itm-sel {
  border-style: none;
  background-color: #03A6D7 !important;
  color: #fff;
}
.new-zanata .rf-au-itm-sel a {
  color: #f2f2f2;
}
.new-zanata .rf-au-itm-sel .textMeta,
.new-zanata .rf-au-itm-sel .u-textUnderstated,
.new-zanata .rf-au-itm-sel .i--understated:before {
  color: #bcd4dc;
}
.new-zanata .rf-au-lst-scrl {
  max-height: 9.75em;
  min-height: 1.5em;
  overflow: auto;
}

/*

### Header

#### Site Logo

```

<header role="banner" class="accent__pop-more--large header">
  <div class="l__wrapper">
    <h1 class="gamma text--align-center heading--sub"><a href="/"><img src="../logo.svg"> Zanata</a></h1>
  </div>
</header>

```

*/
.new-zanata .header {
  position: relative;
  height: 3em;
  z-index: 1000;
  background-color: #fff;
  border-bottom: 2px solid rgba(32, 113, 138, 0.15);
}
.new-zanata .header:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 3em;
  background-color: #fff;
  border-bottom: 2px solid rgba(32, 113, 138, 0.15);
  content: "";
}
@media (max-width: 58.0625em) {
  .new-zanata .header {
    text-align: center;
  }
}
.new-zanata .header__title {
  font-size: 1.75em;
  line-height: 1.71429em;
  position: relative;
  z-index: 1001;
  margin: 0.21429em 0;
  padding: 0 0 0;
  font-weight: 400;
  display: inline-block;
  text-align: center;
  height: 1.28571em;
  width: 4.60714em;
  background: transparent url("../img/logo/logo-text.svg") 1.39286em center no-repeat;
  background-size: 3.21429em;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.new-zanata .header__title a {
  display: block;
}
@media (min-width: 58.125em) {
  .new-zanata .header__title {
    margin-left: 0.85714em;
    float: left;
  }
}
@media (min-width: 96.25em) {
  .new-zanata .header__title {
    margin-left: 1.71429em;
  }
}
.new-zanata .header__site-logo {
  height: 1.28571em;
  width: 1.28571em;
  margin-bottom: -0.21429em;
  position: absolute;
  top: 0;
  left: 0;
}
.new-zanata .header__site-logo.header--loading {
  -moz-animation-name: rotate;
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -moz-animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
.new-zanata .header__menu,
.new-zanata .header__main-nav {
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
  min-height: 3em;
}
@media (max-width: 58.0625em) {
  .new-zanata .header__menu,
  .new-zanata .header__main-nav {
    position: absolute;
    left: 0;
    top: 0;
  }
}
@media (min-width: 46.25em) and (max-width: 58.0625em) {
  .new-zanata .header__menu,
  .new-zanata .header__main-nav {
    left: 1.5em;
  }
}
@media (min-width: 58.125em) {
  .new-zanata .header__menu,
  .new-zanata .header__main-nav {
    margin-left: 1.125em;
    z-index: 1001;
  }
}
@media (max-width: 58.0625em) {
  .new-zanata .header__main-nav__group {
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    z-index: 0;
    visibility: hidden;
    margin-top: -3em;
    padding-top: 3em;
    min-width: 20em;
    border-right: 1px solid rgba(32, 113, 138, 0.15);
    border-bottom: 2px solid rgba(32, 113, 138, 0.15);
    background-color: #fafafa;
  }
  .csstransforms3d .new-zanata .header__main-nav__group {
    -moz-transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
    -o-transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
    -webkit-transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
    transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    bottom: auto;
    top: 100%;
  }
}
@media (min-width: 46.25em) and (max-width: 58.0625em) {
  .new-zanata .header__main-nav__group {
    border-left: 1px solid rgba(32, 113, 138, 0.15);
  }
}
.new-zanata .header__main-nav__toggle {
  font-size: 1.25em;
  line-height: 1.2em;
  border-right: 1px solid transparent;
  border-bottom: 2px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 2.4em;
  height: 2.4em;
  text-align: center;
  padding: 0.45em 0;
}
.new-zanata .header__main-nav__toggle:hover, .new-zanata .header__main-nav__toggle:focus {
  background-color: #fafafa;
  border-bottom: 2px solid rgba(32, 113, 138, 0.15);
}
@media (min-width: 58.125em) {
  .new-zanata .header__main-nav__toggle {
    display: none;
  }
}
@media (min-width: 46.25em) and (max-width: 58.0625em) {
  .new-zanata .header__main-nav__toggle {
    border-left: 1px solid transparent;
  }
}
.new-zanata .header__search {
  -moz-transition: width 0.3s cubic-bezier(0.26, 0.47, 0.36, 0.94);
  -o-transition: width 0.3s cubic-bezier(0.26, 0.47, 0.36, 0.94);
  -webkit-transition: width 0.3s cubic-bezier(0.26, 0.47, 0.36, 0.94);
  transition: width 0.3s cubic-bezier(0.26, 0.47, 0.36, 0.94);
  margin: 0;
  height: 3.375em;
  padding: 0.75em 0.75em 0.375em;
}
@media (max-width: 58.0625em) {
  .new-zanata .header__search {
    width: 100%;
  }
  .new-zanata .header__search .header__search__submit {
    right: 1.125em;
  }
  .new-zanata .header__search:before {
    left: 1.125em;
  }
}
@media (min-width: 58.125em) {
  .new-zanata .header__search {
    height: 3em;
    padding: 0.5625em 0;
    position: absolute;
    width: 50%;
    left: 0;
    z-index: 1050;
  }
  .new-zanata .header__search.is-active {
    width: 150%;
  }
}
.new-zanata .header__main-nav__menu a:not(.button--full) {
  padding: 0.75em;
  height: 3em;
  display: block;
}
.new-zanata .header__main-nav__menu a:not(.button--full):hover {
  background-color: #03A6D7;
  color: #fff;
}
@media (min-width: 58.125em) {
  .new-zanata .header__main-nav__menu {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    position: relative;
    left: 50%;
    margin-left: 0.375em;
  }
  .new-zanata .header__main-nav__menu li,
  .new-zanata .header__main-nav__menu a {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
  }
  .new-zanata .header__main-nav__menu li {
    display: inline-block;
    margin: 0 -.3em 0 0;
  }
  .new-zanata .header__main-nav__menu a:not(.button--full) {
    border-bottom: 2px solid transparent;
    padding: 0.75em 0.375em;
  }
  .new-zanata .header__main-nav__menu a:not(.button--full):hover, .new-zanata .header__main-nav__menu a:not(.button--full):focus {
    border-bottom-color: rgba(32, 113, 138, 0.15);
    background-color: #fafafa;
    color: #026c8c;
  }
  .new-zanata .header__main-nav__menu a:not(.button--full):active {
    background-color: #fff;
    border-bottom-color: rgba(32, 113, 138, 0.15);
  }
}
@media (min-width: 79.375em) {
  .new-zanata .header__main-nav__menu {
    margin-left: 0.75em;
  }
  .new-zanata .header__main-nav__menu a:not(.button--full) {
    padding: 0.75em;
  }
}
@media (max-width: 58.0625em) {
  .new-zanata .header__main-nav.is-hover .header__main-nav__toggle,
  .new-zanata .header__main-nav.is-active .header__main-nav__toggle {
    border-right: 1px solid rgba(32, 113, 138, 0.15);
    background-color: #fafafa;
    border-bottom: 2px solid transparent;
  }
  .new-zanata .header__main-nav.is-hover .header__main-nav__toggle:before,
  .new-zanata .header__main-nav.is-active .header__main-nav__toggle:before {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .new-zanata .header__main-nav.is-hover .header__main-nav__group,
  .new-zanata .header__main-nav.is-active .header__main-nav__group {
    visibility: visible;
  }
  .no-csstransforms3d .new-zanata .header__main-nav.is-hover .header__main-nav__group, .no-csstransforms3d
  .new-zanata .header__main-nav.is-active .header__main-nav__group {
    top: 100%;
    bottom: auto;
  }
  .csstransforms3d .new-zanata .header__main-nav.is-hover .header__main-nav__group, .csstransforms3d
  .new-zanata .header__main-nav.is-active .header__main-nav__group {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@media (min-width: 46.25em) and (max-width: 58.0625em) {
  .new-zanata .header__main-nav.is-hover .header__main-nav__toggle,
  .new-zanata .header__main-nav.is-active .header__main-nav__toggle {
    border-left: 1px solid rgba(32, 113, 138, 0.15);
  }
}
.new-zanata .header__login {
  z-index: 1001;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.4875em 0.375em 0.4875em 0;
}
@media (min-width: 58.125em) {
  .new-zanata .header__login {
    padding: 0.4875em 1.5em 0.4875em 0;
  }
}
@media (min-width: 96.25em) {
  .new-zanata .header__login {
    padding: 0.4875em 3em 0.4875em 0;
  }
}
.new-zanata .header__avatar {
  width: 1.875em;
  height: 1.875em;
}
.new-zanata .header__logo-only {
  text-align: center;
}
.new-zanata .header__logo-only .header__site-logo,
.new-zanata .header__logo-only img {
  position: static;
  top: auto;
  left: auto;
  margin: 0 auto;
  width: 7.5em;
  height: 7.5em;
}
@media (min-width: 46.25em) {
  .new-zanata .header__logo-only .header__site-logo,
  .new-zanata .header__logo-only img {
    width: 9em;
    height: 9em;
  }
}
@media (min-width: 79.375em) {
  .new-zanata .header__logo-only .header__site-logo,
  .new-zanata .header__logo-only img {
    width: 10.5em;
    height: 10.5em;
  }
}
.new-zanata .header__user-nav {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}
@media (min-width: 46.25em) {
  .new-zanata .header__user-nav {
    right: 1.5em;
  }
}
@media (min-width: 96.25em) {
  .new-zanata .header__user-nav {
    right: 3em;
  }
}
.new-zanata .header__user-nav__toggle {
  position: relative;
  display: block;
  right: 0;
  height: 3em;
  padding: 0.5625em 0.75em 0.5625em 1.5em;
  z-index: 1001;
  border-left: 1px solid transparent;
  border-bottom: 2px solid transparent;
}
.new-zanata .header__user-nav__toggle:hover, .new-zanata .header__user-nav__toggle:focus {
  background-color: #fafafa;
  border-bottom: 2px solid rgba(32, 113, 138, 0.15);
}
.new-zanata .header__user-nav__toggle:before {
  position: absolute;
  left: 0.15em;
  line-height: 1.5em;
}
@media (min-width: 46.25em) {
  .new-zanata .header__user-nav__toggle {
    border-right: 1px solid transparent;
  }
}
.new-zanata .header__user-nav__menu {
  visibility: hidden;
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  border-top: none;
  padding-top: 3em;
  margin-top: -3em;
}
.csstransforms3d .new-zanata .header__user-nav__menu {
  -moz-transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
  -o-transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
  -webkit-transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
  transition: cubic-bezier(0.55, -0.38, 0.22, 1.01) 0.25s;
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  bottom: auto;
  top: 100%;
}
.new-zanata .header__user-nav__menu li {
  padding: 0;
}
.new-zanata .header__user-nav__menu a {
  padding: 0.75em;
  display: block;
  min-width: 12.5em;
}
.new-zanata .header__user-nav__menu a:hover, .new-zanata .header__user-nav__menu a:focus {
  background-color: #03A6D7;
  color: #fff;
}
@media (max-width: 46.1875em) {
  .new-zanata .header__user-nav__menu {
    border-right: none;
  }
  .new-zanata .header__user-nav__menu a {
    min-width: 20em;
  }
}
.new-zanata .header__user-nav.is-hover .header__user-nav__toggle,
.new-zanata .header__user-nav.is-active .header__user-nav__toggle {
  border-left: 1px solid rgba(32, 113, 138, 0.15);
  background-color: #fafafa;
  border-bottom: 2px solid transparent;
}
.new-zanata .header__user-nav.is-hover .header__user-nav__toggle:before,
.new-zanata .header__user-nav.is-active .header__user-nav__toggle:before {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.new-zanata .header__user-nav.is-hover .header__user-nav__menu,
.new-zanata .header__user-nav.is-active .header__user-nav__menu {
  visibility: visible;
}
.no-csstransforms3d .new-zanata .header__user-nav.is-hover .header__user-nav__menu, .no-csstransforms3d
.new-zanata .header__user-nav.is-active .header__user-nav__menu {
  top: 100%;
  bottom: auto;
}
.csstransforms3d .new-zanata .header__user-nav.is-hover .header__user-nav__menu, .csstransforms3d
.new-zanata .header__user-nav.is-active .header__user-nav__menu {
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
@media (min-width: 46.25em) {
  .new-zanata .header__user-nav.is-hover .header__user-nav__toggle,
  .new-zanata .header__user-nav.is-active .header__user-nav__toggle {
    border-right: 1px solid rgba(32, 113, 138, 0.15);
  }
}