.booking-search-form {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;
  grid-template-areas:
          "src dst ddt tph sbt";
  column-gap: 1rem;
}

@media only screen and (max-width: 960px) {
  .booking-search-form {
    display: grid;
    width: 100%;
  grid-template-columns: 1fr;
    grid-template-areas:
        "src"
        "dst"
        "ddt"
        "tph"
        "sbt";
        row-gap: 1rem;
  }
}

.booking-search-form > .area-source {
  grid-area: src;
  align-self: center;
}

.booking-search-form > .area-destination {
  grid-area: dst;
  align-self: center;
}

.booking-search-form > .area-departure-date {
  grid-area: ddt;
  align-self: center;
}

.booking-search-form > .area-traveller-phone {
  grid-area: tph;
  align-self: center;
}

.booking-search-form > .area-search-button {
  grid-area: sbt;
  align-self: center;
}

/** Select 2 Customization **/
.select2-container {
    width: 100% !important;
}
.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; word-break: break-all; }

.select2-hidden-accessible {
    margin-top: 2.3rem; /** so that validation message does not hide input **/
}
.select2-results__option[aria-disabled="true"] {
    color: #b3b3b3; /* Muted gray color */
}
/** End of select 2 customization **/


/** Date picker input customization **/
#internal-date-input {
    margin-top: 2.3rem; /** so that validation message does not hide input **/
}

.booking-result-card-grid {
  display: grid;
  width: 100%;
  grid-auto-columns: minmax(10px, auto);
  grid-template-areas:
          "rot-lb   ddt-lb  opt-lb  nos-lb  amt-lb  dtl"
          "rot      ddt     opt     nos     amt     dtl";
  column-gap: 1rem;
  row-gap: 0.6rem;
}

.booking-result-card-grid > .route {
  grid-area: rot;
}

.booking-result-card-grid > .departure-date {
  grid-area: ddt;
}

.booking-result-card-grid > .operator-info {
  grid-area: opt;
}

.booking-result-card-grid > .no-of-seats {
  grid-area: nos;
}

.booking-result-card-grid > .booking-amount {
  grid-area: amt;
}

.booking-result-card-grid > .detail-action {
  grid-area: dtl;
  align-self: center;
}


.booking-result-card-grid > .route-label {
  grid-area: rot-lb;
}

.booking-result-card-grid > .departure-date-label {
  grid-area: ddt-lb;
}

.booking-result-card-grid > .operator-info-label {
  grid-area: opt-lb;
}

.booking-result-card-grid > .no-of-seats-label {
  grid-area: nos-lb;
}

.booking-result-card-grid > .booking-amount-label {
  grid-area: amt-lb;
}


.btn-brand {
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 7px;
  font-size: 16px;
  background-color: #F40E0E;
  height: 37px;
  color: #ffffff;
}


.hero-background {
    background-image: radial-gradient(circle at 80%, #264aa5 0%, #0B1F53 100%);
    background-repeat: no-repeat;
    background-size: 100% 88%;
}

@media screen and (max-width: 768px) {
    .booking-result-card-grid {
      display: grid;
      width: 100%;
      grid-auto-columns: minmax(10px, auto);
      grid-template-areas:
               "rot-lb rot"
               "ddt-lb ddt"
               "opt-lb opt"
               "nos-lb nos"
               "amt-lb amt"
               "dtl-lb dtl";
      column-gap: 1rem;
      row-gap: 0.7rem;
    }

    .hero-background {
        background-image: radial-gradient(circle at 80%, #0B60B0 0%, #0B60B0 100%);
        background-repeat: no-repeat;
        background-size: 100% 80%;
    }

    .shadow-card-sm{
        box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.1);
        border: 0;
    }
}
.btn-brand:hover:not([disabled]) {
  background-color: #e0230e !important;
  filter: brightness(110%) drop-shadow(1px 2px 4px hsla(0, 0%, 40.4%, 0.5));
  border-color: #f2432f !important;
}