:root {
  --gf-blue: rgb(51, 90, 163);
  --gf-green: rgb(129, 178, 72);
  --gf-grey: rgb(99, 109, 111);
  --gf-lightblue: rgb(60, 172, 228);
}

.dz {
  border: 1px dashed;
  background-color: #e4e4e4;
  border-radius: 10px;
}

.dz:hover {
  background-color: #f8fff0;
}

.dropzone .dz-preview {
  position: relative;
}

.dropzone .dz-preview .dz-remove {
  position: absolute;
  bottom: -17px;
  right: -11px;
  z-index: 1000;
  padding: 5px;
  font-size: 1.5em;
  color: rgba(0, 0, 0, 0.7);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.dropzone .dz-preview .dz-remove:hover,
.dropzone .dz-preview .dz-remove:focus {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.9);
}

.dropzone .dz-preview .dz-remove::after {
  content: "\f057";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.dz-remove.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes passing-through {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  animation-fill-mode: forwards;
}

.dropzone .dz-preview.dz-error .dz-error-mark svg g path {
  fill: #f44336; /* Red color */
}

.dropzone .dz-preview.dz-success .dz-success-mark svg g path {
  fill: var(--gf-green); /* Red color */
}

.dropzone .dz-preview.dz-invalid-file {
  border: 2px solid red;
}