title: How to override !important CSS rules generated by a script
body: <p>i have a plugin in js from external services. This script has built its own css, but its rules doesn't fit in my layout. So i need to change 540 with 700px:</p>
  
  <pre><code>#chat-container.bbhorizontal .main .booking {
  margin-top: 0;
  min-width: 540px !important;
  }
  </code></pre>
  
  <p>Path from Bugzilla:</p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;form name="chat"&gt;
        &lt;div class="booking"&gt;
  </code></pre>
  
  <p>I have tried:</p>
  
  <pre><code>#div main.chat.booking {
  display: block;
  visibility: visible;
  min-width: 800px !important important;
  margin-top: 0;
  }
  </code></pre>
  
  <p>No success...
  How i can achieve this? Thank you.</p>
  
  <p>I prefer programming in C that css. UPDATE see the picture please:
  <a href="https://i.stack.imgur.com/M2Mj0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M2Mj0.png" alt="enter image description here"></a></p>