@font-face {
    font-family: TransText;
    src: url(TransText-Light.otf);
  }
  
  @font-face {
    font-family: TransText-bold;
    src: url(TransText-Bold.otf);
  }

  @font-face {
    font-family: TransText-medium;
    src: url(TransText-Medium.otf);
  }

  @font-face {
    font-family: TransText-italic;
    src: url(TransText-Italic.otf);
  }

  body{
    font-family: TransText,sans-serif;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
  }
  a{
    font-family: TransText,sans-serif;
  }
.notification-bar{
    min-height: 40px;
    padding: 13px 15px;
    background-color: #141414;
}

  .notification {

    font-family: TransText,sans-serif;
    font-size: 11px;
    font-weight: 500;
    /*font-stretch: normal;
    font-style: normal;
    line-height: normal;*/
    letter-spacing: 0.04px;
    text-align: center;
    color: #ffffff;
  }

  nav {
    height: 70px;
    padding: 0px 39px 17.5px 5px;
    /*background-image: linear-gradient(96deg, #ec8a06 -34%, #dd3f1d 96%);*/
    background-color: #ffffff;
  }


  /*.brand-logo img {
    width: 113px;
    height: 31px;
  }*/

  #logo-transport{
    height: 50px !important;
    width: 200px !important;
  } 

  .logo-wat{
    height:60px !important; 
    padding-left: 0px !important; 
    margin-left: -15px !important;
  } 

  .brand-logo{
    padding-top: 10px !important;
    padding-left: 20px !important;
  }

  .menu-underline {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: #ffffff;
    /*left: 0;
    right: 0;*/
    z-index: 1;
    width: 70px;
  }

  #nav-menu a {
    /*border-bottom: 3px solid transparent;*/
    height: 55px !important;
    /*padding-bottom: 5px;*/
  }

  nav ul li.active {
    background-color: inherit;
  }

/*#nav-menu a:hover {
border-bottom: 3px solid white !important;
}*/

#nav-menu li.active a {
border-bottom: 2px solid white !important;
}

.footer-main{
  width: 100%;
  min-height: 402px;
  /*margin: 359.5px 0 0;*/
  padding: 56px 0 2px 0;
  background-color: #141414;
  /*position: fixed;
  bottom: 0px;
  left: 0px;*/
}

.footer-copy{
  width: 100%;
  min-height: 62px;
  padding-top: 16px;
  padding-bottom: 15px;
  background-color: #202020;
}

.frame-slide-on{
 padding-bottom: 2px !important;
}


.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.section-form{
    width:100% !important; 
    min-height:850px;
    padding: 15px 0 50px 0 !important;
    /*background-color: #ededed;*/
    /*background-image: url("banner-bg.png");*/
    /*background-image: url("../img/banner-bg.png");
    background-position: 0px -50px;*/
}


.section-about {
    width:100% !important; 
    min-height: 760px;
    padding: 58px 0 38px 70px;
    background-color: #ffffff;
}


.section-info {
    width:100% !important; 
    min-height: 588px;
    margin: 543.5px 0 0;
    padding: 137px 165px 53px;
    background-color: #f6f6f6;
}


.booking-panel{
    /*width: 530px;*/
    width: 90%;
    height: 100%;
    /*min-height: 670px;*/
    padding: 10px 40px 50px 40px;
    object-fit: contain;
    border-radius: 20px;
    border: solid 1px #c5c5c5 !important;
    box-shadow: 20px 30px 14px -43px rgba(0, 0, 0, 0.39);
    background-color: #ffffff;
    z-index: 10;
    position: relative;
    
}

.booking-content{  
  overflow-x: hidden;
  overflow-y: auto !important;
  height: 400px !important;
  padding-right: 10px;
}

/*.booking-pane-long{
    min-height: 650px !important;
}*/

h4 {
    font-family: TransText-bold, sans-serif;
    font-size: 36px !important;
    /*font-size: calc(20px + 1vw);*/
    letter-spacing: 0.14px !important;
    color: #141414  !important;
}

h5 {
    font-family: TransText-bold, sans-serif;
    font-size: 24px;
    /*font-size: calc(16px + 0.5vw);*/ 
    letter-spacing: 0.09px !important;
    color: #141414 !important;
  }

h6 {
  font-family: TransText-bold, sans-serif;
  font-size: 20px;
  letter-spacing: 0.09px !important;
  color: #141414 !important;
}

#page-title{
  padding-left: 10px !important;
}

p{
    font-family: TransText, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: normal;
    color: #606060;
      
}

.primary-bg-color {
    background-color: #0069B4 !important;
}

