/* PWA GLOBAL CSS STYLES */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(MaterialIcons-Regular.woff) format('woff'),
    url(MaterialIcons-Regular.ttf) format('truetype');
}
h1{
  margin: 0px;
  color: #000000;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #052730;
  font-family: "Poppins", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px;
  line-height: 1.3;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 60px;
  font-weight: 700;
}

h2 {
  font-size: 50px;
  font-weight: 700;
}

h3 {
  font-size: 40px;
  font-weight: 700;
}

h4 {
  font-size: 30px;
  font-weight: 600;
}

h5 {
  font-size: 20px;
  font-weight: 600;
}

h6 {
  font-size: 16px;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 34px;
  }
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 22px;
  }
  h4 {
    font-size: 18px;
  }
  h5 {
    font-size: 15px;
  }
  h6 {
    font-size: 13px;
  }
}

.full-width{
  width: 100%;
}
.header {
        width: 100%;
        height: 50px;
        color: #FFF;
        background: #000000;
        position: fixed;
        font-size: 20px;
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);
        padding: 16px 16px 0 16px;
        will-change: transform;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-align-content: center;
            -ms-flex-line-pack: center;
                align-content: center;
        -webkit-transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
        transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
        transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
        transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s, -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
        z-index: 1000; }
        .header .headerButton {
          width: 30px;
          height: 30px;
          margin-right: 24px;
          text-indent: -30000px;
          overflow: hidden;
          -webkit-transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
          transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
          border: none;
          outline: none;
          cursor: pointer; }

          .header .menu {
            width: 30px;
            height: 30px;
            overflow: hidden;
            -webkit-transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
            transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
            border: none;
            outline: none;
            cursor: pointer; }
      
      .header__title {
        font-weight: 400;
        font-size: 20px;
        color: #FFF;
        margin-left: 12px;
        margin-top: 5px;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
            -ms-flex: 1;
                flex: 1; }

.header #butBack{ background: url(../images/baseline-arrow_back-24px.svg) center center no-repeat; }

  .main {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }

    .card {
        padding: 20px;
        position: relative;
        box-sizing: border-box;
        background: #fff;
        border-radius: 6px;
        margin: 8px;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

    .card__warning {
        width: 100%;
        padding: 20px;
        position: relative;
        box-sizing: border-box;
        background: #000;
        border-radius: 6px;
        margin: auto;
        color: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
    
/* PAGE GLOBAL OVERRIDES */
#webpage{
    margin-top: 0px;
}

.hpContent{
    background-image: none;
}

.grayButtonPadding{
    padding: 10px 20px;
}

#myForm{
  background-color: transparent;
}

/* PAGE SPECIFIC CSS CODE */
img.offline{
  width: 50%;
  margin: auto;
  text-align: center;
  display: block;
}

#pastReservations.card__warning{
  width: 100%;
  padding: 5%;
  color: #330000;
  font-size: 20px;
  font-weight: bold;
}

.card.reservation_simple{
  padding: 5%;
  color: #330000;
  font-size: 20px;
  font-weight: bold;
}

span.reservation_status_bolder{
  font-weight: bolder;
}

#currentReservations, #pastReservations{
  width: 95%;
  margin: auto;
  margin-top: 12px;
}

.hiLight{
  font-size: 20px;
  font-weight: bold;
  color: #008800;
}

a.myButton.reservation_details{
  margin-top: 10px;
  color: #fff;
}

/* GET QUOTE CSS CODE */
.rideOptions{
  margin: 8px 8px 0px 8px;
}

.rideOptions2{
  margin: 0px 8px 8px 8px;
}

.card.centered-cont{
  text-align: center;
}

#videoFrame{
  width:100%;
}

.amountSelected{
  padding: 8px 13px;
}

/**
  MATERIAL LIGHT
**/
.mdl-card{
  margin:auto;

}

.mdl-card__media{
  background-color: #0CF;
}
.mdl-card__media>img{
  width: 100%;
  height: auto;
  padding-bottom: 10px;
  display: block;
}

.reservations-list-title{
  display:block;
}

.reservations-list-subtitle{
  display: flex;
}

.reservations-list-subtitle>img{
  width: 20px;
  height: 20px;
  margin: auto 8px auto 0px;

}
.mdl-button{
  font-weight: 600;
}

.card-action-icon{
  margin:auto;
  color: #000;
}

.arrow-icon{
  font-size: 14px;
}

.horizontal-icon-label-container{
  display: flex;
}
.horizontal-icon-label-container>span{
  margin: auto 8px;
}

.mdl-card__actions.mdl-card--border.card-bottom-action{
  display:flex;
}

