/* Basics */
.osrm-directions-inputs,
.osrm-directions-errors,
.osrm-directions-routes,
.osrm-directions-instructions {
  font:15px/20px 'Open Sans', sans-serif;
  margin-bottom: 30px;
}

.osrm-directions-summary {
  padding-left: 20px;
  padding-top: 10px;
}

.osrm-directions-inputs,
.osrm-directions-inputs *,
.osrm-directions-errors,
.osrm-directions-errors *,
.osrm-directions-routes,
.osrm-directions-routes *,
.osrm-directions-instructions,
.osrm-directions-instructions * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.map {
    background: #eee;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* tool colors and divs */
.fill-osrm {
  background-color: rgba(37,72,127, 0.8);
}

.fill-dark {
  background-color: #404040;
}

.dark {
  color: #fff;
}

/* Scale position */
.leaflet-control-scale {
  position: absolute;
  /* Align baseline with menu bar text */
  bottom: 35px;
  /* Move further left to avoid overlapping the directions pane */
  right: 400px;
  display: inline-block;
  /* Make the scale widget 25% larger */
  transform: scale(1.25);
  -webkit-transform: scale(1.25);
  transform-origin: left center;
  -webkit-transform-origin: left center;
  z-index: 1000;
}

/* Zoom control position */
.leaflet-control-zoom {
  left: 355px;
    color: rgba(37,72,127, 0.8);
}

.leaflet-bar a {
  color: rgba(37,72,127, 0.8);
}

.leaflet-control-locate.leaflet-bar a {
  color: rgba(37,72,127, 0.8);
  background-image: url('../images/crosshairs.svg');
  width: 26px;
  height: 26px;
  border-radius: 4px;
  z-index: 100;
}

/* Locate control */
.leaflet-control-locate {
  left: 355px;
  top: -20px;
}

/* Not used: {
  background-image: url('../images/crosshairs.svg');
  width: 36px;
  height: 36px;
  color: rgba(37,72,127, 0.8);
  background-color: rgba(37,72,127, 0.8);
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-radius: 4px;
  z-index: 100;
} */

/* Layers position */
.leaflet-control-layers {
  position: absolute;
  left: 0px;
  bottom: 35px;
}

.leaflet-control-layers-expanded {
  width: 180px;
}

/* Layer styling */
.leaflet-retina .leaflet-control-layers-toggle {
    background-image: url('../images/layers.svg');
    background-size: 26px 26px;
}

.leaflet-control-layers-toggle {
  background-image: url('../images/layers.svg');
  width: 36px;
  height: 36px;
  background-color: rgba(37,72,127, 0.8);
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-radius: 4px;
}

.leaflet-bar a, .leaflet-control-layers-toggle {
  background-position: 55% 70%;
  background-repeat: no-repeat;
  display: block;
  background-size: 85%;
}

.leaflet-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  color: #fff;
  background-color: rgba(37,72,127, 0.8);
}

/* Toolbar */
.leaflet-osrm-tools-container
{
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  background-color: rgba(37,72,127, 0.8);
  border-radius: 4px;
  width: 161px;
  height: 26px;
}


/* Waypoint marker labels */
.leaflet-osrm-waypoint-label
{
  background-color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  color: #fff;
}

/* Geocode container */
.leaflet-routing-container {
  position: fixed;
  width: 33.3333%;
  max-width: 340px;
  min-width: 200px;
  padding-right: 0px;
  transition: 0.5s;
}

.leaflet-routing-container.dark {
  z-index: 10;
  background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.85);
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0px !important;
  background-image: url('../images/osrm_logo.svg');
  -webkit-background-size: 200px 60px;
  background-size: 200px 60px;
  background-position: -20px 10px;
  background-repeat: no-repeat;
  padding-top: 50px;
}

.leaflet-routing-geocoders .leaflet-routing-geocoder {
  padding: 4px 0px 4px 0px;
  /* Rows slide aside while another is dragged past them. */
  transition: transform 0.15s ease;
}

