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

.thumb-img {
  border-color: #000000 !important;
}

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

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

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

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


/* Custom navigation: return to the main photography Index */
#backToIndex {
  position: fixed;
  top: 18px;
  right: 90px;
  left: auto;
  z-index: 99999;
  display: block;
  box-sizing: border-box;
  padding: 6px 11px;
  background: rgba(0,0,0,.72);
  color: #A0A0A0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
  text-decoration: none !important;
  border: 1px solid rgba(160,160,160,.45);
  border-radius: 3px;
  opacity: .88;
}

#backToIndex:hover {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.7);
  opacity: 1;
}


/* Custom navigation: 5-second Auto Play */
#autoPlay {
  position: fixed;
  top: 18px;
  right: 205px;
  z-index: 99999;
  display: none;
  box-sizing: border-box;
  padding: 6px 11px;
  background: rgba(0,0,0,.72);
  color: #A0A0A0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
  border: 1px solid rgba(160,160,160,.45);
  border-radius: 3px;
  opacity: .88;
  cursor: pointer;
}
#autoPlay:hover {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.7);
  opacity: 1;
}


/* Show Auto Play only while viewing a photo in the loupe. */
body.loupe-active #autoPlay {
  display: block;
}

/* Full Screen control inside photo/loupe view */
#loupeFullscreenButton {
  position: absolute;
  top: 0;
  right: 45px;
  z-index: 100000;
  width: 45px;
  height: 45px;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #A0A0A0;
  border: none;
  border-radius: 0;
  opacity: .9;
  cursor: pointer;
  padding: 0;
}
body.loupe-active #loupeFullscreenButton {
  display: flex;
}
#loupeFullscreenButton:hover {
  color: #FFFFFF;
  opacity: 1;
}
#loupeContainer:fullscreen,
#loupeContainer:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000000;
}
#loupeContainer:fullscreen #loupeFullscreenButton,
#loupeContainer:-webkit-full-screen #loupeFullscreenButton {
  display: flex;
}

#loupeFullscreenButton svg{width:24px;height:24px;display:block;flex:0 0 24px;fill:currentColor}

/* FINAL CORRECTION
   Full Screen uses the original 18x16 artwork, centered inside
   the same 45x45 control box as the X, immediately to its left.
*/
#loupeFullscreenButton {
  position: absolute !important;
  top: 0 !important;
  right: 45px !important;
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #A0A0A0 !important;
  opacity: .9 !important;
  cursor: pointer !important;
}
body.loupe-active #loupeFullscreenButton {
  display: flex !important;
}
#loupeFullscreenButton:hover {
  color: #FFFFFF !important;
  opacity: 1 !important;
}
#loupeFullscreenButton #svgIconFullscreen {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 18px !important;
  height: 16px !important;
  margin: 0 !important;
  display: block !important;
  flex: 0 0 18px !important;
}

/* =========================================================
   FINAL PHOTO VIEWER CONTROLS — CLEAN / PROFESSIONAL
   ========================================================= */

#autoPlay,
#backToIndex {
  position: fixed !important;
  top: 16px !important;
  z-index: 99999 !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 18px !important;
  background: rgba(0,0,0,.58) !important;
  color: #A8A8A8 !important;
  border: 1px solid rgba(168,168,168,.50) !important;
  border-radius: 5px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 42px !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

#autoPlay {
  right: 316px !important;
  width: 188px !important;
}

#backToIndex {
  right: 118px !important;
  width: 145px !important;
  display: block !important;
}

body.loupe-active #autoPlay {
  display: flex !important;
}

#autoPlay:hover,
#backToIndex:hover {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.72) !important;
  background: rgba(12,12,12,.78) !important;
}

/* Full Screen and Close share the same 45×45 control grid. */
#loupeFullscreenButton {
  position: absolute !important;
  top: 0 !important;
  right: 45px !important;
  z-index: 100000 !important;
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  color: #A8A8A8 !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

body.loupe-active #loupeFullscreenButton {
  display: flex !important;
}

