.inputfile {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
  }
  
  .inputfile + label {
      max-width: 80%;
      font-family: Montserrat;
      font-size: 14px;
      font-weight: normal;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      display: inline-block;
      overflow: hidden;
      padding: 0.625rem 1.25rem;
  }
  
  /* style 4 */
  
  .inputfile-4 + label {
      color: #62ab11;
  }
  
  .inputfile-4:focus + label,
  .inputfile-4.has-focus + label,
  .inputfile-4 + label:hover {
      color: #62ab11;
  }
  
  .inputfile-4 + label figure {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #62ab11;
      display: block;
      padding: 20px;
      margin: 0 auto 10px;
  }
  
  .inputfile-4:focus + label figure,
  .inputfile-4.has-focus + label figure,
  .inputfile-4 + label:hover figure {
      background-color: #62ab11;
  }
  
  .inputfile-4 + label svg {
      width: 100%;
      height: 100%;
      fill: #ffffff;
  }

  /* style 1 */
  
  .inputfile-1 + label {
      color: #ffffff;
      background-color: #9dd55d;
  }
  
  .inputfile-1:focus + label,
  .inputfile-1.has-focus + label,
  .inputfile-1 + label:hover {
      background-color: #62ab11;
  }
  
  .inputfile-1 + label svg {
      fill: #ffffff;
  }
  
  /* style 3 */
  
  .inputfile-3 + label {
      color: #77b62f;
      min-width:220px;
  }
  
  .inputfile-3:focus + label,
  .inputfile-3.has-focus + label,
  .inputfile-3 + label:hover {
      color: #62ab11;
  }
  
  .inputfile-3 + label svg {
      fill: #77b62f;
  }
  /* style 5 */
  
  .inputfile-5 + label {
      color: #77b62f;
      max-width:40%;
  }
  
  .inputfile-5:focus + label,
  .inputfile-5.has-focus + label,
  .inputfile-5 + label:hover {
      color: #62ab11;
  }
  
  .inputfile-5 + label figure {
      width: 60px;
      height: 80px;
      background-color: #77b62f;
      display: block;
      position: relative;
      padding: 30px;
      margin: 0 auto 10px;
  }
  
  .inputfile-5:focus + label figure,
  .inputfile-5.has-focus + label figure,
  .inputfile-5 + label:hover figure {
      background-color: #62ab11;
  }
  
  .inputfile-5 + label figure::before,
  .inputfile-5 + label figure::after {
      width: 0;
      height: 0;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
  }
  
  .inputfile-5 + label figure::before {
      border-top: 20px solid #ffffff;
      border-left: 20px solid transparent;
  }
  
  .inputfile-5 + label figure::after {
      border-bottom: 20px solid #45770b;
      border-right: 20px solid transparent;
  }
  
  .inputfile-5:focus + label figure::after,
  .inputfile-5.has-focus + label figure::after,
  .inputfile-5 + label:hover figure::after {
      border-bottom-color: #45770b;
  }
  
  .inputfile-5 + label svg {
      width: 30px;
      height: 30px;
      fill: #ffffff;
  }
  
  /* style 6 */
  
  .inputfile-6 + label {
      color: #77b62f;
  }
  
  .inputfile-6:focus + label,
  .inputfile-6.has-focus + label,
  .inputfile-6 + label:hover {
      color:#62ab11;
  }
  
  .inputfile-6 + label figure {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #77b62f;
      display: block;
      padding: 20px;
      margin: 0 auto 10px;
  }
  
  .inputfile-6:focus + label figure,
  .inputfile-6.has-focus + label figure,
  .inputfile-6 + label:hover figure {
      background-color: #62ab11;
  }
  
  .inputfile-6 + label svg {
      width: 32px;
      height: 32px;
      fill: #ffffff;
  }

  /* style 7 */
  
  .inputfile-7 + label {
    color: #77b62f;
    max-width:40%;
}

.inputfile-7:focus + label,
.inputfile-7.has-focus + label,
.inputfile-7 + label:hover {
    color:#62ab11;
}

.inputfile-7 + label figure {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #77b62f;
    display: block;
    padding: 20px;
    margin: 0 auto 10px;
}

.inputfile-7:focus + label figure,
.inputfile-7.has-focus + label figure,
.inputfile-7 + label:hover figure {
    background-color: #62ab11;
}

.inputfile-7 + label svg {
    width: 32px;
    height: 32px;
    fill: #ffffff;
}