Merge remote-tracking branch 'upstream/pull/2476'

[rails.git] / vendor / assets / iD / iD.css.erb

diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb
index 03c942bb2d578448760d72015b01fd5cc1dc178f..c9d34b82747e986047c720ce4822d86699025ec0 100644 (file)
--- a/vendor/assets/iD/iD.css.erb
+++ b/vendor/assets/iD/iD.css.erb
@@ -168,7 +168,7 @@ input::-moz-focus-inner {
 
 /* IE/Edge needs these overrides for markers to show up */
 .layer-osm path.oneway-marker-path          { fill: #000; }
 
 /* IE/Edge needs these overrides for markers to show up */
 .layer-osm path.oneway-marker-path          { fill: #000; }

-.layer-osm path.sided-marker-natural-path   { fill: rgb(140, 208, 95); }
+.layer-osm path.sided-marker-natural-path   { fill: rgb(170, 170, 170); }

 .layer-osm path.sided-marker-coastline-path { fill: #77dede; }
 .layer-osm path.sided-marker-barrier-path   { fill: #ddd; }
 .layer-osm path.sided-marker-man_made-path  { fill: #fff; }
 .layer-osm path.sided-marker-coastline-path { fill: #77dede; }
 .layer-osm path.sided-marker-barrier-path   { fill: #ddd; }
 .layer-osm path.sided-marker-man_made-path  { fill: #fff; }


@@ -449,11 +449,21 @@ text.point {
 
 /* Wikidata-tagged */
 g.point.tag-wikidata path.stroke {
 
 /* Wikidata-tagged */
 g.point.tag-wikidata path.stroke {

-    stroke-width: 3px;
-    stroke: #777;
-    fill: #ddd;
+    stroke-width: 2px;
+    stroke: #666;
+    fill: #eee;
+}
+g.point.tag-wikidata .icon {
+    color: #666;

 }
 
 }
 

+/* Selected Members */
+g.vertex.selected-member .shadow,
+g.point.selected-member .shadow,
+path.shadow.selected-member {
+    stroke-opacity: 0.95;
+    stroke: #FFDE70;
+}

 
 /* Highlighting */
 g.point.highlighted .shadow,
 
 /* Highlighting */
 g.point.highlighted .shadow,


@@ -500,6 +510,91 @@ g.vertex.highlighted .shadow {
     stroke: #68f;
 }
 
     stroke: #68f;
 }
 

+/* Visual Diffs
+------------------
+`highlight-edited` - visual diff activated
+`added` - entity was created by the user
+`moved` - node has different coordinates
+`geometry-edited` - way has different nodes
+`segment-edited` - one or both adjacents nodes moved
+`retagged` - some tagging change has occurred
+*/
+
+/* Vertex visual diffs */
+.highlight-edited g.points g.node.vertex.added > circle.shadow,
+.highlight-edited g.points g.node.vertex.retagged > circle.shadow,
+.highlight-edited g.points g.node.vertex.moved > circle.shadow {
+    fill-opacity: 0.8;
+}
+.highlight-edited g.points g.node.vertex.added > circle.shadow {
+    fill: rgb(133, 255, 103);
+}
+.highlight-edited g.points g.node.vertex.retagged > circle.shadow {
+    fill: #fcde5a;
+}
+.highlight-edited g.points g.node.vertex.moved > circle.shadow {
+    fill: rgb(255, 126, 46);
+}
+
+/* Point visual diffs */
+.highlight-edited g.points g.node.point.added > path.shadow,
+.highlight-edited g.points g.node.point.retagged > path.shadow,
+.highlight-edited g.points g.node.point.moved > path.shadow {
+    stroke-opacity: 0.8;
+    stroke-width: 10;
+}
+.highlight-edited g.points g.node.point.added > path.shadow {
+    stroke: rgb(133, 255, 103);
+}
+.highlight-edited g.points g.node.point.retagged > path.shadow {
+    stroke: #fcde5a;
+}
+.highlight-edited g.points g.node.point.moved > path.shadow {
+    stroke: rgb(255, 126, 46);
+}
+
+/* Line/area segment visual diffs
+- segments are rendered on top of the ways for convenience and to differentiate
+  them from entire line diffs, so make them thin
+*/
+.highlight-edited g.lines > path.line.segment-edited,
+.highlight-edited g.areas > path.area.segment-edited {
+    stroke: rgb(255, 126, 46);
+    stroke-dasharray: 10, 3;
+    stroke-width: 1.5 !important;
+    stroke-opacity: 1;
+}
+
+/* Entire line/area visual diffs */
+.highlight-edited path.line.shadow.added,
+.highlight-edited path.line.shadow.retagged,
+.highlight-edited path.line.shadow.geometry-edited,
+.highlight-edited path.area.shadow.added,
+.highlight-edited path.area.shadow.retagged,
+.highlight-edited path.area.shadow.geometry-edited {
+    stroke-opacity: 0.6;
+}
+.highlight-edited.fill-wireframe path.line.shadow.added,
+.highlight-edited.fill-wireframe path.line.shadow.retagged,
+.highlight-edited.fill-wireframe path.line.shadow.geometry-edited,
+.highlight-edited.fill-wireframe path.area.shadow.added,
+.highlight-edited.fill-wireframe path.area.shadow.retagged,
+.highlight-edited.fill-wireframe path.area.shadow.geometry-edited {
+    stroke-width: 3;
+}
+.highlight-edited path.line.shadow.added,
+.highlight-edited path.area.shadow.added {
+    stroke: rgb(133, 255, 103);
+}
+.highlight-edited path.area.shadow.retagged,
+.highlight-edited path.line.shadow.retagged {
+    stroke: #fcde5a;
+}
+.highlight-edited path.line.shadow.geometry-edited,
+.highlight-edited path.area.shadow.geometry-edited {
+    stroke: rgb(255, 126, 46);
+}
+

 /* Default - light gray */
 path.area.stroke {
     stroke: rgb(170, 170, 170);
 /* Default - light gray */
 path.area.stroke {
     stroke: rgb(170, 170, 170);


@@ -524,32 +619,36 @@ path.stroke.old-multipolygon {
 
 
 /* Green things */
 
 
 /* Green things */

-path.stroke.tag-natural,
-path.stroke.tag-natural-wood,
+path.stroke.tag-barrier-hedge,
+path.stroke.tag-landuse-flowerbed,
+path.stroke.tag-landuse-forest,
+path.stroke.tag-landuse-grass,
+path.stroke.tag-landuse-recreation_ground,
+path.stroke.tag-landuse-village_green,
+path.stroke.tag-leisure-garden,
+path.stroke.tag-leisure-golf_course,

 path.stroke.tag-leisure-nature_reserve,
 path.stroke.tag-leisure-nature_reserve,

+path.stroke.tag-leisure-park,

 path.stroke.tag-leisure-pitch,
 path.stroke.tag-leisure-track,
 path.stroke.tag-leisure-pitch,
 path.stroke.tag-leisure-track,

-path.stroke.tag-leisure-golf_course,
-path.stroke.tag-leisure-garden,
-path.stroke.tag-leisure-park,
-path.stroke.tag-landuse-recreation_ground,
-path.stroke.tag-landuse-forest,
-path.stroke.tag-landuse-grass,
-path.stroke.tag-barrier-hedge {
+path.stroke.tag-natural,
+path.stroke.tag-natural-wood {

     stroke: rgb(140, 208, 95);
 }
     stroke: rgb(140, 208, 95);
 }

-path.fill.tag-natural,
-path.fill.tag-natural-wood,
+path.fill.tag-barrier-hedge,
+path.fill.tag-landuse-flowerbed,
+path.fill.tag-landuse-forest,
+path.fill.tag-landuse-grass,
+path.fill.tag-landuse-recreation_ground,
+path.fill.tag-landuse-village_green,
+path.fill.tag-leisure-garden,
+path.fill.tag-leisure-golf_course,

 path.fill.tag-leisure-nature_reserve,
 path.fill.tag-leisure-nature_reserve,

+path.fill.tag-leisure-park,

 path.fill.tag-leisure-pitch,
 path.fill.tag-leisure-track,
 path.fill.tag-leisure-pitch,
 path.fill.tag-leisure-track,

-path.fill.tag-leisure-golf_course,
-path.fill.tag-leisure-garden,
-path.fill.tag-leisure-park,
-path.fill.tag-landuse-recreation_ground,
-path.fill.tag-landuse-forest,
-path.fill.tag-landuse-grass,
-path.fill.tag-barrier-hedge {
+path.fill.tag-natural,
+path.fill.tag-natural-wood {

     stroke: rgba(140, 208, 95, 0.3);
     fill: rgba(140, 208, 95, 0.3);
 }
     stroke: rgba(140, 208, 95, 0.3);
     fill: rgba(140, 208, 95, 0.3);
 }


@@ -596,7 +695,8 @@ path.stroke.tag-amenity-childcare,
 path.stroke.tag-amenity-kindergarten,
 path.stroke.tag-amenity-school,
 path.stroke.tag-amenity-college,
 path.stroke.tag-amenity-kindergarten,
 path.stroke.tag-amenity-school,
 path.stroke.tag-amenity-college,

-path.stroke.tag-amenity-university {
+path.stroke.tag-amenity-university,
+path.stroke.tag-amenity-research_institute {

     stroke: rgba(255, 255, 148, 0.75);
 }
 path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
     stroke: rgba(255, 255, 148, 0.75);
 }
 path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,


@@ -610,7 +710,8 @@ path.fill.tag-amenity-childcare,
 path.fill.tag-amenity-kindergarten,
 path.fill.tag-amenity-school,
 path.fill.tag-amenity-college,
 path.fill.tag-amenity-kindergarten,
 path.fill.tag-amenity-school,
 path.fill.tag-amenity-college,

-path.fill.tag-amenity-university {
+path.fill.tag-amenity-university,
+path.fill.tag-amenity-research_institute {

     stroke: rgba(255, 255, 148, 0.25);
     fill: rgba(255, 255, 148, 0.25);
 }
     stroke: rgba(255, 255, 148, 0.25);
     fill: rgba(255, 255, 148, 0.25);
 }


@@ -625,7 +726,8 @@ path.fill.tag-amenity-university {
 .preset-icon-fill path.area.stroke.tag-amenity-kindergarten,
 .preset-icon-fill path.area.stroke.tag-amenity-school,
 .preset-icon-fill path.area.stroke.tag-amenity-college,
 .preset-icon-fill path.area.stroke.tag-amenity-kindergarten,
 .preset-icon-fill path.area.stroke.tag-amenity-school,
 .preset-icon-fill path.area.stroke.tag-amenity-college,

-.preset-icon-fill path.area.stroke.tag-amenity-university {
+.preset-icon-fill path.area.stroke.tag-amenity-university,
+.preset-icon-fill path.area.stroke.tag-amenity-research_institute {

     stroke: rgb(232, 232, 0);
 }
 .pattern-color-beach,
     stroke: rgb(232, 232, 0);
 }
 .pattern-color-beach,


@@ -640,7 +742,8 @@ path.stroke.tag-landuse-residential,
 path.stroke.tag-status-construction {
     stroke: rgb(196, 189, 25);
 }
 path.stroke.tag-status-construction {
     stroke: rgb(196, 189, 25);
 }

-path.fill.tag-landuse-residential {
+path.fill.tag-landuse-residential,
+path.fill.tag-status-construction {

     stroke: rgba(196, 189, 25, 0.3);
     fill: rgba(196, 189, 25, 0.3);
 }
     stroke: rgba(196, 189, 25, 0.3);
     fill: rgba(196, 189, 25, 0.3);
 }


@@ -686,6 +789,10 @@ path.fill.tag-power-plant {
 path.stroke.tag-natural-wetland {
     stroke: rgb(153, 225, 170);
 }
 path.stroke.tag-natural-wetland {
     stroke: rgb(153, 225, 170);
 }

+path.fill.tag-natural-wetland {
+    stroke: rgba(153, 225, 170, 0.3);
+    fill: rgba(153, 225, 170, 0.3);
+}

 .preset-icon-fill path.area.fill.tag-natural-wetland {
     fill: rgba(153, 225, 170, 0.2);
 }
 .preset-icon-fill path.area.fill.tag-natural-wetland {
     fill: rgba(153, 225, 170, 0.2);
 }


@@ -700,29 +807,41 @@ path.stroke.tag-natural-wetland {
 
 /* Light Green things */
 path.stroke.tag-landuse-cemetery,
 
 /* Light Green things */
 path.stroke.tag-landuse-cemetery,

-path.stroke.tag-landuse-orchard,
-path.stroke.tag-landuse-vineyard,
+path.stroke.tag-landuse-farmland,
+path.stroke.tag-landuse-grass.tag-golf-green,

 path.stroke.tag-landuse-meadow,
 path.stroke.tag-landuse-meadow,

-path.stroke.tag-landuse-farmland {
+path.stroke.tag-landuse-orchard,
+path.stroke.tag-landuse-vineyard {

     stroke: rgb(191, 232, 63);
 }
     stroke: rgb(191, 232, 63);
 }

+path.fill.tag-landuse-cemetery,
+path.fill.tag-landuse-farmland,
+path.fill.tag-landuse-grass.tag-golf-green,
+path.fill.tag-landuse-meadow,
+path.fill.tag-landuse-orchard,
+path.fill.tag-landuse-vineyard {
+    stroke: rgba(191, 232, 63, 0.3);
+    fill: rgba(191, 232, 63, 0.3);
+}

 .preset-icon-fill path.area.fill.tag-landuse-cemetery,
 .preset-icon-fill path.area.fill.tag-landuse-cemetery,

-.preset-icon-fill path.area.fill.tag-landuse-orchard,
-.preset-icon-fill path.area.fill.tag-landuse-vineyard,
+.preset-icon-fill path.area.fill.tag-landuse-farmland,
+.preset-icon-fill path.area.fill.tag-landuse-grass.tag-golf-green,

 .preset-icon-fill path.area.fill.tag-landuse-meadow,
 .preset-icon-fill path.area.fill.tag-landuse-meadow,

-.preset-icon-fill path.area.fill.tag-landuse-farmland {
-    fill: rgba(191, 232, 63, 0.2);
+.preset-icon-fill path.area.fill.tag-landuse-orchard,
+.preset-icon-fill path.area.fill.tag-landuse-vineyard {
+    fill: rgba(191, 232, 63, 0.4);

 }
 .pattern-color-cemetery,
 }
 .pattern-color-cemetery,

-.pattern-color-cemetery_christian,

 .pattern-color-cemetery_buddhist,
 .pattern-color-cemetery_buddhist,

-.pattern-color-cemetery_muslim,
+.pattern-color-cemetery_christian,

 .pattern-color-cemetery_jewish,
 .pattern-color-cemetery_jewish,

-.pattern-color-orchard,
-.pattern-color-vineyard,
+.pattern-color-cemetery_muslim,
+.pattern-color-farmland,
+.pattern-color-golf_green,

 .pattern-color-meadow,
 .pattern-color-meadow,

-.pattern-color-farmland {
-    fill: rgba(191, 232, 63, 0.2);
+.pattern-color-orchard,
+.pattern-color-vineyard {
+    fill: rgba(191, 232, 63, 0.3);

 }
 
 
 }
 
 


@@ -1244,6 +1363,7 @@ path.line.stroke.tag-highway-bridleway {
 
 /* style for features that should have highway=footway but don't yet */
 path.line.stroke.tag-crossing,
 
 /* style for features that should have highway=footway but don't yet */
 path.line.stroke.tag-crossing,

+path.line.stroke.tag-footway-access_aisle,

 path.line.stroke.tag-public_transport-platform,
 path.line.stroke.tag-highway-platform,
 path.line.stroke.tag-railway-platform,
 path.line.stroke.tag-public_transport-platform,
 path.line.stroke.tag-highway-platform,
 path.line.stroke.tag-railway-platform,


@@ -1255,7 +1375,8 @@ path.line.casing.tag-highway-path,
 path.line.casing.tag-highway-path.tag-unpaved,
 path.line.casing.tag-highway-footway.tag-public_transport-platform,
 path.line.casing.tag-highway-footway.tag-man_made-pier,
 path.line.casing.tag-highway-path.tag-unpaved,
 path.line.casing.tag-highway-footway.tag-public_transport-platform,
 path.line.casing.tag-highway-footway.tag-man_made-pier,

-path.line.casing.tag-highway.tag-crossing {
+path.line.casing.tag-highway.tag-crossing,
+path.line.casing.tag-highway.tag-footway-access_aisle {

     stroke: #dca;
     stroke-linecap: round;
     stroke-dasharray: none;
     stroke: #dca;
     stroke-linecap: round;
     stroke-dasharray: none;


@@ -1293,7 +1414,14 @@ path.line.stroke.tag-highway_bus_stop,
 .preset-icon-container path.casing.tag-highway-footway {
     stroke: #988;
 }
 .preset-icon-container path.casing.tag-highway-footway {
     stroke: #988;
 }

-.preset-icon-container path.stroke.tag-highway-footway:not(.tag-crossing-marked):not(.tag-crossing-unmarked):not(.tag-man_made-pier):not(.tag-public_transport-platform) {
+.preset-icon .icon.tag-highway-footway.tag-footway-sidewalk {
+    color: #d4b4b4;
+}
+path.stroke.tag-highway-footway.tag-footway-sidewalk,
+.preset-icon-container path.casing.tag-highway-footway.tag-footway-sidewalk {
+    stroke: #d4b4b4;
+}
+.preset-icon-container path.stroke.tag-highway-footway:not(.tag-crossing-marked):not(.tag-crossing-unmarked):not(.tag-footway-access_aisle):not(.tag-man_made-pier):not(.tag-public_transport-platform) {

     stroke: #fff;
 }
 
     stroke: #fff;
 }
 


@@ -1396,6 +1524,20 @@ path.line.stroke.tag-highway-cycleway.tag-crossing-marked {
     color: #446077;
 }
 
     color: #446077;
 }
 

+path.line.stroke.tag-highway.tag-footway-access_aisle {
+    stroke-dasharray: 4, 2;
+}
+.low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle,
+.preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle {
+    stroke-dasharray: 2.5, 1.5;
+}
+path.line.stroke.tag-highway.tag-footway-access_aisle {
+    stroke: #4c4444;
+}
+.preset-icon .icon.tag-highway.tag-footway-access_aisle {
+    color: #4c4444;
+}
+

 
 /* highway midpoints */
 g.midpoint.tag-highway-corridor .fill,
 
 /* highway midpoints */
 g.midpoint.tag-highway-corridor .fill,


@@ -1581,8 +1723,8 @@ path.line.stroke.tag-railway-subway {
     color: #7dd;
     fill: #7dd;
 }
     color: #7dd;
     fill: #7dd;
 }

-.preset-icon .icon.tag-type-waterway,
-.preset-icon .icon.tag-waterway {
+.preset-icon .icon.tag-type-waterway:not(.tag-waterway-dam),
+.preset-icon .icon.tag-waterway:not(.tag-waterway-dam) {

     color: #7dd;
     fill: #fff;
 }
     color: #7dd;
     fill: #fff;
 }


@@ -1608,14 +1750,14 @@ path.area.fill.tag-waterway-fuel {
 }
 
 /* lines */
 }
 
 /* lines */

-path.line.fill.tag-waterway {
+path.line.fill.tag-waterway:not(.tag-waterway-dam) {

     stroke: rgba(119, 211, 222, 0.3);
     fill: rgba(119, 211, 222, 0.3);
 }
     stroke: rgba(119, 211, 222, 0.3);
     fill: rgba(119, 211, 222, 0.3);
 }

-path.line.casing.tag-waterway {
+path.line.casing.tag-waterway:not(.tag-waterway-dam) {

     stroke: #444;
 }
     stroke: #444;
 }

-path.line.stroke.tag-waterway {
+path.line.stroke.tag-waterway:not(.tag-waterway-dam) {

     stroke: #7dd;
 }
 
     stroke: #7dd;
 }
 


@@ -1860,26 +2002,26 @@ path.line.casing.tag-boundary-national_park {
 
 
 /* barriers and similar */
 
 
 /* barriers and similar */

-path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
+path.line.stroke.tag-barrier:not(.tag-barrier-hedge):not(.tag-waterway) {

     stroke: #ddd;
 }
 .preset-icon-container path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
     stroke: rgb(170, 170, 170);
 }
 path.line.casing.tag-natural,
     stroke: #ddd;
 }
 .preset-icon-container path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
     stroke: rgb(170, 170, 170);
 }
 path.line.casing.tag-natural,

-path.line.casing.tag-barrier,
+path.line.casing.tag-barrier:not(.tag-waterway),

 path.line.casing.tag-man_made-groyne,
 path.line.casing.tag-man_made-breakwater {
     stroke: none;
 }
 path.line.casing.tag-man_made-groyne,
 path.line.casing.tag-man_made-breakwater {
     stroke: none;
 }

-path.line.stroke.tag-barrier,
+path.line.stroke.tag-barrier:not(.tag-waterway),

 path.line.stroke.tag-man_made-groyne,
 path.line.stroke.tag-man_made-breakwater {
     stroke-width: 3px;
     stroke-linecap: round;
     stroke-dasharray: 15, 5, 1, 5;
 }
 path.line.stroke.tag-man_made-groyne,
 path.line.stroke.tag-man_made-breakwater {
     stroke-width: 3px;
     stroke-linecap: round;
     stroke-dasharray: 15, 5, 1, 5;
 }

-.low-zoom path.line.stroke.tag-barrier,
+.low-zoom path.line.stroke.tag-barrier:not(.tag-waterway),

 .low-zoom path.line.stroke.tag-man_made-groyne,
 .low-zoom path.line.stroke.tag-man_made-breakwater {
     stroke-width: 2px;
 .low-zoom path.line.stroke.tag-man_made-groyne,
 .low-zoom path.line.stroke.tag-man_made-breakwater {
     stroke-width: 2px;


@@ -1891,6 +2033,20 @@ path.line.stroke.tag-man_made-breakwater {
 .preset-icon-container path.line.stroke.tag-man_made-breakwater {
     stroke-dasharray: 1, 4, 6, 4;
 }
 .preset-icon-container path.line.stroke.tag-man_made-breakwater {
     stroke-dasharray: 1, 4, 6, 4;
 }

+path.line.stroke.tag-barrier.tag-barrier-wall,
+path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
+path.line.stroke.tag-barrier.tag-barrier-city_wall {
+    stroke-linecap: butt;
+    stroke-dasharray: 16, 3, 9, 3;
+}
+.low-zoom path.line.stroke.tag-barrier.tag-barrier-wall,
+.low-zoom path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
+.low-zoom path.line.stroke.tag-barrier.tag-barrier-city_wall,
+.preset-icon-container path.line.stroke.tag-barrier.tag-barrier-wall,
+.preset-icon-container path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
+.preset-icon-container path.line.stroke.tag-barrier.tag-barrier-city_wall {
+    stroke-dasharray: 8, 1, 4, 1;
+}

 
 
 /* bridges */
 
 
 /* bridges */


@@ -2391,22 +2547,28 @@ path.fill.tag-building {
 }
 
 
 }
 
 

-/* Mapillary Sign Layer */
-.layer-mapillary-signs {
+/* Mapillary Traffic Signs and Map Features Layers */
+.layer-mapillary-detections {

     pointer-events: none;
 }
     pointer-events: none;
 }

-.layer-mapillary-signs .icon-sign {
+.layer-mapillary-detections .icon-detected {

     outline: 2px solid transparent;
     pointer-events: visible;
     cursor: pointer;
     outline: 2px solid transparent;
     pointer-events: visible;
     cursor: pointer;

+    opacity: 0.75;

 }
 }

-.layer-mapillary-signs .icon-sign:hover {
-    outline: 5px solid #eebb00;
-    background-color: #eebb00;
+.layer-mapillary-detections .icon-detected rect {
+    fill: none;
+}
+.layer-mapillary-detections .icon-detected:hover rect {
+    outline: 3px solid rgba(255, 238, 0, 0.6);

 }
 }

-.layer-mapillary-signs .icon-sign.currentView {
-    outline: 5px solid #ffee00;
-    background-color: #ffee00;
+.layer-mapillary-detections .icon-detected.currentView rect {
+    outline: 3px solid rgba(255, 238, 0, 1);
+}
+.layer-mapillary-detections .icon-detected:hover,
+.layer-mapillary-detections .icon-detected.currentView {
+    opacity: 1;

 }
 
 
 }
 
 


@@ -2959,6 +3121,21 @@ a:visited, a {
 a:hover {
     color: #597be7;
 }
 a:hover {
     color: #597be7;
 }

+kbd {
+    display: inline-block;
+    text-align: center;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 12px;
+    min-width: 12px;
+    vertical-align: baseline;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    margin: 0 2px;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
+}

 
 /* Forms
 ------------------------------------------------------- */
 
 /* Forms
 ------------------------------------------------------- */


@@ -3250,34 +3427,53 @@ button[disabled].action:hover {
 
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
 
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */

-#bar {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
+#bar-wrap {

     position: absolute;
     position: absolute;

-    padding: 10px 5px 0px 5px;

     left: 0;
     top: 0;
     right: 0;
     z-index: 101;
 }
     left: 0;
     top: 0;
     right: 0;
     z-index: 101;
 }

+#bar {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    padding: 10px 0 0 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: 100%;
+    width: 100%;
+
+    /* hide scrollbar but allow scrolling */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE, Edge */
+}
+#bar::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+}

 #bar .toolbar-item {
     display: flex;
     flex: 0 1 auto;
     flex-flow: column wrap;
     justify-content: center;
 #bar .toolbar-item {
     display: flex;
     flex: 0 1 auto;
     flex-flow: column wrap;
     justify-content: center;

-    position: relative;

 }
 #bar .toolbar-item .item-content {
     display: flex;
     flex: 0 1 auto;
     flex-flow: row nowrap;
     justify-content: center;
 }
 #bar .toolbar-item .item-content {
     display: flex;
     flex: 0 1 auto;
     flex-flow: row nowrap;
     justify-content: center;

-    position: relative;

     height: 40px;
     width: auto;
     margin: 0 5px;
 }
     height: 40px;
     width: auto;
     margin: 0 5px;
 }

+[dir='ltr'] #bar .toolbar-item:last-child .item-content,
+[dir='rtl'] #bar .toolbar-item:first-child .item-content {
+    margin-right: 10px;
+}
+[dir='ltr'] #bar .toolbar-item:first-child .item-content,
+[dir='rtl'] #bar .toolbar-item:last-child .item-content {
+    margin-left: 10px;
+}

 #bar .toolbar-item .item-label {
     text-align: center;
     font-size: 11px;
 #bar .toolbar-item .item-label {
     text-align: center;
     font-size: 11px;


@@ -3391,223 +3587,6 @@ button.add-note svg.icon {
     margin-left: 1px;
 }
 
     margin-left: 1px;
 }
 

-/* Add a feature search bar
-------------------------------------------------------- */
-
-.search-add {
-    width: 200%;
-    justify-content: center;
-    position: relative;
-    min-width: 150px;
-    max-width: 325px;
-}
-.search-add .search-wrap {
-    position: relative;
-    width: 100%;
-}
-[dir='ltr'] .search-add .search-wrap {
-    border-radius: 20px 4px 4px 20px;
-}
-[dir='rtl'] .search-add .search-wrap {
-    border-radius: 4px 20px 20px 4px;
-}
-.search-add .search-wrap.focused .tooltip {
-    display: none;
-}
-.search-add .search-wrap:last-child {
-    border-radius: 20px;
-}
-.search-add input[type='search'] {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border: none;
-    font-size: 14px;
-    text-indent: 25px;
-    padding: 5px 10px;
-    border-radius: inherit;
-}
-.search-add input[type='search'][disabled] {
-    opacity: 0.25;
-    cursor: not-allowed;
-}
-.search-add .search-icon {
-    color: #333;
-    display: block;
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    pointer-events: none;
-}
-[dir='rtl'] .search-add .search-icon {
-    left: auto;
-    right: 10px;
-}
-.search-add .popover {
-    border: none;
-    border-radius: 6px;
-    position: absolute;
-    max-height: 600px;
-    top: 44px;
-    width: 200%;
-    max-width: 325px;
-    margin: auto;
-    left: auto;
-    right: auto;
-    z-index: 300;
-}
-.search-add .popover .popover-content {
-    overflow-y: auto;
-    height: 100%;
-    max-height: 60vh;
-}
-.search-add .popover,
-.search-add .popover .popover-content {
-    /* ensure corners are rounded in Chrome */
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-}
-.search-add .popover .popover-footer {
-    padding: 5px 10px 5px 10px;
-    background: #f6f6f6;
-    border-top: 1px solid #DCDCDC;
-    display: flex;
-}
-.search-add .popover .popover-footer .message {
-    color: #666666;
-    flex-grow: 1;
-}
-.search-add .popover .popover-footer button.filter {
-    height: 20px;
-    background: transparent;
-    color: #666;
-}
-.search-add .popover .popover-footer button.filter.active {
-    color: #7092ff;
-}
-.search-add .popover .popover-footer button.filter:hover {
-    color: #333;
-}
-.search-add .popover .popover-footer button.filter.active:hover {
-    color: #597be7;
-}
-.search-add .popover::-webkit-scrollbar {
-    /* don't overlap rounded corners */
-    background: transparent;
-}
-.search-add .popover .list {
-    height: 100%;
-}
-.search-add .list-item > .row {
-    display: flex;
-    position: relative;
-    padding: 2px;
-}
-.search-add .list-item:not(:last-of-type) .row,
-.search-add .subsection.subitems .list-item .row,
-.search-add .subsection > .tag-reference-body  {
-    border-bottom: 1px solid #DCDCDC;
-}
-.search-add .list-item .label {
-    font-weight: bold;
-    font-size: 12px;
-    padding-left: 2px;
-    top: 0;
-    bottom: 0;
-    position: relative;
-    display: flex;
-    align-items: center;
-    line-height: 1.3em;
-    width: 100%;
-}
-.search-add .list-item .label .namepart:nth-child(2) {
-    font-weight: normal;
-}
-.search-add .list-item.disabled .preset-icon-container,
-.search-add .list-item.disabled .label {
-    opacity: 0.55;
-}
-[dir='ltr'] .search-add .list-item .label .icon.inline {
-    margin-left: 0;
-}
-[dir='rtl'] .search-add .list-item .label .icon.inline {
-    margin-right: 0;
-}
-.search-add .list-item .row > *:not(button) {
-    pointer-events: none;
-}
-.search-add .list-item button.choose {
-    position: absolute;
-    border-radius: 0;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-}
-.search-add .list-item button.choose:hover,
-.search-add .list-item button.choose:focus {
-    background: #fff;
-}
-.search-add .list-item.focused:not(.disabled) button.choose {
-    background: #e8ebff;
-}
-.search-add .list-item button.choose.disabled {
-    background-color: #ececec;
-}
-.search-add .subsection .list-item button.choose {
-    opacity: 0.85;
-}
-.search-add .subsection .tag-reference-body {
-    background: rgba(255, 255, 255, 0.85);
-    padding: 10px;
-}
-.search-add .list-item button.accessory {
-    position: relative;
-    flex: 0 0 auto;
-    color: #808080;
-    background: transparent;
-    padding-right: 3px;
-    padding-left: 3px;
-}
-.search-add .list-item button.accessory:hover {
-    color: #666;
-}
-.search-add .list-item button.tag-reference-open path {
-    fill: #000;
-}
-.search-add .subsection {
-    background-color: #CBCBCB;
-}
-[dir='ltr'] .search-add .subitems {
-    padding-left: 6px;
-}
-[dir='rtl'] .search-add .subitems {
-    padding-right: 6px;
-}
-
-/* Add a preset mode buttons
-------------------------------------------------------- */
-
-button.bar-button.add-preset {
-    border-radius: 4px;
-}
-[dir='ltr'] button.bar-button.add-preset {
-    margin-left: 1px;
-}
-[dir='rtl'] button.bar-button.add-preset {
-    margin-right: 1px;
-}
-[dir='ltr'] button.bar-button.add-preset.first-recent {
-    margin-left: 10px;
-}
-[dir='rtl'] button.bar-button.add-preset.first-recent {
-    margin-right: 10px;
-}
-button.bar-button.add-preset {
-    padding: 0;
-}
-button.add-preset.disabled .preset-icon-container {
-    opacity: 0.5;
-}

 /* Header for modals / panes
 ------------------------------------------------------- */
 .header {
 /* Header for modals / panes
 ------------------------------------------------------- */
 .header {


@@ -3971,10 +3950,10 @@ a.hide-toggle {
 
 .preset-list-item {
     margin-bottom: 10px;
 
 .preset-list-item {
     margin-bottom: 10px;

+    position: static;

 }
 
 .preset-list-button-wrap {
 }
 
 .preset-list-button-wrap {

-    position: relative;

     height: 62px;
     display: flex;
     border: 1px solid #ccc;
     height: 62px;
     display: flex;
     border: 1px solid #ccc;


@@ -4011,6 +3990,14 @@ a.hide-toggle {
     height: 50px;
     object-fit: contain;
     border-radius: 2px;
     height: 50px;
     object-fit: contain;
     border-radius: 2px;

+    z-index: 2;
+    visibility: hidden;
+}
+.preset-icon-container.showing-img img.image-icon {
+    visibility: visible;
+}
+.preset-icon-container.showing-img *:not(.image-icon) {
+    visibility: hidden;

 }
 
 .preset-icon-point-border path {
 }
 
 .preset-icon-point-border path {


@@ -4158,18 +4145,15 @@ a.hide-toggle {
     background-color: #ececec;
 }
 
     background-color: #ececec;
 }
 

-.preset-list-item button.preset-favorite-button,

 .preset-list-item button.tag-reference-button {
     height: 100%;
     width: 32px;
     flex: 0 0 auto;
     background: #f6f6f6;
 }
 .preset-list-item button.tag-reference-button {
     height: 100%;
     width: 32px;
     flex: 0 0 auto;
     background: #f6f6f6;
 }

-[dir='ltr'] .preset-list-item button.preset-favorite-button,

 [dir='ltr'] .preset-list-item button.tag-reference-button {
     border-left: 1px solid #ccc;
 }
 [dir='ltr'] .preset-list-item button.tag-reference-button {
     border-left: 1px solid #ccc;
 }

-[dir='rtl'] .preset-list-item button.preset-favorite-button,

 [dir='rtl'] .preset-list-item button.tag-reference-button {
     border-right: 1px solid #ccc;
 }
 [dir='rtl'] .preset-list-item button.tag-reference-button {
     border-right: 1px solid #ccc;
 }


@@ -4180,23 +4164,13 @@ a.hide-toggle {
     border-radius: 4px 0 0 4px;
 }
 
     border-radius: 4px 0 0 4px;
 }
 

-.preset-list-item button.preset-favorite-button:hover,

 .preset-list-item button.tag-reference-button:hover {
     background: #f1f1f1;
 }
 .preset-list-item button.tag-reference-button:hover {
     background: #f1f1f1;
 }

-.preset-list-item button.preset-favorite-button .icon,

 .preset-list-item button.tag-reference-button .icon {
     opacity: .5;
 }
 
 .preset-list-item button.tag-reference-button .icon {
     opacity: .5;
 }
 

-button.preset-favorite-button .icon {
-    fill-opacity: 0;
-    stroke-width: 1;
-}
-button.preset-favorite-button.active .icon {
-    fill-opacity: inherit;
-}
-

 
 .current .preset-list-button,
 .current .preset-list-button .label {
 
 .current .preset-list-button,
 .current .preset-list-button .label {


@@ -4636,6 +4610,17 @@ button.preset-favorite-button.active .icon {
     border-radius: 0 0 0 4px;
 }
 
     border-radius: 0 0 0 4px;
 }
 

+[dir='ltr'] .form-field-input-identifier > input:last-child,
+[dir='rtl'] .form-field-input-identifier > input:first-child,
+[dir='ltr'] .form-field-input-identifier > button {
+    border-bottom-right-radius: 4px;
+}
+[dir='ltr'] .form-field-input-identifier > input:first-child,
+[dir='rtl'] .form-field-input-identifier > input:last-child,
+[dir='rtl'] .form-field-input-identifier > button {
+    border-bottom-left-radius: 4px;
+}
+

 /* draw the up/down on the buttons */
 .form-field-input-number button.decrement::after,
 .form-field-input-number button.increment::after {
 /* draw the up/down on the buttons */
 .form-field-input-number button.decrement::after,
 .form-field-input-number button.increment::after {


@@ -4661,7 +4646,7 @@ button.preset-favorite-button.active .icon {
 ------------------------------------------------------- */
 .form-field-input-check {
     display: flex;
 ------------------------------------------------------- */
 .form-field-input-check {
     display: flex;

-    align-items: end;
+    align-items: center;

     background: #fff;
     padding: 5px 10px;
     color: #7092ff;
     background: #fff;
     padding: 5px 10px;
     color: #7092ff;


@@ -4673,6 +4658,7 @@ button.preset-favorite-button.active .icon {
     flex: 0 1 auto;
     min-height: 20px;
     width: 20px;
     flex: 0 1 auto;
     min-height: 20px;
     width: 20px;

+    margin-top: 0;

 }
 .form-field-input-check > span {
     flex: 1 1 auto;
 }
 .form-field-input-check > span {
     flex: 1 1 auto;


@@ -4684,6 +4670,12 @@ button.preset-favorite-button.active .icon {
     border-radius: 2px;
     padding: 0px 8px;
 }
     border-radius: 2px;
     padding: 0px 8px;
 }

+[dir='ltr'] .form-field-input-check > .reverser.button {
+    padding-right: 2px;
+}
+[dir='rtl'] .form-field-input-check > .reverser.button {
+    padding-left: 2px;
+}

 .form-field-input-check > .reverser.button.hide {
     display: none;
 }
 .form-field-input-check > .reverser.button.hide {
     display: none;
 }


@@ -5507,7 +5499,6 @@ img.tag-reference-wiki-image {
     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
     */
 }
     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
     */
 }

-.raw-member-editor .member-row.dragging

 
 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
 .raw-membership-editor.inspector-inner {
 
 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
 .raw-membership-editor.inspector-inner {


@@ -5795,7 +5786,8 @@ input.key-trap {
     border-radius: 0;
 }
 
     border-radius: 0;
 }
 

-.map-control > button:hover {
+.map-control > button:not(.disabled):hover,
+.map-control > button:not(.disabled):focus {

     background: rgba(0, 0, 0, .8);
 }
 
     background: rgba(0, 0, 0, .8);
 }
 


@@ -5804,6 +5796,10 @@ input.key-trap {
     background: #7092ff;
 }
 
     background: #7092ff;
 }
 

+.map-control > button.disabled .icon {
+    color: rgba(255, 255, 255, 0.5);
+}
+

 
 /* Fullscreen Button (disabled)
 ------------------------------------------------------- */
 
 /* Fullscreen Button (disabled)
 ------------------------------------------------------- */


@@ -5854,17 +5850,6 @@ div.full-screen > button:hover {
 
 /* Background / Map Data / Help Pane buttons
 ------------------------------------------------------- */
 
 /* Background / Map Data / Help Pane buttons
 ------------------------------------------------------- */

-.help-control > button {
-    border-radius: 0 0 0 4px;
-}
-[dir='rtl'] .help-control > button {
-    border-radius: 0 0 4px 0;
-}
-
-.map-data-control button {
-    border-radius: 0;
-}
-

 .background-control > button {
     border-radius: 4px 0 0 0;
 }
 .background-control > button {
     border-radius: 4px 0 0 0;
 }


@@ -5872,6 +5857,13 @@ div.full-screen > button:hover {
     border-radius: 0 4px 0 0;
 }
 
     border-radius: 0 4px 0 0;
 }
 

+.help-control > button {
+    border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .help-control > button {
+    border-radius: 0 0 4px 0;
+}
+

 
 /* Background / Map Data Settings
 ------------------------------------------------------- */
 
 /* Background / Map Data Settings
 ------------------------------------------------------- */


@@ -5896,6 +5888,7 @@ div.full-screen > button:hover {
     background-color: #fff;
     color: #7092ff;
     position: relative;
     background-color: #fff;
     color: #7092ff;
     position: relative;

+    display: flex;

 }
 
 .layer-list:empty {
 }
 
 .layer-list:empty {


@@ -5926,9 +5919,8 @@ div.full-screen > button:hover {
 }
 
 .layer-list li.best > div.best {
 }
 
 .layer-list li.best > div.best {

-    display: inline-block;

     padding: 5px;
     padding: 5px;

-    float: right;
+    flex: 0 0 auto;

 }
 
 [dir='rtl'] .list-item-data-browse svg {
 }
 
 [dir='rtl'] .list-item-data-browse svg {


@@ -5937,14 +5929,14 @@ div.full-screen > button:hover {
 
 /* make sure tooltip fits in map-control panel */
 /* if too wide, placement will be wrong the first time it displays */
 
 /* make sure tooltip fits in map-control panel */
 /* if too wide, placement will be wrong the first time it displays */

-.layer-list li.best .tooltip-inner {
+.layer-list li.best .popover-inner {

     max-width: 160px;
 }
 
 .layer-list label {
     max-width: 160px;
 }
 
 .layer-list label {

-    display: block;

     padding: 5px 10px;
     cursor: pointer;
     padding: 5px 10px;
     cursor: pointer;

+    flex: 1 1 auto;

 }
 
 [dir='ltr'] .layer-list .indented label {
 }
 
 [dir='ltr'] .layer-list .indented label {


@@ -5963,7 +5955,6 @@ div.full-screen > button:hover {
 
 .map-data-pane .layer-list button,
 .background-pane .layer-list button {
 
 .map-data-pane .layer-list button,
 .background-pane .layer-list button {

-    float: right;

     height: 100%;
     border-left: 1px solid #ccc;
     border-radius: 0;
     height: 100%;
     border-left: 1px solid #ccc;
     border-radius: 0;


@@ -5972,7 +5963,6 @@ div.full-screen > button:hover {
 }
 [dir='rtl'] .map-data-pane .layer-list button,
 [dir='rtl'] .background-pane .layer-list button {
 }
 [dir='rtl'] .map-data-pane .layer-list button,
 [dir='rtl'] .background-pane .layer-list button {

-    float: left;

     border-left: none;
     border-right: 1px solid #ccc;
 }
     border-left: none;
     border-right: 1px solid #ccc;
 }


@@ -5982,12 +5972,12 @@ div.full-screen > button:hover {
     opacity: 0.5;
 }
 
     opacity: 0.5;
 }
 

-.map-data-pane .layer-list button:first-of-type,
-.background-pane .layer-list button:first-of-type {
+.map-data-pane .layer-list button:last-of-type,
+.background-pane .layer-list button:last-of-type {

     border-radius: 0 3px 3px 0;
 }
     border-radius: 0 3px 3px 0;
 }

-[dir='rtl'] .map-data-pane .layer-list button:first-of-type,
-[dir='rtl'] .background-pane .layer-list button:first-of-type {
+[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
+[dir='rtl'] .background-pane .layer-list button:last-of-type {

     border-radius: 3px 0 0 3px;
 }
 
     border-radius: 3px 0 0 3px;
 }
 


@@ -6033,7 +6023,7 @@ div.full-screen > button:hover {
 }
 [dir='rtl'] .issue-label .issue-info-button {
     border-left: 0;
 }
 [dir='rtl'] .issue-label .issue-info-button {
     border-left: 0;

-    border-right: 1px solid;
+    border-right: 1px solid #ccc;

 }
 .issue-container .issue-label .issue-info-button .icon {
     opacity: 0.5;
 }
 .issue-container .issue-label .issue-info-button .icon {
     opacity: 0.5;


@@ -6229,7 +6219,8 @@ button.autofix.action.active {
 }
 
 input.square-degrees-input {
 }
 
 input.square-degrees-input {

-    padding: 2px;
+    padding: 2px !important; /* important needed for rtl */
+    width: 40px;

     height: unset;
     text-align: center;
     background: rgba(0,0,0,0);
     height: unset;
     text-align: center;
     background: rgba(0,0,0,0);


@@ -6700,7 +6691,6 @@ li.issue-fix-item:not(.actionable) .fix-icon {
 
 /* hide and remove from layout */
 .inspector-hidden,
 
 /* hide and remove from layout */
 .inspector-hidden,

-.inspector-hover .preset-list-button-wrap .preset-favorite-button,

 .inspector-hover .preset-list-button-wrap .tag-reference-button,
 .inspector-hover label input[type="checkbox"],
 .inspector-hover label input[type="radio"],
 .inspector-hover .preset-list-button-wrap .tag-reference-button,
 .inspector-hover label input[type="checkbox"],
 .inspector-hover label input[type="radio"],


@@ -7343,6 +7333,9 @@ img.tile-debug {
     margin-right: 5px;
     padding: 5px 5px 5px 0;
 }
     margin-right: 5px;
     padding: 5px 5px 5px 0;
 }

+#about-list li:empty {
+    display: none;
+}

 
 #about-list li:last-child {
     border-left: 0;
 
 #about-list li:last-child {
     border-left: 0;


@@ -7353,20 +7346,45 @@ img.tile-debug {
     border-right: none;
 }
 
     border-right: none;
 }
 

-.source-switch a {
-    padding: 2px 4px 4px 4px;
+#about-list a.chip {
+    padding: 2px 4px 3px 4px;

     border-radius: 2px;
     border-radius: 2px;

+    color: #eee;

 }
 }

-.source-switch a.live {
+#about-list a.chip .icon {
+    width: 14px;
+    height: 14px;
+    margin-top: 3px;
+}
+[dir='ltr'] #about-list a.chip .icon,
+[dir='ltr'] #about-list a.chip span {
+    margin-right: 3px;
+}
+[dir='rtl'] #about-list a.chip .icon,
+[dir='rtl'] #about-list a.chip span {
+    margin-left: 3px;
+}
+
+.source-switch a.chip.live {

     background: #d32232;
     color: #fff;
 }
 
     background: #d32232;
     color: #fff;
 }
 

-.feature-warning a {
+.feature-warning a.chip {

     background: #1e90ff;
     background: #1e90ff;

-    padding: 2px 4px 4px 4px;
-    border-radius: 2px;
-    color: #eee;
+}
+
+.issues-info a.chip.resolved-count {
+    background: #15911E;
+}
+.issues-info a.chip.warnings-count {
+    background: #DF8500;
+}
+[dir='ltr'] .issues-info a.chip:not(:last-child) {
+    margin-right: 5px;
+}
+[dir='rtl'] .issues-info a.chip:not(:last-child) {
+    margin-left: 5px;

 }
 
 .user-list a:not(:last-child):after {
 }
 
 .user-list a:not(:last-child):after {


@@ -7375,7 +7393,7 @@ img.tile-debug {
 
 .api-status {
     text-align: right;
 
 .api-status {
     text-align: right;

-    padding: 0px 10px;
+    padding: 1px 10px;

     color: #eee;
     flex: 1 1 auto;
 }
     color: #eee;
     flex: 1 1 auto;
 }


@@ -7389,11 +7407,13 @@ img.tile-debug {
     background: #a22;
 }
 
     background: #a22;
 }
 

-.api-status-login {
-    color: #aaf;
+.api-status a {
+    text-decoration: underline;
+    color: #ccc;
+    pointer-events: all;

 }
 }

-.api-status-login:hover {
-    color: #ccf;
+.api-status a:hover {
+    color: inherit;

 }
 
 /* Notification Badges
 }
 
 /* Notification Badges


@@ -7488,6 +7508,9 @@ img.tile-debug {
     padding: 20px;
     border-bottom: 1px solid #ccc;
 }
     padding: 20px;
     border-bottom: 1px solid #ccc;
 }

+.modal-section p:not(:last-of-type) {
+    padding-bottom: 20px;
+}

 .modal-section.header h3 {
     padding: 0;
 }
 .modal-section.header h3 {
     padding: 0;
 }


@@ -7710,7 +7733,7 @@ img.tile-debug {
 .modal-shortcuts .shortcut-tab {
     display: flex;
     flex-flow: row wrap;
 .modal-shortcuts .shortcut-tab {
     display: flex;
     flex-flow: row wrap;

-    justify-content: center;
+    justify-content: space-around;

 }
 
 .modal-shortcuts .shortcut-column {
 }
 
 .modal-shortcuts .shortcut-column {


@@ -7741,20 +7764,7 @@ img.tile-debug {
 }
 
 .modal-shortcuts .shortcut-keys kbd {
 }
 
 .modal-shortcuts .shortcut-keys kbd {

-    display: inline-block;
-    text-align: center;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 12px;
-    min-width: 12px;

     color: #555;
     color: #555;

-    vertical-align: baseline;
-    background-color: #fcfcfc;
-    border: solid 1px #ccc;
-    margin: 0 2px;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;

 }
 
 svg.mouseclick use.left {
 }
 
 svg.mouseclick use.left {


@@ -7954,7 +7964,8 @@ svg.mouseclick use.right {
     border-radius: 8px;
 }
 
     border-radius: 8px;
 }
 

-.notice .zoom-to:hover {
+.notice .zoom-to:hover,
+.notice .zoom-to:focus {

     background: rgba(0,0,0,0.6);
 }
 
     background: rgba(0,0,0,0.6);
 }
 


@@ -7972,9 +7983,11 @@ svg.mouseclick use.right {
 
 /* Tooltips
 ------------------------------------------------------- */
 
 /* Tooltips
 ------------------------------------------------------- */

-.tooltip {
+.popover {

     position: absolute;
     display: none;
     position: absolute;
     display: none;

+}
+.tooltip {

     color: #333;
     font-size: 12px;
     white-space: initial;
     color: #333;
     font-size: 12px;
     white-space: initial;


@@ -7982,32 +7995,60 @@ svg.mouseclick use.right {
 .tooltip:not(.curtain-tooltip) {
     pointer-events: none;
 }
 .tooltip:not(.curtain-tooltip) {
     pointer-events: none;
 }

-.tooltip.in {
-    opacity: 0.9;
+.popover.in {

     z-index: 5000;
     height: auto;
     display: block;
 }
     z-index: 5000;
     height: auto;
     display: block;
 }

+.tooltip.in {
+    opacity: 0.95;
+}
+.popover.top {
+    margin-top: -4px;
+}
+.popover.right {
+    margin-left: 4px;
+}
+.popover.bottom {
+    margin-top: 4px;
+}
+.popover.left {
+    margin-left: -4px;
+}
+.popover.arrowed.top {
+    margin-top: -10px;
+}
+.popover.arrowed.right {
+    margin-left: 10px;
+}
+.popover.arrowed.bottom {
+    margin-top: 10px;
+}
+.popover.arrowed.left {
+    margin-left: -10px;
+}
+.bar-button .tooltip.arrowed.bottom {
+    margin-top: 20px;
+}

 .tooltip.top {
 .tooltip.top {

-    margin-top: -20px;

     text-align: center;
 }
 .tooltip.right {
     text-align: center;
 }
 .tooltip.right {

-    margin-left: 20px;

     text-align: left;
 }
 .tooltip.bottom {
     text-align: left;
 }
 .tooltip.bottom {

-    margin-top: 20px;

     text-align: center;
 }
 .tooltip.left {
     text-align: center;
 }
 .tooltip.left {

-    margin-left: -20px;

     text-align: right;
 }
 
     text-align: right;
 }
 

-.tooltip-inner {
-    display: inline-block;
-    border-radius: 3px;
+.popover-inner {
+    border-radius: inherit;
+}
+
+.tooltip .popover-inner {
+    border-radius: 4px;

     max-width: 200px;
     min-width: 80px;
     padding: 10px;
     max-width: 200px;
     min-width: 80px;
     padding: 10px;


@@ -8062,42 +8103,44 @@ svg.mouseclick use.right {
     border-right-color: #fff;
     border-width: 5px 5px 5px 0;
 }
     border-right-color: #fff;
     border-width: 5px 5px 5px 0;
 }

-
-.tooltip-arrow {
+.popover-arrow {

     position: absolute;
     width: 0;
     height: 0;
     border-color: transparent;
     border-style: solid;
 }
     position: absolute;
     width: 0;
     height: 0;
     border-color: transparent;
     border-style: solid;
 }

-.tooltip.top .tooltip-arrow {
+.popover.top .popover-arrow {

     bottom: -5px;
     left: 50%;
     margin-left: -5px;
     border-top-color: #fff;
     border-width: 5px 5px 0;
 }
     bottom: -5px;
     left: 50%;
     margin-left: -5px;
     border-top-color: #fff;
     border-width: 5px 5px 0;
 }

-.tooltip.right .tooltip-arrow {
+.popover.right .popover-arrow {

     top: 50%;
     left: -5px;
     margin-top: -5px;
     border-right-color: #fff;
     border-width: 5px 5px 5px 0;
 }
     top: 50%;
     left: -5px;
     margin-top: -5px;
     border-right-color: #fff;
     border-width: 5px 5px 5px 0;
 }

-.tooltip.left .tooltip-arrow {
+.popover.left .popover-arrow {

     top: 50%;
     right: -5px;
     margin-top: -5px;
     border-left-color: #fff;
     border-width: 5px 0 5px 5px;
 }
     top: 50%;
     right: -5px;
     margin-top: -5px;
     border-left-color: #fff;
     border-width: 5px 0 5px 5px;
 }

-.tooltip.bottom .tooltip-arrow {
+.popover.bottom .popover-arrow {

     top: -5px;
     left: 50%;
     margin-left: -5px;
     border-bottom-color: #fff;
     border-width: 0 5px 5px;
 }
     top: -5px;
     left: 50%;
     margin-left: -5px;
     border-bottom-color: #fff;
     border-width: 0 5px 5px;
 }

+.popover:not(.arrowed) .popover-arrow {
+    display: none;
+}

 
 .tooltip-heading {
     font-weight: bold;
 
 .tooltip-heading {
     font-weight: bold;


@@ -8114,49 +8157,58 @@ svg.mouseclick use.right {
     margin: 10px -10px -10px -10px;
     border-radius: 0 0 3px 3px;
 }
     margin: 10px -10px -10px -10px;
     border-radius: 0 0 3px 3px;
 }

-.tooltip-inner .keyhint {
+.popover-inner .shortcut {

     font-weight: bold;
     margin-left: 5px;
 }
 
     font-weight: bold;
     margin-left: 5px;
 }
 

-[dir='rtl'] .tooltip-inner .keyhint {
+[dir='rtl'] .popover-inner .shortcut {

     margin-left: 0;
     margin-right: 5px;
 }
 
 /* dark tooltips for sidebar / panels */
     margin-left: 0;
     margin-right: 5px;
 }
 
 /* dark tooltips for sidebar / panels */

-.tooltip.dark.top .tooltip-arrow,
-.map-pane .tooltip.top .tooltip-arrow,
-#sidebar .tooltip.top .tooltip-arrow {
+.tooltip.dark.top .popover-arrow,
+.map-pane .tooltip.top .popover-arrow,
+#sidebar .tooltip.top .popover-arrow {

     border-top-color: #000;
 }
     border-top-color: #000;
 }

-.tooltip.dark.bottom .tooltip-arrow,
-.map-pane .tooltip.bottom .tooltip-arrow,
-#sidebar .tooltip.bottom .tooltip-arrow {
+.tooltip.dark.bottom .popover-arrow,
+.map-pane .tooltip.bottom .popover-arrow,
+#sidebar .tooltip.bottom .popover-arrow {

     border-bottom-color: #000;
 }
     border-bottom-color: #000;
 }

-.tooltip.dark.left .tooltip-arrow,
-.map-pane .tooltip.left .tooltip-arrow,
-#sidebar .tooltip.left .tooltip-arrow {
+.tooltip.dark.left .popover-arrow,
+.map-pane .tooltip.left .popover-arrow,
+#sidebar .tooltip.left .popover-arrow {

     border-left-color: #000;
 }
     border-left-color: #000;
 }

-.tooltip.dark.right .tooltip-arrow,
-.map-pane .tooltip.right .tooltip-arrow,
-#sidebar .tooltip.right .tooltip-arrow {
+.tooltip.dark.right .popover-arrow,
+.map-pane .tooltip.right .popover-arrow,
+#sidebar .tooltip.right .popover-arrow {

     border-right-color: #000;
 }
     border-right-color: #000;
 }

-.tooltip.dark .tooltip-inner,
+.tooltip.dark .popover-inner,

 .tooltip.dark .tooltip-heading,
 .tooltip.dark .keyhint-wrap,
 .tooltip.dark .tooltip-heading,
 .tooltip.dark .keyhint-wrap,

-.map-pane .tooltip-inner,
+.map-pane .popover-inner,

 .map-pane .tooltip-heading,
 .map-pane .keyhint-wrap,
 .map-pane .tooltip-heading,
 .map-pane .keyhint-wrap,

-#sidebar .tooltip-inner,
+#sidebar .popover-inner,

 #sidebar .tooltip-heading,
 #sidebar .keyhint-wrap {
     background: #000;
     color: #ccc;
 }
 #sidebar .tooltip-heading,
 #sidebar .keyhint-wrap {
     background: #000;
     color: #ccc;
 }

+.tooltip.dark kbd,
+.map-pane .tooltip kbd,
+#sidebar .tooltip kbd {
+    background-color: #666;
+    border: solid 1px #444;
+    border-bottom-color: #333;
+    box-shadow: inset 0 -1px 0 #333;
+    color: #eee;
+}

 
 /* Exceptions for tooltip layouts */
 
 
 /* Exceptions for tooltip layouts */
 


@@ -8165,44 +8217,6 @@ svg.mouseclick use.right {
     margin-top: -5px;
 }
 
     margin-top: -5px;
 }
 

-/* Uncramp map-control tooltips */
-.map-control .tooltip {
-    min-width: 160px;
-}
-.map-control .shortcuts .tooltip {
-    max-width: 160px;
-}
-
-/* Move over tooltips that are near the edge of screen */
-[dir='ltr'] .sidebar-toggle .tooltip {
-    left: 0 !important;
-}
-[dir='rtl'] .sidebar-toggle .tooltip {
-    right: 0 !important;
-}
-[dir='ltr'] .sidebar-toggle .tooltip .tooltip-arrow {
-    left: 20px;
-}
-[dir='rtl'] .sidebar-toggle .tooltip .tooltip-arrow {
-    right: 20px;
-}
-[dir='ltr'] .save .tooltip {
-    left: auto !important;
-    right: 0 !important;
-}
-[dir='rtl'] .save .tooltip {
-    right: auto !important;
-    left: 0 !important;
-}
-[dir='ltr'] .save .tooltip .tooltip-arrow {
-    left: auto;
-    right: 36px;
-}
-[dir='rtl'] .save .tooltip .tooltip-arrow {
-    right: auto;
-    left: 36px;
-}
-

 li:first-of-type .badge .tooltip,
 li.hide + li.version .badge .tooltip {
     left: auto !important;
 li:first-of-type .badge .tooltip,
 li.hide + li.version .badge .tooltip {
     left: auto !important;


@@ -8213,13 +8227,13 @@ li.hide + li.version .badge .tooltip {
     left: 5px !important;
     right: auto !important;
 }
     left: 5px !important;
     right: auto !important;
 }

-li:first-of-type .badge .tooltip .tooltip-arrow,
-li.hide + li.version .badge .tooltip .tooltip-arrow {
+li:first-of-type .badge .tooltip .popover-arrow,
+li.hide + li.version .badge .tooltip .popover-arrow {

     right: 15px !important;
     left: auto !important;
 }
     right: 15px !important;
     left: auto !important;
 }

-[dir='rtl'] li:first-of-type .badge .tooltip .tooltip-arrow,
-[dir='rtl'] li.hide + li.version .badge .tooltip .tooltip-arrow {
+[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
+[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {

     left: 15px !important;
     right: auto !important;
 }
     left: 15px !important;
     right: auto !important;
 }


@@ -8268,8 +8282,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 /* Contextual Edit Menu
 ------------------------------------------------------- */
 .edit-menu-tooltip {
 /* Contextual Edit Menu
 ------------------------------------------------------- */
 .edit-menu-tooltip {

-    display: none;
-    position: absolute;

     width: 200px;
 }
 
     width: 200px;
 }
 


@@ -8419,14 +8431,14 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     text-align: right;
 }
 
     text-align: right;
 }
 

-.curtain-tooltip .tooltip-inner {
+.curtain-tooltip .popover-inner {

     font-size: 15px;
     position: relative;
     padding: 20px;
 }
 
     font-size: 15px;
     position: relative;
     padding: 20px;
 }
 

-.curtain-tooltip .tooltip-inner .button-section,
-.curtain-tooltip .tooltip-inner .instruction {
+.curtain-tooltip .popover-inner .button-section,
+.curtain-tooltip .popover-inner .instruction {

     font-weight: bold;
     display: block;
     border-top: 1px solid #ccc;
     font-weight: bold;
     display: block;
     border-top: 1px solid #ccc;


@@ -8436,17 +8448,17 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     padding: 10px 20px 0 20px;
 }
 
     padding: 10px 20px 0 20px;
 }
 

-.curtain-tooltip .tooltip-inner .button-section button {
+.curtain-tooltip .popover-inner .button-section button {

     width: 66.6666%;
 }
 
     width: 66.6666%;
 }
 

-.curtain-tooltip .tooltip-inner .instruction:only-child {
+.curtain-tooltip .popover-inner .instruction:only-child {

     border: 0;
     padding: 0;
     margin: 0;
 }
 
     border: 0;
     padding: 0;
     margin: 0;
 }
 

-.curtain-tooltip .tooltip-inner .icon.pre-text {
+.curtain-tooltip .popover-inner .icon.pre-text {

     vertical-align: text-top;
     margin-right: 0;
     margin-left: 0;
     vertical-align: text-top;
     margin-right: 0;
     margin-left: 0;


@@ -8509,3 +8521,12 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     width: 100px;
     color: #7092ff;
 }
     width: 100px;
     color: #7092ff;
 }

+
+
+.list-item-photos.list-item-mapillary-map-features .request-data-link {
+    float: right;
+    margin-top: -20px;
+}
+[dir='rtl'] .list-item-photos.list-item-mapillary-map-features .request-data-link {
+    float: left;
+}