#getStop {
  padding: 0em 0.3em 0em 0.3em;
  flex: 1 0 10rem;
  flex-direction: column;
}
  #getStopContent {
    flex: 0 0 auto;
  }
    #stopPageLoading {
      display: flex;
      min-height: 50vh;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    #stopPageLoading.none {
      display: none;
    }
      .stopPageLoadingSpinner {
        width: 2.5em;
        height: 2.5em;
        border: 0.25em solid color-mix(in srgb, var(--surface-primary) 18%, transparent);
        border-top-color: var(--surface-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      .stopPageLoadingText {
        margin-top: 0.8em;
        color: var(--text-on-light);
        font-size: 80%;
        font-weight: bold;
      }

    #operatorListPage {
    }
      #operatorListPageTitle {
        text-align: center;
        margin-top: 1em;
        margin-bottom: 1.5em;
        font-size:80%;
        font-weight:bold;
      }
      #operatorList {
        width: 100%;
        height: auto;
        max-height: 50vh;
        overflow-y: auto;
        background-color: var(--surface-secondary);
        color: var(--text-on-dark);
        border: 0px;
        border-radius: 3px;
        border-radius: var(--borderradius);
        padding: 0 0.2em;
      }
        .feedName {
          padding: 0.3em 0.2em 0.3em 0em;
          border-bottom: 0.1em solid rgba(255, 255, 255, 0.6);
          font-size: 100%;
        }

    #stopSearchPage {
    }
      #searchHint {
        width: 100%;
        max-width: none;
        margin: 2.5em auto 1.8em auto;
        text-align: left;
        font-size: 80%;
      }
      #searchSelect {
        text-align: center;
        font-size: 80%;
        font-weight: bold;
        margin: 2.5em 0 0.8em 0;
      }
        .searchTitle {
          font-size: 120%;
          font-weight: bold;
          margin-bottom: 2em;
          text-align: center;
        }
        .searchExample {
          margin-top: 1em;
          font-size: 90%;
          font-style: italic;
        }
        .searchMinimum {
          margin-top: 0.2em;
          font-size: 90%;
          font-style: italic;
        }
      #backToMap {
        width: 100%;
        max-width: none;
        margin: 4em auto 1em auto;
      }

      #searchStr {
        display: block;
        width: 100%;
        max-width: none;
        background-color: var(--surface-secondary);
        color: var(--text-on-dark);
        border-style: inset;
        border-width: 0.1em;
        border-radius: 3px;
        border-radius: var(--borderradius);
        padding: 0.35em 0.3em;
        font-size: 16px;
        margin: 0 auto 0.5em auto;
      }
        #searchStr::-webkit-search-cancel-button {
          -webkit-appearance: none;
          width: 1em;
          height: 1em;
          background-color: var(--accent-highlight);
          -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          opacity: 1;
        }
        #searchStr::placeholder {
          color: var(--text-on-dark);
          opacity: 1;
        }

      #searchOptions {
        font-size: 100%;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 80vh;
        overflow-y: auto;
        margin-left: auto;
        margin-right: auto;
        background-color: var(--surface-primary);
        color: var(--text-on-dark);
        border: 0px;
        border-radius: 3px;
        border-radius: var(--borderradius);
      }
      #searchStr.none + #searchOptions {
        max-height: 65vh;
      }
        .searchStop {
          border-bottom: 0.1em solid rgba(255, 255, 255, 0.4);
          padding: 0.5em 0.4em;
        }
        .searchStop:hover {
          background-color: var(--surface-secondary);
        }
          .searchStopName {
            position: relative;
            text-align: center;
            margin-bottom: 0.3em;
          }
            .match {
              color: var(--accent-highlight);
            }

          /* Used in map infowindow too */
          .searchStopRoute {
            font-size: 80%;
          }
            .searchStopAgencyName {
              flex: 0 1 auto;
              text-align: left;
              font-weight: normal;
            }
            .searchStopRouteName {
              flex: 1 1 10ch;
              text-align: left;
              font-weight: bold;
            }
            .searchStopHeadSign {
              flex: 3 1 10ch;
              text-align: right;
            }