}

  .sorting_asc:after,

  .sorting_desc:after,

  .sorting:after {

    content: "" !important;

  }

}

/* language bars (summary page) */

#lang_stats {

  .progress-bar {

    min-width: 15px;

    border-top-right-radius: 8px;

    border-bottom-right-radius: 8px;

  }

  td {

    padding: 1px 0 !important;

  }

}

/* use pointer cursor for expand_commit */

.expand_commit .icon-align-left {

  cursor: pointer;

  color: #999;

}

/* don't break author, date and comment cells into multiple lines in changeset table */

table.changesets {

  .author,

  .date,

  .comments {

    white-space: nowrap;

  }

}

/* textareas should be at least 100px high and 400px wide */

textarea.form-control {

  min-height: 100px;

  min-width: 400px;

}

/* add some space between the code-browser icons and the file names */

.browser-dir > i[class^='icon-'],

.submodule-dir > i[class^='icon-'],

.browser-file > i[class^='icon-'] {

  padding-right: 0.3em;

}

.dt_repo_pending {

  opacity: 0.5;

}

div.panel-primary {

  border: none;

}

/* no extra vertical margin */

#content div.panel ul.pagination {

  margin: 0;

}

/* remove margin below footer */

.navbar.footer {

  margin-bottom: 0;

}

.user-menu {

  padding: 0 !important;

}

#quick_login {

  width: 360px;

  margin-top: 15px;

  min-height: 110px;

}

#quick_login input#username,

#quick_login input#password {

  display: block;

  margin: 5px 0 10px;

}

#quick_login .password_forgotten a,

#quick_login .register a {

  padding: 0 !important;

  line-height: 25px !important;

  float: left;

  clear: both;

}

#quick_login .submit {

  float: right;

}

#quick_login .submit input#sign_in {

  margin-top: 5px;

}

#quick_login > .pull-left {

  width: 170px;

}

#quick_login > .pull-right {

#repo_size {

  display: block;

  margin-top: 4px;

  color: #666;

  float: right;

}

.currently_following {

  padding-left: 10px;

  padding-bottom: 5px;

}

#switch_repos {

  position: absolute;

  height: 25px;

  z-index: 1;

}

#switch_repos select {

  min-width: 150px;

  max-height: 250px;

  z-index: 1;

}

.breadcrumbs {

  border: medium none;

  color: #FFF;

  font-weight: 700;

  font-size: 14px;

}

table#permissions_manage span.private_repo_msg {

  font-size: 0.8em;

  opacity: 0.6;

}

table#permissions_manage td.private_repo_msg {

  font-size: 0.8em;

}

table#permissions_manage tr#add_perm_input td {

  vertical-align: middle;

}

div.gravatar {

  float: left;

  background-color: #FFF;

  margin-right: 0.7em;

  padding: 1px 1px 1px 1px;

  line-height: 0;

  border-radius: 3px;

}

div.gravatar img {

  border-radius: 2px;

}

.panel-body.settings .nav-pills > :not(.active) > a {

  color: inherit;

}

.panel-body.no-padding {

  padding: 0;

}

.panel-body ~ .panel-body {

  padding-top: 0;

}

.panel-body.no-padding ~ .panel-body {

  padding-top: 15px;

}

.panel-body > :last-child {

  margin-bottom: 0;

}

.panel-body.settings .text-muted {

  margin: 5px 0;

}

ins,

div.options a:hover {

  text-decoration: none;

}

img,

nav.navbar #quick li a:hover span.normal,

#clone_url,

#clone_url_id {

  border: none;

}

img.icon,

.right .merge img {

  vertical-align: bottom;

}

#content div.panel div.panel-heading ul.links,

#content div.panel div.message div.dismiss {

  float: right;

  margin: 0;

  padding: 0;

}

nav.navbar #home,

#content div.panel ul.left,

#content div.panel ol.left,

div#commit_history,

div#legend_data,

div#legend_container,

div#legend_choices {

  float: left;

}

/* set size for statistics charts */

#commit_history {

  width: 450px;

  height: 300px;

}

#overview {

  clear: both;

  width: 450px;

  height: 100px;

}

#content #left #menu ul.closed,

#content #left #menu li ul.collapsed,

.yui-tt-shadow {

  display: none;

}

#content #left #menu ul.opened,

#content #left #menu li ul.expanded {

  display: block !important;

}

#content div.panel ol.lower-roman,

#content div.panel ol.upper-roman,

#content div.panel ol.lower-alpha,

#content div.panel ol.upper-alpha,

#content div.panel ol.decimal {

  margin: 10px 24px 10px 44px;

}

div.form div.form-group div.button input,

#content div.panel div.form div.buttons input,

div.form div.buttons input,

