
.routes-view {
  $search-height: 42px;
  $search-v-padding: 4px;

  .from-to {
    // Margin-top hack to get the ion content to work nicely with search bar
    margin-top: $search-v-padding * 2 + $search-height * 2;
    padding-top: 0px;
  }

  .one-search {
   // Margin-top hack to get the ion content to work nicely with search bar
    margin-top: $search-v-padding * 2 + $search-height; 
  }

  .list {
    height: 100%;
  }

  .progress-bar {
    width: 100%;
  }

  route-item {
    width: 90%;
  }

  .shadow {
    border-radius: $search-bar-radius;
    -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);
  }

  .search-container {
    padding: 5px;
    display: flex;
    justify-content: space-between;
    background: $search-background-color;

    .search-div {
      border-radius: $search-bar-radius;
    }

    .search-inputs {
      flex-grow: 1;
      width: 100%;

    }

    .search-toggle {
      display: flex;
      margin-left: 10px;

      button {
        margin-top: auto;
        margin-bottom: auto;
        padding: 10px;
      }
    }
  }

  .suggest-route {
    display: flex;
    flex-direction: column;

    div {
      margin-bottom: $padding-large-vertical;
    }
  }
}

.modal-open {
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
  .scrollable-routes-list {
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
  }
}