.step-bookingId { 
  font-family: TransText-medium;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  color: #141414;
}

.form-step{
    font-family: TransText;
    font-size: 16px;
    line-height: 1.63 !important;
    letter-spacing: normal;
    color: #141414;
    padding-top: 10px;
      
}

.bookingID{
    font-family: TransText;
    font-size: 14px;
    line-height: 1.63 !important;
    letter-spacing: normal;
    color: #141414;     
}

.progress{
    background-color: #eeeeee !important;
    width: 75% !important;
}
.progress .determinate {
    /*background-image: linear-gradient(106deg, #ec8a06 -37%, #dd3f1d 96%) !important;*/
    background-color: #0069B4;
}

.step-header{

    font-family: TransText-bold;
    font-size: 18px;
    font-weight: bold;
    /*font-stretch: normal;
    font-style: normal;
    line-height: normal;*/
    letter-spacing: 0.07px;
    color: #0069B4;
 
}

.welcome{
    padding-left: 20px !important;
    padding-top: 0px !important;
    padding-right: 20px !important;
}

.footer-main h4{
    color: #ffffff !important;
}

.note{
  font-family: TransText-italic !important;
  font-size: 16px;
  letter-spacing: 0.05px;
  color: #242424;
  margin-top: 10px !important;
}

.refLink{
  font-family: TransText-medium !important;
  font-size: 16px;
}

#vehicle-type{
  font-family: TransText-medium !important;
  font-size: 16px;
}

.inputBox {
    box-sizing: border-box !important;
    min-height: 40px !important;
    padding: 13px 10px 11px !important;
    border-radius: 8px !important;
    border: solid 1px #c5c5c5 !important;
    background-color: #ffffff !important;
    width: 100% !important;
    font-family: TransText !important;
    font-size: 16px !important;
    letter-spacing: 0.06px !important;
    color: #242424 !important;
    box-shadow: none !important;
  }


  .textAreaBox {
    width: 100% !important;
    min-height: 120px !important;
    padding: 15px 20px 15px 20px !important;
    border-radius: 8px !important;
    border: solid 1px #c5c5c5 !important;
    background-color: #ffffff !important;
    font-family: TransText !important;
    font-size: 16px !important;
    letter-spacing: 0.06px !important;
    color: #242424 !important;
    box-shadow: none !important;
  }
  

  #locationInstruction{
      margin-top: 20px !important;
      /*min-height: 500px !important;*/
      min-height: 145px !important;
  }

  #otherInstruction {
      margin-top: 7px !important;
      /*min-height: 580px !important;*/
      min-height: 145px !important;
  }

  .inputBoxSmall {
    max-width: 192px !important;
  }

  .inputBoxRadio {
    padding: 10px 0px 10px 5px !important;
    max-width: 192px !important;
  }

  .inputBoxRadioSmall {
    max-width: 140px !important;
  }

  input:focus, textarea:focus {
    box-shadow: 0 0 5px #00a7e7 !important;
    border-radius: 8px !important;
    border: solid 1px #c5c5c5 !important;
    background-color: #ffffff !important;
  }

  .inputBoxRadio span{
    font-family: TransText !important;
    font-size: 15px !important;
    letter-spacing: 0.06px !important;
    color: #242424 !important;

  }


  .minus, .plus{
    width:40px !important;
    height:40px !important;
    padding-top: 2px !important;
    border-radius: 8px !important;
    border: solid 1px #c5c5c5 !important;
    background-color: #0069B4 !important;
    display: inline-block !important;
    text-align: center !important;
    font-size: 28px !important;
    letter-spacing: 0.11px !important;
    color: #ffffff !important;
    cursor:pointer;
    
  }

  .inputCounter{
    width:80px !important;
    height:40px !important;
    padding-top: 2px !important;
    border-radius: 8px !important;
    border: solid 1px #c5c5c5 !important;
    background-color: #ffffff !important;
    display: inline-block !important;
    text-align: center !important;
    font-family: TransText !important;
    font-size: 24px !important;
    letter-spacing: 0.11px !important;
    color: #242424 !important;
  }

 
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
    background-color: #0069B4 !important;
}

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
  border: 2px solid #0069B4 !important;
}

[type="checkbox"].filled-in:not(:checked)+span:not(.lever):after {
    border: 1px solid #5a5a5a;
}

