<div class="main flex">

  <h1>Normal Content<h1>

  <hr>


  <h2>Tabs</h2>
  <div class="tabs tabs--big">
    <div class="tab my-stats active">My Stats</div>
    <div class="tab my-groups">My Group</div>
    <div class="tab all-stats">All</div>
  </div>

  <hr>

  <h2>Avatars</h2>

  <div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>

  <p><code>.avatar</code></p>

  <div class="avatar size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>

  <p><code>.avatar.size-50</code></p>

  <div class="avatar size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>

  <p><code>.avatar.size-80</code></p>

  <h2>VIP Avatars</h2>

  <div class="avatar avatar--vip" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><%- @Icon('crown') %></div>

  <p><code>.avatar</code></p>

  <div class="avatar avatar--vip size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><%- @Icon('crown') %></div>

  <p><code>.avatar.size-50</code></p>

  <div class="avatar avatar--vip size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><%- @Icon('crown') %></div>

  <p><code>.avatar.size-80</code></p>


  <h2>Unique Avatars</h2>

  <p>
    Users and customers might not have a profile images because:
  </p>
  <ol>
    <li>They didn't upload one
    <li>They didn't login using a authentication provider like facebook, twitter or google where we get an avatar
    <li>They have no avatar associated with their email address (gravatar)
  </ol>
  <p>
    They will get a random avatar consisting of a blured version of the Zammad logo and their initials.
  </p>
  <p>
    The background is generated by using a <i>random numbers generator</i> (RNG) with the user-id as the <b>seed</b>. The RNG is then used to create the <code>x</code> and <code>y</code> position of the background. Since the user-id is unique and does not change it's guaranteed that the avatar background stays the same and this makes it possible to calculate the avatar on the client without having to store the coordinates on the server side.
  </p>

  <span class="user avatar" data-firstname="Hans" data-lastname="Huber" data-userid="5"></span>
  <span class="user avatar" data-firstname="Rafael" data-lastname="Schweizer" data-userid="6"></span>
  <span class="user avatar" data-firstname="Stefanie" data-lastname="Lingerl" data-userid="7"></span>
  <span class="user avatar" data-firstname="Igor" data-lastname="Kaufer" data-userid="8"></span>
  <span class="user avatar" data-firstname="Ina" data-lastname="Lingerl" data-userid="12"></span>
  <span class="size-50 user avatar" data-firstname="Andreas" data-lastname="Berger" data-userid="9"></span>
  <span class="size-50 user avatar" data-firstname="Luisa" data-lastname="Hofner" data-userid="10"></span>
  <span class="size-50 user avatar" data-firstname="Clara" data-lastname="Altman" data-userid="11"></span>
  <span class="size-80 user avatar" data-firstname="Christian" data-lastname="Jonga" data-userid="12"></span>
  <span class="size-80 user avatar" data-firstname="Rando" data-lastname="Bauer" data-userid="13"></span>
  <span class="size-80 user avatar" data-firstname="Korinna" data-lastname="Jung" data-userid="14"></span>

  <hr>

  <h2>Alerts</h2>

  <pre>&lt;div class=&quot;alert alert--info&quot; role=&quot;alert&quot;&gt;Account must be manually configured&lt;/div&gt;</pre>
  <div class="alert alert--info horizontal" role="alert">Account must be manually configured <code class="align-right">.alert--info</code></div>
  <div class="alert alert--success horizontal" role="alert">Connection established! <code class="align-right">.alert--success</code></div>
  <div class="alert alert--warning horizontal" role="alert">Delete Cookies? <code class="align-right">.alert--warning</code></div>
  <div class="alert alert--danger horizontal" role="alert">System Shutting Down! <code class="align-right">.alert--danger</code></div>

  <hr>

  <h2>User Selection</h2>

    <form>
      <div class="form-group">

          <label for="customer_id">Customer</label>

          <div class="dropdown js-recipientDropdown">

            <div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
              <input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organization/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
              <%- @Icon('arrow-down', 'dropdown-arrow') %>
            </div>

            <div class="dropdown-menu" aria-labelledby="customer_id">

              <ul class="recipientList" role="menu">
                <li class="recipientList-entry js-organization" data-organization-id="AlbrechtBertschlerGmbG">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('team', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Albrecht &amp; Bertschler GmbH
                    <span class="recipientList-detail">- 4 Personen</span>
                  </div>
                  <%- @Icon('arrow-right', 'recipientList-arrow') %>
                    <li class="recipientList-entry js-organization" data-organization-id="BENCHMARKhumanresources">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('organization', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    BENCHMARK human resources
                    <span class="recipientList-detail">- 2 Personen</span>
                  </div>
                  <%- @Icon('arrow-right', 'recipientList-arrow') %>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('user', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Belinda Matt
                    <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
                  </div>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('user', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Benjamin Wahlers
                    <span class="recipientList-detail">- Wahlers Würste GmbH</span>
                  </div>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('user', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Benjamin Weiß
                    <span class="recipientList-detail">- Zeughaus Werbeagentur GmbH</span>
                  </div>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('organization', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Benteler SGL Composite Technology GmbH
                    <span class="recipientList-detail"></span>
                  </div>

                <li class="recipientList-entry js-organization">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('team', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Support Team Berlin
                    <span class="recipientList-detail">- 5 Personen</span>
                  </div>
                  <%- @Icon('arrow-right', 'recipientList-arrow') %>

                <li class="recipientList-entry js-organization">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('organization', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Bernecker + Rainer Industrie-Elektronik Ges.m.b.H.
                    <span class="recipientList-detail">- 3 Personen</span>
                  </div>
                  <%- @Icon('arrow-right', 'recipientList-arrow') %>

                <li class="recipientList-entry js-organization">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('organization', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Bertsch Ecopower GmbH
                    <span class="recipientList-detail">- 1 Person</span>
                  </div>
                  <%- @Icon('arrow-right', 'recipientList-arrow') %>

                <li class="recipientList-entry recipientList--new u-clickable horizontal center">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('plus', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    <%- @T('Create new Customer') %>
                  </div>
              </ul>

              <ul class="recipientList-organizationMembers hide" id="AlbrechtBertschlerGmbG">
                <li class="recipientList-controls js-back">
                  <div class="btn btn--action btn--onDark">
                    <%- @Icon('arrow-left') %>
                    <span class="btn-label"><%- @T('Back') %></span>
                  </div>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('user', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Andreas Kramer
                    <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
                  </div>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('user', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Belinda Matt
                    <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
                  </div>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('user', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Damian Sprengler
                    <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
                  </div>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('user', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Katharina Nussman
                    <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
                  </div>
              </ul>

              <ul class="recipientList-organizationMembers hide" id="BENCHMARKhumanresources">
                <li class="recipientList-controls js-back">
                  <div class="btn btn--action btn--onDark">
                    <%- @Icon('arrow-left') %>
                    <span class="btn-label"><%- @T('Back') %></span>
                  </div>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('user', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Hubert Lang
                    <span class="recipientList-detail">- BENCHMARK human resources</span>
                  </div>

                <li class="recipientList-entry">
                  <div class="recipientList-iconSpacer">
                    <%- @Icon('user', 'recipientList-icon') %>
                  </div>
                  <div class="recipientList-name">
                    Mario Steibel
                    <span class="recipientList-detail">- BENCHMARK human resources</span>
                  </div>
              </ul>
            </div>
          </div>
      </div>
    <form>

  <hr>

  <h2>Headlines</h2>
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>

  <hr>

  <h2>Paragraph</h2>
  <p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
  </p>

  <p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
  </p>

  <p>
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
  </p>

  <hr>
  <h2>Unorderd list</h2>

  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
  </ul>

  <hr>

  <h2>Ordered list</h2>

  <ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
  </ol>

</div>