.trip-search-form {
  display: grid;
  width: 100%;
  grid-template-areas:
          "src"
          "dst"
          "ddt"
          "sct"
          "nat"
          "sbt";
  gap: 1rem 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.trip-search-form-wide {
  display: grid;
    grid-template-areas:
        "nat nat nat nat nat"
        "src dst ddt sct sbt";
  gap: 1rem 1rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
}

@media only screen and (max-width: 960px) {
  .trip-search-form {
    grid-template-areas:
        "src"
        "dst"
        "ddt"
        "sct"
        "nat"
        "sbt";
  }
  .trip-search-form-wide{
      grid-template-areas:
          "src"
          "dst"
          "ddt"
          "sct"
          "nat"
          "sbt";
      gap: 1rem 1rem;
      grid-template-columns: minmax(0, 1fr);
    }

  }
}

.trip-search-form > .area-type {
  grid-area: typ;
}

.trip-search-form > .area-source {
  grid-area: src;
}

.trip-search-form > .area-destination {
  grid-area: dst;
}

.trip-search-form > .area-seat-count {
  grid-area: sct;
}

.trip-search-form > .area-nationality {
  grid-area: nat;
}

.trip-search-form-wide > .area-search-button {
  grid-area: sbt;
}

.trip-search-form-wide > .area-source {
  grid-area: src;
}

.trip-search-form-wide > .area-destination {
  grid-area: dst;
}

.trip-search-form-wide > .area-seat-count {
  grid-area: sct;
}

.trip-search-form-wide > .area-nationality {
  grid-area: nat;
}

.trip-search-form-wide > .area-search-button {
  grid-area: sbt;
}


/** 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: 2rem; /** 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: 2rem; /** so that validation message does not hide input **/
}




input[type=radio]:hover,
input[type=radio]:focus {
    cursor: pointer;
}

input[type=radio] + label {
    cursor: pointer;
}

hc-date-picker-component {
    cursor: pointer !important;
}
spinner-component div button:not([disabled]):hover {
    box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.05) !important;
}

/** Hack to make selection look distinct from placeholders in search from **/

#tripSearchForm span.text-muted {
  opacity: 0.8;
}

#date-display {
    color: #343a40
}

/** car type toggle */

.car-type-toggle-group {
  display: inline-flex;
  overflow: hidden;
}

.car-type-toggle-group input[type="radio"] {
  display: none;
}

.car-type-toggle-group label {
  padding: 8px 24px;
  cursor: pointer;
  /*background-color: #f0f0f0;*/
  /*background-color: #e0e5f8;*/
  border: 2px solid #eef1fc;
  border-radius: 3rem;
  transition: background-color 0.2s, color 0.2s;
  font-weight:bold;
}


.car-type-toggle-group input[type="radio"]:checked + label {
  background: #E0E5F8;
  border: 2px solid #CED4EC;
  /*background-color: var(--primary);
  border: 1px solid var(--primary);*/
}

/*
.car-type-toggle-group label:first-of-type {
  border-radius: 3rem 0 0 3rem;
}

.car-type-toggle-group label:last-of-type {
  border-radius: 0 3rem 3rem 0;
}*/