/* Custom File Input Styles */
.wp-custom-file-input.file-input-wrapper {
    position: relative;
    margin: 8px 0;
    border: 0;
    padding: 0;
    border-radius: 4px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.wp-custom-file-input.file-input-wrapper .input-area {
    position: relative;
    width: 100%;
    height: 150px;
    display: flex;
	flex-direction:column;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 1px dashed var(--border-color);
    color: var(--text-color);
    border-radius: 10px;
	background: var(--background-color);
	font-size:.85rem;
	font-weight:300;
	box-shadow:0px 0px 0px 0px rgba(0,0,0,.0);
	transition:all .3s ease;

}

.wp-custom-file-input.file-input-wrapper .input-area:hover {
	box-shadow:0px 12px 16px -10px rgba(0,0,0,.077);
	transition:all .3s ease;
	color:#333;
}
.wp-custom-file-input.file-input-wrapper .input-area:before {
    content: " ";
    display: block;
    background: url(/wp-content/plugins/custom-file-input/assets/img/upload-icon.svg) center center no-repeat;
    background-size: contain;
    height: 24px;
    width: 30px;
    margin-bottom: 8px;
    opacity: .85;
	transition:all .3s ease;
}

.wp-custom-file-input.file-input-wrapper .input-area:hover:before {
		transition:all .3s ease;
	opacity: 1;

}

.wp-custom-file-input.file-input-wrapper input[type="file"] {
    position: absolute;
    width: 100%;
    height: 150px;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.wp-custom-file-input.file-input-wrapper .drag-message {
    text-align: center;
    color: var(--text-color);
    margin: 0 0;
    position: absolute;
    top: 102px;
    right: 0px;
    font-size: .85rem;
    pointer-events: none;
	text-align:center;
	opacity:.6;
	width:100%;
}

.wp-custom-file-input.file-input-wrapper .file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin-top: 0px;
    width: 100%;
}

.wp-custom-file-input.file-input-wrapper .file-item {
    padding: 8px;
    border-radius: 4px;
    display: flex;
	flex-direction:row;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    border: 1px solid var(--border-color);
    gap: 8px;
    width: 100%;
	margin-top:8px;
	background: var(--background-color);
	font-size:.85rem;	
	    color: var(--text-color);
	opacity:.75;
	transition:all .3s ease;

}

.wp-custom-file-input.file-input-wrapper .file-item:hover {
	opacity:1;
		transition:all .3s ease;

}
.wp-custom-file-input.file-input-wrapper .file-item .remove-file {
    color: #ff4444;
    cursor: pointer;
	display:flex;
	align-items:center;
	justify-content:center;
}

.wp-custom-file-input.file-input-wrapper .file-item .remove-file img{
			filter:grayscale(100%);
		width:13px;
		min-width:13px;
		max-width:13px;
		transition:all .3s ease;

}
.wp-custom-file-input.file-input-wrapper .file-item .remove-file:hover img{
		filter:grayscale(0);
		transition:all .3s ease;

}

.wp-custom-file-input.file-input-wrapper.drag-over {
    background: rgba(0,0,0,0.05);
}


/* remove default elementor message from input files */
.input-area.elementor-error input[type="file"] ~ .elementor-message.elementor-message-danger {
    display: none !important;
}