.#{$theme-name} {
  .simpleDirections {
    // Stops buttons container (locate, add location, travel mode, and options)
    .esriStopsButtons {
      margin-right: $directions-stop-icon-button-size; // 20px
      margin-left: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
    }
    .esriStopsReverse {
      width: $directions-stop-icon-button-size;
      height: $icon-size-large;
      @include dijit-icons;
      color: $Calcite_Gray_400;
      font-size: $icon-size-large;
      text-align: center;
      @include box-sizing(content-box);
      cursor: pointer;
      &:before {
        content: "\e629";
      }
      &:hover,
      &:focus {
        @include opacity(.7);
      }
    }
    // Stops
    // --------------------------------------------------
    .esriStops {
      padding: 0;
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      td {
        vertical-align: middle;
        padding-top: 1px; // padding reserved for dnd indicator
        padding-bottom: 1px; // padding reserved for dnd indicator
        height: $directions-stop-row-height;
      }
    }
    .esriStop {
      .esriStopDnDHandle,
      .esriStopDnDHandleHidden {
        width: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
        color: $Calcite_Gray_300;
        text-align: center;
        @include dijit-icons;
        cursor: n-resize;
        &:before {
          content: "\e601";
        }
      }
      .esriStopDnDHandle {
        &:hover,
        &:focus {
          opacity: .7;
        }
      }
      .esriStopIconColumn {
        width: $directions-stop-icon-width + $padding-small-horizontal * 2; // 28px
        &:hover {
          opacity: .7;
        }
      }
      + .esriStop {
        .esriStopIconColumn {
          position: relative;
          &:before {
            content: "";
            display: block;
            height: 100%;
            width: 0;
            border-left: 1px dashed $Calcite_Gray_300;
            position: absolute;
            left: ($directions-stop-icon-width + $padding-small-horizontal * 2) * .5 - 1px;
            bottom: ($directions-stop-row-height - $directions-stop-icon-height) * .5;
          }
        }
      }
      // DND mode
      &.dojoDndItem {
        &:hover,
        &:focus,
        &.dojoDndItemOver {
          background-color: transparent;
        }
      }
      .esriStopReverseColumn {
        width: $directions-stop-icon-button-size;
      }
      .esriStopIconRemoveColumn {
        display: none;
        width: $font-size-base + $padding-small-horizontal * 2;
      }
    }
    .esriStopsRemovable {
      .esriStop {
        .esriStopIconRemove {
          display: block;
          width: $directions-stop-icon-button-size;
          padding: $padding-small-vertical $padding-small-horizontal;
          @include dijit-icons;
          @include box-sizing(border-box);
          cursor: pointer;
          &:before {
            content: "\e600";
          }
          &:hover,
          &:focus {
            opacity: .7;
          }
        }
        .esriStopIconRemoveHidden {
          width: $icon-size-large;
          background: none;
        }
      }
      .esriStopReverseColumn {
        display: none;
      }
      .esriStopIconRemoveColumn {
        display: table-cell;
        *display: block;
        _display: block;
        vertical-align: middle;
      }
    }
    // Stop icon (1, 2, 3 ...)
    .esriStop .esriStopIcon {
      @include direction-stop-icon;
    }
    .esriStopOrigin .esriStopIcon {
      @include direction-stop-origin-icon;
    }
    .esriStopDestination .esriStopIcon {
      @include direction-stop-destination-icon;
    }
    .esriStopUnreachedFirstOrLast .esriStopIcon {
      @include direction-stop-unreached-icon;
    }
    .esriStopUnreached .esriStopIcon {
      @include direction-stop-unreached-icon;
    }
    .LocateButton {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 2;
      .zoomLocateButton {
        background-color: transparent;
        border: none;
        cursor: pointer;
        width: $directions-stop-icon-button-size;
        height: $directions-stop-icon-button-size;
        line-height: $line-height-base;
        @include box-shadow(none);
      }
      .zoomLocateButton:hover,
      .tracking:hover {
        background-color: transparent;
        @include opacity(.7);
      }
    }
    .esriInnerGeocoder {
      position: relative;
    }
    .arcgisSearch {
      @include box-shadow(none);
      .searchGroup .searchInput {
        height: $line-height-computed;
        line-height: $line-height-base;
        background-color: transparent;
        padding: 0;
        border-bottom: 1px solid $Calcite_Gray_350;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-radius: inherit;
      }
      .searchBtn,
      .hasValue .searchClear {
        display: none;
      }
      .searchGroup,
      .searchExpandContainer,
      .searchInputGroup,
      .searchGroup .searchInput {
        width: 100%
      }
      .showSources .searchMenu {
        top: 18px;
      }
      .hasMultipleSources .searchToggle {
        display: block;
        padding: 0;
        border: none;
      }
      .searchIcon {
        font-size: $icon-size-small;
      }
      .searchBtn {
        &:hover,
        &:focus {
          background-color: transparent;
        }
      }
    }
    .searchInput:focus {
      outline: none;
    }
    .esriStopsAddDestination {
      display: none;
    }
    .esriStopsAdd {
      .esriStopsAddDestination {
        display: block;
        text-align: right;
        margin: $padding-base-vertical 0;
        @include pie-clearfix;
      }
      .esriStopsAddDestinationBtn {
        float: right;
        color: $Calcite_Gray_400;
        &:before {
          @include dijit-icons;
          content: "\e620";
          line-height: $line-height-base;
          padding-right: $padding-small-horizontal;
        }
      }
    }
    // Buttons
    // --------------------------------------------------
    // Directions Button: drop pin button, "MI", "KM", "Get Directions", etc. 
    .esriDirectionsButton {
      border: 1px solid transparent;
      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
      border-color: rgba(black, 0.15);
      padding: $padding-base-vertical $padding-base-horizontal;
      font-size: $font-size-base;
      line-height: $line-height-base;
      text-transform: uppercase;
      cursor: pointer;
      position: relative;
    }
    .esriDirectionsPressedButton {
      @include button-variant-default-active;
    }
    // Button: active state (only used by the drop pin button)
    .esriActivateButton {
      float: left;
      color: $Calcite_Gray_400;
      padding-left: $padding-small-horizontal;
      padding-right: $padding-small-horizontal;
      border-style: dashed;
      @include dijit-icons;
      font-size: $icon-size-large;
      &:before {
        content: "\e61d";
      }
      &:active,
      &:focus,
      &.esriDirectionsPressedButton {
        color: $Calcite_Highlight_Blue_350;
        border-style: solid;
      }
    }
    // Tab button: "MI", "KM"
    .esriDirectionsTabButton {
      float: left;
      + .esriDirectionsTabButton {
        margin-left: -1px;
      }
      &.esriDirectionsPressedButton {
        z-index: 1;
      }
    }
    // Link button ("Add Destination", "Show More Options", etc.)
    .esriLinkButton {
      border: 1px solid transparent;
      @include button-variant($btn-link-color, $btn-link-bg, $btn-link-border, false);
      padding: $padding-base-vertical 0;
      font-size: $font-size-base;
      line-height: $line-height-base;
      line-height: $line-height-computed;
      color: $Calcite_Gray_650;
      white-space: nowrap;
      cursor: pointer;
      &:hover {
        text-decoration: $link-hover-decoration;
      }
    }
    .esriTravelModesDDL {
      .dijitButtonContents {
        padding: 1px;
      }
    }
    // Options
    // --------------------------------------------------
    .esriOptionsCheckboxes {
      line-height: $line-height-base;
    }
    .esriOptionsUnitsMi,
    .esriOptionsUnitsKm {
      display: inline-block;
    }
    .esriOptionsToggleContainer {
      margin-top: $padding-base-vertical;
    }
    .esriStopsOptionsButton {
      display: none;
      white-space: nowrap;
      vertical-align: bottom;
    }
    .esriStopsOptionsEnabled .esriStopsOptionsButton {
      display: block;
      text-align: right;
      float: right;
    }
    .esriStopsOptionsMenu {
      display: none;
      padding: $padding-base-vertical * 2 $padding-base-horizontal;
      background-color: $Calcite_Gray_200;
      margin-right: $directions-stop-icon-button-size; // 20px
      margin-left: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
      input {
        margin-right: $padding-small-horizontal;
      }
    }
    .esriOptionsUnitsContainer {
      float: left;
      white-space: nowrap;
    }
    .esriOptionsImpedanceContainer {
      display: none;
      float: left;
      margin-top: $padding-base-vertical;
      min-width: 160px;
    }
    .esriOptionsImpedanceTime,
    .esriOptionsImpedanceDistance {
      display: inline-block;
    }
    .esriStopsGetDirectionsContainer {
      margin-right: $directions-stop-icon-button-size; // 20px
      margin-left: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
      margin-top: $padding-base-vertical * 3; // 15px
    }
    .esriStopsGetDirections {
      float: right;
      @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border, false);
      &:hover {
        background-color: $Calcite_Blue_a200;
        border-color: $Calcite_Blue_a200;
      }
    }
    .esriStopsClearDirections {
      float: right;
      display: none;
      margin-right: $padding-base-horizontal * 2;
    }
    .esriTravelModesContainer {
      margin-top: $padding-base-vertical * 3;
    }
    // Routes
    // --------------------------------------------------
    .esriResultsContainer {
      height: auto;
      zoom: 1;
      margin-top: $padding-base-vertical * 5;
    }
    .esriResultsLoading .esriResultsContainer {
      height: auto;
      min-height: 40px;
      background: url(../images/Directions/loading-blue.gif) no-repeat center center;
    }
    .esriRoutesContainer {
      margin: 0;
      zoom: 1;
    }
    .esriResultsSummary {
      font-weight: 700;
      font-size: larger;
      display: block;
    }
    // "Zoom to full route" button
    .esriResultsViewFullRoute {
      float: left;
      color: $Calcite_Gray_400;
      &:before {
        @include dijit-icons;
        content: "\e67a";
        line-height: $line-height-base;
        padding-right: $padding-small-horizontal;
      }
    }
    .esriResultsPrint {
      float: right;
      outline: 0;
      @include dijit-icons;
      color: $Calcite_Gray_400;
      padding: $padding-base-vertical $padding-base-horizontal;
      line-height: $line-height-base;
      cursor: pointer;
      &:before {
        content: "\e668";
      }
      &:hover,
      &:focus {
        opacity: .7;
      }
    }
    .esriRoutesError {
      padding: $padding-base-vertical 0;
      margin-right: $directions-stop-icon-button-size; // 20px
      margin-left: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: block;
      }
      li {
        margin-bottom: $padding-base-vertical;
      }
    }
    .esriRoutes {
      margin-top: $padding-base-vertical * 2;
      table {
        margin: 0;
        padding: 0;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
      }
    }
    .esriRouteIconColumn {
      width: $directions-route-icon-width;
      padding-top: $padding-base-vertical * 2;
      vertical-align: top;
      border-bottom: 1px solid $divider-bg;
    }
    .esriRouteTextColumn {
      padding: $padding-base-vertical * 2 $padding-base-horizontal;
      vertical-align: top;
      border-bottom: 1px solid $divider-bg;
    }
    .esriRouteIcon {
      height: $directions-route-icon-height;
      width: $directions-route-icon-width;
    }
    .esriDMTStop,
    .esriDMTDepart {
      .esriRouteIcon {
        @include direction-stop-icon;
      }
    }
    .esriDMTStopOrigin,
    .esriDMTStopDestination {
      .esriRouteIcon {
        @include direction-stop-icon;
      }
    }
    .esriDMTStopOrigin .esriRouteIcon {
      @include direction-stop-origin-icon;
    }
    .esriDMTStopDestination .esriRouteIcon {
      @include direction-stop-destination-icon;
    }
    .esriRouteZoom {
      cursor: pointer;
      outline: 0;
      &:hover,
      &:focus {
        background: $Calcite_Highlight_Blue_100;
      }
    }
    .esriDMTStopLast {
      .esriRouteIconColumn,
      .esriRouteTextColumn {
        border-bottom: 0;
      }
    }
    .esriRouteInfo {
      color: $Calcite_Gray_650;
    }
    .esriRouteLength {
      color: $Calcite_Gray_400;
      font-size: $font-size-small;
      line-height: 1.5;
      min-width: 65px;
    }
    .esriResultsRouteName {
      display: none;
    }
    .esriSearchSourcesDDL {
      border: none;
      &:hover,
      &:active,
      &:focus,
      &.dijitOpened {
        background-color: transparent;
      }
      .dijitButtonContents {
        padding-left: 0;
        padding-right: 0;
      }
      .dijitInputField {
        float: right;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      .dijitSelectLabel:hover {
        text-decoration: underline;
      }
      .dijitArrowButton {
        border: none;
      }
    }
    .esriSearchSourceContainer {
      margin-right: $directions-stop-icon-button-size; // 20px
      margin-left: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
    }
    // MISC
    // --------------------------------------------------
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: block;
    }
    .esriClear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }
  }
  // DND mode
  // --------------------------------------------------
  &.esriDndDragDirection .dojoDndAvatar {
    display: none; // Hide drag target avatar
  }
  &.dojoDndMove .simpleDirections .esriStopsReverse {
    display: none; // Hide reverse button when dragging stops
  }
  // Overwrite default DND styles
  .simpleDirections {
    .dojoDndItem {
      margin: 0;
      padding: 0;
      td {
        border: 0;
        vertical-align: middle;
      }
    }
    .dojoDndItemOver,
    .dojoDndItemAnchor {
      background-color: transparent;
    }
    .dojoDndMove {
      cursor: move;
    }
    .dojoDndHandle {
      cursor: move;
    }
    .dojoDndIgnore {
      cursor: default;
    }
    .dojoDndItemBefore {
      td {
        border: 0;
        padding-top: 0;
        border-top: 1px solid $directions-dnd-drop-indicator-color;
      }
      .esriStopReverseColumn {
        border: none;
      }
    }
    .dojoDndItemAfter {
      td {
        border: 0;
        padding-bottom: 0;
        border-bottom: 1px solid $directions-dnd-drop-indicator-color;
      }
      .esriStopReverseColumn {
        border: none;
      }
    }
  }
  // Popup
  // --------------------------------------------------
  .esriPopup {
    // Route info in a popup
    .esriInfoWindowRoute {
      display: block;
      padding-left: $directions-route-icon-width + $padding-base-horizontal;
      min-height: $directions-route-icon-height;
      background-repeat: no-repeat;
      background-position: left top;
    }
    .esriDMTDepart,
    .esriDMTStop {
      .esriInfoWindowRoute {
        padding-left: 0;
        background: none;
      }
    }
  }
  // Travel mode name text
  // This style needs to sit outside of ".simpleDirections" 
  // to take effect since the text node can be in a dijit/Menu widget
  .esriTravelModesTypeName {
    margin-left: $padding-base-horizontal;
    display: inline-block;
    vertical-align: middle;
  }
  // Print Preview
  // --------------------------------------------------
  &.esriPrintPage {
    padding: 0;
    margin: 0 auto;
    font-family: $font-family-sans-serif;
    font-size: $font-size-base;
    background-color: $Calcite_Gray_150;
    .esriPrintButton,
    .esriCloseButton {
      display: block;
      border: 1px solid transparent;
      @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
      padding: $padding-base-vertical $padding-base-horizontal;
      outline: 0;
      font-size: $font-size-base;
      line-height: $line-height-base;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      text-decoration: none;
      float: right;
      margin: 0 $padding-base-horizontal;
      margin-top: ($directions-print-bar-height - $line-height-computed - $padding-base-vertical * 2 - 2px) * .5; // height of print bar minus height of button, then divide it by 2
    }
    .esriPrintButton {
      @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border, false);
      &:hover {
        background-color: $Calcite_Blue_a200;
        border-color: $Calcite_Blue_a200;
      }
    }
    .esriPrintWait {
      background: url(../images/Directions/loading-blue.gif) no-repeat center center;
      height: 200px;
    }
  }
  .esriPrintBar {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 6;
    height: $directions-print-bar-height;
    background-color: $Calcite_Gray_050;
    border-bottom: 1px solid $Calcite_Gray_350;
  }
  .esriPrintMain {
    background: $Calcite_Gray_050;
    border: 1px solid $Calcite_Gray_350;
    margin: $directions-print-bar-height + $padding-base-vertical * 2 auto 0;
    width: $directions-print-content-width;
  }
  .esriPrintHeader {
    display: block;
    padding: $directions-print-content-padding-vertical $directions-print-content-padding-honrizontal;
    margin-bottom: $padding-base-vertical;
    border-bottom: 1px solid $divider-bg;
    hr {
      display: none;
    }
  }
  .esriPrintName {
    font-weight: 700;
    font-size: 120%;
    margin: $padding-base-vertical 0;
  }
  .esriPrintLength {
    font-weight: 700;
    margin-bottom: $padding-base-vertical;
  }
  .esriPrintMap {
    text-align: center;
    margin: $padding-base-vertical * 3 0;
  }
  .esriPrintMapImg {
    border: 1px solid $Calcite_Gray_350;
  }
  #print_area {
    margin-bottom: $padding-base-vertical;
    max-width: 100%;
    min-width: 20%;
  }
  #print_helper {
    display: none;
  }
  .esriPrintStopLabel {
    @include direction-stop-icon;
    border-color: $Calcite_Gray_700;
  }
  .esriPrintDirections {
    margin: 0;
    padding: $directions-print-content-padding-vertical $directions-print-content-padding-honrizontal;
    table {
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      border: 0;
      width: 100%;
    }
    td {
      padding: $padding-base-vertical * 2 $padding-base-horizontal;
    }
  }
  .esriRouteIconColumn,
  .esriRouteTextColumn {
    vertical-align: top;
    border-bottom: 1px solid $divider-bg;
  }
  .esriPrintFooter {
    font-size: 80%;
    padding: 0 $directions-print-content-padding-honrizontal $directions-print-content-padding-honrizontal;
  }
} // End of .#{$theme-name}
// Icons
// --------------------------------------------------
.esriTravelModesDirectionsIcon {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background-position: center center;
}

