/* Delete Status */
.easyfua-icon-remove.deleting { font-size:12px; color:#000; font-weight: 500; position: relative; top:-3px; }
.easyfua-icon-remove.deleting:after { display:none!important; }

#easyfua-uploader {
	display:none;
	opacity:0;
	visibility:hidden;
	position:absolute;
	top:0;
}

#easyfua-form .codedropz-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.easyfua-placeholder {
	width: 25px;
	height: 25px;
	display: block;
	margin: 0 auto;
	background: url('../icons/upload-placeholder.png') no-repeat;
	background-size: contain;
}

/* Upload Status */
.easyfua-upload-status {
	display:flex;
	padding:4px 0;
	align-items:center;
	position:relative;
}

/* Progress bar - Image */
.easyfua-upload-status .dnd-upload-image {
	width:40px;
	height:40px;
	border:1px solid #a5a5a5;
	text-align:center;
	border-radius:100%;
	position:relative;
}
.easyfua-upload-status .dnd-upload-image span.file {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='23' viewBox='0 0 18 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.569 0.659576H0.5V23H18V6.09053L12.569 0.659576ZM12.7872 1.93075L16.7288 5.87234H12.7872V1.93075ZM1.24468 22.2553V1.40426H12.0426V6.61702H17.2553V22.2553H1.24468Z' fill='%235C5B5B'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 21px;
    width: 16px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -moz-transform : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

/* Progress bar - Image Details ( Name and Size ) */
.easyfua-upload-status .dnd-upload-details {
	padding-left:10px;
	width: calc(100% - 40px);
}
.easyfua-upload-status .dnd-upload-details .name {color:#016d98; padding:4px 0; padding-right:60px; display:flex; }
.easyfua-upload-status .dnd-upload-details .name span { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: relative; padding-right:10px; }
.easyfua-upload-status .dnd-upload-details .name em {color:#444242;	font-weight:700; }

/* Remove Upload File */
.easyfua-upload-status .dnd-upload-details .remove-file {
	position:absolute;
	right:0;
	top:10px;
	text-decoration:none;
	box-shadow:none;
	outline:none;
    opacity:1;
}
.easyfua-upload-status .dnd-upload-details .remove-file span:after {
    content: '';
    width:15px;
    height:15px;
    display: block;
    background-repeat:no-repeat;
    background-size:100%;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 0C7.83499 0 0 7.83499 0 17.5C0 27.165 7.83499 35 17.5 35C27.165 35 35 27.165 35 17.5C34.9888 7.83965 27.1604 0.0112198 17.5 0ZM17.5 33.871C8.45857 33.871 1.12903 26.5414 1.12903 17.5C1.12903 8.45857 8.45857 1.12903 17.5 1.12903C26.5414 1.12903 33.871 8.45857 33.871 17.5C33.861 26.5373 26.5373 33.861 17.5 33.871Z' fill='black'/%3E%3Cpath d='M25.4834 9.51661C25.2629 9.29624 24.9056 9.29624 24.6852 9.51661L17.5 16.7018L10.3148 9.51661C10.0983 9.29236 9.74087 9.28615 9.51661 9.50271C9.29236 9.71927 9.28615 10.0767 9.50271 10.3009C9.50723 10.3057 9.51188 10.3103 9.51661 10.3148L16.7018 17.5L9.51661 24.6852C9.29236 24.9018 9.28615 25.2591 9.50278 25.4834C9.71941 25.7076 10.0768 25.7139 10.301 25.4972C10.3057 25.4927 10.3103 25.488 10.3148 25.4834L17.5 18.2982L24.6852 25.4834C24.9094 25.7 25.2668 25.6938 25.4834 25.4696C25.6947 25.2508 25.6947 24.9039 25.4834 24.6852L18.2982 17.5L25.4834 10.3148C25.7038 10.0944 25.7038 9.73705 25.4834 9.51661Z' fill='black'/%3E%3C/svg%3E%0A");
}
.easyfua-upload-status.in-progress .remove-file { opacity:0.2;}

.easyfua-upload-status .dnd-upload-details span.has-error { color:#f50505; }

/* Progress Loading */
.easyfua-upload-status .dnd-upload-details .dnd-progress-bar {
	display: block;
    border-radius: 5px;
    overflow: hidden;
    background: #565555;
    height: 14px;
}
.easyfua-upload-status .dnd-upload-details .dnd-progress-bar span {
    background: #4CAF50;
    display: block;
    font-size: 11px;
    text-align: right;
    color: #fff;
    height: 100%;
	width:0;
	line-height:14px;
}
.easyfua-upload-status .dnd-upload-details .dnd-progress-bar span.complete { width:100%!important; padding-right:5px; }
.dnd-upload-counter { position:absolute; right:5px; bottom:3px; font-size:12px; }

/* CodeDropz Upload Plugin */
.codedropz-upload-handler {
	border:2px dashed #c5c5c5;
	border-radius:5px;
	margin-bottom:10px;
	position:relative;
}
.codedropz-upload-container {
	padding:15px 20px;
}

.codedropz-upload-inner {
	overflow:hidden;
	width:100%;
	/*white-space: nowrap;*/
	text-align:center;
	text-overflow: ellipsis;
	font-weight:inherit;
}
.codedropz-upload-inner .codedropz-btn-wrap a.cd-upload-btn {
	text-decoration:none;
	box-shadow:none;
}
.codedropz-upload-inner h3 {
	margin:5px 0;
	font-size:30px;
	line-height:32px;
    word-break:break-word;
}

/* Add border on dragenter, drag etc */
.codedropz-dragover {
	border-color:#6b6a6a;
}

.codedropz-upload-wrapper span.has-error-msg {
	display:inline-block;
	color:#ff0000;
	padding:5px 0;
	font-style:italic;
}

/* Form */
#easyfua-form {
	font-size: inherit;
}

#easyfua-form a.cd-upload-btn {
	color: #1989fc;
	outline: none;
}

#easyfua-form .codedropz-upload-container {
	padding: 20px;
}

/* Fields */
#easyfua-form .easyfua-field {
	margin: 1rem 0;
}

