#myStops {
  flex: 1 0 10rem;
  padding: 0em 0.3em 0em 0.3em;
}
  #myStops.block {
    display: flex;
    flex-direction: column;
  }
  #myStops .loader {
    right: 0.5em;
  }
  #myStopsLists {
    flex: 0 1 auto;
  }
  #savedStopList, #otherRecentStopList {
    width: 100%;
    height: auto;
    max-height: 35vh;
    overflow-y: auto;
    background-color: var(--surface-secondary);
    color: var(--text-on-dark);
    margin: 0.5em 0em 1.0em 0em;
    border: 0px;
    border-radius: 3px;
    border-radius: var(--borderradius);
  }
  #myStops.scheduleMode #savedStopList, #myStops.scheduleMode #otherRecentStopList {
    max-height: 30vh;
  }
    #savedStopList .nostops, #otherRecentStopList .nostops {
      padding: 0.2em;
      opacity: 0.7;
    }
    .stopListHeader {
      position: sticky;
      top: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 100%;
      padding: 0.2em;
      background-color: var(--surface-primary);
    }
      .stopListHeader span:first-child {
        flex: 1 1 auto;
      }
      .stopListClear {
        flex: 0 0 3.1em;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0em 0.4em;
        margin-left: 0.4em;
        font-size: 70%;
        color: var(--text-on-dark);
        opacity: 0.8;
      }
    .stopName {
      display: flex;
      align-items: center;
      padding: 0.3em 0.2em 0.3em 0.2em;
      border-bottom: 0.1em solid rgba(255, 255, 255, 0.6);
    }
      .stopListDescription {
        flex: 1 1 auto;
        min-width: 0;
      }
      .removeSavedStop {
        flex: 0 0 3.1em;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        align-self: stretch;
        padding: 0em 0.2em 0em 0.7em;
        opacity: 0.8;
      }
        .trashIcon {
          display: block;
          width: 1em;
          height: 1em;
          stroke: currentColor;
          stroke-width: 2;
          stroke-linecap: round;
          stroke-linejoin: round;
        }
      #savedStopList .stopName .loader {
        right: 1.5em;
      }
    .stopName:last-child {
      border-bottom: none;
    }
  #myStopsControls {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 0.5em 0em 1em 0em;
  }
  #myStopsMode {
    display: flex;
    width: 100%;
    max-width: 35em;
    margin: 0em auto 0.4em auto;
    padding: 0.12em;
    background-color: var(--surface-primary);
    border-radius: 3px;
    border-radius: var(--borderradius);
    color: var(--text-on-dark);
  }
    .myStopsModeOption {
      flex: 1 1 50%;
      display: flex;
      align-items: center;
      font-size: 100%;
      justify-content: center;
      padding: 0.28em 0.2em;
      text-align: center;
      border-radius: 3px;
      border-radius: var(--borderradius);
    }
    .myStopsModeOption.selected {
      background-color: var(--surface-secondary);
      color: var(--text-on-dark);
      opacity: 1;
    }
  #myStopsSchedule {
    width: 100%;
    max-width: 35em;
    margin: 0em auto;
    padding: 0.35em;
    text-align: center;
    background-color: var(--surface-secondary);
    color: var(--text-on-dark);
    border-radius: 3px;
    border-radius: var(--borderradius);
  }
    #myStopsScheduleLabel {
      margin-bottom: 0.25em;
      font-size: 75%;
      opacity: 0.9;
    }
    #startTimeMyStops {
      display: block;
      width: 100%;
      min-height: 2.7em;
      padding: 0.35em 0.45em;
      color: var(--text-on-dark);
      background-color: var(--surface-primary);
      border: 0.1em solid rgba(255, 255, 255, 0.45);
      border-radius: 3px;
      border-radius: var(--borderradius);
      font: inherit;
      font-size: 75%;
    }
      #startTimeMyStops::-webkit-calendar-picker-indicator {
        filter: invert(1);
        opacity: 0.85;
      }