@font-face {
    font-family: input-clear-icon;
    src: url(data:application/font-woff;base64,d09GRgABAAAAAAQUAAsAAAAABwAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZWlmEnY21hcAAAAYQAAABOAAABcAKeBRJnbHlmAAAB1AAAAHAAAACwsXs7XWhlYWQAAAJEAAAALgAAADYQIWY3aGhlYQAAAnQAAAAYAAAAJAcLA+tobXR4AAACjAAAAAgAAAAIA+gAAGxvY2EAAAKUAAAABgAAAAYAWAAAbWF4cAAAApwAAAAeAAAAIAENAEJuYW1lAAACvAAAAUAAAAK+6hDdNnBvc3QAAAP8AAAAFwAAACoBEQECeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT8wjiBgZWBgamKaQ8DA0MPhGZ8wGDIyAQUZWBlZsAKAtJcUxgcGCoYKphfALlRYBKoEUQAAO9GCmwAAHicY2BgYGVgYGAGYh0gZmFgYAxhYGQAAT+gKCNYnJmBCyzOwqAEVsMCFq/4/x9OMoJ0gkQZ2RgGDDAOnNWogAdMykB54LCCYkYAGOsHsgAAeJxjYGQAAmYlZiUGUwYGcz1GdTVzO0Z7RnUQy45JXI5RnhEoYG4mx8TOx8jPCBQQF+NjAkrrMwIF2Nne8YoyM7MzKfnl5fkpMbGzSsjxsyr75uf7KrPyy0mwYpcRPMkiyicgQFghigwH0KUAOSIXtHicY2BkYGAA4h8z+Nzj+W2+MnAzvwCKMFz7MFECmWZWYlYCUhwMTCAeADZLCa8AAHicY2BkYGB+wcAAJ5UYGBlQARMANooCAAAAAAAD6AAAAAAAAABYAAB4nGNgZGBgYGIwYwDRIBYDAxcQMjD8B/MZAA3dAVAAAHicpZLNSsNAFIXP9E9sQQRBXc7KjSRpu3DRB2g3rrroPk0nbcpkJkymhYKv4Tv4JOLahc/jaZyNghQxgfDd7557CcwAuMQrBI6PICNwC2esvriNW9wE7pCTwF0MMAvco58H7uMe28ADXOGZG0TnnEbiJXALF3gL3MYQH4E7GIpe4C6uxUPgHv1j4D4W4inwAHfivTDVzkeZVqmLisyauVrvdOp+6uiEXyhXF9bIUTz8LTJTRrnUq5VcHmS9X4+9z2XubCmn1niltZWVs1uV+XjjfTVJkjz4OLMlChhU2MEjQgYNhRSOXLCy7M1p1uzrxp9KR//ML1g51OwfuxIjxDyJv26ZsTLNppQzCituWuLAb409c2Naj5x1zoxFSZo2m45pzdfSVE1vS5PRx9g0UxUmvG0JJ7/n4+Zfyk+bK4iWeJxjYGKAAC4G7ICJkYmRGcQAAAIDABYA)
}

input-clear-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -2px;
    padding: 1px;
    border: 1px solid transparent;
    width: 1em;
    height: 1em;
    box-sizing: content-box;
    cursor: pointer;
    speak: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent
}

input-clear-icon::before {
    content: "x";
    font-family: input-clear-icon;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none
}

::-ms-clear {
    display: none
}

input.has-clear-icon::after {
    content: 'x';
    font-family: input-clear-icon;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}