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

  @include transparent();
  ion-content {
    top: auto;
    max-height: 360px;
    @include desktop { &.has-tabs { top: $bar-height; } }
    @include desktop {
      // TODO: replace with variables
      top: 100px;
      max-height: none !important;
    }

    .item {
      border: 0px;
    }
    
    .progress-bar-item {
      padding-bottom: 0px;

      .progress-bar{
        margin-top: 0px;
        margin-bottom: 0px;
      }
    }

    background-color: white;

    .stops-button {
      padding-top: $padding-large-vertical;
      padding-bottom: $padding-large-vertical;
      margin: $padding-large-vertical auto;
      width: 80%;
      -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: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;

      .view-stops {
        padding-left: $padding-small-horizontal;
      }

      .fa-circle {
        font-size: $fa-font-size;
        color: $royal;
      }

      i {
        font-size: $font-size-base * 2;
      }
    }
  }
}

.crowdstart-stops {
  @include transparent();
  > ion-content {
    display: flex;
    flex-direction: column;
    top: auto;
    height: 300px;
    @include desktop { &.has-tabs { top: $bar-height; } }
    @include desktop {
      // TODO: replace with variables
      top: 44px;
      height: auto;
   }

   .stop-list {
     flex: 1;
     // Strip the extra margin from the list class
     margin-bottom: 0;
     // Add an edge to the scrolling list
     border-bottom-width: $item-border-width;
     border-bottom-color: $item-default-border;
     border-bottom-style: solid;
     .stop-option {
       cursor: pointer;
       // Setup togglable elements for selected items
       &.selected { .show-unselected { display: none; } }
       &:not(.selected) { .show-selected { display: none; } }
     }

     .item-radio{
        .radio-icon {
          color: $royal;
          font-size: $radio-font-size;
          left: 0px;
        }
        .not-selected{
          color: $hint-color;
          font-size: $radio-font-size;
          left: 0px;
          padding: 14px; /*follow radio-icon padding*/
        }
        .item-content{
          padding-right: $item-padding * 1;
          /* extend content space, override ionic default since the checkmark is no longer on the right */
        }
      }

    .fullStopDetails{
      padding-left: $item_padding_base*4;
      .time{
        font-weight: bold;
      }
      .details {
        .road {
          color: $hint-color;
        }
      }
    }

    i.stop-icon{
      left: $padding-small-horizontal*3;
      background-size: auto 20px;
      width: 24px;
      /* height: 24px; */
      display: inline-block;
      vertical-align: bottom;
      margin: 0 5px 0 0px;

      &.board{
        background: url('../img/map/Icon_PickupWShadow.svg') 0 50% no-repeat transparent;
      }
      &.alight{
        background: url('../img/map/Icon_DropoffWShadow.svg') 0 50% no-repeat transparent;
      }
    }
   }
  }
}
