.ffi {
  background-color: #ffffff;
  border-color: #c1c7d0;
  border-radius: 3.01px;
  box-shadow: none;
  color: #172b4d;
  font-size: 14px;
  max-width: 250px;
  /* The actual input - made opaque but styled so the cursor positions well */
}
form.aui .field-group .ffi {
  float: none;
  margin: 0;
  padding: 0;
  word-wrap: normal;
  text-align: left;
  width: 100%;
}
form.aui.top-label .field-group .ffi {
  display: inline-block;
  margin: 0;
  width: 100%;
}
form.aui.long-label .field-group .ffi {
  margin: 0;
  width: 100%;
}
.ffi input[type="file"] {
  padding: 0 5px;
}
.ffi[data-ffi-value]:after {
  color: #172b4d;
  padding: 0 5px;
}
.ffi:before {
  background: rgba(9, 30, 66, 0.08);
  border-left-color: #dfe1e6;
  color: #344563;
  padding: 0 10px;
}
.ffi:hover:before {
  background: rgba(9, 30, 66, 0.13);
  color: #344563;
}
.ffi:active:before,
.ffi:active:hover:before {
  background-color: #deebff;
  background-image: none;
  color: #0052cc;
  text-decoration: none;
  text-shadow: none;
}
.ffi.is-focused {
  border-color: #c1c7d0;
}
.ffi.is-disabled {
  background-color: #f4f5f7;
  color: #97a0af;
}
.ffi.is-disabled:before,
.ffi.is-disabled:hover:before,
.ffi.is-disabled:active:before,
.ffi.is-disabled:active:hover:before {
  background-color: #f4f5f7;
  border-color: #dfe1e6;
  box-shadow: none;
  color: #a5adba;
  text-shadow: none;
}
.ffi.is-disabled:after {
  color: #97a0af;
}
/* The clear field button */
.ffi-clear {
  background-image: none;
  opacity: 1;
  -ms-filter: none;
}
.ffi-clear:hover {
  opacity: 1;
  -ms-filter: none;
}
.ffi-clear::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0;
  font-family: "Adgs Icons";
  font-weight: normal;
  font-style: normal;
  speak: none;
  color: #7a869a;
  content: "\f188";
  font-size: 16px;
  left: 0;
  line-height: 1;
  margin-top: -8px;
  position: absolute;
  text-indent: 0;
  top: 50%;
}
.ffi-clear:hover::before {
  color: #172b4d;
}