.nav-controls-wrapper
{
  background-color: #b3b3b3;
  padding: 0 40px;
}

.nav-controls
{
  align-items: center;
  border-bottom: 1px solid #6f6f6f;
  color: #333333;
  display: flex;
  font-weight: bold;
  padding: 20px 0;
}

.nav-controls > * {
  margin-right: 30px;
}

.nav-control {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.nav-control-icon
{
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
#nav-control-touch-robot .nav-control-icon
{
  height: 23px;
  width: 31px;
}
#nav-control-rotate .nav-control-icon
{
  height: 20px;
  width: 16px;
}
#nav-control-delete .nav-control-icon
{
  height: 15px;
  width: 17px;
}
#nav-control-select-all #nav-control-select-all-icon {
  background-color: #E6E6E6;
  border-top: 1px solid white;
  border-bottom: 1px solid black;
}
#nav-control-select-all.checked #nav-control-select-all-icon {
  background-image: url("/images/thumb-icon_check.svg");
}

.record-category-wrapper {
  display: flex;
  align-items: center;
}

.add {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.add img
{
  height: 23px;
  margin-right: 5px;
}

#record-category {
  margin-left: 5px;
  font-size: 16px;
  width: 180px;
}

#family-list {
  color: #FFF;
  font-family: 'Proxima Nova Cond';
  font-size: 20px;
  width: 282px;
  padding-bottom: 64px;
}

#add-collection
{
  background-color: rgba(68,68,68,.8);
  bottom: 0;
  box-sizing: border-box;
  color: #FFF;
  font-family: 'Proxima Nova Regular';
  font-size: 20px;
  height: 72px;
  padding: 1em 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
#add-collection-img {
  height: 21px;
  margin: 0 10px -2px 0;
}
#add-collection-span {
  cursor: pointer;
}

.archives-left {
  width: 282px;
  height: 100%;
  float: left;
}

.archives-left .content-view {
  overflow-x: hidden;
}

