.dropArea {
    border: 2px dashed #c4c4c4;
    border-radius: 15px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    min-height: 130px;
}

    .dropArea:hover {
        background-color: lightskyblue;
        color: #333;
    }

    .dropArea input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.dropAreaDrug {
    background-color: lightseagreen;
}

/*add this to avoid flickering*/
.plk-dd-inprogess > * {
    pointer-events: none;
}

/*dropzone style style*/
.plk-dd-dropzone {
    min-height: 50px;
}

/*drag drop styles*/

.plk-dd-spacing {
    height: 10px;
}

.plk-dd-spacing-dragged-over {
    padding: 25px;
}

.plk-dd-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

.plk-dd-dragged-over > div {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

.plk-dd-dragged-over-denied {
	background-color: red;
	opacity: 0.6;
	animation: blinker 1s linear infinite;
}

.plk-dd-in-transit {
    opacity: 0;
}

.plk-dd-in-transit > div {
     opacity: 0;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink_me {
    animation: blinker 1s linear infinite;
}

/*for flex demo*/

.plk-flex .plk-dd-spacing {
    width: 20px;
    height: auto;
}

.plk-flex .plk-dd-dragged-over {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

.plk-flex .plk-dd-dragged-over > div {
    background-color: lightgray;
    opacity: 0.9;
    animation: blinker 1s linear infinite;
}

.plk-flex .plk-dd-in-transit {
    background-color: orangered;
}

.plk-flex .plk-dd-in-transit > div {
    background-color: orangered;
}

.plk-dd-noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.flex-item {
    width: 100px;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: orange;
    align-items: center;
    justify-content: center;
}

.flex-container {
    display: flex;
    /*background-color: dodgerblue;*/
}

/* Container needed to position the overlay. Adjust the width as needed */
.imageContainer, .imageContainerSingle {
    position: relative;
    width: 100%;
    height: 100%;
}

    /* Make the image to responsive */
    .imageContainer .image {
        width: 100%;
        height: 100%;
        cursor: move;
    }

    /* The overlay effect (full height and width) - lays on top of the container and over the image */
    .imageContainer .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .3s ease;
        background-color: red;
        cursor: move;
    }

    /* When you mouse over the container, fade in the overlay icon*/
    .imageContainer:hover .overlay, .imageContainerSingle:hover .overlay {
        opacity: 0.8;
    }

    /* The icon inside the overlay is positioned in the middle vertically and horizontally */
    .imageContainer .icon, .imageContainerSingle .icon {
        color: white;
        font-size: 25px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }

    /* When you move the mouse over the icon, change color */
    .imageContainer .fa-trash:hover, .imageContainerSingle .fa-trash:hover {
        color: #eee;
    }

    .imageContainerSingle .overlay {
        position: absolute;
        border-radius: 10px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .3s ease;
        background-color: red;
        margin: auto;
    }