.file-dnd * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   .file-dnd {
     width: 100%;
     height: 250px;
     border: 1px solid #ddd;
     border-radius: 10px;
     padding: 15px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     /* box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.05); */
     margin: auto;
   }
   .file-dnd input {
     display: none;
   }
   .file-dnd .before-upload {
     border: 1px dashed #888;
     flex: 1;
     border-radius: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     cursor: pointer;
   }
   .file-dnd .before-upload > div {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
   }
   .file-dnd .before-upload > div h4 {
     width: 150px;
   }
   .file-dnd .before-upload > div p {
     font-size: 12px !important;
     color: #555;
   }
   .file-dnd.active .before-upload {
     border: 1px solid #5750d9;
     background-color: #f5f5ff;
   }
   .file-dnd .after-upload {
     position: relative;
     display: none;
   }
   .file-dnd .after-upload img {
     width: 100%;
     border-radius: 5px;
     max-height: 180px;
     object-fit: contain;
     display: block;
   }
   .file-dnd .after-upload .clear-btn {
     position: absolute;
     top: 10px;
     right: 10px;
     background: rgba(0, 0, 0, 0.5);
     width: 15px;
     height: 15px;
     text-align: center;
     line-height: 15px;
     border-radius: 50%;
     color: #fff;
     cursor: pointer;
     font-size: 14px;
   }