title: !important being overridden by element without inline style
body: <p>I have a most interesting dilemma at work today, and I cannot even fathom why its happening. The curiosity is just killing me.</p>
  
  <p>We have a client insistent on a particular font irrespective of inline styling. I don't want a debate on !important and the way it should be used. </p>
  
  <p>But I'm very curious about this situation</p>
  
  <p><a href="http://partner-dashboard.qed42.webfactional.com/partner/108/insights/homepage" rel="nofollow noreferrer">http://partner-dashboard.qed42.webfactional.com/partner/108/insights/homepage</a> -: Please look at the synopsis within the accordion. And notice the font family.</p>
  
  <pre><code>.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
  }
  
  .insights-widget-container {
    font-family: "Trebuchet MS",Helvetica,sans-serif !important; //I am being overriden
    line-height: 1.5;
    font-size: 13px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/fLTwd.png" alt="Inspect Element on the synopsis in the accordion"></p>
  
  <p>Can someone please tell me on how this is happening> Surely !important should override, the .ui-widget. I even increased the specificity to </p>
  
  <pre><code>#insights-widget-container {
    font-family: "Trebuchet MS",Helvetica,sans-serif !important; //I am being overriden
  }
  </code></pre>
  
  <p>No luck! Would be very interesting if someone could illuminate why this is happening?</p>