/* hide parts of file upload box until we need them */
.fileBox_dragndrop,
.fileBox_uploading,
.fileBox_success,
.fileBox_close,
.fileBox_error {
	display:none;
}

.fileBox
{
	pointer-events:auto; /* important, otherwise no drag events will occur */
    cursor:auto;
	padding:0;
}

.fileBox_success {
	height:100%;
	width:100%;
}

.fileBox_image {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity:1;
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
}

.fileBox.is-success .fileBox_close {
	display:block;
	position:absolute;
	top:0;
	right:0;
	width:41px;
	height:41px;
    cursor:pointer;
	pointer-events:auto;
	opacity:1;
	background-color:rgba(0,0,0,.5);
}

.fileBox.is-dragover
{
	background-color:#fff;
}

.fileBox.has-advanced-upload {
	outline:2px dashed black;
	outline-offset:-12px;
	-webkit-transition:outline-offset .15s ease-in-out, background-color .15s linear;
	transition:outline-offset .15s ease-in-out, background-color .15s linear;
}

.fileBox_interaction {
	cursor:pointer;
	width:100%;
	height:100%;
}

.fileBox_label {
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	line-height:125%;
	width:100%;
	padding:6px 12px 8px 12px;
	color:#aaa;
	/*text-shadow:rgba(0,0,0,1) 1px 1px 3px;*/
}

.fileBox_dragndrop {
	line-height:125%;
}

.fileBox.has-advanced-upload .fileBox_dragndrop {
	display:block;
	color:#aaa;
}

.fileBox.is-uploading .fileBox_interaction,
.fileBox.is-success .fileBox_interaction,
.fileBox.is-error .fileBox_interaction
{
	visibility:hidden;
}
.fileBox.is-uploading .fileBox_uploading,
.fileBox.is-success .fileBox_success,
.fileBox.is-error .fileBox_error
{
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	width:100%;
	padding:0 12px;
	line-height:125%;
	color:#aaa;
	pointer-events:none;
}
/*
.fileBox_success
{
	-webkit-animation:appear-from-inside .25s ease-in-out;
	animation:appear-from-inside .25s ease-in-out;
}
@-webkit-keyframes appear-from-inside
{
	from	{ -webkit-transform:translateY(-50%) scale(0); }
	75%		{ -webkit-transform:translateY(-50%) scale(1.1); }
	to		{ -webkit-transform:translateY(-50%) scale(1); }
}
@keyframes appear-from-inside
{
	from	{ transform:translateY(-50%) scale(0); }
	75%		{ transform:translateY(-50%) scale(1.1); }
	to		{ transform:translateY(-50%) scale(1); }
}*/

.fileBox_input
{
	width:0.1px;
	height:0.1px;
	opacity:0;
	overflow:hidden;
	position:absolute;
	z-index:-1;
}
.fileBox_input + label
{
	max-width:100%;
	cursor:pointer;
	display:inline-block;
	overflow:hidden;
}
.fileBox_input + label:hover,
.fileBox_input:focus + label,
.fileBox_input.has-focus + label
{
	color:#fff;
}