/* file-upload */

.ff-input-file-items {
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0;
}

.ff-input-file-item {
	display: flex;
	width: 100%;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
	margin: 5px 0;
	
	position: relative;
}

.ff-input-file-item.failed {
	background-color: var(--box-warning-background);
}

.ff-input-file-item-error {
	color: var(--warning-color);
	margin-top: 5px;
}

.ff-input-file-item-error .ff-i-warning::before {
    margin-right: 10px;
}

.ff-input-file-item.complete {
	background-color: var(--input-slider-progress-background);
}

.ff-input-file {
	position: relative;
	
	border: 1px solid var(--input-choice-border);
	background-image: repeating-linear-gradient(-45deg, 
      transparent 0 10px, 
      var(--input-choice-border) 10px 20px);
}

.ff-input-file span {
	display: block;
	position: absolute;
	top: 0;
	text-align: center;
	top: 50%;
	pointer-events: none;
	transform: translate(-50%,-50%);
	left: 50%;
	width: 100%;
	
    color:  var(--title-color);
    text-shadow: 0px 10px 10px var(--title-color);
}

.ff-input-file input {
	opacity: 0;
	height: 200px;
}

.ff-input-file-info {
	flex: 3;
	overflow: hidden;
	z-index: 1;
	color: var(--text-color);
}

.ff-input-file-info p {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ff-input-file-progress-wrapper {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--input-slider-track-background);
	clear: both;
}

.ff-input-file-progress {
	height: 100%;
	width: 0;
	background-color: var(--input-slider-progress-background);
	transition: width 0.5s linear;
}