.highlightDropZone:after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border-radius: 0.5rem;
    background-color: var(--secondary-container);
    opacity: 0.5;
    z-index: 100;
}
.highlightDropZone:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border: 2px var(--secondary) dashed;
    border-radius: 0.5rem;
    z-index: 100;
}


.hoverDropZone:after,
.dropzoneContainer:has(.inputFile.inputFileActive):after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border-radius: 0.5rem;
    background-color: var(--primary-container);
    opacity: 0.5;
    z-index: 100;
}

.hoverDropZone:before,
.dropzoneContainer:has(.inputFile.inputFileActive):before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border: 2px var(--primary) dashed;
    border-radius: 0.5rem;
    z-index: 100;
}

.hoverNotAllowedDropZone:after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border-radius: 0.5rem;
    background-color: var(--error-container);
    opacity: 0.5;
    z-index: 100;
}

.hoverNotAllowedDropZone:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border: 2px var(--error) dashed;
    border-radius: 0.5rem;
    z-index: 100;
}

.inputFile {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    z-index: 0 !important;
}

.inputFile.inputFileActive {
    opacity: 0 !important;
    display: block;
    z-index: 1000000 !important;
}