.route-detail {
  @include transparent();
  .popup{
    height: auto;
    padding: 0px;
    flex-direction: column;
    background-color: transparent;
    @include desktop { background-color: $stable };
    background-image: none;
    align-items: center;

    .rides-remaining {
      // ion-content background-color is transparent
      background-color: #fff;
      color: $hint-color;
      -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1), inset 0px 1px 1px 1px rgba(0,0,0,0.1);
      -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1), inset 0px 1px 1px 1px rgba(0,0,0,0.1);
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1), inset 0px 1px 1px 1px rgba(0,0,0,0.1);
      z-index: 0; // required for shadow to stack properly
      display: flex;
      width: 100%;
      padding: $padding-large-vertical $padding-large-horizontal;
      align-items: center;
      font-size: $font-size-x-small;
      flex-wrap: wrap;
      justify-content: space-between;

      .popup-left {
        width: 50%;

        &.popup-top {
          width: 70%;
        }
      }

      .popup-right {
        width: 50%;
        text-align: right;
        margin-left: auto; // for when user not logged in, floats text to right

        &.popup-top {
          width: 30%;
        }
      }

      .popup-top {
        margin-bottom: $padding-small-vertical;
      }

      // Make touch target larger
      .route-pass-button {
        padding-top: 20px;
        padding-bottom: 12px;
      }

      i.icon .buy-more-button{
        flex: 0 0 auto;
      }
      .text {
        flex: 1 1 auto;
        margin-left: 10px;
      }
      button {
        line-height: 1.0;
        font-size: 12px;
      }
    }

    .ticket-popunder {
      width: 70%;
      text-align: center;
      -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
      -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
      -webkit-border-radius: 0px 0px 12px 12px;
      -moz-border-radius: 0px 0px 12px 12px;
      border-radius: 0px 0px 12px 12px;

      .ticket-target {
        width: 100%;
        background-color: $royal;
        color: white;
        padding: $padding-base-vertical;
        font-size: $font-size-base;
        -webkit-border-radius: 0px 0px 12px 12px;
        -moz-border-radius: 0px 0px 12px 12px;
        border-radius: 0px 0px 12px 12px;
        border: 0px;

        .ticket-text {
          margin-left: $padding-small-horizontal;
        }
      }
    }
  }

  ion-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
    top: auto;
    background-color: transparent!important;

    @include desktop {
      top: $bar-height;

      .padding-ticket-subheader {
        padding-top: 70px;
      }

      .padding-routepass-subheader {
        padding-top: 60px;
      }

      .booking-view {
        padding-top: 40px;
        background-color: $stable;
      }
    }

    .stops-selector {
      width: 90%;
      margin: auto;
      position: relative;
      bottom: -41px;
      border-radius: 6px;
      -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
      -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);
      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.1);

      .stop-selector {
        padding-top: $padding-large-vertical;
        padding-bottom: $padding-large-vertical;
        font-size: $font-size-small;

        .arrow-icon {
          font-size: $font-size-small * 2;
        }
      }

      .board-stop-selector {
        border-radius: 6px 6px 0px 0px;
      }

      .alight-stop-selector {
        border-radius: 0px 0px 6px 6px;
      }
    }

    .booking-info {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // ion-content background-color is transparent
      background-color: $stable;
      padding-top: 50px;
      padding-bottom: 10px;

      span {
        margin-top: $padding-base-vertical;
        margin-bottom: $padding-large-vertical;
      }

      .book-button {
        margin-top: 0px;
        margin-bottom: 0px;
      }

      .advance-button {
        min-height: 40px;
      }
    }

    @keyframes slide-in-from-bottom {
      0% {
        transform: translateY(900px);
      }
      100% {
        transform: translateY(0);
      }
    }
  }
}


/** Ionic uses a very specific selector with iOS/Cordova **/
// .page-with-map ion-content,
// .platform-ios.platform-cordova:not(.fullscreen) .page-with-map ion-content.has-header {
//   top: auto;
// }

.platform-ios.platform-cordova:not(.fullscreen) .page-with-map ion-content.has-header {
  top: auto;
}

ui-gmap-google-map {
  top: $bar-height;
}