
// Dark background for modals
.modal-backdrop-bg {
  background-color: #000;
  opacity: 0.8;
}

.trip-info {
  display: flex;
  flex-direction: column;
  height: 100%;

  .map {
    flex: 1;
    position: relative;

    ui-gmap-google-map {
      display: block;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      position: absolute;

      .popUpStopSelect{
        min-width: $popUpStopSelectMinWidth;
        min-height: $popUpStopSelectMinHeight;
        padding-left: $content-padding*2;
        padding-top: $content-padding;

        .button{
          margin-top: $content-padding;
        }
      }

      .angular-google-map, .angular-google-map-container {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        left: 0;
        top: 0;

        /* Hides the terms of use */
        .gmnoprint, .gm-style-cc {
          display: none;
        }
      }
    } /* ui-gmap-google-map */
  }

  h4 {
    text-transform: uppercase;
    color: $hint-color;
  }

  .route-item {
    width: 100%;

    .stops {
      margin-top: 0px;
    }

    .stop-desc {
      font-size: $font-size-base;
    }

    .stop-road {
      font-size: $font-size-small;
    }
  }

  .vehicle-no {
    text-transform: uppercase;
    background: $normal-grey;
    color: white;

    // make it look like a vehicle licence plate
    width: fit-content;
    padding-left: $item-padding-base;
    padding-right: $item-padding-base;
  }

  .trip-code-block {
    background: $royal;
    color: white;
    text-align: center;
    padding-top: $item-padding-base;
    padding-bottom: $item-padding-base * 2;
    > div {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    h5 {
      text-transform: uppercase;
      color: white;
    }
  }
}

.cancellation-item {
  height: 100%;
  .service-cancellation {
    .item {
      border: 0px;
    }
    .cancellation-content {
      margin: $padding-large-vertical 0;
      text-align: center;
      h2 {
        color: $normal-grey;
        text-align: center;
        font-weight: bold;
        padding: $item-padding-base 0;
        font-size: $font-size-x-large;
      }
      img {
        padding: $line-height-computed 0;
      }
      p {
        text-align: left;
        padding: $padding-base-vertical $padding-base-horizontal;
      }
    }
  }
}

.company-info {
  display: flex;
  a {
    padding-left: $padding-x-small-horizontal;
  }
  .mini-info {
    padding-top: $padding-small-vertical;
    width: 80%;
  }
}