#content div.panel div.action div.button input {

  font-size: 11px;

  font-weight: 700;

  margin: 0;

}

div.form div.form-group div.highlight,

#content div.panel div.form div.buttons div.highlight {

  display: inline;

}

#content div.panel table td.user,

#content div.panel table td.address {

  width: 10%;

  text-align: center;

}

#content div.panel div.action div.button {

  text-align: right;

  margin: 6px 0 0;

  padding: 0;

}

#login,

#register {

  width: 520px;

  margin: 10% auto 0;

  padding: 0;

}

.ac .match {

  font-weight: 700;

  padding-top: 5px;

  padding-bottom: 5px;

}

.q_filter_box {

  border-radius: 4px;

  border: 0 none;

  margin-bottom: -4px;

  margin-top: -4px;

  padding-left: 3px;

}

#node_filter {

  border: 0px solid #545454;

  color: #AAAAAA;

  padding-left: 3px;

}

/** comment main **/

.comment .panel,

.comment-inline-form {

  max-width: 978px;

}

.comment .panel-body {

  background-color: #FAFAFA;

}

.comments-number {

  padding: 10px 0;

  color: #666;

}

.automatic-comment {

  font-style: italic;

}

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: 20px 0;

  }

}

.comment-preview.failed .user,

.comment-preview.failed .panel-body {

  color: #666;

}

.comment-preview .comment-submission-status {

  float: right;

}

.comment-preview .comment-submission-status .btn-group {

  margin-left: 10px;

}

.comment-preview.submitting .panel-body {

  background-image: linear-gradient(-45deg, #FAFAFA, #FAFAFA 25%, #FFF 25%, #FFF 50%, #FAFAFA 50%, #FAFAFA 75%, #FFF 75%, #FFF 100%);

  background-size: 20px 20px;

  animation: animated-comment-background 0.4s linear infinite;

}

/****

PULL REQUESTS

*****/

div.pr-details-title.closed {

  color: #555;

  background: #eee;

}

div.pr {

  margin: 0px 15px;

  padding: 4px 4px;

}

tr.pr-closed td {

  background-color: #eee !important;

  color: #555 !important;

}

span.pr-closed-tag {

  margin-bottom: 1px;

  margin-right: 1px;

  padding: 1px 3px;

  font-size: 10px;

  color: @kallithea-theme-main-color;

  white-space: nowrap;

  border-radius: 4px;

  border: 1px solid #d9e8f8;

  line-height: 1.5em;

}

#s2id_org_ref,

#s2id_other_ref,

#s2id_org_repo,

#s2id_other_repo {

  min-width: 150px;

  margin: 5px;

}

#pr-summary > .pr-not-edit {

  min-height: 50px !important;

}

/* make 'next iteration' changeset table smaller and scrollable */

#pr-summary #updaterevs {

  max-height: 200px;

  overflow-y: auto;

  overflow-x: hidden;

}

/****

  PERMS

*****/

.perm-gravatar-ac {

  vertical-align: middle;

  padding: 2px;

  width: 14px;

  height: 14px;

}

/* avoid gaps between the navbar and browser */

.navbar.mainmenu {

  border-top-left-radius: 0;

  border-top-right-radius: 0;

}

.navbar.footer {

  border-bottom-left-radius: 0;

  border-bottom-right-radius: 0;

}

/* show some context of link targets - but only works when the link target

   can be extended with any visual difference */

div.comment:target:before {

  display: block;

  height: 100px;

  margin: -100px 0 0;

  content: "";

}

div.comment:target > .panel {

  border: solid 2px #ee0 !important;

}

.lineno:target a {

  border: solid 2px #ee0 !important;

  margin: -2px;

}

.btn-image-diff-show,

.btn-image-diff-swap {

  margin: 5px;

}

.img-diff {

  max-width: 45%;

  height: auto;

  margin: 5px;

  /* http://lea.verou.me/demos/css3-patterns.html */

  background-image: linear-gradient(45deg, #888 25%, transparent 25%, transparent), linear-gradient(-45deg, #888 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #888 75%), linear-gradient(-45deg, transparent 75%, #888 75%);

  background-size: 10px 10px;

  background-color: #999;

}

.img-preview {

  max-width: 100%;

  height: auto;

  margin: 5px;

}

div.comment-prev-next-links div.prev-comment,

div.comment-prev-next-links div.next-comment {

  display: inline-block;

  min-width: 150px;

  margin: 3px 6px;

}

#comments-general-comments div.comment-prev-next-links div.prev-comment,

#comments-general-comments div.comment-prev-next-links div.next-comment {

  margin-left: 0;

}

/* changelog graph */

#graph_nodes,

#updaterevs-graph {

  .make-xs-column(1);

}

#graph_content,

