/* Always Design for Mobile First */

/* For mobile phones: */

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  
  height: 50%;
  width: 98%;
  /*
  width: 100%;
  padding-top: 100%;
  */
}

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


.controls {
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 80px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

h1 {
    font-family: Roboto;
    font-size: 50px;
    font-weight: 400;
    margin-left: 12px;
    opacity: 0.7;
}


h2 {
    font-family: Roboto;
    font-size: 40px;
    font-weight: 400;
    margin-left: 12px;
    opacity: 0.7;
}

label {
    font-family: Roboto;
    font-size: 35px;
    font-weight: 300;
    margin-left: 12px;
}

/*Long fields*/
#origin-input,
#destination-input,
#full-name-input,
#bank-select-list,
#driver-station-address-input,
#search-driver-name-input {
  background-color: #fff;
  border-color: #80b0fe;
  font-family: Roboto;
  font-size: 40px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 16px 0 19px;
  text-overflow: ellipsis;
  width: 95%;
}

/*Shorter fields*/
#vehicle-selection-list, 
#mobile-number-input, 
#password-input,
#driver-bank-account-input,
#auto-acceptance-select-list,
#price-per-km-input, 
#equipment-selection-list,
#equipment-description-selection-list,
#topup-sendto-mobile-number-input,
#opt-by-sms-input,
#peer-topup-opt-by-sms-input,
#search-mobile-number-input,
#search-district-input {
  background-color: #fff;
  border-color: #80b0fe;
  font-family: Roboto;
  font-size: 40px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 16px 0 19px;
  text-overflow: ellipsis;
  /* width: 50%; */
}



/* additional style for the select tag  
    #vehicle-selection-list,
    #auto-acceptance-select-list,
    #equipment-selection-list,
    #equipment-description-selection-list {
    height: 70px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
*/


#origin-input:focus,
#destination-input:focus,
#full-name-input:focus,
#bank-select-list:focus,
#driver-bank-account-input:focus,
#driver-station-address-input:focus,
#vehicle-selection-list:focus, 
#mobile-number-input:focus, 
#password-input:focus,
#auto-acceptance-select-list:focus,
#price-per-km-input:focus, 
#equipment-selection-list:focus,
#equipment-description-selection-list:focus,
#topup-sendto-mobile-number-input:focus,
#opt-by-sms-input:focus,
#peer-topup-opt-by-sms-input:focus,
#search-driver-name-input:focus,
#search-mobile-number-input:focus,
#search-district-input:focus {
  border-color: #4d90fe;
}


input::placeholder {
    opacity: 1;
    color: black;  
}

input::placeholder:focus {
    opacity: 0.7;
}

#get-driver-button, 
#clear-address-button,
#share-route-button,
#opt-by-sms-submit-button,
#opt-by-sms-cancel-button,
#preview-trip-button,
#view-station-location-button,
#accept-trip-button,
#reject-trip-button,
#finish-trip-button,
#view-map-pickup-route,
#view-map-destination-route,
#call-mobile-tel,
#blacklist-mobile-tel-button,
#update-driver-info-button,
#go-offline-button,
#error-info-ok-button,
#go-to-login-button,
#payment-info-ok-button,
#search-driver-info-button {
  background-color: #4d90fe;
  border-radius: 5px 0 0 5px;
  font-family: Roboto;
  font-size: 40px;
  color: #fff;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 20px 0 20px;
  text-overflow: ellipsis;
  
}

/* green button */
#payment-info-topup-button, 
#payment-info-peer-topup-opt-by-sms-submit-button {
  background-color: #34a853;
  border-radius: 5px 0 0 5px;
  font-family: Roboto;
  font-size: 40px;
  color: #fff;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 20px 0 20px;
  text-overflow: ellipsis;
  
}


#get-driver-button:hover, 
#clear-address-button:hover,  
#share-route-button:hover,
#opt-by-sms-submit-button:hover,
#opt-by-sms-cancel-button:hover,
#preview-trip-button:hover,
#view-station-location-button:hover,
#accept-trip-button:hover,
#reject-trip-button:hover,
#finish-trip-button:hover,
#view-map-pickup-route:hover,
#view-map-destination-route:hover,
#call-passenger-mobile-tel:hover,
#blacklist-mobile-tel-button:hover,
#update-driver-info-button:hover,
#go-offline-button:hover,
#error-info-ok-button:hover,
#go-to-login-button:hover,
#payment-info-ok-button:hover,
#search-driver-info-button:hover {
  background-color: #4f80ff;

}


/* green button */
#payment-info-topup-button:hover, 
#payment-info-peer-topup-opt-by-sms-submit-button:hover  {
  background-color: #00a853;

}


#mode-selector {
  color: #fff;
  background-color: #4d90fe;
  margin-left: 40px;
  padding: 5px 11px 0px 11px;
}

#mode-selector label {
  font-family: Roboto;
  font-size: 40px;
  font-weight: 300;
}

#trip-data, 
#trip-booking-status,
#legal-disclaimer-text,
#pickup-and-route-information, 
#error-information,
#alert-message-text,
#payment-information {
  font-family: Roboto;
  font-size: 40px;
  font-weight: 300;
  text-align: left;
  margin: auto;
  margin-left: 12px;
}

#footer-address  {
  font-family: Roboto;
  font-size: 25px;
  font-weight: 300;
  text-align: center;
  margin: auto;
  margin-left: 12px;
}


/* Classes for items in the list provided by Autocomplete */

.pac-item {
    font-size: 28px;
    padding-top: 11px;
    padding-bottom: 20px;
    
    
}
.pac-item-query {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 30px;
    padding-top: 11px;
    padding-bottom: 20px;

}