#easyfua-form .easyfua-field label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.5em;
}

#easyfua-form .easyfua-field input[type="text"],
#easyfua-form .easyfua-field input[type="email"] {
	padding: 0.75em;
	border-radius: 3px;
	display: block;
	border:1px solid #bbb;
	width: 100%;
	outline: none;
}

#easyfua-form .easyfua-submit-field #easyfua-submit {
	padding: 1em 2em;
	border: 0;
    outline: 0;
    cursor: pointer;
    border-radius: 5px;
    background: #000;
    color: #fff;
	transition: background .25s ease, transform .12s ease;
}

#easyfua-form .easyfua-submit-field #easyfua-submit:focus,
#easyfua-form .easyfua-submit-field #easyfua-submit:hover {
	background-color: #767676;
	border-color: transparent;
}

/* Submit Button */
.easyfua-submit-field {
	display: flex;
	align-items: center;
}

/* Form Submission Error */
.easyfua-error {
	color: #b03a2e;
	display: block;
	margin: 3px 0;
}
.easyfua-status {
	display: inline-block;
	padding: 10px 15px;
	margin-top: 10px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	width: 100%;
	box-sizing: border-box;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.easyfua-status.success {
	background-color: #e6f7ed;
	border: 1px solid #27ae60;
	color: #2d8659;
}

.easyfua-status.error {
	background-color: #fcebea;
	border: 1px solid #e74c3c;
	color: #b03a2e;
}

/* Ajax Loader */
.easyfua-loader {
	display: none;
	width: 25px;
	height: 25px;
	margin-left: 10px;
}

.easyfua-loader svg {
	animation: rotate 2s linear infinite;
	width: 100%;
	height: 100%;
	display: block;
}

.easyfua-loader svg circle {
	stroke: #000;
	stroke-linecap: round;
	animation: dash 1.5s ease-in-out infinite;
}

/* Pro css */
.easyfua-upload-status .dnd-upload-image span.dnd-icon-blank-file {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='23' viewBox='0 0 18 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.569 0.659576H0.5V23H18V6.09053L12.569 0.659576ZM12.7872 1.93075L16.7288 5.87234H12.7872V1.93075ZM1.24468 22.2553V1.40426H12.0426V6.61702H17.2553V22.2553H1.24468Z' fill='%235C5B5B'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 21px;
    width: 16px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -moz-transform : translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.easyfua-upload-status .dnd-upload-image.has-bg {
    border: 0;
    transition: transform 0.3s ease;
    max-width: 40px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.easyfua-upload-status .dnd-upload-image.has-bg:hover {
    transform: scale(1.5);
}

.easyfua-upload-status .dnd-upload-image.has-bg img {
    max-height: 100%;
    max-width: none;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.easyfua-upload-status._uploading .dnd-upload-image.has-bg:after{
    content: '';
    left:0;
    right:0;
    width:100%;
    height:100%;
    background:rgb(165 165 165 / 80%);
    position: absolute;
}

.easyfua-upload-status .dnd-upload-image span {
	font-size:20px;
	color:#222;
	position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    left: 50%;
}

.easyfua-upload-status .dnd-upload-image.generating-thumbnail span.dnd-icon-blank-file{
    width:35px;
    height:35px;
}

.easyfua-upload-status .dnd-upload-details.deleting-progress .name em { display: none; }
.easyfua-upload-status .dnd-upload-details.deleting-progress .name { padding-right: 90px; }

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
  	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

@media screen and (max-width: 767px) {
	.easyfua-upload-status .dnd-upload-details .name em { font-weight:normal; }
	.easyfua-upload-status .dnd-upload-details .name { padding-right:60px; }
	.codedropz-upload-inner h3 { font-size:22px; }
}