.content {
      max-width: 750px;
      margin: auto;
    }

    /* Always set the map height explicitly to define the size of the div
    /* element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #description {
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
    }

    #infowindow-content .title {
      font-weight: bold;
    }

    #infowindow-content {
      display: none;
    }

    #map #infowindow-content {
      display: inline;
    }

    .pac-card {
      margin: 10px 10px 0 0;
      border-radius: 2px 0 0 2px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      outline: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      background-color: #fff;
      font-family: Roboto;
    }

    #pac-container {
      padding-bottom: 12px;
      margin-right: 12px;
    }

    .pac-controls {
      display: inline-block;
      padding: 5px 11px;
    }

    .pac-controls label {
      font-family: Roboto;
      font-size: 13px;
      font-weight: 300;
    }

    #pac-input {
      background-color: #fd996b;
      font-family: Roboto;
      font-size: 15px;
      font-weight: 400;
      margin-left: 12px;
      padding: 0 11px 0 13px;
      text-overflow: ellipsis;
      width: 200px;
      height: 25px;
    }

    #searchclear {
      color: #4d90fe; 
      /* background: #fff; */
      font-family: Roboto;
      /* font-size: 24px; */
      font-weight: 400;
      /* padding: 0 11px 0 13px; */
      /* width: 10px;
      height: 10px; */
    }

    #pageheader {
      /*color: rgb(73, 68, 68); */
      /* background: #fff; */
      font-family: Roboto;
      font-size: 16px;
      font-weight: 400;
      height: 40px;
      background-color:#fff;
      color: #44256D;
      width: 750px;
      margin-left:30px;

      /* padding: 0 11px 0 13px; */
      /* width: 10px;
      height: 10px; */
    }

    #legend {
      color: rgb(73, 68, 68); 
      /* background: #fff; */
      font-family: Roboto;
      font-size: 10px;
      font-weight: 400;
      /* padding: 0 11px 0 13px; */
      /* width: 10px;
      height: 10px; */
    }
    #desttxt {
      color: rgb(73, 68, 68); 
      /* background: #fff; */
      font-family: Roboto;
      font-size: 8px;
      font-weight: 400;
    }
    .image {
      height:24px;
      width:24px;

    }
    #pac-input:focus {
      border-color: #4d90fe;
    }

    #title {
      color: #fff;
      background-color: #4d90fe;
      font-size: 25px;
      font-weight: 500;
      padding: 6px 12px;
    }
    #target {
      width: 345px;
    }

    /* enable absolute positioning */
      .inner-addon {
        position: relative;
        position: absolute;
        padding: 30px;
        pointer-events: none;
        color: #44256D;
        top: 5px;
        }
    
    /* style glyph */
      .inner-addon .fa {
        position: absolute;
        padding: 30px;
        pointer-events: none;
        color: #44256D;
        top: 5px;
      }
    
    /* align glyph */
      .left-addon .fa  { left:  0px;}
      .right-addon .fa { right: 0px;}
    
    /* add padding  */
      .left-addon input  { padding-left:  50px; }
      .right-addon input { padding-right: 50px; }
    
    /* code commented by sandeep on 4th July */ 
    /*  body { */
    /*   margin: 30px; */
    /*    font-family: 'Roboto';font-size: 22px; */
    /*  } */
    * {
      box-sizing: border-box;
    }

    /* Create two unequal columns that floats next to each other */
    .column {
      float: left;
      padding: 10px;
      /*height: 300px;*/ /* Should be removed. Only for demonstration */
    }

    .left {
      width: 40%;
    }

    .right {
      width: 60%;
    }

    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }