title: Customize styling of not selected md-tab-label from md-tab
body: <p>I try to develop the following user interface for my angular material app. But I have no idea how I can customize all unselected md-tabs in CSS.</p>
  
  <p><a href="http://i.stack.imgur.com/ZD8Sl.png" rel="nofollow">This is what I want to have.</a></p>
  
  <p><a href="http://i.stack.imgur.com/aONm1.png" rel="nofollow">Current version</a></p>
  
  <p>HTML Code:</p>
  
  <pre><code>        &lt;md-tabs class="md-primary" md-selected="selectedIndex" md-align-tabs="top" md-autoselect md-dynamic-height id="top"&gt;
              &lt;md-tab ng-repeat="tab in tabs" flex layout="column" layout-fill&gt;
                  &lt;md-tab-label&gt;
                      &lt;div layout="row" layout-fill&gt;
                          &lt;div class="md-tab-item-index"&gt;
                              &lt;span&gt;{{tab.index}}&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class="md-tab-item-label"&gt;
                              {{tab.title}}
                          &lt;/div&gt;
                          &lt;div class="md-tab-item-label-separator"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/md-tab-label&gt;
                  &lt;md-tab-body&gt;
                      &lt;div ng-include="tab.content"&gt;&lt;/div&gt;
                  &lt;/md-tab-body&gt;
              &lt;/md-tab&gt;
          &lt;/md-tabs&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.md-tab-item-label {
      color: white;
      font-size: 14px;
      line-height: 20px;
      text-transform: capitalize;
  }
  
  .md-tab-item-label-separator {
      background-color: rgba(255, 255, 255, 0.5);
      -webkit-box-flex: 0 1 auto;
      -webkit-flex: 0 1 auto;
      flex: 0 1 auto;
      height: 1px;
      min-width: 0;
      position: relative;
      top: 12px;
      width: 68px;
      margin-left: 10px;
  }
  
  .md-tab-item-index {
      background-color: #ffffff;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      -webkit-box-flex: 0 0 auto;
      -webkit-flex: 0 0 auto;
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 500;
      height: 24px;
      line-height: 24px;
      position: relative;
      text-align: center;
      width: 24px;
      color: #000000;
      margin-right: 10px;
  }
  </code></pre>