.js .inputfile {
    width: 0.1px; height: 0.1px;
    opacity: 0; overflow: hidden;
    position: absolute; z-index: -1;
}
.inputfile + label, .uploadfile {
    width: 100%;
    font-size: 1.25rem; /* 20px */
    /*font-weight: 700;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer; display: flex;
    overflow: hidden;
    padding: 0.625rem 1.25rem; /* 10px 20px */
}
.no-js .inputfile + label,.no-js .uploadfile {
    display: none;
}
.inputfile:focus + label, 
.inputfile.has-focus + label {
    outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label *, .uploadfile * {
    pointer-events: none; /* in case of FastClick lib use */
}
.inputfile + label svg, .uploadfile svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em; /* 4px */
    margin-right: 0.25em; /* 4px */
}

/* style 6 */
.uploadfile {
    /*color: #006341; */background-color: #f4f4f4;
    padding: 0 !important; margin: 0 0 15px;
}
.inputfile:focus + label,
.inputfile.has-focus + label,
.uploadfile:hover {/*border-color: #722040;*/ outline: none;}
.uploadfile span, .uploadfile strong {
    padding: 10px 15px;
}
.uploadfile span {
    width: 100%; min-height: 2em;
    display: block; text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; vertical-align: top;
}
.uploadfile strong {
    height: 100%; color: #404040;
    background-color: #d2d2d2;
    display: inline-block; font-weight: normal;
    transition: all ease .2s;
}
.inputfile:focus + label strong,
.inputfile.has-focus + label strong,
.uploadfile:hover strong {
    background-color: #c6c4c4;
}
@media screen and (max-width: 50em) {
	.uploadfile strong {
		display: block;
	}
}