.leaflet-routing-geocoder {
  position: relative;
  background-color: rgba(255,255,255,0.9);
  margin: 0 0 0 0;
  border-bottom: 0px solid #000;
}

.leaflet-container button {
  margin: 0 10px 0 0;
  float: left;
  width: 40px;
  height: 40px;
  background-color: white;
}

.leaflet-routing-geocoders button {
  font: bold 18px 'Lucida Console', Monaco, monospace;
  margin: 0;
  margin-right: 3px;
  float: right;
  cursor: pointer;
  background-color: rgba(37,72,127, 0.75);
  transition: background-color 0.2s ease;
  border: 0px;
  border-radius: 0 0 5px 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-right: 0px;
  color: white;
  height: 32px;
  line-height: 32px;
  padding: 0 5px;
  vertical-align: top;
  box-sizing: border-box;
}

.leaflet-routing-add-waypoint {
  display: block;
}

.leaflet-routing-add-waypoint:after {
  content: ' + ';
}

.leaflet-routing-reverse-waypoints:after {
  font-weight: bold;
  content: '\21c5';
  color: white;
}

.leaflet-routing-remove-waypoint {
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  padding-left: 10px;
}

.leaflet-routing-remove-waypoint:after {
  position: absolute;
  display: block;
  width: 15px;
  height: 1px;
  z-index: 1;
  bottom: 0;
  margin: auto;
  font-size: 18px;
  font-weight: bold;
  content: "\00d7";
  text-align: center;
  cursor: pointer;
  color:  rgba(37,72,127, 0.6);
  padding-bottom: 16px;
  margin-top: -10px;
  margin-left: 0px;
  line-height: 1;
}

.leaflet-routing-remove-waypoint {
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-top: 10px;
}

.leaflet-routing-remove-waypoint:hover {
  color: black;
  transition: background-color 0.2s ease;
}

/* Waypoint reorder grip: a six-dot handle between the input and the remove
   button. Dragging it moves the row; it also takes focus for the arrow keys. */
.leaflet-routing-waypoint-handle {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  box-sizing: border-box;
  /* The dots are 12x18; the padding round them makes the target 24x30,
     which is what a finger or a quick mouse needs. background-clip keeps
     the dots inside the content box. */
  width: 24px;
  height: 30px;
  padding: 6px;
  background-clip: content-box;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* A 2x3 grid of dots drawn with gradients rather than a glyph, so it does
     not depend on which fonts the device has. */
  background-image: radial-gradient(circle, rgba(37,72,127, 0.6) 1.5px, transparent 2px);
  background-size: 6px 6px;
}

.leaflet-routing-waypoint-handle:hover,
.leaflet-routing-waypoint-handle:focus {
  background-image: radial-gradient(circle, rgba(37,72,127, 1) 1.5px, transparent 2px);
}

/* The ring shows for keyboard focus only. A browser without :focus-visible
   drops the second rule, and so shows the ring for every focus, which is the
   safe way round. */
.leaflet-routing-waypoint-handle:focus {
  outline: 2px solid #0072b2;
  outline-offset: 2px;
}

.leaflet-routing-waypoint-handle:focus:not(:focus-visible) {
  outline: none;
}

.leaflet-routing-geocoders-dragging,
.leaflet-routing-geocoders-dragging * {
  cursor: grabbing;
}

/* Same specificity as the row's transition rule, so the lifted row follows
   the pointer at once rather than easing after it. */
.leaflet-routing-geocoders .leaflet-routing-geocoder-dragging {
  transition: none;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  background-color: white;
}

.leaflet-routing-alternatives-container {
  position: fixed;
  right: 0px;
  top: 60px;
  width: 33.33%;
  max-width: 340px;
  min-width: 200px;
  height: 95%;
  overflow: scroll;
  transition: 0.5s;
}

/* OSRM + Leaflet toolbar icons */
.leaflet-bar {
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-radius: 4px;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 0px;
}

.leaflet-left .leaflet-control {
  margin-left: 10px;
  margin-bottom: 20px;
}

.osrm-directions-icon {
    background-image: url('../images/osrm.toolbar.icons.svg');
    -webkit-background-size: 146px 24px;
    background-size: 170px 24px;
    margin: 0;
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
}

