.image-preview-container {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
transition: all 0.3s;
display: none;
color: #FFFFFF;
will-change: transform;
user-select: none;
}

.image-preview-container.show {
animation: show 0.5s forwards;
}

.image-preview-container.hiding .preview-header {
animation: opacityAnimation 0.5s forwards reverse;
}

.image-preview-container img {
transition: all 0.5s;
transform: translateX(var(--offsetX)) translateY(var(--offsetY)) translateZ(0) scale(var(--scale), var(--scale))
rotate(var(--rotate));
}

.image-preview-container .image-container {
width: 100% !important;
height: 100% !important;
overflow: hidden;
}

#preview-image {
max-width: 90vw;
max-height: 80vh;
object-fit: contain;
display: block;
margin: auto;
transition: transform 0.4s ease;
will-change: transform;
}

.image-preview-container .preview-header {
height: 60px;
background-color: #0D3C60;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2vw 0 1vw;
position: relative;
z-index: 90;
animation: opacityAnimation 0.5s forwards;
}

.image-preview-container .preview-header .nums {
display: flex;
justify-content: flex-start;
align-items: center;
}

.image-preview-container .preview-header .nums p {
padding: 4px 8px;
font-size: 16px;
}

.image-preview-container .preview-header button {
background: none;
border: none;
outline: none;
font-size: 18px;
color: #FFFFFF;
padding: 4px 8px;
position: relative;
}

.image-preview-container .preview-header .tool-btn button {
margin-left: 2vw;
}

.image-preview-container .preview-header button:hover {
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
}

.zoom-in {
cursor: zoom-in;
}

.moving {
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}

@keyframes show {
0% {
background: rgba(0, 0, 0, 0);
}
100% {
background: rgba(0, 0, 0, 0.6);
}
}

@keyframes opacityAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.iconfont {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-style: normal;
}

.icon-next:before {
content: '\f054';
}

.icon-prev:before {
content: '\f053';
}

.icon-close:before {
content: '\f00d';
}

#reset {
display: none;
}

@media screen and (max-width: 768px) {
.preview-header .nums p, .preview-header .iconfont {
font-size: 12px !important;
}
}

/* Slide out to left */
.slide-out-left {
  animation: slideOutLeft 0.3s forwards;
}

/* Slide out to right */
.slide-out-right {
  animation: slideOutRight 0.3s forwards;
}

/* Slide in from left */
.slide-in-left {
  animation: slideInLeft 0.3s forwards;
}

/* Slide in from right */
.slide-in-right {
  animation: slideInRight 0.3s forwards;
}

@keyframes slideOutLeft {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideOutRight {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes slideInLeft {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}