/* Windows Picture and Fax Viewer */
.app-imgview .iv-root { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #EEF3FA; }
.app-imgview .iv-stage {
  flex: 1; min-height: 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #EEF3FA; border-bottom: 1px solid #C3D1E8;
}
.app-imgview .iv-stage.scrolls { overflow: auto; justify-content: flex-start; align-items: flex-start; padding: 12px; }
.app-imgview .iv-stage.scrolls .iv-frame { margin: auto; }
.app-imgview .iv-frame {
  flex: none; position: relative; display: flex; align-items: center; justify-content: center;
  outline: 1px solid #000; box-shadow: 2px 2px 4px rgba(0, 0, 0, .35); background: #fff;
}
.app-imgview .iv-img { display: block; flex: none; image-rendering: auto; pointer-events: none; }
.app-imgview .iv-msg { position: absolute; inset: 0; display: grid; place-items: center; color: #000; font-size: 11px; text-align: center; padding: 10px; }
.app-imgview .iv-barwrap { flex: none; display: flex; justify-content: center; background: #EEF3FA; padding: 4px 4px 6px; overflow-x: auto; overflow-y: hidden; }
.app-imgview .iv-toolbar {
  display: flex; align-items: center; gap: 1px; flex-wrap: wrap; justify-content: center;
  padding: 2px 6px; border-radius: 14px;
  background: linear-gradient(to bottom, #FDFEFF, #E1EAF8 55%, #CFDCF3);
  border: 1px solid #A7BCE0; box-shadow: 0 1px 2px rgba(40, 70, 130, .2);
}
.app-imgview .iv-btn {
  width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid transparent; background: transparent; cursor: var(--cur-arrow);
}
.app-imgview .iv-btn:hover:not(:disabled) { border-color: #7DA2CE; background: radial-gradient(circle at 50% 35%, #fff, #D5E4FA 70%, #BCD2F4); }
.app-imgview .iv-btn:active:not(:disabled), .app-imgview .iv-btn.on { border-color: #6D8FC4; background: radial-gradient(circle at 50% 60%, #B7CEF1, #CEDDF6); }
.app-imgview .iv-btn:disabled { opacity: .35; filter: grayscale(1); }
.app-imgview .iv-btn svg { pointer-events: none; }
.app-imgview .iv-sep { width: 1px; height: 18px; margin: 0 3px; background: #A7BCE0; box-shadow: 1px 0 #fff; }
@media (max-width: 480px) {
  .app-imgview .iv-btn { width: 30px; height: 30px; }
  .app-imgview .iv-toolbar { border-radius: 8px; }
}

/* full-screen slide show */
.app-imgview-slides { position: fixed; inset: 0; z-index: 99800; background: #000; outline: none; cursor: var(--cur-arrow); }
.app-imgview-slides.hide-cursor { cursor: none; }
.app-imgview-slides .ivs-img {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; opacity: 0; transition: opacity 1s ease;
  pointer-events: none;
}
.app-imgview-slides .ivs-img.show { opacity: 1; }
.app-imgview-slides .ivs-bar {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; padding: 3px; opacity: 0; transition: opacity .3s;
  background: linear-gradient(to bottom, #FDFEFF, #D3DFF3); border: 1px solid #7F9DB9; border-radius: 3px;
}
.app-imgview-slides .ivs-bar.show { opacity: 1; }
.app-imgview-slides .ivs-btn { min-width: 26px; height: 22px; border: 1px solid transparent; border-radius: 3px; background: transparent; font-size: 10px; color: #1D3F7A; padding: 0 4px; }
.app-imgview-slides .ivs-btn:hover { border-color: #7DA2CE; background: #fff; }