.mdl-card_reservation_brief{
  box-sizing: border-box;
  min-height: 1px;
  min-width: 1px;
}

.mdl-titles{
  color:#052730;
  margin: 10px auto 10px 15px;
  width: 95%;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: normal;
}

.reservation_brief_cont{
  display: flex;
  padding: 6px 0px;
}

.reservation_brief_cont.mdl-card{
  width:100%;
}

.reservation_brief_icon_check{
  font-size: 48px;
  color: rgb(26, 188, 156);
  margin:auto;
}

.reservation_brief_icon_calendar{
  font-size: 48px;
  color:#e88935;
  margin:auto;
}

.reservation_brief_title{
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #000;
}

.reservation_brief_detail{
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #585858;
}

.reservation_brief_detail_cont{
  width: 70%;
}

a.reservation_brief_link{
  text-decoration: none;
}

.pwa_brief_cont{
  border: none;
  color: none;
  background: none;
  width: 95%;
  margin: auto;
}

.pwa_brief_cont>.instructions.mdl-titles{
  width:100%
}

input.mdl-textfield__input.pwa_input, textarea.mdl-textfield__input.pwa_input, select.mdl-textfield__input.pwa_input{
  border: none;
  border-bottom: 1px solid #000;
  display: block;
  font-size: 20px;
  font-family: "Helvetica", "Arial", sans-serif;
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: none;
  text-align: left;
  color: #009bcc;
  border-radius: 0px;
}

input.mdl-textfield__input.pwa_input, input.mdl-textfield__input_small.pwa_input, textarea.mdl-textfield__input.pwa_input, select.mdl-textfield__input.pwa_input{
  border: none;
  border-bottom: 1px solid #000;
  display: block;
  font-size: 20px;
  font-family: "Helvetica", "Arial", sans-serif;
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: none;
  text-align: left;
  color: #009bcc;
  border-radius: 0px;
}

input.mdl-textfield__input_small.pwa_input
{
  font-size: 16px;
}

i.material-icons.clear-input-icon{
  color: #c1421a;
  font-weight: bold;
  border-radius: 20px;
  border: 2px solid #c1421a;
  margin: auto 0;
  padding: 3px;
  margin-left: 8px;
  background-color: transparent;
  font-size: 20px;
}

i.material-icons.add-input-icon{
  color: green;
  font-weight: bold;
  border-radius: 20px;
  border: 2px solid green;
  margin: auto 0;
  padding: 3px;
  margin-left: 8px;
  background-color: transparent;
  font-size: 20px;
}

div.input_small,input.mdl-textfield__input.pwa_input.input_small{
  width:160px;
}

div.input_medium,input.mdl-textfield__input.pwa_input.input_medium{
  width:220px;
}

.mdl-card__title.quote_form{
  margin-bottom: 0px;
  background: #FFFFFF;
}

.pwa-hr{
    border: 0;
    height: 2px;
    background: #0CF;
    background-image: linear-gradient(to right, #009bcc, #0CF, #009bcc);
    margin: 0px;
}

.void_margins{
  margin:0px;
}

.quote_container_margins{
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
}

.mdl-textfield{
  padding: 20px 0px;
}

#myForm.pwa_form{
  padding:0px;
}

.pwa-spacer{
  margin-top: 8px;
  margin-bottom: 8px;
}

div.quote_container_margins>span{
  color:gray;
}

a{
  color:#000;
}

