title: Change Angular Timepicker font size
body: <p>I'm using the <a href="http://angular-ui.github.io/bootstrap/#/timepicker" rel="nofollow noreferrer">angular bootstrap timepicker</a> but I cannot seem to change the font size which cuts off some of the text like below:</p>
  
  <p><img src="https://i.stack.imgur.com/DyLHm.png" alt="Timepicker"></p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;div class="col-md-1"&gt;
              &lt;div class="input-group"&gt;
                  &lt;label&gt;End:&lt;/label&gt;
                  &lt;timepicker ng-model="filter_endtime" ng-change="changed()" hour-step="hstep" 
                      minute-step="mstep" show-meridian="ismeridian"&gt;&lt;/timepicker&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>If I inspect the element in a browser I can change the .form-control font-size to 12px and it looks fine.</p>
  
  <pre><code>.form-control {
      display: block;
      width: 100%;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.4285;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
      -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }
  </code></pre>
  
  <h3>Is there anyway I can override the font size in the timepicker control?</h3>
  
  <p>I've tried doing</p>
  
  <pre><code>font-size: 12px !important;
  </code></pre>
  
  <p>as another class in the input-group but it makes it look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/YuEz6.png" alt="time2"></p>