.esriTravelModesTypeOtherDistance {
  background-image: url("../images/analysis/images/OtherModeDistance32.png");
}

.esriTravelModesTypeOtherTime {
  background-image: url("../images/analysis/images/OtherModeTime32.png");
}

.esriTravelModesTypeOther {
  background-image: url("../images/analysis/images/OtherMode32.png");
}

.esriTravelModesTypeDrivingDistance {
  background-image: url("../images/analysis/images/DrivingDistance32.png");
}

.esriTravelModesTypeDrivingTime {
  background-image: url("../images/analysis/images/DrivingTime32.png");
}

.esriTravelModesTypeDriving {
  background-image: url("../images/analysis/images/Driving32.png");
}

.esriTravelModesTypeTruckingDistance {
  background-image: url("../images/analysis/images/TruckingDistance32.png");
}

.esriTravelModesTypeTruckingTime {
  background-image: url("../images/analysis/images/TruckingTime32.png");
}

.esriTravelModesTypeTrucking {
  background-image: url("../images/analysis/images/Trucking32.png");
}

.esriTravelModesTypeWalkingDistance {
  background-image: url("../images/analysis/images/WalkingDistance32.png");
}

.esriTravelModesTypeWalkingTime {
  background-image: url("../images/analysis/images/WalkingTime32.png");
}

.esriTravelModesTypeWalking {
  background-image: url("../images/analysis/images/Walking32.png");
}

.esriDMTUnknown .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Unknown_Manuver24.svg);
}

.esriDMTStraight .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Straight24.svg);
}

.esriDMTBearLeft .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Bear_Left24.svg);
}

.esriDMTBearRight .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Bear_Right24.svg);
}

.esriDMTTurnLeft .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Left24.svg);
}

.esriDMTTurnRight .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Right24.svg);
}

.esriDMTSharpLeft .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Sharp_Left24.svg);
}

.esriDMTSharpRight .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Sharp_Right24.svg);
}

.esriDMTUTurn .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/U_Turn24.svg);
}

.esriDMTFerry .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Embark24.svg);
}

.esriDMTRoundabout .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Round_About24.svg);
}

.esriDMTHighwayMerge .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Merge_On_Highway24.svg);
}

.esriDMTHighwayExit .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Exit_Highway24.svg);
}

.esriDMTHighwayChange .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Highway_Change24.svg);
}

.esriDMTForkCenter .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Fork_Middle24.svg);
}

.esriDMTForkLeft .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Fork_Left24.svg);
}

.esriDMTForkRight .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Fork_Right24.svg);
}

.esriDMTTripItem .esriRouteIcon {
  // TODO: no longer used?
  background-image: url(../images/Directions/maneuvers/esriDMTTripItem.png);
}

