.search-form {
  margin-right: 2em;
  max-width: 100%;
  width: 15em;

  .form-group {
    margin-bottom: 0;

    .input-group {
      //width: 256px;
      height: 40px;
      border-radius: 20px;
      background: #fff;
      border: 1px solid #00b6e3;

      .form-control {
        border-radius: 0 20px 20px 0;
        font-size: 14px;
        font-weight: 300;
        text-align: right;
        color: #707b87;
        height: 100%;
        border-color: transparent;
        padding-right: 0;
        padding-left: 0;

        &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
          font-weight: 300;
          font-size: 14px;
          text-align: right;
          color: #92a2b2;
        }

        &::-moz-placeholder { /* Firefox 19+ */
          font-weight: 300;
          font-size: 14px;
          text-align: right;
          color: #92a2b2;
        }

        &:-ms-input-placeholder { /* IE 10+ */
          font-weight: 300;
          font-size: 14px;
          text-align: right;
          color: #92a2b2;
        }

        &:-moz-placeholder { /* Firefox 18- */
          font-weight: 300;
          font-size: 14px;
          text-align: right;
          color: #92a2b2;
        }

        &:focus {
          box-shadow: none;
          outline: 0;
        }

      }

      .input-group-prepend {
        margin-right: auto;
        margin-left: -1px;

        .input-group-text {
          background-color: transparent;
          border-color: transparent;
          border-radius: 0 20px 20px 0;
          font-size: 14px;
          font-weight: 300;
          color: #707b87;
          transition: all 0.2s;

          svg {
            width: 1em;
            color: var(--falcon-gray-400);

          }
        }
      }

      .input-group-append {
        margin-left: auto;
        margin-right: -1px;

        .input-group-text {
          background-color: transparent;
          border-color: transparent;
          border-radius: 20px 0 0 20px;
          font-size: 14px;
          font-weight: 300;
          color: #707b87;
          transition: all 0.2s;
          visibility: hidden;

          &.show-reset-btn {
            visibility: visible;
          }

          &:hover {
            background-color: #eee;

            i {
              font-weight: bold;
              //color: var(--red);
              transition: all 0.2s;
            }
          }

          &:focus {
            box-shadow: none;
            outline: 0;
          }
        }
      }
    }
  }

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
}