#image-container img {
  border: dashed 5px #ccc;
  max-height: 78dvh;
}

#upload-container .uk-modal-body::before {
  --size: 2vw;
  --line: var(--foreground-mid-2);
  content: "";
  height: calc(100vh);
  width: calc(100vw);
  position: fixed;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      calc(var(--size) * 0.36) 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
      calc(var(--size) * 0.32) / var(--size) var(--size);
  /* mask: linear-gradient(0deg, white 50%, white 50%); */
  top: 0;
  left: 0;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}

.imu-image-container {
  display: flex;
  align-items: center;
  margin: 6px;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s ease;
  height: 50vh;
}

html::before {
  --size: 45px;
  --line: var(--foreground-mid);
  content: "";
  height: calc(100vh + 16px);
  width: calc(100vw + 16px);
  position: fixed;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      calc(var(--size) * 0.36) 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
      calc(var(--size) * 0.32) / var(--size) var(--size);
  mask: linear-gradient(-20deg, transparent 50%, #fff);
  top: -16px;
  left: -16px;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;

  /*   
  --size: 5dvw;
  --line: var(--foreground-mid);
  content: "";
  position: fixed;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      calc(var(--size) * 0.36) 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
      calc(var(--size) * 0.32) / var(--size) var(--size);
  right: -3.2vw;
  bottom: -5vw;
  left: -3.2vw;
  top: 100px;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5; */
}

.instruction {
  /* translate: 240% -220%; */
  z-index: 1;
}

.instruction svg {
  position: absolute;
  right: 0;
  top: 0;

  width: 50vw;
  /* transform: rotate(180deg) scale(1.95); */
}

.instruction span {
  display: inline-block;
  translate: 214% -355%;
  rotate: -10deg;
  font-size: 1.875rem;
}

.upload-pattern {
  /* background-color: #c1c1c1; */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='rotate(79) '%3E%3Cpath id='a' data-color='fill' fill='var%28--foreground-mid-2%29' stroke='%23E2E2E2' stroke-width='50' d='M49-1h2v102h-2z'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}