.compact-form {
   max-width: 720px;
}

.toastify {
   max-width: 20rem;
   z-index: 1200;
   left: 0;
   top: 0;
   opacity: 0;
   transform: translateY(-10px);
   transition: opacity 0.4s ease, transform 0.4s ease;
   pointer-events: auto;
}

/* Saat toast muncul */
.toastify.show {
  opacity: 1;
  transform: translateY(0);
}

/* Saat toast akan ditutup */
.toastify.hide {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.close-toast-btn {
   border: none;
   outline: none;
   background: none;
   height: fit-content;
}

.icon-xs {
   width: 16px;
   height: 16px;
}

.icon {
   width: 24px;
   height: 24px;
}

.icon-md {
   width: 32px;
   height: 32px;
}

.icon-lg {
   width: 48px;
   height: 48px;
}

.line-sm {
   line-height: 1px;
}


.doc-preview {
   max-width: 330px;
   margin: 0 auto 0 auto;
   background-color: white;
}
.header::before {
   content: ''; /* Required for the pseudo-element to be rendered */
  background-image: url('../img/locals/paser.png'); /* Replace with your image path */
  background-size: cover; /* Adjust as needed */
  background-position: center; /* Adjust as needed */
  position: absolute;
  top: 0;
  left: 20px;
  width: 40px;
  height: 40px;
  z-index: 100; /* Places the image behind the content */
}
.header p {
   font-size: 8px;
   margin-bottom: 0;
}
.header p:nth-child(2) {
   font-size: 10px;
}
p.address {
   text-align: center;
   font-size: 8px;
}

.doc-body {
   font-size: 8px;
}
.doc-body i > span:not(:nth-child(1)) {
   text-decoration: line-through;
}

.signature {
   font-size: 8px;
}
.signature p:nth-child(2) {
   margin-bottom: 0;
}

.doc-footer {
   font-size: 8px;
}

.signature-image {
   position: absolute;
   top: 10px;
   left: 50%;
   transform: translateX(-50%);
   visibility: hidden;
}
.signature-image.show {
   visibility: visible;
}

.avatar {
   opacity: .75;
}