.family-list-details {
  padding: 7px 20px 7px 37px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.family-list-item .family-list-item .family-list-details {
  padding-left: 55px;
}

.family-list-item-name
{
  flex: 1;
  margin-right: 10px;
  /* max-height: 66px; */
  overflow: hidden;
}
.family-list-item-name.restricted
{
  color: #FF475F;
}

.breadcrumb-highlight{
  background-color: #B3B3B3;
  color: #000;
  border-bottom: 1px solid black;
  border-top: 1px solid white;
}


.family-list-selected {
  background-color: #B3B3B3;
  color: #000;
  border-bottom: 1px solid black;
  border-top: 1px solid white;
}
.family-list-selected .family-list-item-name.restricted
{
  color: #D62A42;
}

.family-list-selected > .family-list-selected {
  border: 0;
}

.family-list-details:hover {
  background-color: #595959;
}

.family-list-selected .family-list-details:hover {
  background-color: inherit;
}

.family-list-details .tree-icon {
  width: 12px;
  height: 12px;
  background-image: url(/images/drop-down_tree-view_402x.png);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: 0 -24px;
  position: absolute;
  left: 13px;
}

.expanded .tree-icon {
  background-position: 0 -36px;
}

.family-list-selected .tree-icon {
  background-position: 0 0;
}

.family-list-selected.expanded .tree-icon {
  background-position: 0 -12px;
}

.family-list-item .family-list-item {
  display: none;
}

.family-list-item.expanded .family-list-item {
  display: block;
}

.collection-list-restricted-icon
{
  background-image: url('/images/icon_no-sign-collection20x20.svg');
  display: inline-block;
  height: 20px;
  vertical-align: text-top;
  width: 20px;
}
.family-list-selected .collection-list-restricted-icon
{
  background-image: url('/images/icon_no-sign-collection-dark20x20.svg');
}

.records
{
  background: #555;
  border-radius: 15px;
  color: silver;
  font-size: 12px;
  line-height: 1;
  padding: 3px 10px;
}
#navbar .records
{
  position: relative;
  top: -10px;
}

.records strong { color: white;}
.records .update-collection { display: none; height: 10px; height: 10px; vertical-align: middle; margin: 1px 0; }
.records:hover[data-id] { background: #652d90; }
.records:hover[data-id] .number { display: none; }
.records:hover[data-id] .update-collection { display: inline; }

#archive
{
  background-color: #B3B3B3;
  box-sizing: border-box;
  font-family: 'Proxima Nova Regular';
  font-size: 20px;
  height: calc(100% - 67px);
  overflow-x: hidden;
  padding: 20px 40px 72px 20px;
}

#archive.loading {
  background-image: url(/images/kindex-loader.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.archive-load-more-records {
  clear: both;
  display: flex;
  justify-content: center;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  margin-bottom: 20px;
}

.archive-heading {
  color: #666;
  font-size: 15px;
  padding-left: 35px;
  padding-top: 35px;
}

.archive-item
{
  float: left;
  margin-bottom: 20px;
  margin-left: 20px;
  min-height: 145px;
  width: 100px;
}

.archive-item-label
{
  color: #000;
  display: flex;
  font-family: 'Proxima Nova Cond';
  font-size: 15px;
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
  padding-top: 5px;
  position: relative
}

.batch-edit-label
{
  background-color: #E6E6E6;
  border-bottom: 1px solid black;
  border-top: 1px solid white;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  height: 15px;
  margin-right: 5px;
  width: 15px;
}

.batch-edit-check {
  display: none;
}

.batch-edit-input:checked + .batch-edit-check {
  display: block;
}

.batch-edit-input {
  display: none;
}

.archive-item-title
{
  cursor: pointer;
  overflow-wrap: break-word;
}

.archive-thumbnail-link
{
  text-decoration: none;
}
.archive-thumbnail-link.link_locked .archive-thumbnail
{
  background-color: #B3B3B3;
}
.archive-thumbnail-link.link_locked img
{
  opacity: 0.2;
}

.archive-thumbnail, .archive-overlay {
  background: white;
  cursor: pointer;
  height: 100px;
  overflow: hidden;
  position: relative;
  width: 100px;
}

.archive-thumbnail.-text {
  color: #000;
  font-size: 16px;
}
/* this provides padding between the text and the thumbnail container */
.archive-text_text {
  padding: 7px;
}
.archive-text_text p {
  padding: 0;
}
.archive-text_text,
.archive-text_text p {
  font-family: 'Livory Regular', sans-serif;
  line-height: 1.1em;
  font-size: 16px;
  color: #333;
  margin: 0;
}

.archive-text_overlay {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+82&0+0,1+83 */
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.99) 82%, rgba(255,255,255,1) 83%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.99) 82%,rgba(255,255,255,1) 83%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.99) 82%,rgba(255,255,255,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

.archive-overlay, .archive-thumbnail img {
  position: absolute;
  top: 0;
  z-index: 4;
}
.archive-thumbnail img {
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.archive-thumbnail .busy-file-record,
.archive-thumbnail .ajax_error
{
  color: #6FEFB0;
  font-size: 48px;
  left: 26px;
  position: absolute;
  top: 10px;
  z-index: 10;
}

.archive-overlay-needs-index {
  background: url(../images/status.png) 0 -100px;
  background-size: 200px;
}

.archive-overlay-needs-index:hover {
  background: url(../images/status.png) -100px -100px;
  background-size: 200px;
}

.archive-overlay-tag {
  background: url(../images/status.png) 0 -200px;
  background-size: 200px;
}

.archive-overlay-tag:hover {
  background: url(../images/status.png) -300px -200px;
  background-size: 200px;
}

.archive-overlay-view-original {
  background: url(../images/view-original.png) 0 -1000px;
  background-size: 200px;
}

.inline-icon-15px
{
  height: 15px;
}
.inline-icon-17px
{
  height: 17px;
}

.percent
{
  font-size: 16px;
  margin-left: 12px;
  position: relative;
  top: -10px;
  vertical-align: middle;
}

#process_archive_entities,
#wipe_archive_entities,
#process_archive_metadata,
#wipe_archive_metadata
{
  /*color: inherit;*/
  cursor: pointer;
  font-size: 14px;
  margin-left: 12px;
  text-decoration: none;
  vertical-align: middle;
}
#process_archive_entities:hover,
#wipe_archive_entities:hover,
#process_archive_metadata:hover,
#wipe_archive_metadata:hover
{
  background-color: white;
  border-radius: 2px;
  outline: solid white 5px;
}

.beta-note {
  background: #84ba42;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 11pt;
}

.search-list {
  padding: 35px;
  padding-bottom: 0;
}

.search-list > ol
{
  color: #6D6E70;
  margin: 0;
  padding: 0;
}

.search-list > ol > li
{
  font-family: 'Proxima Nova Bold';
}
.search-list > ol > li:not(:last-child)
{
  margin-bottom: 35px
}
.search-list > ol > li:hover
{
  color: #5F3389;
}

.search-result
{
  background-color: #e6e6e6;
  border: none;
  box-sizing: border-box;
  display: inline-block;
  height: 230px;
  overflow: hidden;
  text-decoration: none;
  vertical-align: middle;
  width: 100%;
}
.search-result.link_locked .search-thumbnail
{
  background-color: #B3B3B3;
}
.search-result.link_locked img
{
  opacity: 0.2;
}
.search-result:hover
{
  border-bottom: 2px solid #5F3389;
}

.search-result .dev-access,
.archive-thumbnail .dev-access
{
  float: right;
  margin-right: 5px;
  margin-top: 2px;
  opacity: 0.25;
}
.archive-thumbnail .dev-access
{
  position: absolute;
  right: -3px;
  z-index: 10;
}

.search-left
{
  border-right: 1px solid #999;
  float: left;
  height: 230px;
  width: 200px;
}

.search-thumbnail
{
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 200px;
}

.search-thumbnail .busy-file-record
{
  color: #6FEFB0;
  font-size: 96px;
  left: 52px;
  position: absolute;
  top: 10px;
  z-index: 10;
}

.search-thumbnail img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.archive-thumbnail-overlay
{
  background-repeat: no-repeat;
  position: absolute;
  height: 20px;
  left: 40px;
  top: 70px;
  width: 20px;
  z-index: 10;
}
.search-thumbnail-overlay
{
  background-repeat: no-repeat;
  position: absolute;
  height: 30px;
  left: 85px;
  top: 150px;
  width: 30px;
  z-index: 2; /* This seems unnecessary */
}
.archive-thumbnail-overlay.robot
{
  background-image: url(/images/icon_inprog-bot2_31x23.svg);
  height: 23px;
  left: 35px;
  top: 67px;
  width: 31px;
}
.search-thumbnail-overlay.robot
{
  background-image: url(/images/icon_bot_31x23.svg);
  left: 80px;
  width: 40px;
}
.archive-thumbnail-overlay.partial,
.search-thumbnail-overlay.partial
{
  background-image: url(/images/icon_inprog_20x20.svg);
}
.archive-thumbnail-overlay.complete,
.search-thumbnail-overlay.complete
{
  background-image: url(/images/icon_complete_20x20.svg);
}
.archive-thumbnail-overlay.error,
.search-thumbnail-overlay.error
{
  background-image: url(/images/icon_warning_20x20.svg);
}
.archive-thumbnail-overlay.restricted,
.search-thumbnail-overlay.restricted
{
  background-color: white;
  background-image: url(/images/icon_no-sign-record28x28.svg);
  border-radius: 10px;
  left: 4px;
  top: 4px;
}
.archive-thumbnail-overlay.restricted
{
  height: 28px;
  width: 28px;
}
/*
.search-thumbnail-overlay.restricted
{
  height: 28px;
  width: 28px;
}
*/

.search-hits
{
  background-color: #666666;
  box-sizing: border-box;
  color: white;
  font-family: 'Proxima Nova Bold';
  font-size: 14pt;
  height: 30px;
  padding: 4px 0;
  text-align: center;
  width: 200px;
}
.search-result:hover .search-hits
{
  background-color: #63298d;
}

.search-right
{
  height: 230px;
  margin-left: 200px;
  padding: 0 25px;
}
.search-right:hover
{
  background-color: white;
}

.search-result-tabs
{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  gap: 35px;
}
.search-result-tab
{
  box-sizing: border-box;
  color: #666666;
  font-family: 'Proxima Nova Bold';
  font-size: 13pt;
  height: 40px;
  padding: 12px 0
}
/* Has a problem of sometimes shifting the text:  Multiple objects on the page at once, some will
   shift, some won't!  Looks like working correctly is first then every 3rd.  Is this a decade-old bug?  See
   https://stackoverflow.com/questions/12863430/strange-border-width-behavior-in-chrome-floating-point-border-width
   (Rebooting computer seems to have resolved this.)
*/
.search-result-tab:hover
{
  border-top: 3px solid #666666;
  padding-top: 9px;
}
.search-result-tab.selected
{
  border-top: 3px solid #666666;
  padding-top: 9px;
}
.search-result:hover .search-result-tab.selected
{
  border-color: black;
  color: black;
}
.search-result-tab.most-hits
{
  text-transform: uppercase;
}

/* This is the breadcrumbs in the search result */
.search-title
{
  color: #333;
  font-family: 'Proxima Nova Regular';
  font-size: 14pt;
  height: 25px;
  margin-top: 20px;
  overflow: hidden;
}

.search-title .icon {
  vertical-align: initial;
}

.search-text
{
  color: #666;
  font-family: 'Livory Regular';
  font-size: 15pt;
  height: 125px;
  margin-top: 12px;
  overflow: hidden;
  /* text-overflow: ellipsis; */ /* This only works on non-wrapping horizontal overflow */
}

.search-highlight
{
  color: #63298d;
}
.search-highlight.partial
{
  color: #666666;
}
.search-text .search-highlight
{
  font-family: 'Livory Bold';
}
.search-title .search-highlight
{
  font-family: 'Proxima Nova Bold';
}

/*
.search-result:hover .search-text
{
  color: black;
}
*/

.search-result .breadcrumbs
{
  font-family: 'Proxima Nova Regular';
}

#search_no_match
{
  color: #333333;
  font-family: 'Proxima Nova Regular';
}

.no-records-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  color: #333;
  margin-top: 70px;
}

#no-records-message-add {
  width: 282px;
  height: 62px;
  background-image: url(/images/button_add-records_282px_402x.png);
  background-position: 0 -62px;
  background-size: 100% 200%;
  cursor: pointer;
}

#no-records-message-add:hover,
#no-records-message-add:active {
  background-position: 0px 0px;
}

