/* Position the error message above the thumbnail and to the right */
.dropzone .dz-error-message {
    position: absolute;
    top: 5px; /* Position at the top of the thumbnail */
    right: 5px; /* Position to the right inside the thumbnail */
    background: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 4px;
    font-size: 0.8em;
    color: #d9534f;
    z-index: 10; /* Above the thumbnail but below the 'Remove file' link */
}

/* Style the 'Remove file' link to resemble a button below the thumbnail */
.dropzone .dz-preview .dz-remove {
    position: absolute;
    bottom: -28px; /* Position below the thumbnail */
    left: 50%; /* Center it below the thumbnail */
    transform: translateX(-50%);
    background: #d9534f; /* Use a color that stands out */
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    border: none; /* Remove any default border */
    z-index: 20; /* Above the error message */
    cursor: pointer;
}

/* Additional styling for the thumbnail container to accommodate the error message and 'Remove file' link */
.dz-error-message{
    position: absolute; 
    padding-bottom: 40px; 
    top : 150px !important;
}


.dz-error-mark {
    z-index: 9999 !important; /* Adjust the value as needed */
}

.dz-remove {
    bottom: 30px;
    width: 100px;
}