:root{
  --fileholder-padding:20px;
  --fileholder-drop-text-color:#15C39A;
  --base-color:#15C39A;
  --fileholder-danger:#FF3C41;
}

/* Inputs are hidden; FileHolder injects its own UI wrapper. */
input.file-holder{
  display:none;
  opacity:0;
  visibility:hidden;
}

/* Default: hidden until JS adds .active */
.fileholder{
  visibility:hidden;
  opacity:0;
  height:0;
  border-radius:6px;
  overflow:hidden;
}

.fileholder.active{
  visibility:visible;
  opacity:1;
  height:auto;
  border:2px dashed var(--base-color);
  padding:var(--fileholder-padding);
  position:relative;
}

.fileholder-drag-drop-box{
  visibility:hidden;
  opacity:0;
  height:0;
  transform:translateY(-20px);
  transition:0.3s;
}

.fileholder.active .fileholder-drag-drop-box{
  visibility:visible;
  opacity:1;
  height:100%;
  transform:translateY(0);
}

.fileholder.drag-over{
  box-shadow: rgb(204, 219, 232) 0px 0px 10px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
  transition:0.3s;
  border-color:transparent;
}

.fileholder-underline{
  text-decoration:underline;
  cursor:pointer;
}

/* Preview wrapper */
.fileholder-files-view-wrp{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  align-items:center;
}
.fileholder-single-file-view{
  min-width:150px;
  width:calc((100% - (15px * 7)) / 8);
  height:180px;
  padding:5px;
  border-radius:8px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  overflow:hidden;
  position:relative;
}

.fileholder-single-file-view.accept-single-file{
  width:100%;
}

.fileholder-perview-single .fileholder-single-file-view{
  width:100%;
}

.fileholder-image{
  width:100%;
  height:100%;
  object-fit:cover;
}

.fileholder-preview-image{
  width:100%;
  height:100%;
  object-fit:contain;
}

.fileholder-file-remove-button,
.fileholder-preview-file-remove-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  background-color:var(--fileholder-danger);
  border-radius:50%;
  cursor:pointer;
}