.no-records-message-or {
  margin: 20px;
}

#no-records-message-tutorial {
  cursor: pointer;
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min-device-pixel-ratio: 1.5),
  only screen and (min-resolution: 192dpi) {

  .archive-overlay-needs-index {
    background: url(../images/status2.png) 0 -200px;
    background-size: 200%;
  }

  .archive-overlay-needs-index:hover {
    background: url(../images/status2.png) -200px -200px;
    background-size: 200%;
  }

  .archive-overlay-tag {
    background: url(../images/status2.png) 0 -400px;
    background-size: 200%;
  }

  .archive-overlay-tag:hover {
    background: url(../images/status2.png) -600px -400px;
    background-size: 200%;
  }

  .archive-overlay-view-original {
    background: url(../images/view-original.png) 0 -1000px;
  }

}

#nat_sort_not_ready_notice
{
  background-color: #B3B3B3;
  border-radius: 5px;
  color: #333333;
  display: inline-block;
  font-family: 'Proxima Nova Regular';
  font-size: 15px;
  left: 25px;
  padding: 5px;
  position: absolute;
  top: 50px;
  z-index: 1; /* Needed to keep thumbnails from scrolling over notice */
}

/* Hidden, but still takes up physical space */
.invisible
{
  visibility: hidden;
}

