Bootstrap css navbar-inverse dropdown how to change color of checkbox label text

I have a dropdown in a navbar-inverse navbar on my bootstrap. The dropdown has some checkboxes. All looks ok on desktop/tablet: white background, black text. On a 'phone, the checkbox background is black, but the label text is dark grey, so doesn't show up too good:

html:

<nav id="header" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <form role="form" id="formx">
                <div class="radio">
                  <label><input type="radio" name="optradio">Option 1</label>
                </div>
                <div class="radio">
                  <label><input type="radio" name="optradio">Option 2</label>
                </div>
                <div class="radio">
                  <label><input type="radio" name="optradio">Option 3</label>
                </div>
                <div class="checkbox">
                  <label><input type="checkbox" checked="checked">Option 1</label>
                </div>
                <div class="checkbox">
                  <label><input type="checkbox" >Option 2</label>
                </div>
                <div class="form-group">
                  <label for="species">Species</label>
                  <input id="species" class="form-control" type="text"/>
                </div>
                <div class="form-group">
                  <label for="risk">Risk</label>
                  <select input id="risk" class="form-control"/>
                    <option>Low</option>
                    <option>Medium</option>
                    <option>High</option>
                  </select>
                </div>
              </form>
            </ul>
        </li>
        <li id="map-link"><a href="#">Search</a></li>
        <li id="list-link"><a href="#">Actions</a></li>
        <li id="locate-link"><a href="#">Locate</a></li>
        <li id="more-link"><a href="#">More</a></li>
      </ul>
    </div>
  </div>
</nav>

I had a quick look in bootstrap.css and then tried this in the css:

@media (max-width: 767px) {
  .navbar-inverse .dropdown-menu .radio label:
     color: #fff;
     background-color: transparent;
  }
}

@media (max-width: 767px) {
  .navbar-inverse .dropdown-menu .radio label:color:#fff;
  background-color:transparent;
}
}

<nav id="header" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <form role="form" id="formx">
              <div class="radio">
                <label>
                  <input type="radio" name="optradio">Option 1</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optradio">Option 2</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optradio">Option 3</label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" checked="checked">Option 1</label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox">Option 2</label>
              </div>
              <div class="form-group">
                <label for="species">Species</label>
                <input id="species" class="form-control" type="text" />
              </div>
              <div class="form-group">
                <label for="risk">Risk</label>
                <select input id="risk" class="form-control" />
                <option>Low</option>
                <option>Medium</option>
                <option>High</option>
                </select>
              </div>
            </form>
          </ul>
        </li>
        <li id="map-link"><a href="#">Search</a>
        </li>
        <li id="list-link"><a href="#">Actions</a>
        </li>
        <li id="locate-link"><a href="#">Locate</a>
        </li>
        <li id="more-link"><a href="#">More</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

to no avail.

I think I'm on the right track - can anyone help?

Thanks Mini