/* Document Preview: Wrapper */
#document-preview {
  background-color: var(--color_light);
  border: 1px solid #b5cfe0;
  position: relative;
  display: flex;
  padding: 10px;
  height: 900px;
}

/* Document Preview: Canvas */

#document-preview > .canvas {
  justify-content: center;
  align-items: center;
  cursor: crosshair;
  overflow: hidden;
  display: flex;
  height: 100%;
  width: 100%;
}

#document-preview > .canvas > img {
  transition: transform 0.3s ease-out;
  border: 1px solid #b5cfe0;
  background-color: white;
  max-height: 100%;
  max-width: 100%;
}

/* Document Preview: Sidebar */

#document-preview > .pages {
  overflow: hidden scroll;
  list-style-type: none;
  padding: 0 10px 0 0;
  margin: 0 10px 0 0;
  max-width: 110px;
}

#document-preview > .pages img {
  border: 2px solid #d9d9d9;
  display: block;
  height: auto;
  width: 100%;
}

#document-preview > .pages a {
  cursor: pointer;
  display: block;
}

#document-preview > .pages > li:not(:last-of-type) > a {
  margin-bottom: 10px;
}

#document-preview > .pages a:hover > img,
#document-preview > .pages a.active > img {
  border-color: var(--color_dark);
}

/* Document Preview: Responsive */

@media (max-width: 768px) {
  /* Document Preview: Wrapper */

  #document-preview {
    flex-direction: column;
    height: unset;
  }

  /* Document Preview: Sidebar */

  #document-preview > .pages {
    overflow: scroll hidden;
    margin-bottom: 10px;
    padding-right: 0;
    max-width: unset;
    margin-right: 0;
    display: flex;
  }

  #document-preview > .pages > li:not(:last-of-type) > a {
    margin-right: 10px;
  }

  #document-preview > .pages img {
    height: 14vw;
    width: auto;
  }
}

/* Spinner / Loading */

#document-preview > .loading {
  background-color: rgba(0, 0, 0, 0.3);
  justify-content: center;
  align-items: center;
  position: absolute;
  display: none;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

#document-preview > .loading::before {
  animation: document-preview-spinner-rotation 1s linear infinite;
  border-bottom-color: var(--color_dark) !important;
  box-sizing: border-box;
  border: 8px solid white;
  display: inline-block;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  content: "";
}

#document-preview > .loading.active {
  display: flex;
}

@keyframes document-preview-spinner-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#document_preview_button {
  margin-top: 20px;
}

#document_preview_button > .align-items-center-gap > .action_refresh_icon {
  fill: white;
}