droploader.css

.droploader {
	font-size: 1.25rem; /* 20 */
	background-color: #c8dadf;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.droploader.has-dragdrop {
	outline: 2px dashed #92b0b3;
	outline-offset: -10px;

	-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
	transition: outline-offset .15s ease-in-out, background-color .15s linear;
}
.droploader.is-dragover {
	outline-offset: -20px;
	outline-color: #c8dadf;
	background-color: #fff;
}
.droploader .drophere,
.droploader svg {
	display: none;
}
.droploader.has-dragdrop .drophere {
	display: inline;
}
.droploader.has-dragdrop svg {
	width: 100%;
	height: 80px;
	fill: #92b0b3;
	display: block;
	margin-bottom: 40px;
}

.droploader input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.droploader input + label {
	max-width: 80%;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
}
.droploader input + label:hover strong,
.droploader input:focus + label strong,
.droploader input.has-focus + label strong {
	color: #39bfd3;
}
.droploader input:focus + label,
.droploader input.has-focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}
.droploader input + label * {
	/* pointer-events: none; */ /* in case of FastClick lib use */
}