title: Override class in ActiveAdmin index
body: <p>I am  using <a href="https://github.com/ayann/active_admin_flat_skin" rel="nofollow noreferrer">ActiveAdmin Flat Skin</a> as template and I want to highlight some rows of the index page depending on an attribute of the row. The index page shows <code>even</code> <code>odd</code> rows displaying even rows with a light gray. Depending on this <code>available</code> attribute I want to display them with a light red.</p>
  <p>I got the following partially working:</p>
  <pre><code>index  row_class: -&gt;elem { 'red' unless elem.available } do |dog|
  </code></pre>
  <p>In my active_admin.scss I have the following</p>
  <pre><code>.red {
    background-color: #f7b9b9 !important;
  }
  </code></pre>
  <p>But the rows that have the light gray are not being displayed in red. Any ideas?</p>
  <p>Here is how it looks right now. The ones that say &quot;[NO EN ADOPCION]&quot; should all be in red.</p>
  <p><a href="https://i.stack.imgur.com/1AyW0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1AyW0.png" alt="enter image description here" /></a></p>
  <p>Even if I inspect the element and add an inline <code>style=&quot;background-color: red !important&quot;</code> the background does not change.</p>