/* Overlay background */
#dialogOverlay {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  justify-content:center;
  align-items:center;
  z-index:999;
}

/* Dialog box */
.dialogBox {
  background:#fff;
  width:40%;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
  animation:scaleIn 0.3s ease;
}

/* Header */
.dialogHeader {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 15px;
  background: #071527;
  color:#fff;
  
}
.dialogHeader h3 {
  font-size: 1.2rem;
 }
.closeDialog {
  cursor:pointer;
  font-size:20px;
}

/* Body */
.dialogBody {
  padding:20px;
  font-size:14px;
  color:#333;
  text-align: center;
  justify-content: center;
}
.dialogBody .row {
  text-align: center;
}
.dialogBody img {
  width: 60%;
  height: auto;
}
/* Footer */
.dialogFooter {
  padding:10px;
  text-align:right;
}

.dialogFooter button {
  padding:6px 12px;
  margin-left:5px;
  border:none;
  border-radius:5px;
  cursor:pointer;
}

.okBtn {
  background:#28a745;
  color:white;
}

.cancelBtn {
  background:#dc3545;
  color:white;
}

/* Animation */
@keyframes scaleIn {
  from{
    transform:scale(0.7);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}