Проблема CSS в рельсах с кнопкой «Отправить», не подхватывающей указанный дизайн

Question

У меня есть следующая форма для входа в систему с помощью Devise:

<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
            <div class="form-inputs">
              <%= f.input :email, required: false, autofocus: true, :input_html => {:autocomplete => :on}, label: "#{t :email}"  %>
              <%= f.input :password, required: false, :input_html => {:autocomplete => :off} , label: "#{t :PASSWORD}"  %>
            </div>
            <div class="row">
              <div class="col-md-6">
                <%= f.button :submit, "Login", class: "btn btn-primary" %>
              </div>
              <div class="col-md-6">
                <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
                  <%= link_to "#{t :FORGOT_PASSWORD}", new_password_path(resource_name), style: "vertical-align: -webkit-baseline-middle", class: "btn btn-primary" %>
                  <br/>
                <% end %>
              </div>
            </div>
          <% end %>

Я использую класс btn btn-primary для ссылки для сброса пароля и кнопки для отправки.Кнопка отправки показывает странный дизайн поверх ожидаемого дизайна.

У меня есть следующий CSS в application.css.scss

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
  color: #fff !important;
  background-color: #44B5EB !important;
  border-color: #44B5EB !important;
}

.btn-primary:hover {
  color: #44B5EB !important;;
  background-color: #ffffff !important;
  border-color: #44B5EB !important;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(68, 181, 235, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #44B5EB;
  border-color: #44B5EB;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

Как я могу исправить эту маленькую проблему, которая занимала несколькочасов сегодня?

Проверка Chrome показывает:

<i class="btn btn btn-primary waves-input-wrapper waves-effect waves-light" style="color:rgb(0, 0, 0);background:rgb(255, 255, 255)"><input type="submit" name="commit" value="Login" class="waves-button-input" data-disable-with="Login" style="background-color:rgba(0,0,0,0);"></i>

Кажется, я не понимаю, откуда приходит waves-input-wrapper waves-effect waves-light