/* For tablet or desktop */


@media only screen and (min-width: 5000px) {

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

    h1 {
    font-family: Roboto;
    font-size: 18px;
    font-weight: 400;
    margin-left: 12px;
    opacity: 0.7;
    }
    
    
    h2 {
        font-family: Roboto;
        font-size: 16px;
        font-weight: 400;
        margin-left: 12px;
        opacity: 0.7;
    }
    
    label {
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
      margin-left: 12px;
    }

    .controls {
      margin-top: 10px;
      margin-bottom: 10px;
      border: 1px solid transparent;
      border-radius: 5px 0 0 5px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      height: 32px;
      outline: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    
    #origin-input,
    #destination-input,
    #full-name-input,
    #bank-select-list,
    #driver-station-address-input,
    #search-driver-name-input {
      background-color: #fff;
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
      margin-left: 12px;
      padding: 0 11px 0 13px;
      text-overflow: ellipsis;
      width: 500px;
    }
    
    #mobile-number-input,
    #password-input,
    #driver-bank-account-input,
    #auto-acceptance-select-list,
    #vehicle-selection-list,
    #price-per-km-input, 
    #equipment-selection-list,
    #equipment-description-selection-list,
    #topup-sendto-mobile-number-input,
    #opt-by-sms-input,
    #peer-topup-opt-by-sms-input,
    #search-mobile-number-input,
    #search-district-input {
      background-color: #fff;
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
      margin-left: 12px;
      padding: 0 11px 0 13px;
      text-overflow: ellipsis;
      width: 250px;
    }
 

    /* additional style for the select tag  */
/*
    #vehicle-selection-list,
    #auto-acceptance-select-list,
    #equipment-selection-list,
    #equipment-description-selection-list{
        height: 32px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
*/

    #origin-input:focus,
    #destination-input:focus,
    #full-name-input:focus,
    #driver-bank-account-input:focus,
    #bank-select-list:focus,
    #driver-station-address-input:focus,
    #vehicle-selection-list:focus, 
    #mobile-number-input:focus,
    #password-input:focus,
    #auto-acceptance-select-list:focus,
    #price-per-km-input:focus, 
    #equipment-selection-list:focus,
    #equipment-description-selection-list:focus,
    #topup-sendto-mobile-number-input:focus,
    #opt-by-sms-input:focus,
    #peer-topup-opt-by-sms-input:focus,
    #manager-district-selection-list:focus,
    #search-driver-name-input:focus,
    #search-mobile-number-input:focus,
    #search-district-input:focus {
      border-color: #4d90fe;
    }
    
        
    input::placeholder {
        opacity: 1;
        color: black;  
    }
    
    input::placeholder:focus {
        opacity: 0.6;
    }

    
    
    #get-driver-button, 
    #clear-address-button,
    #share-route-button,
    #opt-by-sms-submit-button,
    #opt-by-sms-cancel-button,
    #preview-trip-button,
    #view-station-location-button,
    #accept-trip-button,
    #reject-trip-button,
    #finish-trip-button,
    #view-map-pickup-route,
    #view-map-destination-route,
    #call-passenger-mobile-tel,
    #blacklist-mobile-tel-button,
    #update-driver-info-button,
    #go-offline-button,
    #error-info-ok-button,
    #go-to-login-button,
    #payment-info-ok-button,
    #search-driver-info-button {
        background-color: #4d90fe;
        border-radius: 2px 0 0 2px;
        font-family: Roboto;
        font-size: 15px;
        color: #fff;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
    }
    
    /* green button */
    #payment-info-topup-button, 
    #payment-info-peer-topup-opt-by-sms-submit-button  {
        background-color: #34a853;
        border-radius: 2px 0 0 2px;
        font-family: Roboto;
        font-size: 15px;
        color: #fff;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
    }
    
    #get-driver-button:hover, 
    #clear-address-button:hover,  
    #share-route-button:hover,
    #opt-by-sms-submit-button:hover,
    #opt-by-sms-cancel-button:hover,
    #preview-trip-button:hover,
    #view-station-location-button:hover,
    #accept-trip-button:hover,
    #reject-trip-button:hover,
    #finish-trip-button:hover,
    #view-map-pickup-route:hover,
    #view-map-destination-route:hover,
    #call-passenger-mobile-tel:hover,
    #blacklist-mobile-tel-button:hover,
    #update-driver-info-button:hover,
    #go-offline-button:hover,
    #error-info-ok-button:hover,
    #go-to-login-button:hover,
    #payment-info-ok-button:hover,
    #search-driver-info-button:hover  {
        background-color: #4f80ff;
    }

    /* green button */
    #payment-info-topup-button:hover, 
    #payment-info-peer-topup-opt-by-sms-submit-button:hover {
        background-color: #00a853;
    }
    
    #mode-selector {
      color: #fff;
      background-color: #4d90fe;
      margin-left: 12px;
      padding: 5px 11px 0px 11px;
    }
    
    #mode-selector label {
      font-family: Roboto;
      font-size: 13px;
      font-weight: 300;
    }
    

    /* Classes for items in the list provided by Autocomplete */
    


    #trip-data, 
    #trip-booking-status,
    #legal-disclaimer-text,
    #pickup-and-route-information, 
    #error-information,
    #alert-message-text,
    #payment-information {
      font-family: Roboto;
      font-size: 15px;
      font-weight: 300;
      text-align: left;
      margin: auto;
      margin-left: 12px;
    }
    
    #footer-address  {
      font-family: Roboto;
      font-size: 11px;
      font-weight: 300;
      text-align: center;
      margin: auto;
      margin-left: 12px;
    }

}