.sfi-js .sfi-wrapper {
  position: relative;
  border: none;
  background: #ffffff;
  font-size: 14px;
  width: 100% !important;
  color: #999;
  outline: none;
  position: relative;
  width: 100%;
  overflow: hidden;
  max-width:500px;
}
.sfi-js .sfi-wrapper .sfi-filename {
  width: 100%;
  overflow: hidden;
  height: 40px;
  padding: 0 50px 0 14px;
  display: block;
  font-size: 14px;
  line-height: 38px;
  color: #797979;
  text-align: left;
  z-index: 10;
  position: relative;
  border: 1px solid #ccc;
  border-right: none;
  float: left;
  box-sizing:border-box;
}
.sfi-js .sfi-wrapper .sfi-trigger {
  background: url('../images/icon.png') no-repeat center;
  border: 1px solid  #ccc;
  width: 40px;
  height: 40px;
  display: block;
  float: right;
  text-indent: -9999px;
  margin-left: -40px;
  position: relative;
  z-index: 12;
}
.sfi-js .sfi-wrapper.sfi-error .sfi-filename, .sfi-js .sfi-wrapper.sfi-error .sfi-trigger {
  border-color: red;
}
.sfi-js .sfi-wrapper.sfi-error .sfi-filename {
  color: red;
}
.sfi-js .sfi-wrapper.sfi-valid .sfi-filename, .sfi-js .sfi-wrapper.sfi-valid .sfi-trigger {
  border-color: #ccc;
}
.sfi-js .sfi-wrapper.sfi-valid .sfi-filename {
  color: #2ecc71;
}
.sfi-js .sfi-wrapper.sfi-disabled .sfi-filename, .sfi-js .sfi-wrapper.sfi-disabled .sfi-trigger {
  border-color: #ccc;
}
.sfi-js .sfi-wrapper.sfi-disabled .sfi-filename {
  color: #ccc;
}