#loupeFullscreenButton:hover {
  color: #FFFFFF !important;
}

#loupeFullscreenButton #svgIconFullscreen {
  position: static !important;
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 22px !important;
  fill: currentColor !important;
}

/* Keep X exactly in its native 45×45 control box. */
#loupeCloseButton {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100000 !important;
}

#loupeCloseButton #svgIconLoupeClose {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 45px !important;
  height: 45px !important;
}

/* A little more breathing room on compact screens. */
@media screen and (max-width: 900px) {
  #autoPlay {
    right: 265px !important;
    width: 165px !important;
  }
  #backToIndex {
    right: 108px !important;
    width: 130px !important;
  }
}

@media screen and (max-width: 620px) {
  #autoPlay,
  #backToIndex {
    top: 8px !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 36px !important;
    font-size: 13px !important;
  }
  #autoPlay {
    right: 205px !important;
    width: 125px !important;
    padding: 0 10px !important;
  }
  #backToIndex {
    right: 88px !important;
    width: 112px !important;
    padding: 0 8px !important;
  }
  #loupeFullscreenButton,
  #loupeCloseButton {
    top: 4px !important;
  }
}

/* =========================================================
   REFINED PHOTO VIEWER CONTROLS
   Based on the supplied ICON reference
   ========================================================= */
#autoPlay,
#backToIndex {
  top: 18px !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 15px !important;
  background: rgba(0,0,0,.54) !important;
  color: #A8A8A8 !important;
  border: 1px solid rgba(168,168,168,.48) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 38px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
#autoPlay {
  right: 300px !important;
  width: 165px !important;
}
#backToIndex {
  right: 135px !important;
  width: 125px !important;
  display: block !important;
}
body.loupe-active #autoPlay {
  display: flex !important;
}
#autoPlay:hover,
#backToIndex:hover {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.70) !important;
  background: rgba(10,10,10,.72) !important;
}

/* Full Screen and X form one compact right-hand group. */
#loupeFullscreenButton {
  position: absolute !important;
  top: 0 !important;
  right: 45px !important;
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  color: #A8A8A8 !important;
  cursor: pointer !important;
}
body.loupe-active #loupeFullscreenButton {
  display: flex !important;
}
#loupeFullscreenButton:hover { color:#FFFFFF !important; }
#loupeFullscreenButton #svgIconFullscreen {
  position: static !important;
  width: 18px !important;
  height: 16px !important;
  margin: 0 !important;
  display: block !important;
  flex: 0 0 18px !important;
  fill: currentColor !important;
}
#loupeCloseButton {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100000 !important;
}
#loupeCloseButton #svgIconLoupeClose {
  width: 45px !important;
  height: 45px !important;
}

/* Keep the Index button present on every photo page. */
#backToIndex {
  display: block !important;
}
body.loupe-active #backToIndex {
  display: flex !important;
}

/* Responsive: compact but still orderly. */
@media screen and (max-width: 900px) {
  #autoPlay { right: 275px !important; width: 150px !important; }
  #backToIndex { right: 135px !important; width: 115px !important; }
}
@media screen and (max-width: 620px) {
  #autoPlay, #backToIndex {
    top: 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    line-height: 34px !important;
    font-size: 13px !important;
  }
  #autoPlay { right: 195px !important; width: 120px !important; padding:0 8px !important; }
  #backToIndex { right: 80px !important; width: 105px !important; padding:0 7px !important; }
  #loupeFullscreenButton, #loupeCloseButton { top: 0 !important; }
}

/* =========================================================
   FINAL PHOTO VIEWER CONTROL BAR
   Based on the supplied ICON(2) reference.
   ========================================================= */

/* Left controls: compact, equal visual weight */
#autoPlay,
#backToIndex {
  position: fixed !important;
  top: 21px !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 20px !important;
  background: rgba(0,0,0,.52) !important;
  border: 1px solid rgba(170,170,170,.48) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  color: #A8A8A8 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 42px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
#autoPlay {
  right: 300px !important;
  width: 152px !important;
}
#backToIndex {
  right: 135px !important;
  width: 126px !important;
}
body.loupe-active #autoPlay,
body.loupe-active #backToIndex {
  display: flex !important;
}
#autoPlay:hover,
#backToIndex:hover {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.72) !important;
  background: rgba(8,8,8,.72) !important;
}

/* Right controls: fullscreen, divider, X form one aligned group */
#loupeFullscreenButton {
  position: absolute !important;
  top: 0 !important;
  right: 90px !important;
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  color: #A8A8A8 !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
body.loupe-active #loupeFullscreenButton {
  display: flex !important;
}
#loupeFullscreenButton:hover {
  color: #FFFFFF !important;
}
#loupeFullscreenButton #svgIconFullscreen {
  position: static !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex: 0 0 30px !important;
  fill: currentColor !important;
}

/* Thin separator between fullscreen and close */
#loupeControlDivider {
  position: absolute !important;
  top: 5px !important;
  right: 58px !important;
  width: 1px !important;
  height: 35px !important;
  background: rgba(168,168,168,.42) !important;
  display: none !important;
  pointer-events: none !important;
}
body.loupe-active #loupeControlDivider {
  display: block !important;
}

/* X remains a 45x45 control, same center line as fullscreen */
#loupeCloseButton {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 100000 !important;
}
#loupeCloseButton #svgIconLoupeClose {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 45px !important;
  height: 45px !important;
  margin: 0 !important;
}

/* Desktop proportions close to the supplied reference */
@media screen and (min-width: 901px) {
  #autoPlay { right: 300px !important; width: 152px !important; }
  #backToIndex { right: 135px !important; width: 126px !important; }
}

/* Keep controls orderly on smaller windows */
@media screen and (max-width: 900px) {
  #autoPlay { right: 270px !important; width: 145px !important; }
  #backToIndex { right: 130px !important; width: 120px !important; }
}
@media screen and (max-width: 620px) {
  #autoPlay,
  #backToIndex {
    top: 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    line-height: 34px !important;
    font-size: 13px !important;
  }
  #autoPlay { right: 195px !important; width: 120px !important; padding:0 8px !important; }
  #backToIndex { right: 80px !important; width: 105px !important; padding:0 7px !important; }
  #loupeFullscreenButton { top: 0 !important; right: 90px !important; }
  #loupeControlDivider { top: 1px !important; right: 58px !important; height: 34px !important; }
  #loupeCloseButton { top: 0 !important; right: 0 !important; }
}

/* FINAL: Keep Index available on the book's Index/thumbnail page too.
   Auto Play remains photo-view-only. */
#backToIndex {
  display: flex !important;
}
body.loupe-active #backToIndex {
  display: flex !important;
}
body:not(.loupe-active) #autoPlay {
  display: none !important;
}

/* =========================================================
   iPad / Tablet layout
   Keep the four controls in one compact row at top-right
   so they never cover the photograph.
   ========================================================= */
@media screen and (min-width: 621px) and (max-width: 1100px) {
  #autoPlay,
  #backToIndex {
    top: 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    line-height: 34px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* Auto Play → Index → Full Screen → X */
  #autoPlay {
    right: 305px !important;
    width: 116px !important;
    min-width: 116px !important;
  }

  #backToIndex {
    right: 175px !important;
    width: 116px !important;
    min-width: 116px !important;
  }

  #loupeFullscreenButton {
    top: 7px !important;
    right: 120px !important;
    width: 45px !important;
    height: 45px !important;
  }

  #loupeFullscreenButton #svgIconFullscreen {
    width: 20px !important;
    height: 18px !important;
    flex: 0 0 20px !important;
  }

  #loupeControlDivider {
    top: 7px !important;
    right: 58px !important;
    height: 35px !important;
  }

  #loupeCloseButton {
    top: 7px !important;
    right: 0 !important;
    width: 45px !important;
    height: 45px !important;
  }

  #loupeCloseButton #svgIconLoupeClose {
    width: 45px !important;
    height: 45px !important;
  }
}


