Question: After loading map, my CSS is ignored <#map .map-control1 / #map .map-control2>. 

I realized that there is no way to set parameters with pure CSS. 

So how do I fix it?

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      #map {height: 100%;}
      #map .map-control1 {top: 0px;}
      #map .map-control2 {top: 50px;}
      #origin-input, #destination-input {text-overflow: ellipsis;} 
    </style>
  </head>
  <body>
    <input id="origin-input" class="map-control1" type="text"
        placeholder="Origin">
    <input id="destination-input" class="map-control2" type="text"
        placeholder="Destination">
    <div id="map"></div>
    <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeControl: false,
        center: {lat: -23.0013, lng: -43.3861},
        zoom: 17
      });
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=_dsdsds&callback=initMap"
    async defer></script>
  </body>
</html>

```

Answer: 
`.map-control`s are cascading from `#map`. Remove it like this to get the desired styles.

```
.map-control1 { /* without #map */
  top: 0px;
}

.map-control2 { /* without #map */
  top: 50px;
}

```
```
  #map {height: 100%;}
  .map-control1 {top: 0px;} // this should fix it
  .map-control2 {top: 50px;} // this should fix it
  #origin-input, #destination-input {text-overflow: ellipsis;} 

```