.demo-card-wide.mdl-card {
  width: 95%;
  margin: auto;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('../images/limo_banner.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}

h2{
  margin: 0px;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
}

.mdl-card__supporting-text.notification-detail{
  width: 95%;
  margin: auto;
}

.notification-detail>.horizontal-icon-label-container>span{
  font-size: 16px;
}

/* safe-rides-options.aspx */
.demo-card-event.mdl-card {
  width: 95%;
  height: 150px;
  background: #06242c;
  margin-bottom: 12px;
  margin-right: auto;
  margin-left: auto;
}

.demo-card-event > .mdl-card__title {
  align-items: flex-start;
}
.ride-options-link > h4 {
  margin-top: 0;
  margin-bottom: 8px;
}
.ride-options-link > h3{
  color:white;
  margin-top: 8px;
  margin-bottom: 8px;
}

.demo-card-event > .mdl-card__title{
  color: #fff;
}

.options-icon{
  font-size:48px;
}

.ride-options-cont{
  display:block;
  margin: auto 0px;
}

.ride-options-link{
  text-decoration: none;
  color:#fff;
  font-weight: normal;
}

/* VEHICLES */
.vehicle-description{
  width:100%;
}

a.NoLine.learn-more-link{
  color:#0066cc;
  margin:auto;
}

.mdl-card__media.vehicle{
  background:transparent;
}

.vehicleShow.pwa-vehicle-show{
  height:auto;
}

/* CONTACT US */
.mdl-card__title.contact-us{
  color: #fff;
  height: 176px;
  background: url('../images/contact_banner.jpg') center / cover;
}

.contact-us-icons{
  margin: auto 4px;
  font-size: 28px;
  margin-right: 15px;
}

/* Billing */
.mdl-card__title.billing-form{
  color: #fff;
  height: 176px;
  background: url('../images/billing_banner.jpg') center / cover;
}

div.input_half,input.mdl-textfield__input.pwa_input.input_half{
  width:95%;
}

/* Account */
.mdl-card__title.account-form{
  color: #fff;
  height: 176px;
  background: url('../images/account_banner.jpg') center / cover;
}

/* Notification Settings */
.mdl-card__title.notifications-settings-mob{
  color: #fff;
  height: 176px;
  background: url('../images/notification_mob_banner.jpg') center / cover;
}

.notification-switch-cont > .mdl-switch__label{
  font-size: 18px;
  font-weight: 700;
}

#enableNotificationsInstructions>.notifications-title{
  margin-top: 12px;
  display: block;
  font-weight: bold;
  color:#009bcc;
}

#enableNotificationsInstructions>.notifications-detail{
  margin-top: 12px;
  display: block;
}

.text-icons{
  font-size: 18px;
}

/**
  MAPS Screen - Get a Quote
**/
#map{
  height: 400px;
}

.destination_field_label{
  margin-left: 16px;
  font-weight: bold;
  color:black;
  font-size: 20px;
}

.map_pin{
  height: 48px;
  width: 48px;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  margin-top: -48px;
  margin-left: -24px;
}

#pinAddressButton{
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  margin-top: 8px;
  margin-right: 8px;
}

.mdl-card{
  width: 95%;
  margin: auto;
  font-size: 18px;
}

.content{
  display:block;
  padding: 0;
  /*padding-top: 70px;*/
  padding-bottom: 12px;
}

.mdl-radio__label{
  margin-right: 8px;
}

.pac-container{
  margin: 0px;
}

#clear-PICKUP, #clear-STP, #clear-DEST{
  display: none;
}

.mdl-card__title-text{
  font-size: 24px;
}

/* Navigation Drawer */
.mdl-layout--fixed-header>.mdl-layout__header {
  z-index: 6;
}
.has-drawer  .mdl-layout__drawer {
  padding-top: 64px;
}

.mdl-layout--fixed-drawer:not(.is-small-screen)>.mdl-layout__header {
  padding-left: 240px;
  margin-left: 0;
  width: 100%;
}

.mdl-layout__drawer-button>i{
  margin-top: 12px;
}

header.mdl-layout__header{
  background-color: #000;
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link{
  font-size: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: rgba(0,0,0, 0.75);
}

.drawer_icon{
  margin-right: 8px;
}

label.mdl-switch{
  margin-top: 8px;
  margin-bottom: 8px;
}

.mdl-switch__label{
  line-height: 16px;
}


.mdl-card__supporting-text{
  color: rgba(0,0,0, 0.75);
  font-size: 16px;
  line-height: 20px;
}

.md-button:not([disabled]):hover {
  background-color: transparent;
}

.quote_vehicles_card > .mdl-card__title{
  color: #0CF;
  height: 125px;
}

/**
BUttons override
**/
.myButton, .bigButton, .return, .gray-btn{
  display: inline;
  padding: 15px;
padding-top: 7px;
padding-bottom: 6px;
color: #000000;
color: #FFFFFF;
  text-align: center;
font-weight: bold;
  text-decoration: none;
  cursor: pointer;
background-color : #363636;
background-color: #AA0000;
background-color: #00bff3;
background-color: #00c8ff;
background-color: #00ccff;


}

.myButton, .return, .gray-btn{font-size: 18px; padding: 7px 15px; border-radius: 5px; display: block; text-transform: uppercase;}

.gray-btn{
  color: #424242;
  background-color: #dcdada;
}

.actionCardBottom{
  padding-bottom: 18px;
  padding-top: 18px;
}

p {margin-top: 15px; margin-bottom: 5px; line-height: 22px; font-size: 16px;}

.Info {font-size: 20px;}
.mdl-card__actions {padding: 20px;}
h2 {margin-bottom: 15px;}
.vehicleShow, .vehicleShow2 {margin-bottom: 50px;}
.vehicleMobileContainer {cursor: pointer;}
ul, ol {font-size: 16px;}