/**
 * Styles and fixes specific for firefox browser.
 */
@-moz-document url-prefix() {

  /* This style hides original ugly dropdown arrow and draws new one. Google chrome like arrow. */
  select.form-control {
    padding-right: 25px;
    background: url("data:image/svg+xml,\
      <svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M5 8l4 4 4-4z'/></svg>"
    ) no-repeat calc(100% - 7px) 50%;
    -moz-appearance: none;
    appearance: none;
  }

  /* This style gets rid off ugly outline inside dropdown lists. */
  select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }

}