[type="checkbox"].filled-in:checked+span:not(.lever):after {
    border: 2px solid #0069B4;
    background-color: #0069B4;
}

  .input-label{
    margin-bottom: 5px !important;
    /*opacity: 0.9;*/
    font-family: TransText;
    font-size: 16px !important;
    letter-spacing: 0.05px;
    color: #242424;
  }

  .input-container, .input-container-left {
    position: relative;
    /*float: left;*/
  }

  .input-container .input-icon {
    position: absolute !important;
    right:10px !important;
    top:10px !important;
    color: #242424 !important;
  }

  .input-container-left .input-icon {
    position: absolute !important;
    left:10px !important;
    top: 17px !important;
    color: #242424 !important;
  }

  .input-container .inputBox{
    padding-right: 40px !important;
  }

  .input-container-left .inputBox{
    padding-left: 35px !important;
  }

  .input-error{
    color: #dd3f1d;
    font-size: 12px;     
  }

  .error-text{
    color: #dd3f1d;
  }

  .inner-row{
    padding-bottom: 0 !important; 
    margin-bottom: 0 !important;
  }

  .inner-col{
    padding-right: 0 !important; 
    padding-bottom: 0 !important;
  }

  .preloader-wrapper.small {
    width: 20px;
    height: 20px; 
  }

  .spinner-layer {
    border-color: #0069B4;
  }

.fare-label{
  font-family: TransText !important;
  font-size: 16px !important;
  letter-spacing: 0.06px !important;
  color: #242424;
}

#fare-estimate, #distance-estimate{
  font-family: TransText-bold !important;
  font-size: 14px !important;
  letter-spacing: 0.06px !important;
  color: #242424;
}

.button-primary {
  width: 150px;
  height: 46px;
  padding: 15px 15px 17px;
  border-radius: 8px;
  background-color: #0069B4;
  font-family: TransText-medium;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  
}

.button-secondary {
  width: 150px;
  height: 46px;
  padding: 13px 15px 13px;
  border-radius: 8px;
  border: solid 2px #0069B4 !important;
  background-color: #ffffff;
  font-family: TransText-medium;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06px;
  text-align: center;
  color: #0069B4;
  cursor: pointer;
  margin-right: 15px !important;
  
}

.button-small{
    max-width: 63px !important;
    padding: 13px 10px 7px 10px !important;
}

.button-primary:hover, .button-secondary:hover{
  /*background-color: #35c7ff !important;*/
  background-color: #00a7e7 !important;
  color: #ffffff !important;
}

 .button-primary-long{
   width: 155px !important;
  }

.button-panel{
  width: 100% !important;
  /*position: absolute;
  bottom:   0px !important;*/
  padding-right: 0px;
  margin-top: 50px !important;
  margin-left: 0px !important;
}

.button-panel .col{
  padding-right: 0px !important;
}

.booking-panel .button-primary-container{
  display: inline-block;
  margin-left: 10px !important;
}

.booking-panel .button-secondary-container{
  display: inline-block;
}

.button-group .button-primary{
  margin-left: 20px !important;
}

.disabledButton {
  pointer-events: none !important;
  cursor: default;
}


.booking-section, .booking-section-small{
  width: 100%;
  padding: 20px 20px 15px 20px;
  border-radius: 9px;
  border: solid 1px #cfcfcf;
  background-color: #ffffff;
  margin-top: 15px;
}

.booking-section-small{
  min-height: 455px;
}

.summary-section{
  /*max-width: 480px;*/
  padding: 20px 20px 20px 20px;
  border-radius: 9px;
  border: solid 1px #cfcfcf;
  /*background-color: #f6f6f6;*/
  background-color: #ffffff;
}

.summary-header { 
  font-family: TransText-medium;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06px;
  color: #141414;
}

.summary-title { 
  font-family: TransText;
  font-size: 14px;
  line-height: 2.33;
  letter-spacing: normal;
  color: #606060;
}

.summary-text { 
  font-family: TransText-medium !important;
  font-size: 16px !important;;
  font-weight: 500 !important;;
  line-height: 2 !important;;
  color: #141414 !important;;
}

.icon-result{
  width: 40px;
  height: 40px;
}

.icon-success{
  /*color: #59c373 !important;*/
  color: #00c76a !important;
  font-size: 50px !important;
}

#booking-id{
  font-family: TransText;
  font-size: 24px;
  letter-spacing: 0.11px;
  color: #242424;
}


.booking-confirm-label{
  
  font-family: TransText;
  font-size: 18px;
  letter-spacing: 0.05px;
  color: #242424;
}

.container {
  width: 100% !important;
}