#pagination_footer
{
  background: rgba(179, 179, 179, 0.93);
  border-top: 1px solid white;
  bottom: 0px;
  box-sizing: border-box;
  color: #333333;
  font-family: 'Proxima Nova Regular';
  font-size: 20px;
  height: 72px;
  left: 0px;
  position: absolute;
  width: 100%; /* width: calc(100% - 17px); Javascript must be used to dynamically account for scrollbar width */
  z-index: 10;
}
#pagination_footer.share
{
  background: rgba(230, 230, 230, 0.93);
}

#pagination_footer > div
{
  margin-top: 20px;
}

#page_limit_section
{
  left: 0;
  margin-left: 20px;
  position: absolute;
  top:0;
}

#pagination_nav
{
  text-align: center;
}
#pagination_nav a,
#pagination_nav span
{
  border-radius: 20px;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  min-width: 40px; /* This starts looking bad with THREE digits; using `min-width` instead of `width` allows accomodation for FOUR+ digits. */
  text-decoration: none;
  text-align: center;
}
#pagination_nav span
{
  opacity: 0.3;
}
#pagination_nav a.current
{
  background-color: white;
}
#pagination_nav a:link,
#pagination_nav a:visited
{
  color: #333333;
}

#pagination_count
{
  margin-right: 20px;
  position: absolute;
  right: 0;
  top:0;
}
#pagination_count span
{
  font-family: 'Proxima Nova Bold';
}

/* For testing
.archive-item
{
  background-color: aqua;
}
*/
.archive-item.x2
{
  /* (Did not double margins) */
  min-height: 245px; /* Double is 290, but is too much if label isn't enlarged */
  /* min-height: 290px; */
  width: 200px;
}
.archive-item.x2 .archive-thumbnail
{
  height: 200px;
  width: 200px;
}
.archive-item.x2 .archive-thumbnail-overlay:not(.restricted)
{
  height: 40px;
  left: 80px;
  top: 140px;
  width: 40px;
}
.archive-item.x2 .archive-thumbnail-overlay.robot
{
  height: 46px;
  left: 70px;
  top: 134px;
  width: 62px;
}
.archive-item.x2 .archive-thumbnail .busy-file-record,
.archive-item.x2 .archive-thumbnail .ajax_error
{
  font-size: 96px;
  left: 52px;
  top: 20px;
}
.archive-item.x2 .archive-item-label
{
/*
  font-size: 30px;
  line-height: 40px;
  max-height: 80px;
  padding-top: 10px;
*/
}
.archive-item.x2 .batch-edit-label
{
/*
  border-bottom: 2px solid black;
  border-top: 2px solid white;
  height: 30px;
  margin-right: 10px;
  width: 30px;
*/
}