.bootstrap-tagsinput {
    display: block;
    width: 100%;
    line-height: 30px;
}

.label-info { font-size: 11pt; }


.ui-state-highlight {
  height: 100px;
  background-color: #ffa;
  border: 2px dashed #aa9;
}

.hover-swap-icon { display: inline-block; min-width: 20px; }
.hover-swap-icon:hover *:nth-child(1) { display: none; }
.hover-swap-icon:not(:hover) *:nth-child(2) { display: none; }

ul.nav-tabs { margin-left: 0; }
li.nav-tab { margin-bottom: -1px; }

.container.container.container.container { width: 1600px; max-width: 1600px; }


body.small-header header.rug-site-header.rug-site-header a { padding: 0 10px; }
body.small-header header.rug-site-header.rug-site-header span { padding: 0; }

body.small-header .rug-site-logo.rug-site-logo.rug-site-logo.rug-site-logo { width: 7.5rem; padding: 0.25rem 0; }

body.small-header header.rug-site-header.rug-site-header a { padding: 0 10px; }
body.small-header header.rug-site-header.rug-site-header span { padding: 0; }

body.small-header .rug-site-logo.rug-site-logo.rug-site-logo.rug-site-logo { width: 7.5rem; padding: 0.25rem 0; }

.hide-parent {
    top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background: rgba(0,0,0,0.4);
    position: absolute;
}

.export-file .hidden { display: none; }

.export-file {
  padding: 5px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin: 5px 0;
  position: relative;
}

.export-file:hover {
  background-color: #ddf5f9;
}

.export-file > span, .export-file > a { position: relative; padding-right: 200px; display: block; word-wrap: break-word; }

.export-file .created-date {
  position: absolute; right: 5px; top: 5px;
}

/* The spinner inside these buttons shows only while their request is in flight.
   It lives in the markup and is hidden here rather than being inserted by the
   click handler, so a button whose class is missing from this list shows a
   permanently spinning block instead of nothing -- which is what the copy
   button did until .search-copy-button was added. */
.search-export-button:not(.starting-export) .loading-block,
.export-button:not(.starting-export) .loading-block,
.search-copy-button:not(.starting-copy) .loading-block  {
  display: none;
}

.loading-block {
    width: 13px;
    display: inline-block;
    aspect-ratio: 1;
    --c:no-repeat repeating-linear-gradient(90deg,#000 0 calc(100%/7),#0000 0 calc(200%/7));
    background: var(--c),var(--c),var(--c),var(--c);
    background-size: 140% 26%;
    animation: l26 .75s infinite linear;
}
@keyframes l26 {
   0%,
   5%   {background-position:0    calc(0*100%/3),0    calc(1*100%/3),0    calc(2*100%/3),0    calc(3*100%/3)}
   20%  {background-position:50%  calc(0*100%/3),0    calc(1*100%/3),0    calc(2*100%/3),0    calc(3*100%/3)}
   40%  {background-position:100% calc(0*100%/3),50%  calc(1*100%/3),0    calc(2*100%/3),0    calc(3*100%/3)}
   60%  {background-position:100% calc(0*100%/3),100% calc(1*100%/3),50%  calc(2*100%/3),0    calc(3*100%/3)}
   80%  {background-position:100% calc(0*100%/3),100% calc(1*100%/3),100% calc(2*100%/3),50%  calc(3*100%/3)}
   95%,
   100% {background-position:100% calc(0*100%/3),100% calc(1*100%/3),100% calc(2*100%/3),100% calc(3*100%/3)}
}

#logout-form {display: inline;}
/* A <button> styled as a link. Used where a "link" has to POST -- an
   <a href="javascript:{}" onclick="...submit()"> is blocked outright by a
   Content-Security-Policy without 'unsafe-inline', and neither a nonce nor a
   hash can cover a javascript: URL or an inline handler. */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover { text-decoration: none; }


/* ------------------------------------------------------------------ *
 * Classes replacing inline style="" attributes.
 *
 * A Content-Security-Policy cannot cover a style attribute with a nonce
 * or a hash the way it can a <style> block -- the only way to allow them
 * is style-src-attr 'unsafe-inline', for every element on every page.
 * So they live here instead.
 *
 * Note the specificity change this brings: an inline style beat every
 * stylesheet rule, whereas these are ordinary single-class selectors and
 * can be overridden by anything more specific.
 * ------------------------------------------------------------------ */

.u-w-33        { width: 33%; }
.u-w-40        { width: 40px; }
.u-w-350       { width: 350px; }
.u-w-800       { width: 800px; }
.u-w-full      { width: 100%; }
.u-h-30        { height: 30px; }
.u-relative    { position: relative; }
.u-hidden      { display: none; }
.u-mt-1em      { margin-top: 1em; }
.u-mt-2em      { margin-top: 2em; }
.u-pl-0        { padding-left: 0; }
.u-py-10       { padding: 10px 0; }
.u-plain-link  { color: inherit; text-decoration: none; }
.u-border-right{ border-right: 1px solid #333; }
.u-white-ground{ background: #fff; }
.u-indent-relative { margin-left: 20px; position: relative; }

/* The upload progress strip pinned to the top of the viewport. Its own
   class rather than .progress, which Bootstrap uses for ordinary bars
   elsewhere on the same page. */
.page-progress { position: fixed; top: 0; width: 100%; left: 0; height: 3px; z-index: 21; display: none; }
.top-progress-bar { background-color: red; width: 0%; height: 3px; }

/* Keyboard-shortcut badge in the documents table. */
.shortcut-key {
  margin-left: 10px;
  border: 1px solid #ccc;
  padding: 4px;
  border-radius: 40%;
  width: 37px;
  text-align: center;
}

/* Alternating row shading. Was background-color: {% cycle %} inline; the
   template still drives the alternation, it just picks a class now. Not
   :nth-child, because each loop iteration emits two <tr>s and the cycle
   shades them differently -- an offset that is easy to get wrong here and
   impossible to notice until a row count changes. */
.row-shade-a { border-bottom: 0; background-color: #fff; }
.row-shade-b { border-bottom: 0; background-color: #fafafa; }

/* Was a 'style' entry in DocumentSearchForm's widget attrs. A widget attrs
   dict renders straight into the tag, so it was an inline style attribute
   like any other. */
.search-input { width: 300px; margin-right: 20px; }

/* Was style="white-space: nowrap;" inside the DocumentTable TemplateColumn
   strings in views/project.py -- HTML built in Python, which the template
   sweep did not reach. */
.u-nowrap { white-space: nowrap; }

/* Was style="font-size: 1em;" on the dismiss button and style="font-size:
   12pt;" on its icon, in the $.notifyDefaults template in annotate.js. The
   template is an HTML string jQuery parses into a fragment, so those were
   inline style attributes like any other -- the two hashes the CSP report
   named. Descendant selectors rather than new classes: style.css loads after
   bootstrap, so .notification .close outranks bootstrap's .close on its own. */
.notification .close { font-size: 1em; }
.notification .close .fa { font-size: 12pt; }

/* Was style="width: 100%" on the export progress bar and its wrapper, built as
   an HTML string in overview-export-status.js. The per-tick width stays inline,
   but is written through .css() now, which style-src does not govern. */
.u-full-width { width: 100%; }