#graph_content_pr,

#updaterevs-table {

  .make-xs-column(11);

}

/* repo table icons */

#repos_list_wrap_wrapper {

  /* make icon-folder and repotag the same width */

  .icon-folder:before {

    margin: 0; // default margin would otherwise add to the total width

    width: 24px;

    text-align: left;

  }

  .label-repo {

    display: inline-block;

    width: 24px;

  }

}

/* changelog table columns */

.table#changesets {

  table-layout: fixed;

  td {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    vertical-align: baseline;

  }

  .checkbox-column {

    width: 24px;

    /* the optional second checkbox will be inline-block but should wrap to a new line */

    white-space: normal;

  }

  .changeset-logical-index {

    color: @gray-light;

    font-style: italic;

    font-size: 85%;

    text-align: right;

    overflow: visible;

  }

  .changeset-logical-index,

  .expand_commit,

  .status {

    width: 28px;

  }

  .author {

    width: 200px;

    @media (max-width: @screen-sm-max) {

      width: 120px;

    }

    @media (max-width: @screen-xs-max) {

      width: 20px;

      /* keep gravatar but hide name on tiny screens to give important columns more room */

                        %if editable:

                        <td>

                            ${h.radio(name='updaterev', value='', checked=True)}

                        </td>

                        %endif

                        <td colspan="4"><span>${_("Current revision - no change")}</span></td>

                      %else:

                        %if editable:

                        <td>

                          ${h.radio(name='updaterev', value=cs.raw_id, style=None if cs.revision in c.avail_revs else 'visibility: hidden')}

                        </td>

                        %endif

                        <td><span data-toggle="tooltip" title="${h.age(cs.date)}">${cs.date}</span></td>

                        <td>${h.link_to(h.show_id(cs),h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id), class_='changeset_hash')}</td>

                        <td>

                          <div class="pull-right">

                            %for tag in cs.tags:

                              <span class="label label-tag" title="${_('Tag %s') % tag}">

                                ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}

                              </span>

                            %endfor

                          </div>

                          <div class="message">${h.urlify_text(cs.message, c.repo_name)}</div>

                        </td>

                      %endif

                    </tr>

                  %endfor

                </table>

              </div>

              <div class="alert alert-info">${_("Pull request iterations do not change content once created. Select a revision to create a new iteration.")}</div>

              %endif

              %if c.update_msg_other:

                <div class="alert alert-info">${c.update_msg_other}</div>

              %endif

            </div>

        </div>

        %if editable:

        <div class="form-group">

          <div class="buttons">

            ${h.submit('pr-form-save',_('Save Changes'),class_="btn btn-default btn-sm")}

            ${h.submit('pr-form-clone',_('Create New Iteration with Changes'),class_="btn btn-default btn-sm",disabled='disabled')}

            ${h.reset('pr-form-reset',_('Cancel Changes'),class_="btn btn-default btn-sm")}

          </div>

        </div>

        %endif

      </div>

    </div>

    ## REVIEWERS

        <h4 class="pr-details-title">${_('Reviewers')}</h4>

        <div id="reviewers">

          ## members goes here !

          <div>

            %for member,status in c.pull_request_reviewers:

              <input type="hidden" value="${member.user_id}" name="org_review_members" />

            %endfor

            <ul id="review_members" class="list-unstyled">

            %for member,status in c.pull_request_reviewers:

              ## WARNING: the HTML below is duplicate with

              ## kallithea/public/js/base.js

              ## If you change something here it should be reflected in the template too.

              <li id="reviewer_${member.user_id}">

                <span class="reviewers_member">

                  <input type="hidden" value="${member.user_id}" name="review_members" />

                  <span class="reviewer_status" data-toggle="tooltip" title="${h.changeset_status_lbl(status)}">

                      <i class="icon-circle changeset-status-${status}"></i>

                  </span>

                  ${h.gravatar(member.email, size=14)}

                  <span>

                    ${member.full_name_and_username}

                    %if c.pull_request.owner_id == member.user_id:

                      (${_('Owner')})

                    %endif

                  </span>

                  %if editable:

                  <a href="#" class="reviewer_member_remove" onclick="removeReviewMember(${member.user_id})" title="${_('Remove reviewer')}">

                      <i class="icon-minus-circled"></i>

                  </a>

                  %endif

                </span>

              </li>

            %endfor

            </ul>

          </div>

          %if editable:

          <div>

             ${h.text('user', class_='form-control',placeholder=_('Type name of reviewer to add'))}

          </div>

          %endif

        </div>

        %if not c.pull_request_reviewers:

        <h4>${_('Potential Reviewers')}</h4>

        <div>

          <div>

            ${_('Click to add the repository owner as reviewer:')}

          </div>