/* viewerで使いたい画像に与えるclass */
.viewer-target {
  cursor: pointer
}

.viewer-target:hover {
  filter: drop-shadow(0 0 4px rgb(89, 236, 255));
}

.viewer-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 990;
  backdrop-filter: blur(5px);
}

.viewer-image-container {
  position: absolute;

  top: 90px;
  bottom: 90px;
  max-width: 90%;
  max-height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.viewer-overlay-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.viewer-menu {
  position: absolute;

  padding: 0px;
  margin: 0px;

  bottom: 45px;

  display: flex;
  justify-content: center;
  /*border: 1px solid #0f0;*/
}

.viewer-arrowL-button {
  width: 30px;
  height: 30px;
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 1px solid #00f;*/
}

.viewer-arrowR-button {
  width: 30px;
  height: 30px;
  padding: 0px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 1px solid #00f;*/
}

.viewer-close-button {
  padding: 0px;
  margin: 0px;
  /*border: 1px solid #00f;*/
}

.viewer-arrowL-button img {
  /*border: 1px solid #f00;*/
  width: 9px;
  height: 9px;
}

.viewer-arrowL-button img:hover {
  filter: drop-shadow(0 0 4px rgb(89, 236, 255));
}

.viewer-arrowR-button img {
  /*border: 1px solid #f00;*/
  width: 9px;
  height: 9px;
}

.viewer-arrowR-button img:hover {
  filter: drop-shadow(0 0 4px rgb(89, 236, 255));
}

.viewer-close-button img {
  /*border: 1px solid #f00;*/
  cursor: pointer;
  z-index: 991;
}

.viewer-close-button img:hover {
  filter: drop-shadow(0 0 4px rgb(89, 236, 255));
}

.viewer-thumbnail:hover {
  filter: drop-shadow(0 0 4px rgb(89, 236, 255));
}

.viewer-thumbnail-container {
  display: flex;
  justify-content: center;
  margin: 0px;
}

.viewer-thumbnail {
  width: 30px;
  height: 30px;
  object-fit: cover;
  margin: 0 5px;
  cursor: pointer;
  z-index: 991;
}

.viewer-thumbnail-active {
  filter: drop-shadow(0 0 4px rgb(255, 255, 255));
}