.osrm-add-icon  { background-position: -280px 0; }
.osrm-via-icon  { background-position: -300px 0; }

.osrm-editor-icon  { background-position: -48px 0; }
.osrm-josm-icon  { background-position: -72px 0; }
.osrm-debug-icon  { background-position: -96px 0; }
.osrm-mapillary-icon  { background-position: -120px 0; }
.osrm-gpx-icon  { background-position: -146px 0; }
.osrm-share-icon  {
    background-image: url('../images/share.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
}
.osrm-localization-chooser {
    color: #ffffff;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    height: 24px;
    padding-left: 6px;
    padding-right: 6px;
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    vertical-align: middle;
    font-size: 13px;
    line-height: 24px;
}
.osrm-localization-chooser:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.osrm-profile-chooser {
    color: #ffffff;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    height: 24px;
    padding-left: 6px;
    padding-right: 6px;
    cursor: pointer;
    appearance: auto;
    -moz-appearance: auto;
    -webkit-appearance: auto;
    vertical-align: middle;
    font-size: 13px;
    line-height: 24px;
}

.osrm-profile-chooser:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.leaflet-osrm-mode-selector {
    padding: 0px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    margin-right: 3px;
    background-color: rgba(37,72,127, 0.75);
    border-radius: 0 0 5px 5px;
    float: left;
    box-sizing: border-box;
}

.leaflet-osrm-mode-selector .osrm-profile-chooser {
    background: transparent;
    border: none;
    color: #ffffff;
    height: 32px;
    padding-left: 6px;
    padding-right: 6px;
    cursor: pointer;
    appearance: auto;
    -moz-appearance: auto;
    -webkit-appearance: auto;
    vertical-align: top;
    font-size: 13px;
    line-height: 32px;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.leaflet-osrm-mode-selector .osrm-profile-chooser:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.leaflet-osrm-mode-selector .osrm-profile-chooser:focus {
    outline: none;
}

.leaflet-osrm-tools-hide
{
  display: none;
}

.leaflet-osrm-tools-share {
  position: relative;
}

.share-popup {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  min-width: 220px;
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  cursor: default;
}

.share-popup-visible .share-popup {
  display: block;
}

.share-popup .share-overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: default;
}

.share-popup .share-container {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0;
}

.share-popup .share-type-button-container {
  display: flex;
  width: 100%;
  padding: 0;
}

.share-popup .share-type {
  display: inline-block;
  width: 50%;
  margin: 0;
  border: none;
  color: #ffffff;
  background-color: transparent;
  cursor: pointer;
}

.share-popup .share-type:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.share-popup .share-type.selected {
  background-color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.share-popup .share-url {
  width: 100%;
  margin-top: 4px;
  border: none;
  padding: 5px;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
}

/* OSRM geocoder directions inputs */
.osrm-directions-inputs {
  position: fixed;
  left: 10px;
  top: 10px;
  width: 45%;
  max-width: 350px;
  min-width: 200px;
  overflow: auto;
  max-height: 75%;
}

/* A row is pin, input, grip, remove button in a line; the input takes what
   the other three leave. */
.leaflet-routing-geocoders.osrm-directions-inputs .leaflet-routing-geocoder {
  display: flex;
  align-items: center;
}

.leaflet-routing-geocoders.osrm-directions-inputs .leaflet-routing-geocoder input {
  border: 0px;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

.leaflet-routing-geocoders.osrm-directions-inputs .leaflet-routing-remove-waypoint {
  /* The button is an empty span whose cross is drawn by :after. Inline
     layout gave it a line box to hang from and the input's fixed width left
     it room; in the flex row it needs a box of its own, and none of the
     nudge. */
  flex: none;
  width: 24px;
  height: 30px;
  padding-left: 0;
  margin-top: 0;
}

.leaflet-routing-geocoders.osrm-directions-inputs .leaflet-routing-remove-waypoint:after {
  /* Centred in that box rather than hung off its bottom edge. */
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  line-height: 30px;
  text-align: center;
}

/* The waypoint's pin, as the map and the directions pane draw it, so the row
   can be matched to its marker. The image is set on the element. */
.leaflet-routing-waypoint-pin {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  width: 20px;
  height: 28px;
  margin-left: 4px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.osrm-directions-inputs input {
  font-size: 12px;
  width: auto;
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  height: 30px;
  padding: 10px 10px 10px 8px;
}

.osrm-directions-route-summary {
    display: none;
}

.osrm-directions-route-active .osrm-directions-route-summary {
    display: block;
}

/* directions icons */
.osrm-directions-instructions .osrm-directions-icon {
    position: absolute;
    left: 10px;
    top: 25px;
    margin: auto;
}

.osrm-continue-icon         { background-position: 0 0; }
.osrm-sharp-right-icon      { background-position: -20px 0; }
.osrm-turn-right-icon       { background-position: -40px 0; }
.osrm-bear-right-icon       { background-position: -60px 0; }
.osrm-u-turn-icon           { background-position: -80px 0; }
.osrm-sharp-left-icon       { background-position: -100px 0; }
.osrm-turn-left-icon        { background-position: -120px 0; }
.osrm-bear-left-icon        { background-position: -140px 0; }
.osrm-depart-icon           {
	background-position: -160px -1px;
	background-color: #87DE9F;
}
.osrm-enter-roundabout-icon { background-position: -180px 0; }
.osrm-arrive-icon           {
	background-position: -200px 0;
	background-color: #DB5C0A;
}
.osrm-close-icon            { background-position: -220px 0; }
.osrm-reverse-icon          { background-position: -240px 0; }
.osrm-error-icon            { background-position: -260px 0; }

.osrm-marker-drag-icon {
    display: block;
    background-color: #444;
    border-radius: 50%;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
}

.osrm-marker-drag-icon-step {
    background-color: #3BB2D0;
}

.leaflet-osrm-tools-container
{
   width: auto;
   text-align: justify;
   padding: 2px 4px;
   z-index: 8;
}

.leaflet-osrm-tools-container div
{
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  padding: 2px 0px;
}
.leaflet-osrm-tools-container span:hover
{
   background-color: rgba(255, 255, 255, 0.2);
}
.leaflet-osrm-tools-container span[disabled],
.leaflet-osrm-tools-container span[disabled]:hover
{
   background-color: transparent;
   cursor: default;
   opacity: 0.5;
}

/* Instructions */
.osrm-directions-steps {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.osrm-directions-step {
    position: relative;
    color: rgba(255,255,255,.75);
    cursor: pointer;
    padding: 20px 20px 20px 40px;
    font-size: 20px;
    line-height: 25px;
}

.osrm-directions-step-distance {
    color: rgba(255,255,255,.5);
    position: absolute;
    padding: 5px 10px;
    font-size: 12px;
    left: 30px;
    bottom: -15px;
}

.osrm-directions-step:hover {
    color: white;
}

.osrm-directions-step:after {
    content: "";
    position: absolute;
    top: 50px;
    bottom: -20px;
    border-left: 2px dotted rgba(255,255,255,.2);
    left: 20px;
}

.osrm-directions-step:last-child:after,
.osrm-directions-step:last-child .osrm-directions-step-distance {
    display: none;
}

/* Directions Summary */
.osrm-directions-summary
{
  color: rgba(37,72,127, 0.8);
}

.leaflet-routing-alt.osrm-directions-instructions.leaflet-routing-alt-minimized
{
  display: none;
}

.leaflet-routing-alt-minimized .osrm-directions-summary
{
  color: rgba(37,72,127, 0.8);
  padding-top: 80px;
}

.leaflet-routing-alt table td,
.leaflet-routing-alt table {
  color: rgba(37,72,127, 0.8);
  margin-top: 20px;
  padding: 5px;
  padding-bottom: 10px;
  padding-left: 10px;
  font-weight: 400;
  font-size: 14px;
}

.leaflet-routing-alt-minimized table td,
.leaflet-routing-alt-minimized table {
  color: rgba(37,72,127, 0.8);
  margin-top: 20px;
  padding: 5px;
  padding-bottom: 10px;
  padding-left: 10px;
  font-weight: 400;
  font-size: 14px;
}

.osrm-directions-summary h2
{
  font-size: 19px;
  font-weight: bold;
  line-height: 22px;
  margin-right: 15px;
}
.osrm-directions-summary h3
{
  font-weight: normal;
}

.leaflet-osrm-geocoder-label
{
  width: 20px;
  height: 20px;
  font-family: Arial;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
}

.leaflet-routing-alt table td:hover {
  cursor: pointer;
	background-color: white;
}

.leaflet-routing-alt table tr:hover {
	background-color: white;
}

td.distance {
  min-width: 60px;
}

.leaflet-routing-icon {
    background-image: url('../images/osrm.directions.icons.color.svg');
    -webkit-background-size: 455px 20px;
    background-size: 455px 20px;
    background-repeat: no-repeat;
    margin: 0;
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
}

.leaflet-routing-alt-minimized .leaflet-routing-icon {
    background-image: url('../images/osrm.directions.icons.color.svg');
}

.leaflet-routing-icon-continue         { background-position: 2px 0px; }
.leaflet-routing-icon-sharp-right      { background-position: -24px 0px; }
.leaflet-routing-icon-turn-right       { background-position: -50px 0px; }
.leaflet-routing-icon-bear-right       { background-position: -74px 0px; }
.leaflet-routing-icon-u-turn           { background-position: -101px 0px; }
.leaflet-routing-icon-sharp-left       { background-position: -127px 0px; }
.leaflet-routing-icon-turn-left        { background-position: -150px 0px; }
.leaflet-routing-icon-bear-left        { background-position: -175px 0px; }
.leaflet-routing-icon-depart           { background-position: -202px 0px; }
.leaflet-routing-icon-enter-roundabout { background-position: -227px 0px; }
.leaflet-routing-icon-arrive           { background-position: -253px 0px; }
.leaflet-routing-icon-via              { background-position: -278px 0px; }
.leaflet-routing-icon-fork             { background-position: -305px 0px; }
.leaflet-routing-icon-ramp-right       { background-position: -331px 0px; }
.leaflet-routing-icon-ramp-left        { background-position: -352px 0px; }
.leaflet-routing-icon-merge-left       { background-position: -376px 0px; }
.leaflet-routing-icon-merge-right      { background-position: -403px 0px; }
.leaflet-routing-icon-end              { background-position: -429px 0px; }

/* Lane indications */
.osrm-lane-icon {
  background-image: url('../images/osrm.lanes.icons.svg');
  -webkit-background-size: 180px 20px;
  background-size: 180px 20px;
  background-repeat: no-repeat;
  margin: 3px 0 0 0;
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
}

.osrm-lane-icon.invalid {
  opacity: 0.5;
}

.osrm-lane-icon.straight      { background-position: 0px 0px; }
.osrm-lane-icon.left          { background-position: -20px 0px; }
.osrm-lane-icon.sharp-left    { background-position: -40px 0px; }
.osrm-lane-icon.slight-left   { background-position: -60px 0px; }
.osrm-lane-icon.uturn         { background-position: -80px 0px; }
.osrm-lane-icon.uturn-right   { background-position: -100px 0px; }
.osrm-lane-icon.slight-right  { background-position: -120px 0px; }
.osrm-lane-icon.sharp-right   { background-position: -140px 0px; }
.osrm-lane-icon.right         { background-position: -160px 0px; }

/*  FORM Labels */
.osrm-form-label {
  cursor: default;
}

.osrm-directions-origin .osrm-form-label {
    background-color: #ee8a65;
}
.osrm-directions-via {
    background-color: white;
    position: relative;
}
.osrm-directions-via .osrm-form-label {
    background-color: #CCC;
}

.osrm-directions-via input {
    border-top: 1px solid rgba(0,0,0,.1);
}

/* Leaflet marker labels */
.leaflet-label {
  background: rgb(235, 235, 235);
  background: rgba(235, 235, 235, 0.81);
  background-clip: padding-box;
  border-color: #777;
  border-color: rgba(0,0,0,0.25);
  border-radius: 4px;
  border-style: solid;
  border-width: 4px;
  color: #111;
  display: block;
  font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 1px 6px;
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
}

.leaflet-label.leaflet-clickable {
  cursor: pointer;
  pointer-events: auto;
}

.leaflet-label:before,
.leaflet-label:after {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  content: none;
  position: absolute;
  top: 5px;
}

.leaflet-label:before {
  border-right: 6px solid black;
  border-right-color: inherit;
  left: -10px;
}

.leaflet-label:after {
  border-left: 6px solid black;
  border-left-color: inherit;
  right: -10px;
}

.leaflet-label-right:before,
.leaflet-label-left:after {
  content: "";
}


/* Small Screen Layout
------------------------------------------------------- */
@media only screen and (max-width:880px) {
  .osrm-directions-summary {
    background-image: url('../images/osrm_logo.svg');
    -webkit-background-size: 200px 45px;
    background-size: 200px 45px;
    background-repeat: no-repeat;
    margin: 0;
    padding-top: 40px;
    padding-left: 5px;
    background-position: -50px -5px;
  }
  .osrm-directions-summary h2 {
    font-size: 15px;
    font-weight: bold;
    line-height: 18px;
    margin-right: 15px;
  }
  .leaflet-routing-container.dark {
    z-index: 10;
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.85);
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin: 0px !important;
    max-width: 58%;
    min-width: 48%;
  }
  .leaflet-routing-alt table td, .leaflet-routing-alt table {
    margin-top: 20px;
    padding: 5px;
    padding-bottom: 10px;
    margin-left: 0%;
    max-width: 95%;
  }
  .leaflet-routing-alternatives-container {
    position: fixed;
    right: 0px;
    top: 10px;
    width: 45%;
    max-width: 55%;
    min-width: 45%;
    height: 100%;
    overflow: scroll;
  }
  .leaflet-bottom .leaflet-control {
    margin-bottom: 0px;
  }
.leaflet-control-zoom {
  display: none;
 }
}

/*
  geocoding autocomplete styling
  copied over from leaflet-routing-machine.css
*/
.leaflet-routing-geocoder-result {
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
    position: absolute;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    z-index: 1000; /* Arbitrary, but try to be above "most" things. */
}

.leaflet-routing-geocoder-result table {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    background-color: white;
    cursor: pointer;
}

.leaflet-routing-geocoder-result-open {
    max-height: 800px;
}

.leaflet-routing-geocoder-selected, .leaflet-routing-geocoder-result tr:hover {
    background-color: #eee;
}

.leaflet-routing-geocoder-no-results {
    font-style: italic;
    color: #888;
}


/* Mobile Layout
------------------------------------------------------- */
@media only screen and (max-width:400px) {
.osrm-directions-summary {
  background-image: url('../images/osrm_logo.svg');
  -webkit-background-size: 200px 45px;
  background-size: 200px 45px;
  background-repeat: no-repeat;
  margin: 0;
  padding-top: 40px;
  padding-left: 32px;
  margin-left: 20px;
  background-position: -45px -5px;
}
.osrm-directions-summary h2 {
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
  margin-left: -25px;
}

.osrm-directions-summary h3 {
  font-size: 12px;
  margin-left: -25px;
}

.osrm-directions-inputs {
  min-width: 175px;
}

.leaflet-routing-container.dark {
  z-index: 10;
  background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.85);
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0px !important;
  max-width: 58%;
  min-width: 40%;
}
  
.leaflet-routing-alt table td, .leaflet-routing-alt table {
    margin-top: 10px;
    padding-bottom: 0px;
    margin-left: 12px;
    max-width: 95%;
    font-size: 11px;
    line-height: 16px;
}

.leaflet-routing-alt .osrm-directions-instructions, 
.leaflet-routing-alternatives-container {
    position: fixed;
    right: 0px;
    top: 10px;
    width: 45%;
    max-width: 55%;
    min-width: 20%;
    height: 100%;
    overflow: scroll;
}
.leaflet-left .leaflet-control {
  margin-left: 10px;
}

.leaflet-control {
  margin-bottom: 0px;
}

.leaflet-routing-alt table td:hover,
.leaflet-routing-alt table tr:hover {
  border-left-width: 1px;
}

}

.leaflet-routing-collapse-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: rgba(37, 72, 127, 0.74902);
    width: 36px;
    height: 36px;
    display: flex;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px;
    justify-content:center;
    align-items: center;
    color: white;
    z-index: 50;
}

.leaflet-routing-collapse-btn:after {
    content: '\203a';
}

.leaflet-routing-container-hide .leaflet-routing-collapse-btn:after {
    content: '\2039';
}

.leaflet-routing-container-hide.dark, .leaflet-routing-container-hide .leaflet-routing-alternatives-container {
    margin-right: -400px !important;
    transition: 0.5s;
}

.leaflet-osrm-tools-container .leaflet-osrm-tools-version {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px 4px;
    margin-left: auto;
}

.osrm-info-icon {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    font-weight: bold;
    font-size: 14px;
    cursor: help;
    color: #fff;
    text-align: center;
    line-height: 24px;
    vertical-align: middle;
}

.osrm-info-icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.osrm-info-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(37, 72, 127, 0.9);
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    pointer-events: none;
    z-index: 1000;
}

/* Entrance picker — alternative positions offered for a geocoded place.
   Nominatim gives entrance nodes no name or ref, so the dot's position on the
   map is the only thing that tells one apart from another. They are deliberately
   smaller and flatter than the A/B waypoint pins: the pin shows where the route
   actually starts, these only show where it could be moved to. */
.osrm-entrance-marker {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.1s ease-out;
}

.osrm-entrance-marker:hover {
    transform: scale(1.35);
}

/* A door tagged entrance=main — the one most travellers are looking for. */
.osrm-entrance-marker-main {
    background-color: #2b7ac9;
}

/* Any other public entrance. */
.osrm-entrance-marker-other {
    background-color: #7fb2e5;
}

/* The door the route currently runs to. Filled dark and ringed, so it reads as
   chosen while every other door stays on the map and one click away. */
.osrm-entrance-marker-selected {
    background-color: #022bb1;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(2, 43, 177, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Entrance labels. Permanent, so every door names itself without being
   hovered. Owned by the picker rather than drawn as Leaflet tooltips: the
   tooltip pane sits above the marker pane, which would put a label over the dot
   it names. As markers they share the pane with the dots, and a lower
   zIndexOffset keeps every dot on top. */
.osrm-entrance-label {
    /* Zero-sized, so the anchor is the door itself. */
    width: 0;
    height: 0;
}

.osrm-entrance-label-inner {
    position: absolute;
    left: 0;
    bottom: 14px;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.94);
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    color: #14243f;
    font-size: 12px;
    line-height: 1.35;
    padding: 3px 7px;
    /* Clickable, standing in for the door it names; a merged label is the only
       way to pick apart doors too close together to aim at. */
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
}

.osrm-entrance-label-inner div:hover {
    color: #2b7ac9;
}

/* The line for the door the route runs to, matching its filled dot. */
.osrm-entrance-label-selected {
    font-weight: bold;
    color: #022bb1;
}

/* Marks something about a door worth knowing in the current travel mode:
   step-free access on foot, a way in for a car when driving. A mark only, never
   a filter — most doors carry neither tag, so an absent one says nothing about
   the door. The per-mark classes carry no styling of their own yet; they exist
   so a mark can be restyled without touching the others. */
.osrm-entrance-mark {
    margin-left: 5px;
    font-size: 11px;
    line-height: 1;
    vertical-align: baseline;
}

/* A merged label lists one door per line, so it cannot stay on one. */
.osrm-entrance-label-merged .osrm-entrance-label-inner div + div {
    border-top: 1px solid rgba(20, 36, 63, 0.12);
    margin-top: 2px;
    padding-top: 2px;
}