.input-wrapper {
  position: relative; }
  .input-wrapper input,
  .input-wrapper textarea {
    border: 1px solid #c5c8cc;
    color: #5B646B;
    display: block;
    font-size: 16px;
    font-weight: 300;
    padding: 10px;
    width: 100%; }
    .input-wrapper input:focus,
    .input-wrapper textarea:focus {
      outline: none;
      border-color: #018380;
      background: #d1eefc; }
  .input-wrapper input {
    height: 44px; }
    .input-wrapper input[type=text]::-ms-clear {
      display: none; }
  .input-wrapper input {
    height: 44px; }
    .input-wrapper input[type='text']::-ms-clear {
      display: none; }
  .input-wrapper.has-focus .clear-input {
    display: block;
    position: absolute;
    top: 50%;
    right: 1em;
    height: 1.42857em;
    line-height: 1.42857em;
    transform: translate(0, -50%); }
    .input-wrapper.has-focus .clear-input:focus {
      outline: #0174b8 auto 5px; }
    .input-wrapper.has-focus .clear-input::after {
      color: #0174b8;
      content: '\f00d';
      cursor: pointer;
      font-family: FontAwesome;
      font-size: 16px; }
  .input-wrapper.has-focus textarea + .clear-input {
    top: auto;
    bottom: -1.42857em;
    right: 0;
    transform: translate(0, 0); }
    .input-wrapper.has-focus textarea + .clear-input::after {
      display: block;
      color: #ffffff;
      font-family: Roboto, "Helvetica Neue", Helvetica, Aral, sans;
      content: attr(data-text); }