.esriDMTEndOfFerry .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Disembark24.svg);
}

.esriDMTRampRight .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Ramp_Right24.svg);
}

.esriDMTRampLeft .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Ramp_Left24.svg);
}

.esriDMTTurnLeftRight .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Left_Right24.svg);
}

.esriDMTTurnRightLeft .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Right_Left24.svg);
}

.esriDMTTurnRightRight .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Right_Right24.svg);
}

.esriDMTTurnLeftLeft .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Left_Left24.svg);
}

.esriDMTPedestrianRamp .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Take_Pedestrian_Ramp24.svg);
}

.esriDMTElevator .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Elevator24.svg);
}

.esriDMTEscalator .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Escalator24.svg);
}

.esriDMTStairs .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Stairs24.svg);
}

.esriDMTDoorPassage .esriRouteIcon {
  background-image: url(../images/Directions/maneuvers/Walk_Through_Door24.svg);
}

// RTL
// --------------------------------------------------
.dj_rtl {
  .#{$theme-name} {
    .simpleDirections {
      .esriStopsButtons {
        margin-left: $directions-stop-icon-button-size; // 20px
        margin-right: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
      }
      .esriStopsAdd {
        .esriStopsAddDestination {
          text-align: left;
        }
        .esriStopsAddDestinationBtn {
          float: left;
          &:before {
            float: right;
            padding-left: $padding-small-horizontal;
            padding-right: inherit;
          }
        }
      }
      .LocateButton {
        left: 2px;
        right: initial;
      }
      .esriStopsClearDirections {
        float: left;
        margin-right: inherit;
        margin-left: $padding-base-horizontal * 2;
      }
      .esriDirectionsTabButton {
        float: right;
        + .esriDirectionsTabButton {
          margin-left: inherit;
          margin-right: -1px;
        }
      }
      .esriStopsGetDirections {
        float: left;
      }
      .esriStopsOptionsEnabled .esriStopsOptionsButton {
        text-align: left;
        float: left;
      }
      .esriStopsOptionsMenu {
        margin-left: $directions-stop-icon-button-size; // 20px
        margin-right: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
        input {
          margin-right: inherit;
          margin-left: $padding-small-horizontal;
        }
      }
      .esriOptionsUnitsContainer {
        float: right;
      }
      .esriOptionsImpedanceContainer {
        float: right;
      }
      .esriStopsGetDirectionsContainer {
        margin-left: $directions-stop-icon-button-size; // 20px
        margin-right: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
      }
      .esriRoutesError {
        margin-left: $directions-stop-icon-button-size; // 20px
        margin-right: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
      }
      .esriResultsViewFullRoute {
        float: right;
        &:before {
          float: right;
          padding-left: $padding-small-horizontal;
          padding-right: inherit;
        }
      }
      .esriResultsPrint {
        float: left;
      }
      #search-source-container .dijitInputField {
        float: left;
      }
      .esriSearchSourceContainer {
        margin-left: $directions-stop-icon-button-size; // 20px
        margin-right: $directions-stop-icon-button-size - $padding-small-horizontal; // 15px
      }
      .esriPrintBar {
        left: inherit;
        right: 0;
      }
      .esriPrintButton,
      .esriCloseButton {
        float: left;
      }
    }
    .esriTravelModesTypeName {
      margin-left: inherit;
      margin-right: $padding-base-horizontal;
    }
    .esriPopup {
      .esriInfoWindowRoute {
        padding-left: inherit;
        padding-right: $directions-route-icon-width + $padding-base-horizontal;
        background-position: right top;
      }
      .esriDMTDepart {
        .esriInfoWindowRoute,
        .esriInfoWindowRoute {
          padding-left: inherit;
          padding-right: 0;
        }
      }
    }
  }
}

