@import url('https://fonts.googleapis.com/css?family=Yatra One:100,200,300,400,500,600,700|Kalam:100,200,300,400,500,600,700');

/*The styling was mainly taken from the link below with my own customised format behind some features
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-hotelsearch#maps_places_autocomplete_hotelsearch-css
The reason for the second .css file is because it simplify what i am looking at as well as the fact most of the CSS came from the above link.*/

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
    height: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 95%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* The results for what is being displayed map*/
#listing {
    clear: both;
    width: 95%;
    height: 470px;
    margin: 30px auto;
    ;
    overflow: auto;
    left: 442px;
    top: 0px;
    cursor: pointer;
    overflow-x: hidden;
}

#controls {
    -webkit-box-flex: 1 1 140px;
    -ms-flex: 1 1 140px;
    flex: 1 1 140px;
}

/*the title as well as the search field*/
#city-search-field {
    font-family: "Yatra One", sans-serif;
    text-align: center;
    padding: 20px 0;
}

/*Styling for the search bar*/
#city-location {
    width: 50%;
    text-align: center;
    border: 2px solid #000000;
    border-radius: 5px;
}

/*Stlying from the title to the city search*/
.city-search {
    text-align: center;
}

/*Reset button styling*/
#reset-btn {
    margin: 5px;
    padding: 0px 10px;
    border: 2px solid #000000;
    border-radius: 10px;
}

/*The radio buttons for options*/
.select-activity {
    margin: 30px 0;
    font-size: 20px;
    text-align: center;
    font-family: "Kalam", sans-serif;
}

#country {
    width: 100%;
}

.placeIcon {
    width: 20px;
    height: 34px;
    margin: 4px;
}

/*the size of the icon once selected on of the places on the map*/
.hotelIcon {
    width: 20px;
    height: 24px;
}

/*the styling of the table where the results would show*/
#resultsTable {
    font-family: "Kalam", sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: 20px;
}

#rating {
    font-size: 13px;
    font-family: Arial Unicode MS;
}

.iw_table_row {
    height: 18px;
}

.iw_attribute_name {
    font-weight: bold;
    text-align: right;
}

.iw_table_icon {
    text-align: right;
}