/* "Related pictures" viewer (relpics_viewer.js): large picture on the page itself instead of a pop-up window. */
.relpics-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.88);
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
}
.relpics-overlay.relpics-open { display: flex; }
.relpics-figure { margin: 0; text-align: center; }
.relpics-figure img {
  display: block;
  max-width: 92vw;
  max-height: 80vh;
  margin: 0 auto;
  border: 4px solid #ffffff;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  background: #ffffff;
}
.relpics-caption { margin-top: 10px; font-size: 14px; }
.relpics-counter { color: #c9ced4; margin-left: 8px; }
.relpics-btn {
  position: absolute;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 26px;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.relpics-btn:hover, .relpics-btn:focus { background: #c8102e; outline: none; }
.relpics-close { top: 14px; right: 14px; }
.relpics-prev { left: 14px; top: 50%; margin-top: -23px; }
.relpics-next { right: 14px; top: 50%; margin-top: -23px; }
.relpics-single .relpics-prev, .relpics-single .relpics-next, .relpics-single .relpics-counter { display: none; }