html {
  background-color: #E7E7E7 !important;
  color: inherit;
}

.thumb-img {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, .15) !important;
  border-color: #FFFFFF !important;
  border-width: 3px !important;
}

#loupeContainer div.background {
  background-color: #E7E7E7 !important;
  color: inherit;
}

header div.background {
  background-color: #E7E7E7 !important;
  color: inherit;
}

.custom-colorable {
  fill: #A0A0A0 !important;
}

body {
  background-color: #E7E7E7 !important;
  color: #828282 !important;
}

/* Mobile repair for Lightroom gallery: original lg image cells remained 348px
   while the thumbnail wrapper was reduced to 100px. */
@media screen and (max-width: 568px) {
  #thumbnailContainer .thumbnails {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 12px 60px;
    box-sizing: border-box;
    width: 100%;
    overflow: visible;
  }
  #thumbnailContainer .thumbnail-size-lg div.thumbnail {
    display: block;
    width: 100%;
    height: auto;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #thumbnailContainer .thumbnail-size-lg div.thumbnail div.image-container,
  #thumbnailContainer .thumbnail-size-lg div.thumbnail div.image-container div.image {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  #thumbnailContainer .thumbnail-size-lg div.thumbnail img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    box-sizing: border-box;
    cursor: pointer;
    touch-action: manipulation;
  }
  #loupeContainer {
    padding: 48px 12px 92px;
  }
}