/* =========================================================
   FINAL — BALANCED PHOTO VIEWER CONTROL BAR
   Reference: supplied target layout
   Order: Auto Play / Index / Full Screen / Divider / X
   ========================================================= */

/* ---------- Mac / Desktop ---------- */
@media screen and (min-width: 1101px) {

  #autoPlay,
  #backToIndex {
    position: fixed !important;
    top: 18px !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    background: rgba(0,0,0,.58) !important;
    border: 1px solid rgba(168,168,168,.50) !important;
    border-radius: 6px !important;
    color: #A8A8A8 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 42px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  /* Equal button height + deliberate visual spacing */
  #autoPlay {
    right: 300px !important;
    width: 170px !important;
    padding: 0 18px !important;
  }

  #backToIndex {
    right: 120px !important;
    width: 150px !important;
    padding: 0 16px !important;
  }

  #autoPlay:hover,
  #backToIndex:hover {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,.72) !important;
    background: rgba(8,8,8,.76) !important;
  }

  /* Full Screen — same 45×45 control area as X */
  #loupeFullscreenButton {
    position: fixed !important;
    top: 18px !important;
    right: 60px !important;
    width: 45px !important;
    height: 45px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    color: #A8A8A8 !important;
    opacity: 1 !important;
    cursor: pointer !important;
    z-index: 100000 !important;
  }

  body.loupe-active #loupeFullscreenButton {
    display: flex !important;
  }

  #loupeFullscreenButton:hover {
    color: #FFFFFF !important;
  }

  /* Correct fullscreen artwork: four balanced corners */
  #loupeFullscreenButton #svgIconFullscreen {
    position: static !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex: 0 0 30px !important;
    fill: currentColor !important;
  }

  /* Divider belongs between Full Screen and X */
  #loupeControlDivider {
    position: fixed !important;
    top: 23px !important;
    right: 48px !important;
    width: 1px !important;
    height: 35px !important;
    margin: 0 !important;
    background: rgba(168,168,168,.42) !important;
    display: none !important;
    pointer-events: none !important;
    z-index: 100001 !important;
  }

  body.loupe-active #loupeControlDivider {
    display: block !important;
  }

  /* X */
  #loupeCloseButton {
    position: fixed !important;
    top: 18px !important;
    right: 0 !important;
    width: 45px !important;
    height: 45px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 100002 !important;
  }

  #loupeCloseButton #svgIconLoupeClose {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 45px !important;
    height: 45px !important;
    margin: 0 !important;
  }
}

/* ---------- iPad / Tablet ---------- */
@media screen and (min-width: 621px) and (max-width: 1100px) {

  #autoPlay,
  #backToIndex {
    position: fixed !important;
    top: 10px !important;
    height: 34px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 9px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    line-height: 32px !important;
  }

  /* Compact and symmetrical */
  #autoPlay {
    right: 300px !important;
    width: 105px !important;
    min-width: 105px !important;
  }

  #backToIndex {
    right: 185px !important;
    width: 105px !important;
    min-width: 105px !important;
  }

  #loupeFullscreenButton {
    position: fixed !important;
    top: 5px !important;
    right: 128px !important;
    width: 45px !important;
    height: 45px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.loupe-active #loupeFullscreenButton {
    display: flex !important;
  }

  #loupeFullscreenButton #svgIconFullscreen {
    position: static !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    flex: 0 0 22px !important;
  }

  #loupeControlDivider {
    position: fixed !important;
    top: 10px !important;
    right: 57px !important;
    width: 1px !important;
    height: 34px !important;
  }

  #loupeCloseButton {
    position: fixed !important;
    top: 5px !important;
    right: 0 !important;
    width: 45px !important;
    height: 45px !important;
  }
}

/* ---------- Keep Index on the Index / thumbnail page ---------- */
#backToIndex {
  display: flex !important;
}
body.loupe-active #backToIndex {
  display: flex !important;
}
body:not(.loupe-active) #autoPlay {
  display: none !important;
}