/*
  Johan changes 18 Nov 2025
  * Removed bottom menu
  * Prev/Next buttons on left/right side of screen
*/
#img-scroll-wrapper {
  height: 100vh;
  overflow: scroll;
}

#zoomIn {
  position: absolute;
  bottom: 70px;
  right: 0;
  z-index: 1;
  font-size: 2.5rem;
}

#zoomOut {
  position: absolute;
  bottom: 20px;
  right: 0;
  z-index: 1;
  font-size: 2.5rem;
}

#full-btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

#prev-btn {
  position: absolute;
  bottom: 50%;
  left: 0;
  z-index: 1;
}

#next-btn {
  position: absolute;
  bottom: 50%;
  right: 0;
  z-index: 1;
}

.slide-frame {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
}

.slide {
  position: absolute;
  overflow: hidden;
  /* to prevent scrollbar appearing */
  transition: ease;
  transition-duration: 0.5s;
  transition-property: transform;
}

.slide.left {
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.slide.right {
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.img {
  width: 100%;
  height: 100%;
  object-fit: contain;

}



#img {
  transform-origin: top left;
}

.prev {
  top: 0;
  overflow: hidden;
  position: absolute;
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.next {
  top: 0;
  overflow: hidden;
  position: absolute;
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.next.left {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.prev.right {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.controllers {
  position: absolute;
  bottom: 1%;
  right: 1%;
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
  transition: ease;
  transition-duration: 0.5s;
  transition-property: transform;
}

.controllers.up{
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.slide-btn {
  font-size: 3.5rem;
}

.fs-btn {
  font-size: 3rem;
}

.slide-btn:hover {
  color: black;
}

.thumb-menu {
  position: absolute;
  transition: ease;
  transition-duration: 0.3s;
  transition-property: transform;
  top: 10%;
  left: 40%;
}

.slide-menu {
  z-index: 999;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 25vh;
  border-color: gray;
  border-style: double;
  white-space: nowrap;
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
  overflow: hidden;
  /* to prevent scrollbar appearing */
  transition: ease;
  transition-duration: 0.5s;
  transition-property: transform;
}

.slide-menu.up {
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.thumbnail {
  position: relative;
  display: inline-block;
  margin: 1em;
  transition: ease;
  transition-duration: 0.5s;
  transition-property: transform;
}

.thumbnail-picture{
  border-style: solid;
  border-color: rgb(178, 178, 178);
  max-height: 12.5vh;
}

.last {
  right: 1%;
  bottom: 8%;
}

.first {
  left: 1%;
  bottom: 8%;
}

.close {
  position: absolute;
  right: 1%;
  top: 4%;
}

.close-info {
  position: absolute;
  right: 1%;
  top: 1%;
}
/* 
.page-btn:hover {
  transform: scale(110%);
  -moz-transform: scale(110%);
  -ms-transform: scale(110%);
  -webkit-transform: scale(110%);
  -o-transform: scale(110%);
  transform: scale(110%);
  color: darkred;
}

.page-btn {
  color: red;
  font-family: Arial;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  font-size: large;
  position: absolute;
  transition: ease;
  transition-duration: 0.5s;
  transition-property: transform;
}

.dropdown {
  color: red;
  font-family: Arial;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  font-size: large;
  position: absolute;
  right: 50%;
  bottom: 1%;
}

.hide {
  visibility: hidden;
}

.info {
  z-index: 9999;
  position: absolute;
  padding: 1em;
  background-color: white;
  right: 2%;
  bottom: 10%;
  border-color: black;
  border-style: double;
  font-size: larger;
  text-align: left;
}

.info td{
  padding-right: 1em;
}

.caption {
  padding: 2% 0;
  font-weight: bold;
  font-size: larger;
  color: rgb(178, 178, 178);
}

.pages-amount {
  color: red;
  font-family: Arial;
  float: inherit;
}

.select{
  color: red;
  border: none;
  background-color: white;
}

.fx {
  color: red;
  font-family: Arial;
  font-weight: bold;
  float: inherit;
  padding-left: 10%;
} */