<commit_before>#route-details {
  margin-left: -24px;

  &.settings-open {
    .route-summary {
      display: none;
    }
  }

  .col-xs-2, .col-xs-9 {
    line-height: @route-line-height;
  }

  .col-xs-2 {
    padding-right: 0;
    text-align: center;
  }

  .route-selector {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    border-bottom: @border-light;
    .clearfix();

    > li {
      margin-bottom: 0 !important;
      border: 1px solid @text-color;
      float: left;
      width: 100% / 3;
      text-align: center;

      &.selected a {
        background-color: @blue-lighter;
      }

      &:first-child, &:first-child a {
        border-top-left-radius: @route-selector-border-radius;
        border-bottom-left-radius: @route-selector-border-radius;
      }

      &:last-child, &:last-child a {
        border-top-right-radius: @route-selector-border-radius;
        border-bottom-right-radius: @route-selector-border-radius;
      }

      a {
        display: block;
        padding: 4px 16px;

        &:hover {
          background-color: @blue-lighter;
        }
      }
    }

    li + li {
      border-left: none;
    }
  }

  .route-info {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: @border-light;

    .show-map {
      float: right;
      color: @blue;
    }
  }

  .leg, .end {
    @line-width: 4px;
    @start-point-size: 11px;
    @left-offset: 18.5%;

    position: relative;

    .bold {
      font-weight: @font-bold-weight;
    }

    .leg-start-point {
      position: absolute;
      top: 9px;
      left: @left-offset;
      margin-left: -3px;
      width: @start-point-size;
      height: @start-point-size;
      border-radius: 50%;
      border: 3px solid;
      background-color: #fff;
    }

    .leg-line {
      position: absolute;
      top: 12px;
      bottom: -6px;
      left: @left-offset;
      width: @line-width;
      border-radius: 8px;
    }

    &.last-leg {
      .leg-line {
        bottom: -20px;
      }
    }

    .leg-end-point {
      position: absolute;
      left: @left-offset;
      top: -3px;
      margin-left: -14px;
      font-size: 32px;
    }

    .distance {
      float: right;
      color: lighten(@gray, 20%);
      padding-right: 18px;
      padding-left: 8px;
    }

    .collapser:after {
      // TODO: Come up with some better solution to overriding and centering
      // the expansion icon.
      top: 3px !important;
      right: -6px;
      content: "\f135";
      font-size: 17px;
    }

    .has-warnings:before {
      font-family: "service-map-icons";
      content: "\f120";
      color: #000;
      background-color: #fff;
      font-size: 20px;
      position: absolute;
      left: @left-offset;
      top: 12px;
      margin-left: -8px;
      line-height: 21px;
      display: none;
    }

    .collapsed.has-warnings:before,
    .step.has-warnings:before {
      display: block;
    }

    .leg-icon {
      text-align: center;
      .icon {
        font-size: 22px;
      }
    }

    .steps {
      margin-top: -6px;
      padding-bottom: 2px;
      .step {
        position: relative;
        margin-bottom: 8px;
        line-height: 20px;
        color: @gray;

        &.has-warnings:before {
          margin-left: 2px;
          top: 4px;
        }

        .warning {
          color: #ff0000;
        }
      }
    }
  }

  .accessibility-viewpoint {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: @border-light;

    .icon {
      font-size: 20px;
      padding-right: 2px;
    }
  }
}


@media (min-width: @screen-sm-min) {
  #route-details {
    .col-xs-9 {
      padding-left: 30px;
      padding-right: 6px;
    }

    .route-info .show-map {
      display: none;<commit_msg>Fix some route panel mobile issues<commit_after>#route-details {
  margin-left: -24px;

  &.settings-open {
    .route-summary {
      display: none;
    }
  }

  .col-xs-2 {
    line-height: @route-line-height;
    padding-right: 0;
    text-align: center;
  }

  .col-xs-9 {
    line-height: @route-line-height;
    word-break: break-word;
  }

  .route-selector {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    border-bottom: @border-light;
    .clearfix();

    > li {
      margin-bottom: 0 !important;
      border: 1px solid @text-color;
      float: left;
      width: 100% / 3;
      text-align: center;

      &.selected a {
        background-color: @blue-lighter;
      }

      &:first-child, &:first-child a {
        border-top-left-radius: @route-selector-border-radius;
        border-bottom-left-radius: @route-selector-border-radius;
      }

      &:last-child, &:last-child a {
        border-top-right-radius: @route-selector-border-radius;
        border-bottom-right-radius: @route-selector-border-radius;
      }

      a {
        display: block;
        padding: 4px 16px;

        &:hover {
          background-color: @blue-lighter;
        }
      }
    }

    li + li {
      border-left: none;
    }
  }

  .route-info {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: @border-light;

    .show-map {
      float: right;
      color: @blue;
    }
  }

  .leg, .end {
    @line-width: 4px;
    @start-point-size: 11px;
    @left-offset: 18.5%;

    position: relative;

    .bold {
      font-weight: @font-bold-weight;
    }

    .leg-start-point {
      position: absolute;
      top: 9px;
      left: @left-offset;
      margin-left: -3px;
      width: @start-point-size;
      height: @start-point-size;
      border-radius: 50%;
      border: 3px solid;
      background-color: #fff;
    }

    .leg-line {
      position: absolute;
      top: 12px;
      bottom: -6px;
      left: @left-offset;
      width: @line-width;
      border-radius: 8px;
    }

    &.last-leg {
      .leg-line {
        bottom: -20px;
      }
    }

    .leg-end-point {
      position: absolute;
      left: @left-offset;
      top: -3px;
      margin-left: -14px;
      font-size: 32px;
    }

    .distance {
      float: right;
      color: lighten(@gray, 20%);
      padding-right: 18px;
      padding-left: 8px;
    }

    .collapser:after {
      // TODO: Come up with some better solution to overriding and centering
      // the expansion icon.
      top: 3px !important;
      right: -6px;
      content: "\f135";
      font-size: 17px;
    }

    .has-warnings:before {
      font-family: "service-map-icons";
      content: "\f120";
      color: #000;
      background-color: #fff;
      font-size: 20px;
      position: absolute;
      left: @left-offset;
      top: 12px;
      margin-left: -8px;
      line-height: 21px;
      display: none;
    }

    .collapsed.has-warnings:before,
    .step.has-warnings:before {
      display: block;
    }

    .leg-icon {
      text-align: center;
      .icon {
        font-size: 22px;
      }
    }

    .steps {
      margin-top: -6px;
      padding-bottom: 2px;
      .step {
        position: relative;
        margin-bottom: 8px;
        line-height: 20px;
        color: @gray;

        &.has-warnings:before {
          margin-left: 2px;
          top: 4px;
        }

        .warning {
          color: #ff0000;
        }
      }
    }
  }

  .accessibility-viewpoint {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: @border-light;

    .icon {
      font-size: 20px;
      padding-right: 2px;
    }
  }
}


// Special cases for the smallest mobile screens.
@media (max-width: 400px) {
  #route-details {
    .col-xs-9 {
      padding-left: 30px;
    }
  }
}


@media (min-width: @screen-sm-min) {
  #route-details {
    .col-xs-9 {
      padding-left: 30px;
      padding-right: 6px;
    }

    .route-info .show-map {
      display: none;
{'fraction_non_alphanumeric': 0.13979328165374677, 'fraction_numerical': 0.024935400516795866, 'mean_word_length': 1.6196277495769882, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7185950', 'n_tokens_mistral': 2941, 'n_tokens_neox': 2711, 'n_words': 547}