.js .inputfile
{
   width: 0.1px;
   height: 0.1px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   z-index: -1;
}

.inputfile + label
{
   max-width: 80%;
   /* 20px */
   font-weight: 400;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   display: inline-block;
   overflow: hidden;
   padding: 0.425rem 1rem;
   /* 10px 20px */
}

.no-js .inputfile + label
{
   display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label
{
   outline: 1px dotted #000;
   outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * 
{
   /* pointer-events: none; */
   /* in case of FastClick lib use */
}

.inputfile + label svg 
{
   width: 1em;
   height: 1em;
   vertical-align: middle;
   fill: currentColor;
   margin-top: -0.25em;
   /* 4px */
   margin-right: 0.25em;
   /* 4px */
}

.inputfile-2 + label 
{
   color: #156d99;
   border: 2px solid currentColor;
}

.inputfile-2:focus + label,
.inputfile-2.has-focus + label,
.inputfile-2 + label:hover 
{
   color: #156d99;
}