div.file-upload-widget {
	div.file-button {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 0;
		div.widget-message::after,
		div.widget-message::before {
			color: #7f7f7f;
		}
	}
	&.has-file div.file-button {
		background-size: contain;
	}
	div.file-button.file-image {
		div.widget-message {
			&::after {
				content: none;
			}
			&::before {
				content: "";
				background: url(img/photo-add.png) 50% 0px no-repeat;
				box-sizing: content-box;
				height: 40px;
			}
		}
	}
	&.has-file div.file-button.file-image {
		div.widget-message {
			background: rgba(250, 250, 250, 0.8);
		}
		div.widget-message::before {
			background-image: url(img/photo-done.png);
		}
	}
	div.fileinfo a.remove::before {
		color: $red;
	}
	div.fileprogress {
		.bar {
			background: $red;
		}
	}
	div.fileinfo {
		background: rgba(250, 250, 250, 0.8);
	}
}
div.xtemplate-photo {
	div.hint {
		display: none;
	}
	div.content {
		border: 1px dashed #7f7f7f;
		height: 200px;
		position: relative;
		text-align: center;
		background: url(img/photo-add.png) 50% 50px no-repeat;
		input {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0.001;
			margin: 0;
			cursor: pointer;
		}
		div.fileprogress {
			position: absolute;
			border: none;
			overflow: hidden;
			width: 100%;
			left: 0;
			bottom: 0;
		}
	}
	.widget-message {
		position: absolute;
		width: 100%;
		top: 130px;
	}
	.upload-done {
		display: none;
	}
	&.has-file {
		div.content {
			background-image: url(img/photo-done.png);
			padding-bottom: 0;
			border-bottom: 5px solid $red;
		}
		.click-to-upload {
			display: none;
		}
		.upload-done {
			display: block;
		}
	}
	&.has-no-file {
		.click-to-upload {
			display: none;
		}
	}

	div.fileinfo {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		overflow: hidden;
		.filename {
			display: none;
		}
		text-align: center;
		img {
			height: 100%;
		}
		a.remove {
			display: block;
			text-indent: -10000px;
			top: 0;
			right: 0;
			position: absolute;
			&::before {
				content: "×";
				text-indent: 0;
				display: block;
			}
		}
	}
	&.widget-readonly.has-file {
		.widget-message {
			display: none;
		}
	}
	&.widget-readonly.has-no-file {
		display: none;
	}

}

input[readonly], select[readonly], textarea[readonly] {
	background: white;
	border: $widget-border;
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
}

div.buttons {
	display: flex;
	justify-content: center;
	.cancel-button {
	}
	.previous-button {
		order: 0;
	}
	.submit-button {
		order: 1;
		button {
			margin-right: 0;
		}
	}
}