.vertical_dotted_line
{
    border-left: 3px dotted #b3b2b2;
    height: 20px;
} 

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  background: #00c76a !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  border: 1px solid #00c76a !important;
  background: #00c76a !important;
  color: #fff !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  border: 1px solid #0069B4 !important;
  background: #0069B4 !important;
  font-weight: normal;
  color: #fff;
}
.ui-widget-header .ui-icon {
  background-image: url("ui-icons_444444_256x240.png") !important;
}

.ui-timepicker-table td a {
  width: 35px !important;
}

.link{
  cursor: pointer;
}


.selectBox {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") !important;
  
  background-repeat: no-repeat !important;
  background-position: top 8px right 10px !important;
}

 select:focus {
    box-shadow: 0 0 5px #00a7e7 !important;
    border-radius: 8px !important;
    border: solid 1px #c5c5c5 !important;
  }
  
 /*for materialize select */
  input.select-dropdown {
    box-sizing: border-box !important;
    min-height: 40px !important;
    padding: 13px 10px 11px !important;
    border-radius: 8px !important;
    border: solid 1px #c5c5c5 !important;
    width: 100% !important;
    font-family: TransText !important;
    font-size: 16px !important;
    letter-spacing: 0.06px !important;
    color: #242424 !important;
    box-shadow: none !important;

  }
  
 /*for materialize select */
.dropdown-content li>a, .dropdown-content li>span {
    color: #242424 !important;
    font-family: TransText !important;
    font-size: 16px !important;
}

.inputBoxInvalid {
  border-color: #dd3f1d !important;
}

.btn-float-container{
  padding-top: 30px !important;
  padding-left: 5px !important;
}

.btn-floating.btn-small {
    width: 28px;
    height: 28px;
}

.btn-small {  
    line-height: 28px;
}

.btn-floating.btn-small i {
    line-height: 28px;
}

#tripType-desc{
  padding-right: 20px;
}

.disabledBg{
  background: #F4F6F6  !important;
}

.preloader-wrapper.small {
    width : 20px  !important;
    height: 20px  !important;
}


@media only screen and (min-width: 640px) and (max-width: 800px){
  /*.booking-container {
      padding-left: 40px !important;
  }*/

  .booking-panel{
    padding: 10px 20px 50px 20px;
  }

  .booking-section-small{
    min-height: 550px;
  }

  #tripType-desc{
    padding-right: 5px !important;
  }

  #locationInstruction{
      margin-top: 0px !important;
      min-height: 120px !important;
  }

  #otherInstruction {
      margin-top: 0px !important;
      min-height: 120px !important;
  }
}


@media only screen and (max-width: 630px) {

  #logo-transport{
    height: 30px !important;
    width: 120px !important;
  } 

 
  .step-bookingId {
    margin-left: -4px;
  }

  .logo-container{
    padding-left: 15px !important;
  }

  .booking-panel {
      width: 100% !important;
      min-height: 690px !important;
      padding: 10px 15px 50px 15px;
  }
  
  .booking-panel-long{
    min-height: 780px !important;
  }

  .booking-content{
    height: 470px !important;
  }

  /*.button-panel{
    padding-right: 5px !important;
    position: relative !important;
  }*/

  h4{
    font-size: 24px !important;
  }

  h5{
    font-size: 20px !important;
  }

  .welcome h4{
    margin-top: 0 !important;
  }

  /*nav{
    height: 50px !important;
  }*/

  .button-primary{
    max-width: 63px !important;
    padding: 15px 10px 15px 10px !important;
  }

  .button-secondary{
    max-width: 63px !important;
    padding: 13px 10px 13px 10px !important;
  }

  .button-primary-long{
    max-width: 155px !important;
  }

  .btn-mid-long {
    max-width: 95px !important;
  }

   #tripType-desc{
     padding-right: 5px !important;
   }

  #locationInstruction{
    margin-top: 0px !important;
    min-height: 120px !important;
  }

  #otherInstruction {
      margin-top: 0px !important;
      min-height: 120px !important;
  }
}



@media only screen and (max-width: 360px) {

  .logo-wat{
    height: 50px !important;
  } 

  .booking-panel {
      min-height: 720px !important;
  }

  .booking-panel-long{
    min-height: 800px !important;
  }

  .booking-content{
    height: 500px !important;
  }

  #tripType-desc{
    padding-right: 5px !important;
  }

  .form-step { 
    font-size: 14px;
    padding-top: 5px;
  }

  /*.button-panel{
    padding-right: 0px !important;
    position: relative !important;
  }*/

  /*.button-primary, .button-secondary{
    max-width: 70px !important;
  }

  .button-primary-long{
    max-width: 150px !important;
  }*/
}


/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f6f6f6; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #d8d8d8; 
}