Bootstrap 3 Styled Select for Firefox

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <br>
    <form class="form-horizontal">
        <div class="form-group">
            <label for="test" class="col-sm-2 control-label">
                Test
            </label>
            <div class="col-sm-10">
                <select id="test" class="form-control">
                    <option>(select)</option>
                </select>
            </div>
        </div>
    </form>
</div>

CSS

@-moz-document url-prefix() {
    select.form-control {
        padding-right: 25px;
        background-image: url("data:image/svg+xml,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px' height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'> <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/> </svg>");
        background-repeat: no-repeat;
        background-position: calc(100% - 7px) 50%;
        -moz-appearance: none;
        appearance: none;
    }
}