.dropzone {
    border: 2px dashed #0087F7;
    border-radius: 5px;
    background: white; }
.dropzone .dz-message {
    font-weight: 400; }
.dropzone .dz-message .note {
    font-size: 0.8em;
    font-weight: 200;
    display: block;
    margin-top: 1.4rem; }
table.files td {
    border-top: 1px solid #eaecef;
    line-height: 20px;
    padding: 6px 3px;
}
table.files td.icon {
    color: rgba(3,47,98,.55);
    padding-left: 10px;
    padding-right: 2px;
    width: 17px;
}
.file-kind {
    color: #6a737d;
    font-size: 12px;
    margin-left: 9px;
}
/* Cross-link from any file of a Source studio model to the .mdl the 3D viewer opens. Muted, so
   the file's own name stays the primary target on rows that carry both. */
a.view-3d {
    color: rgba(3,47,98,.55);
    opacity: 0.65;
    font-size: 12px;
    margin-left: 9px;
    vertical-align: middle;
    white-space: nowrap;
}
a.view-3d:hover {
    opacity: 1;
    color: #0366d6;
}
a.decompile-nested {
    color: rgba(3,47,98,.55);
    opacity: 0.6;
    margin-left: 8px;
    vertical-align: middle;
}
a.decompile-nested:hover {
    opacity: 1;
    color: #0366d6;
}
/* Same cross-link as in the file list, on a file's own page: sits beside "Download file". */
a.view-3d-link {
    margin-left: 20px;
}
.media-icon-font {
    color: #7b4bb7;
}
.media-icon-animation {
    color: #d7652d;
}
a.decompile-nested-link {
    margin-left: 20px;
}
.native-js  {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.native-banner {
    display: flex;
    padding: 20px 20px;
    text-decoration: none;

    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.native-banner .native-img {
    margin-right: 20px;
    max-height: 50px;
    line-height: 0;
}

.native-banner .native-main {
    display: flex;
    max-width: 1024px;
    margin: 0 auto;

    flex-grow: 1;
    flex-flow: row nowrap;
    align-items: center;
}

.native-banner .native-details {
    display: flex;
    margin-right: 20px;

    flex-flow: column nowrap;
}

.native-banner .native-company {
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    line-height: 1;
}

.native-banner .native-desc {
    letter-spacing: 1px;
    font-weight: 300;
    line-height: 1.4;
}

.native-banner .native-cta {
    padding: 10px 16px;
    border-radius: 3px;
    box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 1px;
    line-height: 1;
    font-weight: 400;
    font-size: 12px;
    transition: all .3s ease-in-out;
    transform: translateY(-1px);
}

.native-banner .native-cta:hover {
    box-shadow: none;
    transform: translateY(1px);
}

.native-banner:hover {
    text-decoration: none;
}

.chess-background {
    background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.native-source {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 5px;
    border-top: 0;
    border-top-left-radius: 3px;
    background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
    color: #111;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    font-size: 7px;
}

@media only screen and (min-width: 320px) and (max-width: 759px) {
    .native-banner,
    .native-banner .native-main {
        flex-flow: column nowrap;
    }

    .native-banner .native-img,
    .native-banner .native-details {
        margin: 0;
    }

    .native-banner .native-img {
        display: none;
    }

    .native-banner .native-company {
        letter-spacing: 1px;
    }

    .native-banner .native-details {
        text-align:  left;
        font-size: 14px;
    }

    .native-banner .native-cta {
        display: none;
    }
}

/* Viewer pages wrap their content in #artifactFileContent (see b/contentHost.scala.html) so the
   adblock guard has a node to replace. uBlock's cosmetic rule for that id forces
   white-space: pre !important on it, which would otherwise be inherited by the viewer inside.
   An element's own declaration beats an inherited value no matter how the parent's was won, so
   the single child re-states it. */
.viewer-content > * {
    white-space: normal;
}

/* Directory listings are paged, because rendering every row of a directory that holds ~100k files
   was enough HTML to exhaust the main JVM's heap and take the site down with it — see
   templating.FileListPage. The pager only appears when there is more than one page, so ordinary
   listings look exactly as they did. */
.list-pager {
    border-top: 1px solid #eaecef;
    margin-top: 4px;
    padding-top: 10px;
}
/* The top copy sits between the breadcrumb and the table, so its rule belongs underneath it. */
.list-pager-top {
    border-top: 0;
    border-bottom: 1px solid #eaecef;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 8px;
}
.list-pager-summary {
    color: #6a737d;
    font-size: 12px;
    margin: 0 0 8px 3px;
}
.list-pager-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}
.list-pager-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0 0 4px 3px;
}
/* Step links reach the ends and the neighbourhood; at 200 rows a page a big folder runs to
   hundreds of pages, and only a direct jump reaches the middle in one action. */
.list-pager-jump {
    align-items: center;
    color: #6a737d;
    display: flex;
    font-size: 12px;
    gap: 5px;
    padding-bottom: 4px;
}
.list-pager-jump input {
    border: 1px solid #e1e4e8;
    border-radius: 3px;
    font-size: 13px;
    line-height: 20px;
    padding: 3px 6px;
    width: 5.5em;
}
.list-pager-jump button {
    background-color: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 3px;
    color: #0366d6;
    cursor: pointer;
    font-size: 13px;
    line-height: 20px;
    padding: 3px 9px;
}
.list-pager-jump button:hover {
    background-color: #0366d6;
    border-color: #0366d6;
    color: #fff;
}
.list-pager-pages a,
.list-pager-pages .current,
.list-pager-pages .disabled {
    border: 1px solid #e1e4e8;
    border-radius: 3px;
    box-sizing: border-box;
    display: inline-block;
    font-size: 13px;
    line-height: 20px;
    padding: 3px 9px;
}
/* Number cells are a fixed width so that 9 -> 10 -> 100 does not shove the step controls sideways.
   42px holds three digits plus the padding, and the scan cap (100,000 entries at 200 a page) means
   a listing can never reach four. */
.list-pager-pages li.num a,
.list-pager-pages li.num .current {
    min-width: 42px;
    text-align: center;
}
/* A step control that leads nowhere keeps its cell rather than vanishing — see listPager for why. */
.list-pager-pages .disabled {
    color: #c6cbd1;
    cursor: default;
}
.list-pager-pages a {
    color: #0366d6;
    text-decoration: none;
}
.list-pager-pages a:hover {
    background-color: #0366d6;
    border-color: #0366d6;
    color: #fff;
}
.list-pager-pages .current {
    background-color: #0366d6;
    border-color: #0366d6;
    color: #fff;
}

/* "Back to results" on a detail page opened from a paginated listing. Sits under the breadcrumb,
   in the same slot the top pager occupies on a listing, so the two read as one row of context.
   The breadcrumb itself stays pure hierarchy — see headerBlock for why. */
/* Its own row: the file view puts "Download file" (and the 3D / Decompile links) immediately after
   this block, and an inline anchor would leave them running together on one line. */
.back-to-results-row {
    margin: 0 0 10px 3px;
}
a.back-to-results {
    color: #0366d6;
    font-size: 13px;
    text-decoration: none;
}
a.back-to-results:hover {
    text-decoration: underline;
}