vendor/assets/iD/iD.css.erb

   1 /* http://meyerweb.com/eric/tools/css/reset/
   2    v2.0 | 20110126
   3    License: none (public domain)
   4 */
   5
   6 html, body, div, span, applet, object, iframe,
   7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   8 a, abbr, acronym, address, big, cite, code,
   9 del, dfn, em, img, ins, kbd, q, s, samp,
  10 small, strike, strong, sub, sup, tt, var,
  11 b, u, i, center,
  12 dl, dt, dd, ol, ul, li,
  13 fieldset, form, label, legend,
  14 table, caption, tbody, tfoot, thead, tr, th, td,
  15 article, aside, canvas, details, embed,
  16 figure, figcaption, footer, header, hgroup,
  17 menu, nav, output, ruby, section, summary,
  18 time, mark, audio, video {
  19         margin: 0;
  20         padding: 0;
  21         border: 0;
  22         font-size: 100%;
  23         font: inherit;
  24         vertical-align: baseline;
  25 }
  26 /* HTML5 display-role reset for older browsers */
  27 article, aside, details, figcaption, figure,
  28 footer, header, hgroup, menu, nav, section {
  29         display: block;
  30 }
  31 body {
  32         line-height: 1;
  33 }
  34 ol, ul {
  35         list-style: none;
  36 }
  37 blockquote, q {
  38         quotes: none;
  39 }
  40 blockquote:before, blockquote:after,
  41 q:before, q:after {
  42         content: '';
  43         content: none;
  44 }
  45 table {
  46         border-collapse: collapse;
  47         border-spacing: 0;
  48 }
  49 a { text-decoration: none;}
  50 /*
  51  * 1. Corrects font family not being inherited in all browsers.
  52  * 2. Corrects font size not being inherited in all browsers.
  53  * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
  54  */
  55
  56 button,
  57 input,
  58 select,
  59 textarea {
  60     font-family: inherit; /* 1 */
  61     font-size: 100%; /* 2 */
  62     margin: 0; /* 3 */
  63     padding: 0;
  64 }
  65
  66 /*
  67  * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
  68  * the UA stylesheet.
  69  */
  70
  71 button,
  72 input {
  73     line-height: normal;
  74 }
  75
  76 /* Hide default number spinner controls */
  77 input[type="number"]::-webkit-inner-spin-button,
  78 input[type="number"]::-webkit-outer-spin-button {
  79 display: none;
  80 }
  81
  82 /*
  83  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  84  *    and `video` controls.
  85  * 2. Corrects inability to style clickable `input` types in iOS.
  86  * 3. Improves usability and consistency of cursor style between image-type
  87  *    `input` and others.
  88  */
  89
  90 button,
  91 html input[type="button"], /* 1 */
  92 input[type="reset"],
  93 input[type="submit"] {
  94     -webkit-appearance: button; /* 2 */
  95     cursor: pointer; /* 3 */
  96 }
  97
  98 /*
  99  * Re-set default cursor for disabled elements.
 100  */
 101
 102 button[disabled],
 103 input[disabled] {
 104     cursor: default;
 105 }
 106
 107 /*
 108  * 1. Addresses box sizing set to `content-box` in IE 8/9.
 109  * 2. Removes excess padding in IE 8/9.
 110  */
 111
 112 input[type="checkbox"],
 113 input[type="radio"] {
 114     box-sizing: border-box; /* 1 */
 115     padding: 0; /* 2 */
 116 }
 117
 118 /*
 119  * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 120  * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 121  *    (include `-moz` to future-proof).
 122  */
 123
 124 input[type="search"] {
 125     -webkit-appearance: none; /* 1 */
 126     -moz-box-sizing: border-box;
 127     -webkit-box-sizing: border-box; /* 2 */
 128     box-sizing: border-box;
 129 }
 130
 131 /*
 132  * Removes inner padding and search cancel button in Safari 5 and Chrome
 133  * on OS X.
 134  */
 135
 136 input[type="search"]::-webkit-search-cancel-button,
 137 input[type="search"]::-webkit-search-decoration {
 138     -webkit-appearance: none;
 139 }
 140
 141 /*
 142  * Removes inner padding and border in Firefox 4+.
 143  */
 144
 145 button::-moz-focus-inner,
 146 input::-moz-focus-inner {
 147     border: 0;
 148     padding: 0;
 149 }
 150
 151 /*
 152 ** Markup free clearing
 153 ** Details: http://www.positioniseverything.net/easyclearing.html
 154 */
 155 .cf:before,
 156 .cf:after {
 157     content: " "; /* 1 */
 158     display: table; /* 2 */
 159 }
 160
 161 .cf:after {
 162     clear: both;
 163 }
 164 /* base styles */
 165 .layer-osm path {
 166     fill: none;
 167 }
 168
 169 /* IE/Edge needs these overrides for markers to show up */
 170 .layer-osm path.oneway-marker-path          { fill: #000; }
 171 .layer-osm path.sided-marker-natural-path   { fill: rgb(170, 170, 170); }
 172 .layer-osm path.sided-marker-coastline-path { fill: #77dede; }
 173 .layer-osm path.sided-marker-barrier-path   { fill: #ddd; }
 174 .layer-osm path.sided-marker-man_made-path  { fill: #fff; }
 175
 176 /* IE/Edge rule for <use> marker style */
 177 .layer-osm path.viewfield-marker-path {
 178     fill: #333;
 179     fill-opacity: 0.75;
 180     stroke: #fff;
 181     stroke-width: 0.5px;
 182     stroke-opacity: 0.75;
 183 }
 184 .fill-wireframe .layer-osm path.viewfield-marker-path {   /* IE/Edge rule for <use> marker style */
 185     fill: none;
 186 }
 187
 188 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
 189 .layer-osm use.icon path { fill: #333; }                       /* FF svg Maki icons */
 190 .layer-osm .turn use path { fill: #000; }                      /* FF turn restriction icons */
 191 #turn-only-shape2, #turn-only-u-shape2 { fill: #7092ff; }      /* FF turn-only, turn-only-u */
 192 #turn-no-shape2, #turn-no-u-shape2     { fill: #e06d5f; }      /* FF turn-no, turn-no-u */
 193 #turn-yes-shape2, #turn-yes-u-shape2   { fill: #8cd05f; }      /* FF turn-yes, turn-yes-u */
 194
 195
 196 /* No interactivity except what we specifically allow */
 197 .data-layer.osm *,
 198 .data-layer.notes *,
 199 .data-layer.keepRight *,
 200 .data-layer.improveOSM * {
 201     pointer-events: none;
 202 }
 203
 204 .lasso #map {
 205     pointer-events: visibleStroke;
 206 }
 207
 208
 209 /* `.target` objects are interactive */
 210 /* They can be picked up, clicked, hovered, or things can connect to them */
 211 .qa_error.target,
 212 .note.target,
 213 .node.target,
 214 .turn .target {
 215     pointer-events: fill;
 216     fill-opacity: 0.8;
 217     fill: currentColor;
 218     stroke: none;
 219 }
 220
 221 .way.target {
 222     pointer-events: stroke;
 223     fill: none;
 224     stroke-width: 12;
 225     stroke-opacity: 0.8;
 226     stroke: currentColor;
 227     stroke-linecap: round;
 228     stroke-linejoin: round;
 229 }
 230
 231
 232 /* `.target-nope` objects are explicitly forbidden to join to */
 233 .surface:not(.nope-disabled) .node.target.target-nope,
 234 .surface:not(.nope-disabled) .way.target.target-nope {
 235     cursor: not-allowed;
 236 }
 237
 238
 239 /* `.active` objects (currently being drawn or dragged) are not interactive */
 240 /* This is important to allow the events to drop through to whatever is */
 241 /* below them on the map, so you can still hover and connect to other things. */
 242 .layer-osm .active {
 243     pointer-events: none !important;
 244 }
 245
 246 /* points, notes & QA */
 247
 248 /* points, notes, markers */
 249 g.qa_error .stroke,
 250 g.note .stroke {
 251     stroke: #222;
 252     stroke-width: 1;
 253     fill: #222;
 254     opacity: 0.6;
 255 }
 256
 257 g.qa_error.active .stroke,
 258 g.note.active .stroke {
 259     stroke: #222;
 260     stroke-width: 1;
 261     fill: #222;
 262     opacity: 0.8;
 263 }
 264
 265 g.point .stroke {
 266     stroke: #444;
 267     stroke-width: 1;
 268     fill: #fff;
 269 }
 270
 271
 272 g.qa_error .shadow,
 273 g.point .shadow,
 274 g.note .shadow {
 275     fill: none;
 276     stroke: #f6634f;
 277     stroke-width: 16;
 278     stroke-opacity: 0;
 279 }
 280
 281 g.qa_error.hover:not(.selected) .shadow,
 282 g.note.hover:not(.selected) .shadow,
 283 g.point.related:not(.selected) .shadow,
 284 g.point.hover:not(.selected) .shadow {
 285     stroke-opacity: 0.5;
 286 }
 287
 288 g.qa_error.selected .shadow,
 289 g.note.selected .shadow,
 290 g.point.selected .shadow {
 291     stroke-opacity: 0.7;
 292 }
 293
 294 /* g.note ellipse.stroke, */
 295 g.point ellipse.stroke {
 296     display: none;
 297 }
 298 .mode-drag-note g.note.active ellipse.stroke,
 299 .mode-drag-node g.point.active ellipse.stroke {
 300     display: block;
 301 }
 302
 303
 304 /* vertices and midpoints */
 305 g.vertex .fill {
 306     fill: #000;
 307 }
 308 g.vertex .stroke {
 309     stroke: #666;
 310     stroke-width: 1;
 311     fill: white;
 312 }
 313 g.vertex.shared .stroke {
 314     fill: #bbb;
 315 }
 316 g.midpoint .fill {
 317     fill: #eee;
 318     stroke: #444;
 319     stroke-opacity: .6;
 320     opacity: .7;
 321 }
 322
 323 g.vertex .shadow,
 324 g.midpoint .shadow {
 325     stroke-width: 6;
 326     fill: #f6634f;
 327     fill-opacity: 0;
 328 }
 329
 330 g.vertex.related:not(.selected) .shadow,
 331 g.vertex.hover:not(.selected) .shadow,
 332 g.midpoint.related:not(.selected) .shadow,
 333 g.midpoint.hover:not(.selected) .shadow {
 334     fill-opacity: 0.5;
 335 }
 336
 337 g.vertex.selected .shadow {
 338     fill-opacity: 0.7;
 339 }
 340
 341
 342 /* lines */
 343 .preset-icon .icon.iD-other-line {
 344     color: #989898;
 345 }
 346 .preset-icon-container path.line.casing {
 347     stroke: #afafaf;
 348 }
 349
 350 path.line {
 351     stroke-linecap: round;
 352     stroke-linejoin: round;
 353 }
 354
 355 path.stroke {
 356     stroke: #000;
 357     stroke-width: 4;
 358 }
 359
 360 path.shadow {
 361     stroke: #f6634f;
 362     stroke-width: 16;
 363     stroke-opacity: 0;
 364     stroke-linecap: round;
 365     stroke-linejoin: round;
 366 }
 367
 368 path.shadow.related:not(.selected),
 369 path.shadow.hover:not(.selected) {
 370     stroke-opacity: 0.4;
 371 }
 372
 373 path.shadow.selected {
 374     stroke-opacity: 0.7;
 375 }
 376
 377 path.line.stroke {
 378     stroke: #fff;
 379     stroke-width: 2;
 380 }
 381
 382
 383 /* Labels / Markers */
 384 text {
 385     font-size: 10px;
 386     color: #222;
 387     opacity: 1;
 388 }
 389
 390 .oneway .textpath.tag-waterway {
 391     fill: #002F35;
 392 }
 393
 394 .onewaygroup path.oneway,
 395 .viewfieldgroup path.viewfield,
 396 .sidedgroup path.sided {
 397     stroke-width: 6px;
 398 }
 399
 400 text.arealabel-halo,
 401 text.linelabel-halo,
 402 text.pointlabel-halo,
 403 text.arealabel,
 404 text.linelabel,
 405 text.pointlabel {
 406     dominant-baseline: middle;
 407     text-anchor: middle;
 408     font-size: 12px;
 409     font-weight: bold;
 410     fill: #333;
 411     -webkit-transition: opacity 100ms linear;
 412     transition: opacity 100ms linear;
 413     -moz-transition: opacity 100ms linear;
 414 }
 415
 416 /* Opera doesn't support dominant-baseline. See #715 */
 417 /* Safari 10 seems to have regressed too */
 418 .linelabel-halo .textpath,
 419 .linelabel .textpath {
 420   baseline-shift: -33%;
 421   dominant-baseline: auto;
 422 }
 423
 424 .labels-group.halo text {
 425     opacity: 0.7;
 426     stroke: #fff;
 427     stroke-width: 5px;
 428     stroke-miterlimit: 1;
 429 }
 430
 431 text.nolabel {
 432     opacity: 0 !important;
 433 }
 434 text.point {
 435     font-size: 10px;
 436 }
 437
 438 .icon.areaicon-halo {
 439     opacity: 0.6;
 440     stroke: #999;
 441     stroke-width: 2px;
 442     stroke-miterlimit: 1;
 443 }
 444 .icon.areaicon {
 445     fill: #222;
 446     opacity: 0.8;
 447 }
 448
 449
 450 /* Wikidata-tagged */
 451 g.point.tag-wikidata path.stroke {
 452     stroke-width: 3px;
 453     stroke: #777;
 454     fill: #ddd;
 455 }
 456
 457
 458 /* Highlighting */
 459 g.point.highlighted .shadow,
 460 path.shadow.highlighted {
 461     stroke-opacity: 0.95;
 462     stroke: #7092ff;
 463 }
 464 g.vertex.highlighted .shadow {
 465     stroke-width: 7;
 466     stroke-opacity: 0.95;
 467     stroke: #7092ff;
 468 }
 469
 470 /* Turn Restrictions */
 471 .points-group.turns g.turn rect,
 472 .points-group.turns g.turn circle {
 473     fill: none;
 474 }
 475
 476 /* Turn restriction paths and vertices */
 477 .surface.tr .way.target,
 478 .surface.tr path.shadow.selected,
 479 .surface.tr path.shadow.related {
 480     stroke-width: 25px;
 481 }
 482
 483 .surface.tr path.shadow.selected,
 484 .surface.tr path.shadow.related,
 485 .surface.tr g.vertex.selected .shadow,
 486 .surface.tr g.vertex.related .shadow {
 487     stroke-opacity: 0.7;
 488     stroke: #777;
 489 }
 490 .surface.tr path.shadow.related.allow,
 491 .surface.tr g.vertex.related.allow .shadow {
 492     stroke: #5b3;
 493 }
 494 .surface.tr path.shadow.related.restrict,
 495 .surface.tr g.vertex.related.restrict .shadow {
 496     stroke: #d53;
 497 }
 498 .surface.tr path.shadow.related.only,
 499 .surface.tr g.vertex.related.only .shadow {
 500     stroke: #68f;
 501 }
 502
 503 /* Visual Diffs
 504 ------------------
 505 `highlight-edited` - visual diff activated
 506 `added` - entity was created by the user
 507 `moved` - node has different coordinates
 508 `geometry-edited` - way has different nodes
 509 `segment-edited` - one or both adjacents nodes moved
 510 `retagged` - some tagging change has occurred
 511 */
 512
 513 /* Vertex visual diffs */
 514 .highlight-edited g.points g.node.vertex.added > circle.shadow,
 515 .highlight-edited g.points g.node.vertex.retagged > circle.shadow,
 516 .highlight-edited g.points g.node.vertex.moved > circle.shadow {
 517     fill-opacity: 0.8;
 518 }
 519 .highlight-edited g.points g.node.vertex.added > circle.shadow {
 520     fill: rgb(133, 255, 103);
 521 }
 522 .highlight-edited g.points g.node.vertex.retagged > circle.shadow {
 523     fill: #fcde5a;
 524 }
 525 .highlight-edited g.points g.node.vertex.moved > circle.shadow {
 526     fill: rgb(255, 126, 46);
 527 }
 528
 529 /* Point visual diffs */
 530 .highlight-edited g.points g.node.point.added > path.shadow,
 531 .highlight-edited g.points g.node.point.retagged > path.shadow,
 532 .highlight-edited g.points g.node.point.moved > path.shadow {
 533     stroke-opacity: 0.8;
 534     stroke-width: 10;
 535 }
 536 .highlight-edited g.points g.node.point.added > path.shadow {
 537     stroke: rgb(133, 255, 103);
 538 }
 539 .highlight-edited g.points g.node.point.retagged > path.shadow {
 540     stroke: #fcde5a;
 541 }
 542 .highlight-edited g.points g.node.point.moved > path.shadow {
 543     stroke: rgb(255, 126, 46);
 544 }
 545
 546 /* Line/area segment visual diffs
 547 - segments are rendered on top of the ways for convenience and to differentiate
 548   them from entire line diffs, so make them thin
 549 */
 550 .highlight-edited g.lines > path.line.segment-edited,
 551 .highlight-edited g.areas > path.area.segment-edited {
 552     stroke: rgb(255, 126, 46);
 553     stroke-dasharray: 10, 3;
 554     stroke-width: 1.5 !important;
 555     stroke-opacity: 1;
 556 }
 557
 558 /* Entire line/area visual diffs */
 559 .highlight-edited path.line.shadow.added,
 560 .highlight-edited path.line.shadow.retagged,
 561 .highlight-edited path.line.shadow.geometry-edited,
 562 .highlight-edited path.area.shadow.added,
 563 .highlight-edited path.area.shadow.retagged,
 564 .highlight-edited path.area.shadow.geometry-edited {
 565     stroke-opacity: 0.6;
 566 }
 567 .highlight-edited.fill-wireframe path.line.shadow.added,
 568 .highlight-edited.fill-wireframe path.line.shadow.retagged,
 569 .highlight-edited.fill-wireframe path.line.shadow.geometry-edited,
 570 .highlight-edited.fill-wireframe path.area.shadow.added,
 571 .highlight-edited.fill-wireframe path.area.shadow.retagged,
 572 .highlight-edited.fill-wireframe path.area.shadow.geometry-edited {
 573     stroke-width: 3;
 574 }
 575 .highlight-edited path.line.shadow.added,
 576 .highlight-edited path.area.shadow.added {
 577     stroke: rgb(133, 255, 103);
 578 }
 579 .highlight-edited path.area.shadow.retagged,
 580 .highlight-edited path.line.shadow.retagged {
 581     stroke: #fcde5a;
 582 }
 583 .highlight-edited path.line.shadow.geometry-edited,
 584 .highlight-edited path.area.shadow.geometry-edited {
 585     stroke: rgb(255, 126, 46);
 586 }
 587
 588 /* Default - light gray */
 589 path.area.stroke {
 590     stroke: rgb(170, 170, 170);
 591     stroke-width: 1;
 592 }
 593 path.area.fill {
 594     stroke-width: 0;
 595     stroke: rgba(255, 255, 255, 0.3);
 596     fill: rgba(255, 255, 255, 0.3);
 597     fill-rule: evenodd;
 598 }
 599 .preset-icon-fill path.fill {
 600     stroke: rgb(170, 170, 170);
 601     fill: rgba(170, 170, 170, 0.3);
 602 }
 603
 604 path.shadow.old-multipolygon,
 605 path.stroke.old-multipolygon {
 606     stroke-dasharray: 100, 5;
 607     stroke-linecap: butt;
 608 }
 609
 610
 611 /* Green things */
 612 path.stroke.tag-natural,
 613 path.stroke.tag-natural-wood,
 614 path.stroke.tag-leisure-nature_reserve,
 615 path.stroke.tag-leisure-pitch,
 616 path.stroke.tag-leisure-track,
 617 path.stroke.tag-leisure-golf_course,
 618 path.stroke.tag-leisure-garden,
 619 path.stroke.tag-leisure-park,
 620 path.stroke.tag-landuse-recreation_ground,
 621 path.stroke.tag-landuse-forest,
 622 path.stroke.tag-landuse-grass,
 623 path.stroke.tag-landuse-flowerbed,
 624 path.stroke.tag-barrier-hedge {
 625     stroke: rgb(140, 208, 95);
 626 }
 627 path.fill.tag-natural,
 628 path.fill.tag-natural-wood,
 629 path.fill.tag-leisure-nature_reserve,
 630 path.fill.tag-leisure-pitch,
 631 path.fill.tag-leisure-track,
 632 path.fill.tag-leisure-golf_course,
 633 path.fill.tag-leisure-garden,
 634 path.fill.tag-leisure-park,
 635 path.fill.tag-landuse-recreation_ground,
 636 path.fill.tag-landuse-forest,
 637 path.fill.tag-landuse-grass,
 638 path.fill.tag-landuse-flowerbed,
 639 path.fill.tag-barrier-hedge {
 640     stroke: rgba(140, 208, 95, 0.3);
 641     fill: rgba(140, 208, 95, 0.3);
 642 }
 643 .pattern-color-forest,
 644 .pattern-color-forest_broadleaved,
 645 .pattern-color-forest_needleleaved,
 646 .pattern-color-forest_leafless,
 647 .pattern-color-wood,
 648 .pattern-color-grass {
 649     fill: rgba(140, 208, 95, 0.3);
 650 }
 651
 652
 653 /* Blue things */
 654 path.stroke.tag-amenity-fountain,
 655 path.stroke.tag-leisure-swimming_pool,
 656 path.stroke.tag-natural-bay,
 657 path.stroke.tag-natural-water {
 658     stroke: rgb(119, 211, 222);
 659 }
 660 path.fill.tag-amenity-fountain,
 661 path.fill.tag-leisure-swimming_pool,
 662 path.fill.tag-natural-bay,
 663 path.fill.tag-natural-water {
 664     stroke: rgba(119, 211, 222, 0.3);
 665     fill: rgba(119, 211, 222, 0.3);
 666 }
 667 .pattern-color-waves,
 668 .pattern-color-water_standing,
 669 .pattern-color-pond {
 670     fill: rgba(119, 211, 222, 0.3);
 671 }
 672
 673
 674 /* Yellow things */
 675 path.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
 676 path.stroke.tag-leisure-pitch.tag-sport-baseball,
 677 path.stroke.tag-leisure-pitch.tag-sport-softball,
 678 path.stroke.tag-leisure-track,
 679 path.stroke.tag-natural-beach,
 680 path.stroke.tag-natural-sand,
 681 path.stroke.tag-natural-scrub,
 682 path.stroke.tag-amenity-childcare,
 683 path.stroke.tag-amenity-kindergarten,
 684 path.stroke.tag-amenity-school,
 685 path.stroke.tag-amenity-college,
 686 path.stroke.tag-amenity-university {
 687     stroke: rgba(255, 255, 148, 0.75);
 688 }
 689 path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
 690 path.fill.tag-leisure-pitch.tag-sport-baseball,
 691 path.fill.tag-leisure-pitch.tag-sport-softball,
 692 path.fill.tag-leisure-track,
 693 path.fill.tag-natural-beach,
 694 path.fill.tag-natural-sand,
 695 path.fill.tag-natural-scrub,
 696 path.fill.tag-amenity-childcare,
 697 path.fill.tag-amenity-kindergarten,
 698 path.fill.tag-amenity-school,
 699 path.fill.tag-amenity-college,
 700 path.fill.tag-amenity-university {
 701     stroke: rgba(255, 255, 148, 0.25);
 702     fill: rgba(255, 255, 148, 0.25);
 703 }
 704 .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
 705 .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-baseball,
 706 .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-softball,
 707 .preset-icon-fill path.area.stroke.tag-leisure-track,
 708 .preset-icon-fill path.area.stroke.tag-natural-beach,
 709 .preset-icon-fill path.area.stroke.tag-natural-sand,
 710 .preset-icon-fill path.area.stroke.tag-natural-scrub,
 711 .preset-icon-fill path.area.stroke.tag-amenity-childcare,
 712 .preset-icon-fill path.area.stroke.tag-amenity-kindergarten,
 713 .preset-icon-fill path.area.stroke.tag-amenity-school,
 714 .preset-icon-fill path.area.stroke.tag-amenity-college,
 715 .preset-icon-fill path.area.stroke.tag-amenity-university {
 716     stroke: rgb(232, 232, 0);
 717 }
 718 .pattern-color-beach,
 719 .pattern-color-sand,
 720 .pattern-color-scrub {
 721     fill: rgba(255, 255, 148, 0.2);
 722 }
 723
 724
 725 /* Gold things */
 726 path.stroke.tag-landuse-residential,
 727 path.stroke.tag-status-construction {
 728     stroke: rgb(196, 189, 25);
 729 }
 730 path.fill.tag-landuse-residential,
 731 path.fill.tag-status-construction {
 732     stroke: rgba(196, 189, 25, 0.3);
 733     fill: rgba(196, 189, 25, 0.3);
 734 }
 735 .pattern-color-construction {
 736     fill: rgba(196, 189, 25, 0.3);
 737 }
 738
 739
 740 /* Orange things */
 741 path.stroke.tag-landuse-retail,
 742 path.stroke.tag-landuse-commercial,
 743 path.stroke.tag-landuse-landfill,
 744 path.stroke.tag-military,
 745 path.stroke.tag-landuse-military {
 746     stroke: rgb(214, 136, 26);
 747 }
 748 path.fill.tag-landuse-retail,
 749 path.fill.tag-landuse-commercial,
 750 path.fill.tag-landuse-landfill,
 751 path.fill.tag-military,
 752 path.fill.tag-landuse-military {
 753     stroke: rgba(214, 136, 26, 0.3);
 754     fill: rgba(214, 136, 26, 0.3);
 755 }
 756 .pattern-color-landfill {
 757     fill: rgba(214, 136, 26, 0.3);
 758 }
 759
 760
 761 /* Pink things */
 762 path.stroke.tag-landuse-industrial,
 763 path.stroke.tag-power-plant {
 764     stroke: rgb(228, 164, 245);
 765 }
 766 path.fill.tag-landuse-industrial,
 767 path.fill.tag-power-plant {
 768     stroke: rgba(228, 164, 245, 0.3);
 769     fill: rgba(228, 164, 245, 0.3);
 770 }
 771
 772
 773 /* Teal things */
 774 path.stroke.tag-natural-wetland {
 775     stroke: rgb(153, 225, 170);
 776 }
 777 .preset-icon-fill path.area.fill.tag-natural-wetland {
 778     fill: rgba(153, 225, 170, 0.2);
 779 }
 780 .pattern-color-wetland,
 781 .pattern-color-wetland_marsh,
 782 .pattern-color-wetland_swamp,
 783 .pattern-color-wetland_bog,
 784 .pattern-color-wetland_reedbed {
 785     fill: rgba(153, 225, 170, 0.3);
 786 }
 787
 788
 789 /* Light Green things */
 790 path.stroke.tag-landuse-cemetery,
 791 path.stroke.tag-landuse-orchard,
 792 path.stroke.tag-landuse-vineyard,
 793 path.stroke.tag-landuse-meadow,
 794 path.stroke.tag-landuse-farmland {
 795     stroke: rgb(191, 232, 63);
 796 }
 797 .preset-icon-fill path.area.fill.tag-landuse-cemetery,
 798 .preset-icon-fill path.area.fill.tag-landuse-orchard,
 799 .preset-icon-fill path.area.fill.tag-landuse-vineyard,
 800 .preset-icon-fill path.area.fill.tag-landuse-meadow,
 801 .preset-icon-fill path.area.fill.tag-landuse-farmland {
 802     fill: rgba(191, 232, 63, 0.2);
 803 }
 804 .pattern-color-cemetery,
 805 .pattern-color-cemetery_christian,
 806 .pattern-color-cemetery_buddhist,
 807 .pattern-color-cemetery_muslim,
 808 .pattern-color-cemetery_jewish,
 809 .pattern-color-orchard,
 810 .pattern-color-vineyard,
 811 .pattern-color-meadow,
 812 .pattern-color-farmland {
 813     fill: rgba(191, 232, 63, 0.2);
 814 }
 815
 816
 817 /* Tan things */
 818 path.stroke.tag-landuse-farmyard {
 819     stroke: rgb(245, 220, 186);
 820 }
 821 path.fill.tag-landuse-farmyard {
 822     stroke: rgba(245, 220, 186, 0.3);
 823     fill: rgba(245, 220, 186, 0.3);
 824 }
 825 .preset-icon-fill path.area.stroke.tag-landuse-farmyard {
 826     stroke: rgb(226, 177, 111);
 827 }
 828 .pattern-color-farmyard {
 829     fill: rgba(245, 220, 186, 0.3);
 830 }
 831
 832
 833 /* Dark Gray things */
 834 path.stroke.tag-amenity-parking,
 835 path.stroke.tag-landuse-railway,
 836 path.stroke.tag-landuse-quarry,
 837 path.stroke.tag-leisure-pitch.tag-sport-basketball,
 838 path.stroke.tag-leisure-pitch.tag-sport-skateboard,
 839 path.stroke.tag-man_made-adit,
 840 path.stroke.tag-man_made-groyne,
 841 path.stroke.tag-man_made-breakwater,
 842 path.stroke.tag-natural-bare_rock,
 843 path.stroke.tag-natural-cave_entrance,
 844 path.stroke.tag-natural-cliff,
 845 path.stroke.tag-natural-rock,
 846 path.stroke.tag-natural-scree,
 847 path.stroke.tag-natural-stone,
 848 path.stroke.tag-natural-shingle,
 849 path.stroke.tag-waterway-dam,
 850 path.stroke.tag-waterway-weir {
 851     stroke: rgb(170, 170, 170);
 852 }
 853 path.fill.tag-amenity-parking,
 854 path.fill.tag-landuse-railway,
 855 path.fill.tag-landuse-quarry,
 856 path.fill.tag-leisure-pitch.tag-sport-basketball,
 857 path.fill.tag-leisure-pitch.tag-sport-skateboard,
 858 path.fill.tag-man_made-adit,
 859 path.fill.tag-man_made-groyne,
 860 path.fill.tag-man_made-breakwater,
 861 path.fill.tag-natural-bare_rock,
 862 path.fill.tag-natural-cliff,
 863 path.fill.tag-natural-cave_entrance,
 864 path.fill.tag-natural-rock,
 865 path.fill.tag-natural-scree,
 866 path.fill.tag-natural-stone,
 867 path.fill.tag-natural-shingle,
 868 path.fill.tag-waterway-dam,
 869 path.fill.tag-waterway-weir {
 870     stroke: rgba(140, 140, 140, 0.5);
 871     fill: rgba(140, 140, 140, 0.5);
 872 }
 873 .pattern-color-quarry {
 874     fill: rgba(140, 140, 140, 0.5);
 875 }
 876
 877
 878 /* Light gray overrides */
 879 path.stroke.tag-natural-cave_entrance,
 880 path.stroke.tag-natural-glacier {
 881     stroke: rgb(170, 170, 170);
 882 }
 883 path.fill.tag-natural-cave_entrance,
 884 path.fill.tag-natural-glacier {
 885     stroke: rgba(255, 255, 255, 0.3);
 886     fill: rgba(255, 255, 255, 0.3);
 887 }
 888 .preset-icon-fill path.fill.tag-natural-cave_entrance,
 889 .preset-icon-fill path.fill.tag-natural-glacier {
 890     stroke: rgb(170, 170, 170);
 891     fill: rgba(170, 170, 170, 0.3);
 892 }
 893 preset-icon-container/* highways */
 894
 895 /* defaults */
 896 .preset-icon .icon.tag-highway.other-line {
 897     color: #fff;
 898     fill: #777;
 899 }
 900 path.line.casing.tag-highway {
 901     stroke: #444;
 902 }
 903 path.line.stroke.tag-highway {
 904     stroke: #ccc;
 905 }
 906
 907 /* wide highways */
 908 path.line.shadow.tag-highway {
 909     stroke-width: 20;
 910 }
 911 path.line.casing.tag-highway {
 912     stroke-width: 10;
 913 }
 914 path.line.stroke.tag-highway {
 915     stroke-width: 8;
 916 }
 917 .low-zoom path.line.shadow.tag-highway {
 918     stroke-width: 16;
 919 }
 920 .low-zoom path.line.casing.tag-highway {
 921     stroke-width: 7;
 922 }
 923 .low-zoom path.line.stroke.tag-highway {
 924     stroke-width: 5;
 925 }
 926
 927 .preset-icon .icon.tag-highway-motorway,
 928 .preset-icon .icon.tag-highway-motorway_link {
 929     color: #CF2081;
 930     fill: #70372f;
 931 }
 932 path.line.stroke.tag-highway-motorway,
 933 path.line.stroke.tag-highway-motorway_link,
 934 path.line.stroke.tag-motorway {
 935     stroke: #CF2081;
 936 }
 937 path.line.casing.tag-highway-motorway,
 938 path.line.casing.tag-highway-motorway_link,
 939 path.line.casing.tag-motorway {
 940     stroke: #70372f;
 941 }
 942
 943 .preset-icon .icon.tag-highway-trunk,
 944 .preset-icon .icon.tag-highway-trunk_link {
 945     color: #DD2F22;
 946     fill: #70372f;
 947 }
 948 path.line.stroke.tag-highway-trunk,
 949 path.line.stroke.tag-highway-trunk_link,
 950 path.line.stroke.tag-trunk {
 951     stroke: #DD2F22;
 952 }
 953 path.line.casing.tag-highway-trunk,
 954 path.line.casing.tag-highway-trunk_link,
 955 path.line.casing.tag-trunk {
 956     stroke: #70372f;
 957 }
 958
 959 .preset-icon .icon.tag-highway-primary,
 960 .preset-icon .icon.tag-highway-primary_link {
 961     color: #F99806;
 962     fill: #70372f;
 963 }
 964 path.line.stroke.tag-highway-primary,
 965 path.line.stroke.tag-highway-primary_link,
 966 path.line.stroke.tag-primary {
 967     stroke: #F99806;
 968 }
 969 path.line.casing.tag-highway-primary,
 970 path.line.casing.tag-highway-primary_link,
 971 path.line.casing.tag-primary {
 972     stroke: #70372f;
 973 }
 974
 975 .preset-icon .icon.tag-highway-secondary,
 976 .preset-icon .icon.tag-highway-secondary_link {
 977     color: #F3F312;
 978     fill: #70372f;
 979 }
 980 path.line.stroke.tag-highway-secondary,
 981 path.line.stroke.tag-highway-secondary_link,
 982 path.line.stroke.tag-secondary {
 983     stroke: #F3F312;
 984 }
 985 path.line.casing.tag-highway-secondary,
 986 path.line.casing.tag-highway-secondary_link,
 987 path.line.casing.tag-secondary {
 988     stroke: #70372f;
 989 }
 990
 991 .preset-icon .icon.tag-highway-tertiary,
 992 .preset-icon .icon.tag-highway-tertiary_link {
 993     color: #FFF9B3;
 994     fill: #70372f;
 995 }
 996 path.line.stroke.tag-highway-tertiary,
 997 path.line.stroke.tag-highway-tertiary_link,
 998 path.line.stroke.tag-tertiary {
 999     stroke: #FFF9B3;
1000 }
1001 path.line.casing.tag-highway-tertiary,
1002 path.line.casing.tag-highway-tertiary_link,
1003 path.line.casing.tag-tertiary {
1004     stroke: #70372f;
1005 }
1006
1007 .legacy-carto .preset-icon .icon.tag-highway-motorway,
1008 .legacy-carto .preset-icon .icon.tag-highway-motorway_link {
1009     color: #58a9ed;
1010     fill: #2c5476;
1011 }
1012 .legacy-carto path.line.stroke.tag-highway-motorway,
1013 .legacy-carto path.line.stroke.tag-highway-motorway_link,
1014 .legacy-carto path.line.stroke.tag-motorway {
1015     stroke: #58a9ed;
1016 }
1017 .legacy-carto path.line.casing.tag-highway-motorway,
1018 .legacy-carto path.line.casing.tag-highway-motorway_link,
1019 .legacy-carto path.line.casing.tag-motorway {
1020     stroke: #2c5476;
1021 }
1022
1023 .legacy-carto .preset-icon .icon.tag-highway-trunk,
1024 .legacy-carto .preset-icon .icon.tag-highway-trunk_link {
1025     color: #8cd05f;
1026     fill: #46682f;
1027 }
1028 .legacy-carto path.line.stroke.tag-highway-trunk,
1029 .legacy-carto path.line.stroke.tag-highway-trunk_link,
1030 .legacy-carto path.line.stroke.tag-trunk {
1031     stroke: #8cd05f;
1032 }
1033 .legacy-carto path.line.casing.tag-highway-trunk,
1034 .legacy-carto path.line.casing.tag-highway-trunk_link,
1035 .legacy-carto path.line.casing.tag-trunk {
1036     stroke: #46682f;
1037 }
1038
1039 .legacy-carto .preset-icon .icon.tag-highway-primary,
1040 .legacy-carto .preset-icon .icon.tag-highway-primary_link {
1041     color: #e06d5f;
1042     fill: #70372f;
1043 }
1044 .legacy-carto path.line.stroke.tag-highway-primary,
1045 .legacy-carto path.line.stroke.tag-highway-primary_link,
1046 .legacy-carto path.line.stroke.tag-primary {
1047     stroke: #e06d5f;
1048 }
1049 .legacy-carto path.line.casing.tag-highway-primary,
1050 .legacy-carto path.line.casing.tag-highway-primary_link,
1051 .legacy-carto path.line.casing.tag-primary {
1052     stroke: #70372f;
1053 }
1054
1055 .legacy-carto .preset-icon .icon.tag-highway-secondary,
1056 .legacy-carto .preset-icon .icon.tag-highway-secondary_link {
1057     color: #eab056;
1058     fill: #75582b;
1059 }
1060 .legacy-carto path.line.stroke.tag-highway-secondary,
1061 .legacy-carto path.line.stroke.tag-highway-secondary_link,
1062 .legacy-carto path.line.stroke.tag-secondary {
1063     stroke: #eab056;
1064 }
1065 .legacy-carto path.line.casing.tag-highway-secondary,
1066 .legacy-carto path.line.casing.tag-highway-secondary_link,
1067 .legacy-carto path.line.casing.tag-secondary {
1068     stroke: #75582b;
1069 }
1070
1071 .legacy-carto .preset-icon .icon.tag-highway-tertiary,
1072 .legacy-carto .preset-icon .icon.tag-highway-tertiary_link {
1073     color: #ffff7e;
1074     fill: #7f7f3f;
1075 }
1076 .legacy-carto path.line.stroke.tag-highway-tertiary,
1077 .legacy-carto path.line.stroke.tag-highway-tertiary_link,
1078 .legacy-carto path.line.stroke.tag-tertiary {
1079     stroke: #ffff7e;
1080 }
1081 .legacy-carto path.line.casing.tag-highway-tertiary,
1082 .legacy-carto path.line.casing.tag-highway-tertiary_link,
1083 .legacy-carto path.line.casing.tag-tertiary {
1084     stroke: #7f7f3f;
1085 }
1086
1087 .preset-icon .icon.tag-highway-residential {
1088     color: #fff;
1089     fill: #444;
1090 }
1091 path.line.stroke.tag-highway-residential,
1092 path.line.stroke.tag-residential {
1093     stroke: #fff;
1094 }
1095 path.line.casing.tag-highway-residential,
1096 path.line.casing.tag-residential {
1097     stroke: #444;
1098 }
1099
1100 .preset-icon .icon.tag-highway-unclassified {
1101     color: #dca;
1102     fill: #444;
1103 }
1104 path.line.stroke.tag-highway-unclassified,
1105 path.line.stroke.tag-unclassified {
1106     stroke: #dca;
1107 }
1108 path.line.casing.tag-highway-unclassified,
1109 path.line.casing.tag-unclassified {
1110     stroke: #444;
1111 }
1112
1113
1114 /* narrow highways */
1115 path.line.shadow.tag-highway-living_street,
1116 path.line.shadow.tag-highway-bus_guideway,
1117 path.line.shadow.tag-highway-service,
1118 path.line.shadow.tag-highway-track,
1119 path.line.shadow.tag-highway-road {
1120     stroke-width: 16;
1121 }
1122 path.line.casing.tag-highway-living_street,
1123 path.line.casing.tag-highway-bus_guideway,
1124 path.line.casing.tag-highway-service,
1125 path.line.casing.tag-highway-track,
1126 path.line.casing.tag-highway-road {
1127     stroke-width: 7;
1128 }
1129 path.line.stroke.tag-highway-living_street,
1130 path.line.stroke.tag-highway-bus_guideway,
1131 path.line.stroke.tag-highway-service,
1132 path.line.stroke.tag-highway-track,
1133 path.line.stroke.tag-highway-road {
1134     stroke-width: 5;
1135 }
1136
1137 path.line.shadow.tag-highway-path,
1138 path.line.shadow.tag-highway-footway,
1139 path.line.shadow.tag-highway-cycleway,
1140 path.line.shadow.tag-highway-bridleway,
1141 path.line.shadow.tag-highway-corridor,
1142 path.line.shadow.tag-highway-pedestrian,
1143 path.line.shadow.tag-highway-steps {
1144     stroke-width: 16;
1145 }
1146 path.line.casing.tag-highway-path,
1147 path.line.casing.tag-highway-footway,
1148 path.line.casing.tag-highway-cycleway,
1149 path.line.casing.tag-highway-bridleway,
1150 path.line.casing.tag-highway-corridor,
1151 path.line.casing.tag-highway-pedestrian,
1152 path.line.casing.tag-highway-steps {
1153     stroke-width: 5;
1154 }
1155 path.line.stroke.tag-highway-path,
1156 path.line.stroke.tag-highway-footway,
1157 path.line.stroke.tag-highway-cycleway,
1158 path.line.stroke.tag-highway-bridleway,
1159 path.line.stroke.tag-highway-corridor,
1160 path.line.stroke.tag-highway-pedestrian,
1161 path.line.stroke.tag-highway-steps {
1162     stroke-width: 3;
1163 }
1164
1165 .low-zoom path.line.shadow.tag-highway-living_street,
1166 .low-zoom path.line.shadow.tag-highway-bus_guideway,
1167 .low-zoom path.line.shadow.tag-highway-service,
1168 .low-zoom path.line.shadow.tag-highway-track,
1169 .low-zoom path.line.shadow.tag-highway-road {
1170     stroke-width: 12;
1171 }
1172 .low-zoom path.line.casing.tag-highway-living_street,
1173 .low-zoom path.line.casing.tag-highway-bus_guideway,
1174 .low-zoom path.line.casing.tag-highway-service,
1175 .low-zoom path.line.casing.tag-highway-track,
1176 .low-zoom path.line.casing.tag-highway-road {
1177     stroke-width: 5;
1178 }
1179 .low-zoom path.line.stroke.tag-highway-living_street,
1180 .low-zoom path.line.stroke.tag-highway-bus_guideway,
1181 .low-zoom path.line.stroke.tag-highway-service,
1182 .low-zoom path.line.stroke.tag-highway-track,
1183 .low-zoom path.line.stroke.tag-highway-road {
1184     stroke-width: 3;
1185 }
1186
1187 .low-zoom path.line.shadow.tag-highway-path,
1188 .low-zoom path.line.shadow.tag-highway-footway,
1189 .low-zoom path.line.shadow.tag-highway-cycleway,
1190 .low-zoom path.line.shadow.tag-highway-bridleway,
1191 .low-zoom path.line.shadow.tag-highway-corridor,
1192 .low-zoom path.line.shadow.tag-highway-pedestrian,
1193 .low-zoom path.line.shadow.tag-highway-steps {
1194     stroke-width: 12;
1195 }
1196 .low-zoom path.line.casing.tag-highway-path,
1197 .low-zoom path.line.casing.tag-highway-footway,
1198 .low-zoom path.line.casing.tag-highway-cycleway,
1199 .low-zoom path.line.casing.tag-highway-bridleway,
1200 .low-zoom path.line.casing.tag-highway-corridor,
1201 .low-zoom path.line.casing.tag-highway-pedestrian,
1202 .low-zoom path.line.casing.tag-highway-steps {
1203     stroke-width: 3;
1204 }
1205 .low-zoom path.line.stroke.tag-highway-path,
1206 .low-zoom path.line.stroke.tag-highway-footway,
1207 .low-zoom path.line.stroke.tag-highway-cycleway,
1208 .low-zoom path.line.stroke.tag-highway-bridleway,
1209 .low-zoom path.line.stroke.tag-highway-corridor,
1210 .low-zoom path.line.stroke.tag-highway-pedestrian,
1211 .low-zoom path.line.stroke.tag-highway-steps {
1212     stroke-width: 1;
1213 }
1214
1215 /* living streets */
1216 .preset-icon .icon.tag-highway-living-street {
1217     color: #bbb;
1218     fill: #ddd;
1219 }
1220 path.line.stroke.tag-highway-living_street,
1221 path.line.stroke.tag-living_street {
1222     stroke: #ccc;
1223 }
1224 path.line.casing.tag-highway-living_street,
1225 path.line.casing.tag-living_street {
1226     stroke: #fff;
1227 }
1228
1229 /* pedestrian streets and corridors */
1230 .preset-icon .icon.tag-highway-corridor,
1231 .preset-icon .icon.tag-highway-pedestrian {
1232     color: #8cd05f;
1233     fill: #fff;
1234 }
1235 path.line.stroke.tag-highway-corridor,
1236 path.line.stroke.tag-highway-pedestrian,
1237 path.line.stroke.tag-corridor,
1238 path.line.stroke.tag-pedestrian {
1239     stroke: #fff;
1240     stroke-dasharray: 2, 8;
1241 }
1242 .low-zoom path.line.stroke.tag-highway-corridor,
1243 .low-zoom path.line.stroke.tag-highway-pedestrian,
1244 .low-zoom path.line.stroke.tag-corridor,
1245 .low-zoom path.line.stroke.tag-pedestrian {
1246     stroke-dasharray: 1, 4;
1247 }
1248 path.line.casing.tag-highway-corridor,
1249 path.line.casing.tag-highway-pedestrian,
1250 path.line.casing.tag-corridor,
1251 path.line.casing.tag-pedestrian,
1252 path.line.casing.tag-highway-corridor.tag-unpaved,
1253 path.line.casing.tag-highway-pedestrian.tag-unpaved,
1254 path.line.casing.tag-corridor.tag-unpaved,
1255 path.line.casing.tag-pedestrian.tag-unpaved {
1256     stroke: #8cd05f;
1257     stroke-linecap: round;
1258     stroke-dasharray: none;
1259 }
1260
1261 /* unknown roads */
1262 .preset-icon .icon.tag-highway-road {
1263     color: #9e9e9e;
1264     fill: #666;
1265 }
1266 path.line.stroke.tag-highway-road,
1267 path.line.stroke.tag-road {
1268     stroke: #9e9e9e;
1269 }
1270 path.line.casing.tag-highway-road,
1271 path.line.casing.tag-road {
1272     stroke: #666;
1273 }
1274
1275 /* service roads */
1276 .preset-icon .icon.tag-highway-service {
1277     color: #fff;
1278     fill: #666;
1279 }
1280 path.line.stroke.tag-highway-service,
1281 path.line.stroke.tag-service {
1282     stroke: #fff;
1283 }
1284 path.line.casing.tag-highway-service,
1285 path.line.casing.tag-service {
1286     stroke: #666;
1287 }
1288
1289 /* special service roads and bus guideways */
1290 /* with `service=* tag`  (e.g. parking_aisle, alley, drive-through) */
1291 .preset-icon .icon.tag-highway-bus_guideway,
1292 .preset-icon .icon.tag-highway-service.tag-service {
1293     color: #dca;
1294     fill: #666;
1295 }
1296 path.line.stroke.tag-highway-bus_guideway,
1297 path.line.stroke.tag-highway-service.tag-service,
1298 path.line.stroke.tag-service.tag-service {
1299     stroke: #dca;
1300 }
1301 path.line.casing.tag-highway-bus_guideway,
1302 path.line.casing.tag-highway-service.tag-service,
1303 path.line.casing.tag-service.tag-service {
1304     stroke: #666;
1305 }
1306
1307 /* unmaintained track roads */
1308 path.line.stroke.tag-highway-track,
1309 path.line.stroke.tag-track {
1310     stroke: #c5b59f;
1311 }
1312 path.line.casing.tag-highway-track,
1313 path.line.casing.tag-track {
1314     stroke: #746f6f;
1315 }
1316
1317 /* paths */
1318 path.line.stroke.tag-highway-path,
1319 path.line.stroke.tag-highway-footway,
1320 path.line.stroke.tag-highway-cycleway,
1321 path.line.stroke.tag-highway-bridleway {
1322     stroke-linecap: butt;
1323     stroke-dasharray: 6, 6;
1324 }
1325 .low-zoom path.line.stroke.tag-highway-path,
1326 .low-zoom path.line.stroke.tag-highway-footway,
1327 .low-zoom path.line.stroke.tag-highway-cycleway,
1328 .low-zoom path.line.stroke.tag-highway-bridleway {
1329     stroke-linecap: butt;
1330     stroke-dasharray: 3, 3;
1331 }
1332
1333 /* style for features that should have highway=footway but don't yet */
1334 path.line.stroke.tag-crossing,
1335 path.line.stroke.tag-public_transport-platform,
1336 path.line.stroke.tag-highway-platform,
1337 path.line.stroke.tag-railway-platform,
1338 path.line.stroke.tag-man_made-pier {
1339     stroke: #dca;
1340 }
1341
1342 path.line.casing.tag-highway-path,
1343 path.line.casing.tag-highway-path.tag-unpaved,
1344 path.line.casing.tag-highway-footway.tag-public_transport-platform,
1345 path.line.casing.tag-highway-footway.tag-man_made-pier,
1346 path.line.casing.tag-highway.tag-crossing {
1347     stroke: #dca;
1348     stroke-linecap: round;
1349     stroke-dasharray: none;
1350 }
1351 path.line.casing.tag-highway-footway,
1352 path.line.casing.tag-highway-cycleway,
1353 path.line.casing.tag-highway-bridleway,
1354 path.line.casing.tag-highway-footway.tag-unpaved,
1355 path.line.casing.tag-highway-cycleway.tag-unpaved,
1356 path.line.casing.tag-highway-bridleway.tag-unpaved {
1357     stroke: #fff;
1358     stroke-linecap: round;
1359     stroke-dasharray: none;
1360 }
1361
1362 .preset-icon .icon.tag-highway-path,
1363 .preset-icon .icon.tag-highway-footway.tag-public_transport-platform,
1364 .preset-icon .icon.tag-highway-footway.tag-man_made-pier {
1365     color: #988;
1366     fill: #dca;
1367 }
1368 path.line.stroke.tag-highway-path {
1369     stroke: #988;
1370 }
1371
1372 /* footways */
1373 .preset-icon .icon.tag-route-foot,
1374 .preset-icon .icon.tag-route-hiking,
1375 .preset-icon .icon.tag-highway-footway {
1376     color: #988;
1377     fill: #fff;
1378 }
1379 path.line.stroke.tag-highway-footway,
1380 path.line.stroke.tag-highway_bus_stop,
1381 .preset-icon-container path.casing.tag-highway-footway {
1382     stroke: #988;
1383 }
1384 .preset-icon .icon.tag-highway-footway.tag-footway-sidewalk {
1385     color: #d4b4b4;
1386 }
1387 path.stroke.tag-highway-footway.tag-footway-sidewalk,
1388 .preset-icon-container path.casing.tag-highway-footway.tag-footway-sidewalk {
1389     stroke: #d4b4b4;
1390 }
1391 .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) {
1392     stroke: #fff;
1393 }
1394
1395 /* cycleways */
1396 .preset-icon .icon.tag-route-bicycle,
1397 .preset-icon .icon.tag-highway-cycleway {
1398     color: #58a9ed;
1399     fill: #fff;
1400 }
1401 path.line.stroke.tag-highway-cycleway,
1402 .preset-icon-container path.casing.tag-highway-cycleway {
1403     stroke: #58a9ed;
1404 }
1405 .preset-icon-container path.stroke.tag-highway-cycleway:not(.tag-crossing) {
1406     stroke: #fff;
1407 }
1408
1409 /* bridleways */
1410 .preset-icon .icon.tag-route-horse,
1411 .preset-icon .icon.tag-highway-bridleway {
1412     color: #e06d5f;
1413     fill: #fff;
1414 }
1415 path.line.stroke.tag-highway-bridleway,
1416 .preset-icon-container path.casing.tag-highway-bridleway {
1417     stroke: #e06d5f;
1418 }
1419 .preset-icon-container path.stroke.tag-highway-bridleway {
1420     stroke: #fff;
1421 }
1422
1423 /* racetracks */
1424 .preset-icon .icon.tag-leisure-track {
1425     color: rgb(229, 184, 43);
1426 }
1427 path.line.stroke.tag-leisure-track,
1428 .preset-icon-container path.casing.tag-highway.tag-leisure-track {
1429     stroke: rgb(229, 184, 43);
1430 }
1431 .preset-icon-container path.line.stroke.tag-highway.tag-leisure-track {
1432     stroke: #fff;
1433 }
1434
1435 /* steps */
1436 .preset-icon .icon.tag-highway-steps {
1437     color: #81d25c;
1438     fill: #fff;
1439 }
1440 path.line.stroke.tag-highway-steps {
1441     stroke-linecap: butt;
1442     stroke-dasharray: 3, 3;
1443 }
1444 .low-zoom path.line.stroke.tag-highway-steps {
1445     stroke-dasharray: 2, 2;
1446 }
1447 path.line.casing.tag-highway-steps,
1448 path.line.casing.tag-highway-steps.tag-unpaved {
1449     stroke: #fff;
1450     stroke-linecap: round;
1451     stroke-dasharray: none;
1452 }
1453 path.line.stroke.tag-highway-steps,
1454 .preset-icon-container path.line.casing.tag-highway-steps {
1455     stroke: #81d25c;
1456 }
1457 .preset-icon-container path.line.stroke.tag-highway-steps {
1458     stroke: #fff;
1459 }
1460
1461
1462 /* crossings */
1463 path.line.stroke.tag-highway.tag-crossing-unmarked {
1464     stroke-dasharray: 6, 4;
1465 }
1466 .low-zoom path.line.stroke.tag-highway.tag-crossing-unmarked {
1467     stroke-dasharray: 3, 2;
1468 }
1469 path.line.stroke.tag-highway.tag-crossing-marked {
1470     stroke-dasharray: 6, 3;
1471 }
1472 .low-zoom path.line.stroke.tag-highway.tag-crossing-marked {
1473     stroke-dasharray: 3, 1.5;
1474 }
1475 path.line.stroke.tag-highway-footway.tag-crossing-marked {
1476     stroke: #4c4444;
1477 }
1478 .preset-icon .icon.tag-highway-footway.tag-crossing-marked {
1479     color: #4c4444;
1480 }
1481 path.line.stroke.tag-highway-footway.tag-crossing-unmarked {
1482     stroke: #776a6a;
1483 }
1484 .preset-icon .icon.tag-highway-footway.tag-crossing-unmarked {
1485     color: #776a6a;
1486 }
1487 path.line.stroke.tag-highway-cycleway.tag-crossing-marked {
1488     stroke: #446077;
1489 }
1490 .preset-icon .icon.tag-highway-cycleway.tag-crossing-marked {
1491     color: #446077;
1492 }
1493
1494
1495 /* highway midpoints */
1496 g.midpoint.tag-highway-corridor .fill,
1497 g.midpoint.tag-highway-pedestrian .fill,
1498 g.midpoint.tag-highway-steps .fill,
1499 g.midpoint.tag-highway-path .fill,
1500 g.midpoint.tag-highway-footway .fill,
1501 g.midpoint.tag-highway-cycleway .fill,
1502 g.midpoint.tag-highway-bridleway .fill {
1503     fill: #fff;
1504     stroke: #333;
1505     stroke-opacity: .8;
1506     opacity: .8;
1507 }
1508 /* aeroways */
1509
1510 /* areas */
1511 path.area.stroke.tag-aeroway,
1512 .low-zoom path.area.stroke.tag-aeroway {
1513     stroke: #fff;
1514     stroke-dasharray: none;
1515     stroke-width: 1;
1516 }
1517 path.area.fill.tag-aeroway-runway {
1518     stroke: rgba(0, 0, 0, 0.6);
1519     fill: rgba(0, 0, 0, 0.6);
1520 }
1521
1522 /* lines */
1523 /* narrow aeroways (taxiway) */
1524 path.line.shadow.tag-aeroway-taxiway,
1525 path.line.shadow.tag-taxiway {
1526     stroke-width: 16;
1527 }
1528 path.line.casing.tag-aeroway-taxiway,
1529 path.line.casing.tag-taxiway {
1530     stroke-width: 7;
1531 }
1532 path.line.stroke.tag-aeroway-taxiway,
1533 path.line.stroke.tag-taxiway {
1534     stroke-width: 5;
1535 }
1536 .low-zoom path.line.shadow.tag-aeroway-taxiway,
1537 .low-zoom path.line.shadow.tag-taxiway {
1538     stroke-width: 12;
1539 }
1540 .low-zoom path.line.casing.tag-aeroway-taxiway,
1541 .low-zoom path.line.casing.tag-taxiway {
1542     stroke-width: 5;
1543 }
1544 .low-zoom path.line.stroke.tag-aeroway-taxiway,
1545 .low-zoom path.line.stroke.tag-taxiway {
1546     stroke-width: 3;
1547 }
1548
1549 .preset-icon .icon.tag-aeroway-taxiway,
1550 .preset-icon .icon.tag-taxiway {
1551     color: #ff0;
1552     fill: #666;
1553 }
1554 path.line.stroke.tag-aeroway-taxiway,
1555 path.line.stroke.tag-taxiway {
1556     stroke: #ff0;
1557 }
1558 path.line.casing.tag-aeroway-taxiway,
1559 path.line.casing.tag-taxiway {
1560     stroke: #666;
1561 }
1562
1563 /* wide aeroways (runway) */
1564 .preset-icon .icon.tag-aeroway-runway,
1565 .preset-icon .icon.tag-runway {
1566     color: #444;
1567     fill: #000;
1568 }
1569 path.line.shadow.tag-aeroway-runway {
1570     stroke-width: 20;
1571 }
1572 path.line.casing.tag-aeroway-runway {
1573     stroke-width: 10;
1574     stroke: #000;
1575     stroke-linecap: square;
1576 }
1577 path.line.stroke.tag-aeroway-runway {
1578     stroke: #fff;
1579     stroke-width: 2;
1580     stroke-linecap: butt;
1581     stroke-dasharray: 24, 48;
1582 }
1583 .low-zoom path.line.shadow.tag-aeroway-runway {
1584     stroke-width: 16;
1585 }
1586 .low-zoom path.line.casing.tag-aeroway-runway {
1587     stroke-width: 7;
1588 }
1589 .low-zoom path.line.stroke.tag-aeroway-runway {
1590     stroke-width: 2;
1591     stroke-dasharray: 12, 24;
1592 }
1593 .preset-icon-container path.line.stroke.tag-aeroway-runway {
1594     stroke-dasharray: 0, 14, 8, 14;
1595 }
1596 /* railways */
1597
1598 /* defaults */
1599 .preset-icon .icon.tag-railway.other-line {
1600     color: #fff;
1601     fill: #777;
1602 }
1603 .preset-icon .icon.tag-railway {
1604     color: #555;
1605     fill: #eee;
1606 }
1607
1608 /* lines */
1609 /* narrow widths */
1610 path.line.shadow.tag-railway {
1611     stroke-width: 16;
1612 }
1613 path.line.casing.tag-railway {
1614     stroke-width: 7;
1615 }
1616 path.line.stroke.tag-railway {
1617     stroke-width: 2;
1618     stroke-linecap: butt;
1619     stroke-dasharray: 12,12;
1620 }
1621 .low-zoom path.line.shadow.tag-railway {
1622     stroke-width: 12;
1623 }
1624 .low-zoom path.line.casing.tag-railway {
1625     stroke-width: 5;
1626 }
1627 .low-zoom path.line.stroke.tag-railway {
1628     stroke-width: 2;
1629     stroke-dasharray: 6,6;
1630 }
1631 .preset-icon-container path.line.stroke.tag-railway:not(.tag-status) {
1632     stroke-dasharray: 6;
1633 }
1634
1635 path.line.casing.tag-railway.tag-railway-platform {
1636     stroke-width: 0;
1637 }
1638 path.line.stroke.tag-railway.tag-railway-platform {
1639     stroke-dasharray: none;
1640 }
1641
1642 /* styles */
1643 path.line.casing.tag-railway {
1644     stroke: #555;
1645 }
1646 path.line.stroke.tag-railway {
1647     stroke: #eee;
1648 }
1649
1650
1651 .preset-icon .icon.tag-railway-disused,
1652 .preset-icon .icon.tag-railway-abandoned {
1653     color: #999;
1654     fill: #eee;
1655 }
1656 path.line.casing.tag-railway-disused,
1657 path.line.casing.tag-railway-abandoned {
1658     stroke: #999;
1659 }
1660 path.line.stroke.tag-railway-disused,
1661 path.line.stroke.tag-railway-abandoned {
1662     stroke: #eee;
1663 }
1664
1665
1666 path.line.casing.tag-railway-subway {
1667     stroke: #222;
1668 }
1669 path.line.stroke.tag-railway-subway {
1670     stroke: #bbb;
1671 }
1672 /* waterways */
1673
1674 /* defaults */
1675 .preset-icon .icon.tag-waterway.other-line {
1676     color: #7dd;
1677     fill: #7dd;
1678 }
1679 .preset-icon .icon.tag-type-waterway:not(.tag-waterway-dam),
1680 .preset-icon .icon.tag-waterway:not(.tag-waterway-dam) {
1681     color: #7dd;
1682     fill: #fff;
1683 }
1684
1685
1686 /* areas */
1687 path.area.stroke.tag-waterway-dock,
1688 path.area.stroke.tag-waterway-boatyard,
1689 path.area.stroke.tag-waterway-fuel {
1690     stroke: white;
1691     stroke-width: 1;
1692 }
1693 path.area.casing.tag-waterway-dock,
1694 path.area.casing.tag-waterway-boatyard,
1695 path.area.casing.tag-waterway-fuel {
1696     stroke: none;
1697 }
1698 path.area.fill.tag-waterway-dock,
1699 path.area.fill.tag-waterway-boatyard,
1700 path.area.fill.tag-waterway-fuel {
1701     stroke: rgba(255, 255, 255, 0.3);
1702     fill: rgba(255, 255, 255, 0.3);
1703 }
1704
1705 /* lines */
1706 path.line.fill.tag-waterway:not(.tag-waterway-dam) {
1707     stroke: rgba(119, 211, 222, 0.3);
1708     fill: rgba(119, 211, 222, 0.3);
1709 }
1710 path.line.casing.tag-waterway:not(.tag-waterway-dam) {
1711     stroke: #444;
1712 }
1713 path.line.stroke.tag-waterway:not(.tag-waterway-dam) {
1714     stroke: #7dd;
1715 }
1716
1717
1718 /* narrow waterways (default) */
1719 path.line.shadow.tag-waterway {
1720     stroke-width: 16;
1721 }
1722 path.line.casing.tag-waterway {
1723     stroke-width: 7;
1724 }
1725 path.line.stroke.tag-waterway {
1726     stroke-width: 5;
1727 }
1728
1729 .low-zoom path.line.shadow.tag-waterway {
1730     stroke-width: 12;
1731 }
1732 .low-zoom path.line.casing.tag-waterway {
1733     stroke-width: 5;
1734 }
1735 .low-zoom path.line.stroke.tag-waterway {
1736     stroke-width: 3;
1737 }
1738
1739
1740 /* wide waterways (river) */
1741 path.line.shadow.tag-waterway-river {
1742     stroke-width: 20;
1743 }
1744 path.line.casing.tag-waterway-river {
1745     stroke-width: 10;
1746 }
1747 path.line.stroke.tag-waterway-river {
1748     stroke-width: 8;
1749 }
1750
1751 .low-zoom path.line.shadow.tag-waterway-river {
1752     stroke-width: 16;
1753 }
1754 .low-zoom path.line.casing.tag-waterway-river {
1755     stroke-width: 7;
1756 }
1757 .low-zoom path.line.stroke.tag-waterway-river {
1758     stroke-width: 5;
1759 }
1760
1761
1762 /* ditch */
1763 .preset-icon .icon.tag-waterway-ditch {
1764     color: #39a;
1765 }
1766 path.line.stroke.tag-waterway-ditch {
1767     stroke: #39a;
1768 }
1769
1770 /* narrow width miscellanous things */
1771 path.line.shadow.tag-aerialway,
1772 path.line.shadow.tag-attraction-summer_toboggan,
1773 path.line.shadow.tag-attraction-water_slide,
1774 path.line.shadow.tag-golf-cartpath,
1775 path.line.shadow.tag-man_made-pipeline,
1776 path.line.shadow.tag-natural-tree_row,
1777 path.line.shadow.tag-piste {
1778     stroke-width: 16;
1779 }
1780 path.line.casing.tag-aerialway,
1781 path.line.casing.tag-attraction-summer_toboggan,
1782 path.line.casing.tag-attraction-water_slide,
1783 path.line.casing.tag-golf-cartpath,
1784 path.line.casing.tag-man_made-pipeline,
1785 path.line.casing.tag-natural-tree_row,
1786 path.line.casing.tag-piste {
1787     stroke-width: 7;
1788 }
1789 path.line.stroke.tag-aerialway,
1790 path.line.stroke.tag-attraction-summer_toboggan,
1791 path.line.stroke.tag-attraction-water_slide,
1792 path.line.stroke.tag-golf-cartpath,
1793 path.line.stroke.tag-man_made-pipeline,
1794 path.line.stroke.tag-natural-tree_row,
1795 path.line.stroke.tag-piste {
1796     stroke-width: 5;
1797 }
1798
1799 .low-zoom path.line.shadow.tag-aerialway,
1800 .low-zoom path.line.shadow.tag-attraction-summer_toboggan,
1801 .low-zoom path.line.shadow.tag-attraction-water_slide,
1802 .low-zoom path.line.shadow.tag-golf-cartpath,
1803 .low-zoom path.line.shadow.tag-man_made-pipeline,
1804 .low-zoom path.line.shadow.tag-natural-tree_row,
1805 .low-zoom path.line.shadow.tag-piste {
1806     stroke-width: 12;
1807 }
1808 .low-zoom path.line.casing.tag-aerialway,
1809 .low-zoom path.line.casing.tag-attraction-summer_toboggan,
1810 .low-zoom path.line.casing.tag-attraction-water_slide,
1811 .low-zoom path.line.casing.tag-golf-cartpath,
1812 .low-zoom path.line.casing.tag-man_made-pipeline,
1813 .low-zoom path.line.casing.tag-natural-tree_row,
1814 .low-zoom path.line.casing.tag-piste {
1815     stroke-width: 5;
1816 }
1817 .low-zoom path.line.stroke.tag-aerialway,
1818 .low-zoom path.line.stroke.tag-attraction-summer_toboggan,
1819 .low-zoom path.line.stroke.tag-attraction-water_slide,
1820 .low-zoom path.line.stroke.tag-golf-cartpath,
1821 .low-zoom path.line.stroke.tag-man_made-pipeline,
1822 .low-zoom path.line.stroke.tag-natural-tree_row,
1823 .low-zoom path.line.stroke.tag-piste {
1824     stroke-width: 3;
1825 }
1826
1827
1828 /* ferry routes  */
1829 .preset-icon .icon.tag-route-ferry {
1830     color: #58a9ed;
1831     fill: #fff;
1832 }
1833 path.line.shadow.tag-route-ferry {
1834     stroke-width: 16;
1835 }
1836 path.line.stroke.tag-route-ferry {
1837     stroke-width: 3;
1838     stroke-linecap: butt;
1839     stroke-dasharray: 12,8;
1840 }
1841 .low-zoom path.line.shadow.tag-route-ferry {
1842     stroke-width: 12;
1843 }
1844 .low-zoom path.line.stroke.tag-route-ferry,
1845 .preset-icon-container path.line.stroke.tag-route-ferry {
1846     stroke-width: 2;
1847     stroke-dasharray: 6,4;
1848 }
1849 path.line.stroke.tag-route-ferry {
1850     stroke: #58a9ed;
1851 }
1852 path.line.casing.tag-route-ferry {
1853     stroke: none;
1854 }
1855
1856
1857 /* aerialways */
1858 path.line.stroke.tag-aerialway {
1859     stroke: #c55;
1860 }
1861 path.line.casing.tag-aerialway {
1862     stroke: #444;
1863 }
1864
1865
1866 /* pistes */
1867 path.line.stroke.tag-piste {
1868     stroke: #a9d;
1869 }
1870 path.line.casing.tag-piste {
1871     stroke: #444;
1872 }
1873
1874
1875 /* Attractions */
1876 path.line.stroke.tag-attraction-summer_toboggan {
1877     stroke: #9e9e9e;
1878 }
1879 path.line.casing.tag-attraction-summer_toboggan {
1880     stroke: #666;
1881 }
1882
1883 path.line.stroke.tag-attraction-water_slide {
1884     stroke: #aae0cb;
1885 }
1886 path.line.casing.tag-attraction-water_slide {
1887     stroke: #3d6c71;
1888 }
1889
1890
1891 /* golf cartpaths (like service roads) */
1892 .preset-icon .icon.tag-golf-cartpath {
1893     color: #dca;
1894     fill: #666;
1895 }
1896 path.line.stroke.tag-golf-cartpath {
1897     stroke: #dca;
1898 }
1899 path.line.casing.tag-golf-cartpath {
1900     stroke: #666;
1901 }
1902
1903
1904 /* power and pipeline */
1905 .preset-icon .icon.tag-man_made-pipeline,
1906 .preset-icon .icon.tag-power {
1907     color: #939393;
1908     fill: #939393;
1909 }
1910
1911
1912 /* power */
1913 path.line.stroke.tag-power {
1914     stroke: #939393;
1915     stroke-width: 2;
1916 }
1917 path.line.casing.tag-power {
1918     stroke: none;
1919 }
1920
1921
1922 /* pipeline */
1923 path.line.stroke.tag-man_made-pipeline {
1924     stroke: #cbd0d8;
1925     stroke-linecap: butt;
1926     stroke-dasharray: 80, 1.25;
1927 }
1928 path.line.casing.tag-man_made-pipeline {
1929     stroke: #666;
1930 }
1931 .low-zoom path.line.stroke.tag-man_made-pipeline {
1932     stroke-dasharray: 40, 1;
1933 }
1934 .preset-icon-container path.line.stroke.tag-man_made-pipeline {
1935     stroke-dasharray: 19, 1;
1936 }
1937
1938
1939 /* boundaries */
1940 path.line.stroke.tag-boundary {
1941     stroke: #fff;
1942     stroke-width: 2;
1943     stroke-linecap: butt;
1944     stroke-dasharray: 20, 5, 5, 5;
1945 }
1946 path.line.casing.tag-boundary {
1947     stroke: #82b5fe;
1948     stroke-width: 6;
1949 }
1950
1951 path.line.casing.tag-boundary-protected_area,
1952 path.line.casing.tag-boundary-national_park {
1953     stroke: #b0e298;
1954 }
1955
1956
1957 /* barriers and similar */
1958 path.line.stroke.tag-barrier:not(.tag-barrier-hedge):not(.tag-waterway) {
1959     stroke: #ddd;
1960 }
1961 .preset-icon-container path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
1962     stroke: rgb(170, 170, 170);
1963 }
1964 path.line.casing.tag-natural,
1965 path.line.casing.tag-barrier:not(.tag-waterway),
1966 path.line.casing.tag-man_made-groyne,
1967 path.line.casing.tag-man_made-breakwater {
1968     stroke: none;
1969 }
1970 path.line.stroke.tag-barrier:not(.tag-waterway),
1971 path.line.stroke.tag-man_made-groyne,
1972 path.line.stroke.tag-man_made-breakwater {
1973     stroke-width: 3px;
1974     stroke-linecap: round;
1975     stroke-dasharray: 15, 5, 1, 5;
1976 }
1977 .low-zoom path.line.stroke.tag-barrier:not(.tag-waterway),
1978 .low-zoom path.line.stroke.tag-man_made-groyne,
1979 .low-zoom path.line.stroke.tag-man_made-breakwater {
1980     stroke-width: 2px;
1981     stroke-linecap: butt;
1982     stroke-dasharray: 8, 2, 2, 2;
1983 }
1984 .preset-icon-container path.line.stroke.tag-barrier,
1985 .preset-icon-container path.line.stroke.tag-man_made-groyne,
1986 .preset-icon-container path.line.stroke.tag-man_made-breakwater {
1987     stroke-dasharray: 1, 4, 6, 4;
1988 }
1989 path.line.stroke.tag-barrier.tag-barrier-wall,
1990 path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
1991 path.line.stroke.tag-barrier.tag-barrier-city_wall {
1992     stroke-linecap: butt;
1993     stroke-dasharray: 16, 3, 9, 3;
1994 }
1995 .low-zoom path.line.stroke.tag-barrier.tag-barrier-wall,
1996 .low-zoom path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
1997 .low-zoom path.line.stroke.tag-barrier.tag-barrier-city_wall,
1998 .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-wall,
1999 .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
2000 .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-city_wall {
2001     stroke-dasharray: 8, 1, 4, 1;
2002 }
2003
2004
2005 /* bridges */
2006 path.line.casing.tag-bridge {
2007     stroke-opacity: 0.6;
2008     stroke: #000 !important;
2009     stroke-linecap: butt;
2010     stroke-dasharray: none;
2011 }
2012 path.line.shadow.tag-bridge {
2013     stroke-width: 24;
2014 }
2015 path.line.casing.tag-bridge {
2016     stroke-width: 16;
2017 }
2018 .low-zoom path.line.shadow.tag-bridge {
2019     stroke-width: 16;
2020 }
2021 .low-zoom path.line.casing.tag-bridge {
2022     stroke-width: 10;
2023 }
2024
2025 path.line.shadow.tag-railway.tag-bridge,
2026 path.line.shadow.tag-highway-living_street.tag-bridge,
2027 path.line.shadow.tag-highway-path.tag-bridge,
2028 path.line.shadow.tag-highway-corridor.tag-bridge,
2029 path.line.shadow.tag-highway-pedestrian.tag-bridge,
2030 path.line.shadow.tag-highway-service.tag-bridge,
2031 path.line.shadow.tag-highway-track.tag-bridge,
2032 path.line.shadow.tag-highway-steps.tag-bridge,
2033 path.line.shadow.tag-highway-footway.tag-bridge,
2034 path.line.shadow.tag-highway-cycleway.tag-bridge,
2035 path.line.shadow.tag-highway-bridleway.tag-bridge {
2036     stroke-width: 18;
2037 }
2038 path.line.casing.tag-railway.tag-bridge,
2039 path.line.casing.tag-highway-living_street.tag-bridge,
2040 path.line.casing.tag-highway-path.tag-bridge,
2041 path.line.casing.tag-highway-corridor.tag-bridge,
2042 path.line.casing.tag-highway-pedestrian.tag-bridge,
2043 path.line.casing.tag-highway-service.tag-bridge,
2044 path.line.casing.tag-highway-track.tag-bridge,
2045 path.line.casing.tag-highway-steps.tag-bridge,
2046 path.line.casing.tag-highway-footway.tag-bridge,
2047 path.line.casing.tag-highway-cycleway.tag-bridge,
2048 path.line.casing.tag-highway-bridleway.tag-bridge {
2049     stroke-width: 10;
2050 }
2051
2052 .low-zoom path.line.shadow.tag-railway.tag-bridge,
2053 .low-zoom path.line.shadow.tag-highway-living_street.tag-bridge,
2054 .low-zoom path.line.shadow.tag-highway-path.tag-bridge,
2055 .low-zoom path.line.shadow.tag-highway-corridor.tag-bridge,
2056 .low-zoom path.line.shadow.tag-highway-pedestrian.tag-bridge,
2057 .low-zoom path.line.shadow.tag-highway-service.tag-bridge,
2058 .low-zoom path.line.shadow.tag-highway-track.tag-bridge,
2059 .low-zoom path.line.shadow.tag-highway-steps.tag-bridge,
2060 .low-zoom path.line.shadow.tag-highway-footway.tag-bridge,
2061 .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge,
2062 .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge {
2063     stroke-width: 14;
2064 }
2065 .low-zoom path.line.casing.tag-railway.tag-bridge,
2066 .low-zoom path.line.casing.tag-highway-living_street.tag-bridge,
2067 .low-zoom path.line.casing.tag-highway-path.tag-bridge,
2068 .low-zoom path.line.casing.tag-highway-corridor.tag-bridge,
2069 .low-zoom path.line.casing.tag-highway-pedestrian.tag-bridge,
2070 .low-zoom path.line.casing.tag-highway-service.tag-bridge,
2071 .low-zoom path.line.casing.tag-highway-track.tag-bridge,
2072 .low-zoom path.line.casing.tag-highway-steps.tag-bridge,
2073 .low-zoom path.line.casing.tag-highway-footway.tag-bridge,
2074 .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge,
2075 .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge {
2076     stroke-width: 6;
2077 }
2078
2079
2080 /* tunnels */
2081 path.line.stroke.tag-tunnel,
2082 path.line.stroke.tag-location-underground,
2083 path.line.stroke.tag-location-underwater {
2084     stroke-opacity: 0.3;
2085 }
2086 path.line.casing.tag-tunnel,
2087 path.line.casing.tag-location-underground,
2088 path.line.stroke.tag-location-underwater {
2089     stroke-opacity: 0.5;
2090     stroke-linecap: butt;
2091     stroke-dasharray: none;
2092 }
2093
2094
2095 /* embankments / cuttings */
2096 path.line.shadow.tag-embankment,
2097 path.line.shadow.tag-cutting {
2098     stroke-width: 28;
2099 }
2100 path.line.casing.tag-embankment,
2101 path.line.casing.tag-cutting {
2102     stroke-opacity: 0.5;
2103     stroke: #000;
2104     stroke-width: 22;
2105     stroke-dasharray: 2, 4;
2106     stroke-linecap: butt;
2107 }
2108
2109 .low-zoom path.line.shadow.tag-embankment,
2110 .low-zoom path.line.shadow.tag-cutting {
2111     stroke-width: 14;
2112 }
2113 .low-zoom path.line.casing.tag-embankment,
2114 .low-zoom path.line.casing.tag-cutting {
2115     stroke-width: 10;
2116 }
2117
2118
2119 /* Surface - unpaved */
2120 path.line.casing.tag-unpaved {
2121     stroke: #ccc;
2122     stroke-linecap: butt;
2123     stroke-dasharray: 4, 3;
2124 }
2125 .low-zoom path.line.casing.tag-unpaved {
2126     stroke-dasharray: 3, 2;
2127 }
2128 path.line.casing.tag-bridge.tag-unpaved {
2129     stroke: #000;
2130     stroke-dasharray: 4, 3;
2131 }
2132 .low-zoom path.line.casing.tag-bridge.tag-unpaved {
2133     stroke: #000;
2134     stroke-dasharray: 3, 2;
2135 }
2136
2137
2138 /* Status (e.g. proposed, abandoned) */
2139 path.area.stroke.tag-status,
2140 path.line.stroke.tag-status,
2141 path.area.casing.tag-status,
2142 path.line.casing.tag-status {
2143     stroke-linecap: butt;
2144     stroke-dasharray: 7, 3;
2145 }
2146 .low-zoom path.area.stroke.tag-status,
2147 .low-zoom path.line.stroke.tag-status,
2148 .low-zoom path.area.casing.tag-status,
2149 .low-zoom path.line.casing.tag-status {
2150     stroke-dasharray: 5, 2;
2151 }
2152
2153 /* Road Closed Status */
2154 .preset-icon .icon.tag-highway.tag-status-construction {
2155     color: #fc6c14;
2156     fill: #fff;
2157 }
2158 path.line.shadow.tag-highway.tag-status.tag-status-construction {
2159     stroke-width: 20;
2160 }
2161 path.line.casing.tag-highway.tag-status.tag-status-construction {
2162     stroke-width: 10;
2163     stroke-linecap: butt;
2164     stroke-dasharray: none
2165 }
2166 path.line.stroke.tag-highway.tag-status.tag-status-construction {
2167     stroke-width: 8;
2168     stroke-linecap: butt;
2169     stroke-dasharray: 10, 10;
2170 }
2171 path.line.casing.tag-highway.tag-status.tag-status-construction,
2172 .preset-icon-container path.line.stroke.tag-highway.tag-status.tag-status-construction {
2173     stroke: #fff;
2174 }
2175 path.line.stroke.tag-highway.tag-status.tag-status-construction,
2176 .preset-icon-container path.line.casing.tag-highway.tag-status.tag-status-construction {
2177     stroke: #fc6c14;
2178 }
2179 .low-zoom path.line.shadow.tag-highway.tag-status.tag-status-construction {
2180     stroke-width: 16;
2181 }
2182 .low-zoom path.line.casing.tag-highway.tag-status.tag-status-construction {
2183     stroke-width: 7;
2184 }
2185 .low-zoom path.line.stroke.tag-highway.tag-status.tag-status-construction {
2186     stroke-width: 5;
2187     stroke-dasharray: 8, 8;
2188 }
2189
2190
2191 /* Buildings */
2192 path.stroke.tag-building {
2193     stroke: rgb(224, 110, 95);
2194 }
2195 path.fill.tag-building {
2196     stroke: rgba(224, 110, 95, 0.3);
2197     fill: rgba(224, 110, 95, 0.3);
2198 }
2199 /* Cursors */
2200
2201 .nope,
2202 .nope * {
2203     cursor: not-allowed !important;
2204 }
2205
2206 .map-in-map,
2207 #map {
2208     cursor: auto; /* Opera */
2209     cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
2210 }
2211
2212 .mode-browse .point,
2213 .mode-select .point {
2214     cursor: pointer; /* Opera */
2215     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
2216 }
2217
2218 .mode-select .vertex,
2219 .mode-browse .vertex {
2220     cursor: pointer; /* Opera */
2221     cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
2222 }
2223
2224 .mode-browse .line,
2225 .mode-select .line {
2226     cursor: pointer; /* Opera */
2227     cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
2228 }
2229
2230 .mode-select .area,
2231 .mode-browse .area {
2232     cursor: pointer; /* Opera */
2233     cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
2234 }
2235
2236 .mode-select .midpoint,
2237 .mode-browse .midpoint {
2238     cursor: pointer; /* Opera */
2239     cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
2240 }
2241
2242 .mode-select .behavior-multiselect .point,
2243 .mode-select .behavior-multiselect .vertex,
2244 .mode-select .behavior-multiselect .line,
2245 .mode-select .behavior-multiselect .area {
2246     cursor: pointer; /* Opera */
2247     cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */
2248 }
2249
2250 .mode-select .behavior-multiselect .selected {
2251     cursor: pointer; /* Opera */
2252     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
2253 }
2254
2255 .mode-add-preset #map,
2256 .mode-draw-line #map,
2257 .mode-draw-area #map,
2258 .mode-add-line  #map,
2259 .mode-add-area  #map,
2260 .mode-drag-node #map,
2261 .mode-drag-note #map {
2262     cursor: crosshair; /* Opera */
2263     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
2264 }
2265
2266 .mode-draw-line .way.target,
2267 .mode-draw-area .way.target,
2268 .mode-add-line  .way.target,
2269 .mode-add-area  .way.target,
2270 .mode-drag-node .way.target {
2271     cursor: crosshair; /* Opera */
2272     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */
2273 }
2274
2275 .mode-draw-line .vertex.target,
2276 .mode-draw-area .vertex.target,
2277 .mode-add-line  .vertex.target,
2278 .mode-add-area  .vertex.target,
2279 .mode-drag-node .vertex.target {
2280     cursor: crosshair; /* Opera */
2281     cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
2282 }
2283
2284 .mode-add-point #map,
2285 .mode-add-note #map,
2286 .mode-browse.lasso #map,
2287 .mode-browse.lasso .way,
2288 .mode-browse.lasso .vertex,
2289 .mode-browse.lasso .midpoint,
2290 .mode-select.lasso #map,
2291 .mode-select.lasso .way,
2292 .mode-select.lasso .vertex,
2293 .mode-select.lasso .midpoint {
2294     cursor: crosshair; /* Opera */
2295     cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
2296 }
2297
2298 .mode-browse .note,
2299 .mode-browse .qa_error,
2300 .mode-select .note,
2301 .mode-select .qa_error,
2302 .turn rect,
2303 .turn circle {
2304     cursor: pointer;
2305 }
2306 /* photo viewer div */
2307 #photoviewer {
2308     position: relative;
2309     flex-shrink: 0;
2310     margin-bottom: 10px;
2311     width: 330px;
2312     height: 250px;
2313     padding: 5px;
2314     background-color: #fff;
2315 }
2316 [dir='ltr'] #photoviewer {
2317     margin-left: 10px;
2318     margin-right: 2px;
2319 }
2320 [dir='rtl'] #photoviewer {
2321     margin-right: 10px;
2322     margin-left: 2px;
2323 }
2324
2325 @media screen and (min-width: 1600px) {
2326     #photoviewer {
2327         width: 490px;
2328         height: 370px;
2329     }
2330 }
2331
2332 #photoviewer button.thumb-hide {
2333     border-radius: 0;
2334     padding: 5px;
2335     position: absolute;
2336     right: 5px;
2337     top: 5px;
2338     z-index: 50;
2339 }
2340
2341 #photoviewer button.resize-handle-xy {
2342     border-radius: 0;
2343     position: absolute;
2344     top: 0;
2345     right: 0;
2346     z-index: 49;
2347     cursor: nesw-resize;
2348     height: 25px;
2349     width: 25px;
2350 }
2351
2352 #photoviewer button.resize-handle-x {
2353     border-radius: 0;
2354     position: absolute;
2355     top: 0;
2356     right: 0;
2357     bottom: 0;
2358     z-index: 48;
2359     cursor: ew-resize;
2360     height: auto;
2361     width: 6px;
2362 }
2363
2364 #photoviewer button.resize-handle-y {
2365     border-radius: 0;
2366     position: absolute;
2367     top: 0;
2368     right: 0;
2369     z-index: 48;
2370     cursor: ns-resize;
2371     height: 6px;
2372     width: 100%;
2373 }
2374
2375
2376 .photo-wrapper,
2377 .photo-wrapper img {
2378     width: 100%;
2379     height: 100%;
2380     overflow: hidden;
2381     object-fit: cover;
2382 }
2383
2384 .photo-wrapper .photo-attribution {
2385     position: absolute;
2386     bottom: 0;
2387     right: 0;
2388     width: 100%;
2389     font-size: 10px;
2390     text-align: right;
2391     line-height: 1.1em;
2392     padding: 4px 2px;
2393     z-index: 10;
2394 }
2395
2396 .photo-attribution a,
2397 .photo-attribution a:visited,
2398 .photo-attribution span {
2399     padding: 4px 2px;
2400     color: #fff;
2401 }
2402
2403 /* markers and sequences */
2404 .viewfield-group {
2405     pointer-events: none;
2406 }
2407 .mode-browse .viewfield-group,
2408 .mode-select .viewfield-group {
2409     pointer-events: visible;
2410     cursor: pointer;
2411 }
2412
2413 .viewfield-group.currentView * {
2414     fill: #ffee00 !important;
2415 }
2416 .viewfield-group.hovered * {
2417     fill: #eebb00 !important;
2418 }
2419
2420 .viewfield-group circle {
2421     stroke: #555;
2422     stroke-width: 1;
2423     stroke-opacity: 0.4;
2424     fill-opacity: 0.4;
2425 }
2426 .viewfield-group.highlighted circle {
2427     stroke: #222;
2428     stroke-opacity: 0.9;
2429     fill-opacity: 0.9;
2430 }
2431 .viewfield-group.highlighted.hovered circle {
2432     stroke: #222;
2433     stroke-width: 2;
2434     stroke-opacity: 0.9;
2435     fill-opacity: 0.9;
2436 }
2437 .viewfield-group.highlighted.currentView circle {
2438     stroke: #222;
2439     stroke-width: 2;
2440     stroke-opacity: 1;
2441     fill-opacity: 1;
2442 }
2443
2444 .viewfield-group .viewfield {
2445     stroke-width: 0;
2446     stroke: #222;
2447     fill-opacity: 0.4;
2448 }
2449 .viewfield-group.highlighted .viewfield {
2450     stroke-width: 1;
2451     fill-opacity: 0.8;
2452 }
2453 .viewfield-group.highlighted.hovered .viewfield {
2454     stroke-width: 1;
2455     fill-opacity: 0.8;
2456 }
2457 .viewfield-group.highlighted.currentView .viewfield {
2458     stroke-width: 1;
2459     fill-opacity: 0.9;
2460 }
2461
2462 .viewfield-group.currentView .viewfield-scale {
2463     transform: scale(2,2);
2464 }
2465
2466 .sequence {
2467     fill: none;
2468     stroke-width: 2;
2469     stroke-opacity: 0.4;
2470 }
2471 .sequence.highlighted,
2472 .sequence.currentView {
2473     stroke-width: 4;
2474     stroke-opacity: 1;
2475 }
2476
2477
2478 /* Streetside Image Layer */
2479 .layer-streetside-images {
2480     pointer-events: none;
2481 }
2482 .layer-streetside-images .viewfield-group * {
2483     fill: #0fffc4;
2484 }
2485 .layer-streetside-images .sequence {
2486     stroke: #0fffc4;
2487     stroke-opacity: 0.85;  /* bump opacity - only one per road */
2488 }
2489
2490
2491 /* Mapillary Image Layer */
2492 .layer-mapillary {
2493     pointer-events: none;
2494 }
2495 .layer-mapillary .viewfield-group * {
2496     fill: #55ff22;
2497 }
2498 .layer-mapillary .sequence {
2499     stroke: #55ff22;
2500 }
2501
2502
2503 /* Mapillary Traffic Signs and Map Features Layers */
2504 .layer-mapillary-signs,
2505 .layer-mapillary-map-features {
2506     pointer-events: none;
2507 }
2508 .layer-mapillary-signs .icon-sign,
2509 .layer-mapillary-map-features .icon-map-feature {
2510     outline: 2px solid transparent;
2511     pointer-events: visible;
2512     cursor: pointer;
2513 }
2514 .layer-mapillary-signs .icon-sign:hover,
2515 .layer-mapillary-map-features .icon-map-feature:hover {
2516     outline: 5px solid #eebb00;
2517     background-color: #eebb00;
2518 }
2519 .layer-mapillary-signs .icon-sign.currentView,
2520 .layer-mapillary-map-features .icon-map-feature.currentView {
2521     outline: 5px solid #ffee00;
2522     background-color: #ffee00;
2523 }
2524
2525
2526 /* OpenStreetCam Image Layer */
2527 .layer-openstreetcam {
2528     pointer-events: none;
2529 }
2530 .layer-openstreetcam .viewfield-group * {
2531     fill: #20c4ff;
2532 }
2533 .layer-openstreetcam .sequence {
2534     stroke: #20c4ff;
2535 }
2536
2537
2538 /* Streetside Viewer (pannellum) */
2539 .ms-wrapper .photo-attribution .image-link {
2540     display: block;
2541 }
2542 .ms-wrapper .photo-attribution .attribution-row {
2543     display: flex;
2544     flex-flow: row nowrap;
2545     justify-content: space-between;
2546     align-items: center;
2547     padding: 0 5px;
2548 }
2549 .ms-wrapper .photo-attribution .image-view-link {
2550     text-align: left;
2551     margin: 0 5px;
2552 }
2553 .ms-wrapper .photo-attribution .image-report-link {
2554     text-align: right;
2555 }
2556
2557 .ms-wrapper .photo-attribution a:active,
2558 .ms-wrapper .photo-attribution a:hover {
2559     color: #0fffc4;
2560 }
2561
2562 .ms-wrapper .pnlm-compass.pnlm-control {
2563     width: 26px;
2564     height: 26px;
2565     left: 4px;
2566     top: 60px;
2567     background-size: contain;
2568     background-repeat: no-repeat no-repeat;
2569 }
2570
2571 label.streetside-hires {
2572     cursor: pointer;
2573 }
2574 .streetside-hires span {
2575     margin-top: 2px;
2576 }
2577 .streetside-hires input[type="checkbox"] {
2578     float: left;
2579     width: 12px;
2580     height: 12px;
2581     margin: 0 5px;
2582 }
2583
2584
2585 /* Mapillary viewer */
2586 #mly .domRenderer .TagSymbol {
2587     font-size: 10px;
2588     background-color: rgba(0,0,0,0.4);
2589     padding: 0 4px;
2590     border-radius: 4px;
2591     top: -25px;
2592 }
2593 #mly .domRenderer .Attribution {
2594     /* we will roll our own to avoid async update issues like #4526 */
2595     display: none;
2596 }
2597
2598 .mly-wrapper .photo-attribution a:active,
2599 .mly-wrapper .photo-attribution a:hover {
2600     color: #35af6d;
2601 }
2602
2603 .mly-wrapper .mapillary-js-dom {
2604     z-index: 9;
2605 }
2606
2607
2608 /* OpenStreetCam viewer */
2609 .osc-wrapper {
2610     position: relative;
2611     background-color: #000;
2612     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
2613     background-position: center;
2614     background-repeat: no-repeat;
2615 }
2616
2617 .osc-wrapper .photo-attribution a:active,
2618 .osc-wrapper .photo-attribution a:hover {
2619     color: #20c4ff;
2620 }
2621
2622 .osc-image-wrap {
2623     width: 100%;
2624     height: 100%;
2625     transform-origin:0 0;
2626     -ms-transform-origin:0 0;
2627     -webkit-transform-origin:0 0;
2628     -moz-transform-origin:0 0;
2629     -o-transform-origin:0 0;
2630 }
2631
2632
2633 /* photo-controls (step forward, back, rotate) */
2634 .photo-controls-wrap {
2635     text-align: center;
2636     position: absolute;
2637     top: 10px;
2638     width: 100%;
2639     z-index: 10;
2640 }
2641
2642 .photo-controls {
2643     display: inline-block;
2644     z-index: 10;
2645 }
2646
2647 .photo-controls button,
2648 .photo-controls button:focus {
2649     height: 18px;
2650     width: 18px;
2651     background: rgba(0,0,0,0.65);
2652     color: #eee;
2653     border-radius: 0;
2654 }
2655 .photo-controls button:first-of-type {
2656     border-radius: 3px 0 0 3px;
2657 }
2658 .photo-controls button:last-of-type {
2659     border-radius: 0 3px 3px 0;
2660 }
2661 .photo-controls button:hover,
2662 .photo-controls button:active {
2663     background: rgba(0,0,0,0.85);
2664     color: #fff;
2665 }
2666
2667 /* OSM Notes and KeepRight Layers */
2668
2669 .error-header-icon .qa_error-fill,
2670 .layer-keepRight .qa_error .qa_error-fill,
2671 .layer-improveOSM .qa_error .qa_error-fill {
2672     stroke: #333;
2673     stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */
2674 }
2675
2676 .note-header-icon .note-fill,
2677 .layer-notes .note .note-fill {
2678     color: #f30;
2679     stroke: #333;
2680     stroke-width: 40px;
2681 }
2682 .note-header-icon.new .note-fill,
2683 .layer-notes .note.new .note-fill {
2684     color: #fe0;
2685     stroke: #333;
2686     stroke-width: 40px;
2687 }
2688 .note-header-icon.closed .note-fill,
2689 .layer-notes .note.closed .note-fill {
2690     color: #5d0;
2691     stroke: #333;
2692     stroke-width: 40px;
2693 }
2694
2695 /* slight adjustments to preset icon for note icons */
2696 .note-header-icon .preset-icon-28 {
2697     top: 18px;
2698 }
2699 .note-header-icon .note-icon-annotation {
2700     position: absolute;
2701     top: 22px;
2702     left: 22px;
2703     margin: auto;
2704 }
2705 .note-header-icon .note-icon-annotation .icon {
2706     width: 15px;
2707     height: 15px;
2708 }
2709
2710 /* adjustment for error icon */
2711
2712 .error-header-icon .preset-icon-28 {
2713     top: auto;
2714     left: auto;
2715 }
2716
2717 .error-header-icon {
2718     display: flex;
2719     align-items: center;
2720     justify-content: center;
2721 }
2722
2723 /* Keep Right Errors
2724 ------------------------------------------------------- */
2725 .keepRight.error_type-20,     /* multiple nodes on same spot */
2726 .keepRight.error_type-40,     /* impossible oneways */
2727 .keepRight.error_type-210,    /* self intersecting ways */
2728 .keepRight.error_type-270,    /* unusual motorway connection */
2729 .keepRight.error_type-310,    /* roundabout issues */
2730 .keepRight.error_type-320,    /* improper _link */
2731 .keepRight.error_type-350 {   /* improper bridge tag */
2732     color: #ff9;
2733 }
2734
2735 .keepRight.error_type-50 {    /* almost junctions */
2736     color: #88f;
2737 }
2738
2739 .keepRight.error_type-60,     /* deprecated tags */
2740 .keepRight.error_type-70,     /* tagging issues */
2741 .keepRight.error_type-90,     /* motorway without ref */
2742 .keepRight.error_type-100,    /* place of worship without religion */
2743 .keepRight.error_type-110,    /* poi without name */
2744 .keepRight.error_type-150,    /* railway crossing without tag */
2745 .keepRight.error_type-220,    /* misspelled tag */
2746 .keepRight.error_type-380 {   /* non-physical sport tag */
2747     color: #5d0;
2748 }
2749
2750 .keepRight.error_type-130 {   /* disconnected ways */
2751     color: #fa3;
2752 }
2753
2754 .keepRight.error_type-170 {   /* FIXME tag */
2755     color: #ff0;
2756 }
2757
2758 .keepRight.error_type-190 {   /* intersection without junction */
2759     color: #f33;
2760 }
2761
2762 .keepRight.error_type-200 {   /* overlapping ways */
2763     color: #fdbf6f;
2764 }
2765
2766 .keepRight.error_type-160,    /* railway layer conflict */
2767 .keepRight.error_type-230 {   /* layer conflict */
2768     color: #b60;
2769 }
2770
2771 .keepRight.error_type-280 {   /* boundary issues */
2772     color: #5f47a0;
2773 }
2774
2775 .keepRight.error_type-180,    /* relation without type */
2776 .keepRight.error_type-290 {   /* turn restriction issues */
2777     color: #ace;
2778 }
2779
2780 .keepRight.error_type-300,    /* missing maxspeed */
2781 .keepRight.error_type-390 {   /* missing tracktype */
2782     color: #090;
2783 }
2784
2785 .keepRight.error_type-360,    /* language unknown */
2786 .keepRight.error_type-370,    /* doubled places */
2787 .keepRight.error_type-410 {   /* website issues */
2788     color: #f9b;
2789 }
2790
2791 .keepRight.error_type-120,    /* way without nodes */
2792 .keepRight.error_type-400 {   /* geometry / turn angles */
2793     color: #c35;
2794 }
2795
2796 /* ImproveOSM Errors
2797 ------------------------------------------------------- */
2798
2799 .improveOSM.error_type-ow {   /* missing one way */
2800     color: #1E90FF;
2801 }
2802
2803 .improveOSM.error_type-mr-road {   /* missing road */
2804     color: #B452CD;
2805 }
2806 .improveOSM.error_type-mr-path {   /* missing path */
2807     color: #A0522D;
2808 }
2809 .improveOSM.error_type-mr-parking {   /* missing parking */
2810     color: #EEEE00;
2811 }
2812 .improveOSM.error_type-mr-both {   /* missing road+parking */
2813     color: #FFA500;
2814 }
2815
2816 .improveOSM.error_type-tr {   /* missing turn restriction */
2817     color: #EC1C24;
2818 }
2819
2820
2821 /* Custom Map Data (geojson, gpx, kml, vector tile) */
2822 .layer-mapdata {
2823     pointer-events: none;
2824 }
2825
2826 .layer-mapdata path.shadow {
2827     pointer-events: stroke;
2828     stroke: #f6634f;
2829     stroke-width: 16;
2830     stroke-opacity: 0;
2831     fill: none;
2832 }
2833 .layer-mapdata path.MultiPoint.shadow,
2834 .layer-mapdata path.Point.shadow {
2835     pointer-events: fill;
2836     fill: #f6634f;
2837     fill-opacity: 0;
2838 }
2839 .layer-mapdata path.shadow.hover:not(.selected) {
2840     stroke-opacity: 0.4;
2841 }
2842 .layer-mapdata path.shadow.selected {
2843     stroke-opacity: 0.7;
2844 }
2845
2846 .layer-mapdata path.stroke {
2847     stroke: #ff26d4;
2848     stroke-width: 2;
2849     fill: none;
2850 }
2851
2852 .layer-mapdata path.fill {
2853     stroke-width: 0;
2854     stroke-opacity: 0.3;
2855     stroke: #ff26d4;
2856     fill: #ff26d4;
2857     fill-opacity: 0.3;
2858     fill-rule: evenodd;
2859 }
2860
2861 .layer-mapdata text.label-halo,
2862 .layer-mapdata text.label {
2863     font-size: 10px;
2864     font-weight: bold;
2865     dominant-baseline: middle;
2866 }
2867 .layer-mapdata text.label {
2868     fill: #ff26d4;
2869 }
2870 .layer-mapdata text.label.hover,
2871 .layer-mapdata text.label.selected {
2872     fill: #f6634f;
2873 }
2874 .layer-mapdata text.label-halo {
2875     opacity: 0.7;
2876     stroke: #000;
2877     stroke-width: 5px;
2878     stroke-miterlimit: 1;
2879 }
2880 /* Fill Styles */
2881
2882 .low-zoom.fill-wireframe path.stroke,
2883 .fill-wireframe path.stroke {
2884     stroke-width: 1 !important;
2885     stroke-opacity: 0.5 !important;
2886     stroke-dasharray: none !important;
2887     fill: none !important;
2888 }
2889 .low-zoom.fill-wireframe .layer-mapdata path.stroke,
2890 .fill-wireframe .layer-mapdata path.stroke {
2891     stroke-width: 2 !important;
2892     stroke-opacity: 1 !important;
2893 }
2894
2895 .low-zoom.fill-wireframe path.shadow,
2896 .fill-wireframe path.shadow {
2897     stroke-width: 12;
2898 }
2899
2900 .fill-wireframe path.shadow.related:not(.selected),
2901 .fill-wireframe path.shadow.hover:not(.selected) {
2902     stroke-opacity: 0.4;
2903 }
2904 .fill-wireframe path.shadow.selected {
2905     stroke-opacity: 0.6;
2906 }
2907
2908 .fill-wireframe .point,
2909 .fill-wireframe .areaicon,
2910 .fill-wireframe .areaicon-halo,
2911 .fill-wireframe path.casing,
2912 .fill-wireframe path.fill,
2913 .fill-wireframe path.oneway {
2914     display: none !important;
2915 }
2916
2917 .fill-partial path.area.fill {
2918     fill-opacity: 0;
2919     stroke-width: 60px;
2920     pointer-events: none;
2921 }
2922 .fill-partial path.area.fill.tag-building_part {
2923     stroke-width: 40px;
2924 }
2925 .fill-partial path.area.fill.tag-indoor {
2926     stroke-width: 20px;
2927 }
2928 .mode-browse .fill-partial path.area.fill,
2929 .mode-select .fill-partial path.area.fill {
2930     pointer-events: visibleStroke;
2931 }
2932 /* Basics
2933 ------------------------------------------------------- */
2934 /*
2935   Opera misbehaves when the window is resized vertically unless 100% width + height are
2936   applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
2937 */
2938 html, body {
2939     width: 100%;
2940     height: 100%;
2941 }
2942
2943 body {
2944     font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
2945         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
2946         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
2947         sans-serif;
2948     margin: 0;
2949     padding: 0;
2950     color: #333;
2951     overflow: hidden;
2952     -ms-user-select: none;
2953     -ms-content-zooming: none;
2954 }
2955
2956 .unsupported {
2957     text-align: center;
2958     vertical-align: middle;
2959     padding-top: 100px;
2960     font-size: 15px;
2961 }
2962
2963 .id-container {
2964     height: 100%;
2965     width: 100%;
2966 }
2967
2968 #content {
2969     position: relative;
2970     overflow: hidden;
2971     height: 100%;
2972 }
2973
2974 #content.active {
2975     -webkit-filter: none !important;
2976     filter: none !important;
2977     -webkit-duration: 200ms;
2978     transition-duration: 200ms;
2979 }
2980
2981 #content.inactive {
2982     -webkit-filter: grayscale(80%) brightness(80%);
2983     filter: grayscale(80%) brightness(80%);
2984     -webkit-duration: 200ms;
2985     transition-duration: 200ms;
2986 }
2987
2988 #defs {
2989     /* Can't be display: none or the clippaths are ignored. */
2990     position: absolute;
2991     width: 0;
2992     height: 0;
2993 }
2994
2995 div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
2996     -moz-box-sizing: border-box;
2997     -webkit-box-sizing: border-box;
2998     box-sizing: border-box;
2999 }
3000
3001 a, button, input, textarea {
3002     -webkit-tap-highlight-color: rgba(0,0,0,0);
3003     -webkit-touch-callout: none;
3004 }
3005
3006 ul li {
3007     list-style: none;
3008 }
3009
3010 a,
3011 button,
3012 .radial-menu-item {
3013     cursor: pointer;
3014 }
3015
3016 h2 {
3017     font-size: 25px;
3018     line-height: 1.25;
3019     font-weight: bold;
3020     margin-bottom: 20px;
3021 }
3022
3023 h3:last-child,
3024 h2:last-child,
3025 h4:last-child { margin-bottom: 0;}
3026
3027 h3 {
3028     font-size: 16px;
3029     line-height: 1.25;
3030     font-weight: bold;
3031     margin-bottom: 10px;
3032 }
3033 h4, h5 {
3034     font-size: 12px;
3035     font-weight: bold;
3036     padding-bottom: 10px;
3037 }
3038
3039 :focus {
3040     outline-color: transparent;
3041     outline-style: none;
3042 }
3043
3044 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
3045     color: #aaa;
3046     opacity: 1; /* Firefox */
3047 }
3048 :-ms-input-placeholder { /* Internet Explorer 10-11 */
3049     color: #aaa;
3050 }
3051 ::-ms-input-placeholder { /* Microsoft Edge */
3052     color: #aaa;
3053 }
3054
3055 p {
3056     font-size: 12px;
3057     margin: 0;
3058     padding: 0;
3059 }
3060 p:last-child {
3061     padding-bottom: 0;
3062 }
3063 em {
3064     font-style: italic;
3065 }
3066 strong {
3067     font-weight: bold;
3068 }
3069 a:visited, a {
3070     color: #7092ff;
3071 }
3072 a:hover {
3073     color: #597be7;
3074 }
3075
3076 /* Forms
3077 ------------------------------------------------------- */
3078 textarea  {
3079     resize: vertical;
3080     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
3081         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
3082         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
3083         sans-serif;
3084 }
3085
3086 textarea,
3087 input[type=text],
3088 input[type=search],
3089 input[type=number],
3090 input[type=url],
3091 input[type=tel],
3092 input[type=email] {
3093     background-color: #fff;
3094     color: #333;
3095     border: 1px solid #ccc;
3096     padding: 5px 20px 5px 10px;
3097     height: 30px;
3098     border-radius: 4px;
3099     text-overflow: ellipsis;
3100 }
3101 [dir='rtl'] textarea,
3102 [dir='rtl'] input[type=text],
3103 [dir='rtl'] input[type=search],
3104 [dir='rtl'] input[type=number],
3105 [dir='rtl'] input[type=url],
3106 [dir='rtl'] input[type=tel],
3107 [dir='rtl'] input[type=email] {
3108     padding: 5px 10px 5px 20px;
3109 }
3110
3111 textarea:focus,
3112 input:focus {
3113     background-color: #f1f1f1;
3114 }
3115
3116 textarea.disabled,
3117 input.disabled {
3118     color: #777;
3119     background-color: #eee;
3120     cursor: not-allowed;
3121 }
3122
3123 input[type="checkbox"],
3124 input[type="radio"] {
3125     float: left;
3126     width: 14px;
3127     height: 14px;
3128     margin-right: 5px;
3129     margin-top: 3px;
3130     cursor: pointer;
3131 }
3132 [dir='rtl'] input[type="checkbox"],
3133 [dir='rtl'] input[type="radio"] {
3134     float: right;
3135     margin-left: 5px;
3136     margin-right: 0;
3137 }
3138
3139 /* tables */
3140 table {
3141     background-color: #fff;
3142     border-collapse: collapse;
3143     width: 100%;
3144     border-spacing: 0;
3145 }
3146 table th {
3147     text-align: left;
3148 }
3149 table.tags, table.tags td, table.tags th {
3150     border: 1px solid #ccc;
3151     padding: 4px;
3152 }
3153
3154 ::-ms-clear {
3155    display: none;
3156 }
3157
3158 /* Grid
3159 ------------------------------------------------------- */
3160 .col6  { float: left; width: 50.0000%; max-width: 600px; }
3161 .col12 { float: left; width: 100.0000%; }
3162
3163
3164 /* Utility Classes
3165 ------------------------------------------------------- */
3166 .fillL {
3167     background: #fff;
3168     color: #333;
3169 }
3170 .fillL2 {
3171     background: #f6f6f6;
3172     color: #333;
3173 }
3174 .fillL3 {
3175     background: #ececec;
3176     color: #333;
3177 }
3178 .fillD {
3179     background: rgba(0,0,0,.5);
3180     color: #fff;
3181 }
3182 .fillD2 {
3183     background: rgba(0,0,0,.75);
3184     color: #fff;
3185 }
3186
3187 .fl { float: left;}
3188 .fr { float: right;}
3189 .al { left: 0; }
3190 .ar { right: 0; }
3191
3192 input.hide,
3193 textarea.hide,
3194 div.hide,
3195 form.hide,
3196 button.hide,
3197 a.hide,
3198 ul.hide,
3199 li.hide {
3200     display: none;
3201 }
3202
3203 .deemphasize {
3204     color: #a9a9a9;
3205 }
3206 .content {
3207     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
3208 }
3209 .loading {
3210     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
3211     background-size: 5px 5px;
3212 }
3213
3214
3215 /* Buttons
3216 ------------------------------------------------------- */
3217 button {
3218     text-align: center;
3219     line-height: 20px;
3220     border: 0;
3221     background: #fff;
3222     font-weight: bold;
3223     color: #333;
3224     font-size: 12px;
3225     display: inline-block;
3226     height: 40px;
3227     border-radius: 4px;
3228 }
3229
3230 button:focus,
3231 button:hover {
3232     background-color: #ececec;
3233 }
3234 button.active {
3235     background: #7092ff;
3236 }
3237 button.disabled {
3238     background-color: rgba(255,255,255,.25);
3239     color: rgba(0,0,0,.4);
3240     cursor: not-allowed;
3241 }
3242
3243 .joined > * {
3244     border-radius: 0;
3245     border-right: 1px solid rgba(0,0,0,.5);
3246 }
3247 [dir='rtl'] .joined > * {
3248     border-left: 1px solid rgba(0,0,0,.5);
3249     border-right: none;
3250 }
3251
3252 .fillL .joined > * {
3253     border-right: 1px solid #fff;
3254 }
3255 .joined > *:first-child {
3256     border-radius: 4px 0 0 4px;
3257 }
3258 [dir='rtl'] .joined > *:first-child {
3259     border-radius: 0 4px 4px 0;
3260 }
3261 .joined > *:last-child {
3262     border-right-width: 0;
3263     border-radius: 0 4px 4px 0;
3264 }
3265 [dir='rtl'] .joined > *.bar-button:last-child {
3266     border-radius: 4px 0 0 4px;
3267 }
3268
3269
3270 /* Action buttons */
3271 button.action {
3272     background: #7092ff;
3273     color: #fff;
3274 }
3275 button.action:focus,
3276 button.action:hover {
3277     background: #597be7;
3278 }
3279 button.secondary-action {
3280     background: #ececec;
3281 }
3282 button.secondary-action:focus,
3283 button.secondary-action:hover {
3284     background: #cccccc;
3285 }
3286
3287 button.action.disabled,
3288 button.action.disabled:hover,
3289 button[disabled].action,
3290 button[disabled].action:hover {
3291     background: #cccccc;
3292     color: #888;
3293     cursor: not-allowed;
3294 }
3295
3296
3297 /* Icons
3298 ------------------------------------------------------- */
3299 .icon {
3300     vertical-align: top;
3301     width: 20px;
3302     height: 20px;
3303 }
3304
3305 .icon.inline {
3306     vertical-align: text-top;
3307     width: 14px;
3308     height: 14px;
3309     margin: 0px 3px;
3310 }
3311
3312 .icon.pre-text {
3313     margin-right: 5px;
3314 }
3315 [dir='rtl'] .icon.pre-text {
3316     margin-left: 5px;
3317     margin-right: 0;
3318 }
3319
3320 .icon.pre-text.user-icon {
3321     margin-left: 5px;
3322     margin-right: 5px;
3323 }
3324
3325 .icon.light {
3326     color: #fff;
3327 }
3328 .icon.created {
3329     color: #00ca07;
3330 }
3331 .icon.modified {
3332     color: #666;
3333 }
3334 .icon.deleted {
3335     color: #ea0000;
3336 }
3337
3338 .user-icon {
3339     max-height: 20px;
3340     max-width: 20px;
3341     height: auto;
3342     width: auto;
3343     border-radius: 3px;
3344 }
3345
3346 .icon-annotation {
3347     color: #333;
3348 }
3349
3350 .notification-badge {
3351     display: block;
3352     position: absolute;
3353     width: 10px;
3354     height: 10px;
3355     right: 7px;
3356     top: 9px;
3357 }
3358
3359 .notification-badge.hide {
3360     display: none;
3361 }
3362
3363
3364 /* Toolbar / Persistent UI Elements
3365 ------------------------------------------------------- */
3366 #bar {
3367     display: flex;
3368     flex-flow: row nowrap;
3369     justify-content: space-between;
3370     position: absolute;
3371     padding: 10px 5px 0px 5px;
3372     left: 0;
3373     top: 0;
3374     right: 0;
3375     z-index: 101;
3376 }
3377 #bar .toolbar-item {
3378     display: flex;
3379     flex: 0 1 auto;
3380     flex-flow: column wrap;
3381     justify-content: center;
3382     position: relative;
3383 }
3384 #bar .toolbar-item .item-content {
3385     display: flex;
3386     flex: 0 1 auto;
3387     flex-flow: row nowrap;
3388     justify-content: center;
3389     position: relative;
3390     height: 40px;
3391     width: auto;
3392     margin: 0 5px;
3393 }
3394 #bar .toolbar-item .item-label {
3395     text-align: center;
3396     font-size: 11px;
3397     white-space: nowrap;
3398     margin: 1px 2px 2px 2px;
3399 }
3400 #bar .toolbar-item.spacer {
3401     width: 100%;
3402     flex-grow: 2;
3403 }
3404 #bar .toolbar-item:first-child {
3405     justify-content: flex-start;
3406 }
3407 #bar .toolbar-item:last-child {
3408     justify-content: flex-end;
3409 }
3410 #bar .toolbar-item:empty:not(.spacer) {
3411     display: none;
3412 }
3413 button.bar-button {
3414     flex: 0 0 auto;
3415     flex-flow: row nowrap;
3416     align-items: center;
3417     padding: 0 10px;
3418     min-width: 30px;
3419     white-space: nowrap;
3420     display: flex;
3421 }
3422 button.bar-button .icon {
3423     flex: 0 0 20px;
3424 }
3425 button.bar-button .label {
3426     flex: 0 1 auto;
3427     padding: 0 5px;
3428 }
3429
3430 button.bar-button.dragging {
3431     opacity: 0.75;
3432     z-index: 200;
3433 }
3434 button.bar-button.dragging .tooltip {
3435     display: none;
3436 }
3437 button.bar-button.dragging.removing {
3438     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer;
3439 }
3440
3441 button.save .count {
3442     display: inline-block;
3443     min-width: 32px;
3444     text-align: center;
3445 }
3446
3447 .help-wrap svg.icon.pre-text.add-note,
3448 button.add-note svg.icon {
3449     height: 15px;
3450     width: 15px;
3451     color: rgba(0,0,0,0.25);
3452     stroke: #333;
3453     stroke-width: 60px;
3454     margin-top: 3px;
3455 }
3456 button.add-note svg.icon {
3457     margin-left: unset;
3458     margin-right: 4px;
3459 }
3460 [dir='rtl'] button.add-note svg.icon {
3461     margin-left: 4px;
3462     margin-right: unset;
3463 }
3464 .help-wrap svg.icon.pre-text.add-note {
3465     margin-left: 3px;
3466     margin-right: 3px;
3467 }
3468
3469 .spinner {
3470     opacity: .5;
3471     position: absolute;
3472     right: 4px;
3473     bottom: 26px;
3474 }
3475 .spinner img {
3476     height: 20px;
3477     width: 20px;
3478     background: transparent;
3479     border-radius: 100%;
3480 }
3481 [dir='rtl'] .spinner img {
3482     -moz-transform: scaleX(-1);
3483     -o-transform: scaleX(-1);
3484     -webkit-transform: scaleX(-1);
3485     transform: scaleX(-1);
3486     filter: FlipH;
3487     -ms-filter: "FlipH";
3488 }
3489
3490
3491 #bar.narrow .spinner,
3492 #bar.narrow button.bar-button .label {
3493     display: none;
3494 }
3495 #bar.narrow button .count {
3496     border-left-width: 0;
3497     border-right-width: 0;
3498 }
3499
3500 [dir='ltr'] .undo-redo button:first-of-type {
3501     margin-right: 1px;
3502 }
3503 [dir='rtl'] .undo-redo button:first-of-type {
3504     margin-left: 1px;
3505 }
3506
3507 /* Add a feature search bar
3508 ------------------------------------------------------- */
3509
3510 .search-add {
3511     width: 200%;
3512     justify-content: center;
3513     position: relative;
3514     min-width: 150px;
3515     max-width: 325px;
3516 }
3517 .search-add .search-wrap {
3518     position: relative;
3519     width: 100%;
3520 }
3521 [dir='ltr'] .search-add .search-wrap {
3522     border-radius: 20px 4px 4px 20px;
3523 }
3524 [dir='rtl'] .search-add .search-wrap {
3525     border-radius: 4px 20px 20px 4px;
3526 }
3527 .search-add .search-wrap.focused .tooltip {
3528     display: none;
3529 }
3530 .search-add .search-wrap:last-child {
3531     border-radius: 20px;
3532 }
3533 .search-add input[type='search'] {
3534     position: relative;
3535     width: 100%;
3536     height: 100%;
3537     border: none;
3538     font-size: 14px;
3539     text-indent: 25px;
3540     padding: 5px 10px;
3541     border-radius: inherit;
3542 }
3543 .search-add input[type='search'][disabled] {
3544     opacity: 0.25;
3545     cursor: not-allowed;
3546 }
3547 .search-add .search-icon {
3548     color: #333;
3549     display: block;
3550     position: absolute;
3551     left: 10px;
3552     top: 10px;
3553     pointer-events: none;
3554 }
3555 [dir='rtl'] .search-add .search-icon {
3556     left: auto;
3557     right: 10px;
3558 }
3559 .search-add .popover {
3560     border: none;
3561     border-radius: 6px;
3562     position: absolute;
3563     max-height: 600px;
3564     top: 44px;
3565     width: 200%;
3566     max-width: 325px;
3567     margin: auto;
3568     left: auto;
3569     right: auto;
3570     z-index: 300;
3571 }
3572 .search-add .popover .popover-content {
3573     overflow-y: auto;
3574     height: 100%;
3575     max-height: 60vh;
3576 }
3577 .search-add .popover,
3578 .search-add .popover .popover-content {
3579     /* ensure corners are rounded in Chrome */
3580     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
3581 }
3582 .search-add .popover .popover-footer {
3583     padding: 5px 10px 5px 10px;
3584     background: #f6f6f6;
3585     border-top: 1px solid #DCDCDC;
3586     display: flex;
3587 }
3588 .search-add .popover .popover-footer .message {
3589     color: #666666;
3590     flex-grow: 1;
3591 }
3592 .search-add .popover .popover-footer button.filter {
3593     height: 20px;
3594     background: transparent;
3595     color: #666;
3596 }
3597 .search-add .popover .popover-footer button.filter.active {
3598     color: #7092ff;
3599 }
3600 .search-add .popover .popover-footer button.filter:hover {
3601     color: #333;
3602 }
3603 .search-add .popover .popover-footer button.filter.active:hover {
3604     color: #597be7;
3605 }
3606 .search-add .popover::-webkit-scrollbar {
3607     /* don't overlap rounded corners */
3608     background: transparent;
3609 }
3610 .search-add .popover .list {
3611     height: 100%;
3612 }
3613 .search-add .list-item > .row {
3614     display: flex;
3615     position: relative;
3616     padding: 2px;
3617 }
3618 .search-add .list-item:not(:last-of-type) .row,
3619 .search-add .subsection.subitems .list-item .row,
3620 .search-add .subsection > .tag-reference-body  {
3621     border-bottom: 1px solid #DCDCDC;
3622 }
3623 .search-add .list-item .label {
3624     font-weight: bold;
3625     font-size: 12px;
3626     padding-left: 2px;
3627     top: 0;
3628     bottom: 0;
3629     position: relative;
3630     display: flex;
3631     align-items: center;
3632     line-height: 1.3em;
3633     width: 100%;
3634 }
3635 .search-add .list-item .label .namepart:nth-child(2) {
3636     font-weight: normal;
3637 }
3638 .search-add .list-item.disabled .preset-icon-container,
3639 .search-add .list-item.disabled .label {
3640     opacity: 0.55;
3641 }
3642 [dir='ltr'] .search-add .list-item .label .icon.inline {
3643     margin-left: 0;
3644 }
3645 [dir='rtl'] .search-add .list-item .label .icon.inline {
3646     margin-right: 0;
3647 }
3648 .search-add .list-item .row > *:not(button) {
3649     pointer-events: none;
3650 }
3651 .search-add .list-item button.choose {
3652     position: absolute;
3653     border-radius: 0;
3654     height: 100%;
3655     width: 100%;
3656     top: 0;
3657     left: 0;
3658 }
3659 .search-add .list-item button.choose:hover,
3660 .search-add .list-item button.choose:focus {
3661     background: #fff;
3662 }
3663 .search-add .list-item.focused:not(.disabled) button.choose {
3664     background: #e8ebff;
3665 }
3666 .search-add .list-item button.choose.disabled {
3667     background-color: #ececec;
3668 }
3669 .search-add .subsection .list-item button.choose {
3670     opacity: 0.85;
3671 }
3672 .search-add .subsection .tag-reference-body {
3673     background: rgba(255, 255, 255, 0.85);
3674     padding: 10px;
3675 }
3676 .search-add .list-item button.accessory {
3677     position: relative;
3678     flex: 0 0 auto;
3679     color: #808080;
3680     background: transparent;
3681     padding-right: 3px;
3682     padding-left: 3px;
3683 }
3684 .search-add .list-item button.accessory:hover {
3685     color: #666;
3686 }
3687 .search-add .list-item button.tag-reference-open path {
3688     fill: #000;
3689 }
3690 .search-add .subsection {
3691     background-color: #CBCBCB;
3692 }
3693 [dir='ltr'] .search-add .subitems {
3694     padding-left: 6px;
3695 }
3696 [dir='rtl'] .search-add .subitems {
3697     padding-right: 6px;
3698 }
3699
3700 /* Add a preset mode buttons
3701 ------------------------------------------------------- */
3702
3703 button.bar-button.add-preset {
3704     border-radius: 4px;
3705 }
3706 [dir='ltr'] button.bar-button.add-preset {
3707     margin-left: 1px;
3708 }
3709 [dir='rtl'] button.bar-button.add-preset {
3710     margin-right: 1px;
3711 }
3712 [dir='ltr'] button.bar-button.add-preset.first-recent {
3713     margin-left: 10px;
3714 }
3715 [dir='rtl'] button.bar-button.add-preset.first-recent {
3716     margin-right: 10px;
3717 }
3718 button.bar-button.add-preset {
3719     padding: 0;
3720 }
3721 button.add-preset.disabled .preset-icon-container {
3722     opacity: 0.5;
3723 }
3724 /* Header for modals / panes
3725 ------------------------------------------------------- */
3726 .header {
3727     border-bottom: 1px solid #ccc;
3728     height: 60px;
3729     position: relative;
3730 }
3731
3732 .header h3 {
3733     text-align: center;
3734     margin-bottom: 0;
3735     white-space: nowrap;
3736     text-overflow: ellipsis;
3737     overflow: hidden;
3738     padding: 20px;
3739 }
3740
3741 .header button,
3742 .modal > button {
3743     border-radius: 0;
3744     width: 40px;
3745     text-align: center;
3746     overflow: hidden;
3747 }
3748
3749 .header button {
3750     position: relative;
3751     height: 100%;
3752 }
3753
3754 .field-help-title button.close,
3755 .sidebar-component .header button.data-editor-close,
3756 .sidebar-component .header button.note-editor-close,
3757 .sidebar-component .header button.error-editor-close,
3758 .entity-editor-pane .header button.preset-close,
3759 .preset-list-pane .header button.preset-choose {
3760     position: absolute;
3761     right: 0;
3762     top: 0;
3763 }
3764 [dir='rtl'] .field-help-title button.close,
3765 [dir='rtl'] .sidebar-component .header button.data-editor-close,
3766 [dir='rtl'] .sidebar-component .header button.note-editor-close,
3767 [dir='rtl'] .sidebar-component .header button.error-editor-close,
3768 [dir='rtl'] .entity-editor-pane .header button.preset-close,
3769 [dir='rtl'] .preset-list-pane .header button.preset-choose {
3770     left: 0;
3771     right: auto;
3772 }
3773
3774 .entity-editor-pane .header button.preset-choose {
3775     position: absolute;
3776     left: 0;
3777     top: 0;
3778 }
3779 [dir='rtl'] .entity-editor-pane .header button.preset-choose {
3780     left: auto;
3781     right: 0;
3782 }
3783
3784 .preset-choose {
3785     font-size: 16px;
3786     line-height: 1.25;
3787     font-weight: bold;
3788 }
3789
3790 .modal > button {
3791     position: absolute;
3792     right: 0;
3793     top: 0;
3794     height: 59px;
3795     z-index: 50;
3796 }
3797 [dir='rtl'] .modal > button {
3798     left: 0;
3799     right: unset;
3800 }
3801
3802 .footer {
3803     position: absolute;
3804     bottom: 0;
3805     margin: 0;
3806     padding: 5px 20px 5px 20px;
3807     border-top: 1px solid #ccc;
3808     background-color: #f6f6f6;
3809     width: 100%;
3810     z-index: 1;
3811     flex-wrap: wrap;
3812     justify-content: space-between;
3813     list-style: none;
3814     display: flex;
3815 }
3816
3817 .footer > a {
3818     justify-content: center;
3819 }
3820
3821 .header-container {
3822     display: flex;
3823     justify-content: space-between;
3824 }
3825
3826 .header-block-outer {
3827     width: 20%;
3828 }
3829
3830 .header-block-close {
3831     display: flex;
3832     justify-content: flex-end;
3833 }
3834
3835 /* Hide/Toggle collapsable sections (aka Disclosure)
3836 ------------------------------------------------------- */
3837 .hide-toggle .icon.pre-text {
3838     vertical-align: text-top;
3839     width: 16px;
3840     height: 16px;
3841     margin-left: -3px;
3842 }
3843 [dir='rtl'] .hide-toggle .icon.pre-text {
3844     margin-left: 0;
3845     margin-right: -3px;
3846 }
3847
3848 a:visited.hide-toggle,
3849 a.hide-toggle {
3850     display: inline-block;
3851     font-size: 14px;
3852     font-weight: bold;
3853     padding-bottom: 5px;
3854 }
3855
3856
3857 /* Sidebar / Inspector
3858 ------------------------------------------------------- */
3859 #sidebar {
3860     position: relative;
3861     float: left;
3862     height: 100%;
3863     z-index: 10;
3864     background: #f6f6f6;
3865     -ms-user-select: element;
3866     border: 0px solid #ccc;
3867     border-right-width: 1px;
3868 }
3869 [dir='rtl'] #sidebar {
3870     float: right;
3871     border-right-width: 0px;
3872     border-left-width: 1px;
3873 }
3874
3875 #sidebar-resizer {
3876     position: absolute;
3877     top: 0;
3878     right: -6px;
3879     height: 100%;
3880     width: 6px;
3881     cursor: col-resize;
3882 }
3883 [dir='rtl'] #sidebar-resizer {
3884     right: auto;
3885     left: -6px;
3886 }
3887
3888 #sidebar.collapsed #sidebar-resizer {
3889     /* make target wider to avoid the user accidentally resizing window */
3890     width: 10px;
3891     right: -10px;
3892 }
3893 [dir='rtl'] #sidebar.collapsed #sidebar-resizer {
3894     left: -10px;
3895 }
3896
3897 .sidebar-component {
3898     position: absolute;
3899     top: 0;
3900     left: 0;
3901     bottom: 0;
3902     right: 0;
3903 }
3904
3905 .sidebar-component .body {
3906     width: 100%;
3907     overflow: auto;
3908     top: 60px;
3909     bottom: 0;
3910     position: absolute;
3911 }
3912
3913 .panewrap {
3914     position: absolute;
3915     width: 200%;
3916     height: 100%;
3917     right: -100%;
3918 }
3919
3920 .pane {
3921     position: absolute;
3922     width: 50%;
3923     top: 0;
3924     bottom: 30px;
3925 }
3926
3927 .pane:first-child {
3928     left: 0;
3929 }
3930
3931 .pane:last-child {
3932     right: 0;
3933 }
3934
3935 .inspector-wrap {
3936     width: 100%;
3937     height: 100%;
3938     overflow: hidden;
3939     position: relative;
3940 }
3941
3942 .inspector-hidden {
3943     display: none;
3944 }
3945
3946 .inspector-body {
3947     overflow-y: scroll;
3948     overflow-x: hidden;
3949     position: absolute;
3950     right: 0;
3951     left: 0;
3952     bottom: 0;
3953 }
3954
3955 .feature-list-pane .inspector-body,
3956 .preset-list-pane .inspector-body {
3957     top: 120px;
3958 }
3959 .entity-editor-pane .inspector-body,
3960 .selection-list-pane .inspector-body {
3961     top: 60px;
3962 }
3963
3964 .inspector-inner {
3965     padding: 20px 20px 5px 20px;
3966     position: relative;
3967 }
3968
3969 #sidebar .search-header .icon {
3970     display: block;
3971     position: absolute;
3972     left: 10px;
3973     top: 80px;
3974     pointer-events: none;
3975 }
3976 [dir='rtl'] #sidebar .search-header .icon {
3977     left: auto;
3978     right: 10px;
3979 }
3980
3981 #sidebar .search-header input {
3982     position: absolute;
3983     top: 60px;
3984     height: 60px;
3985     width: 100%;
3986     padding: 5px 10px;
3987     border-radius: 0;
3988     border-width: 0;
3989     border-bottom-width: 1px;
3990     text-indent: 30px;
3991     font-size: 18px;
3992     font-weight: bold;
3993 }
3994
3995
3996 /* Feature List / Search Results
3997 ------------------------------------------------------- */
3998 .feature-list  {
3999     width: 100%;
4000 }
4001 .no-results-item,
4002 .geocode-item,
4003 .feature-list-item {
4004     width: 100%;
4005     position: relative;
4006     border-bottom: 1px solid #ccc;
4007     border-radius: 0;
4008 }
4009
4010 .geocode-item {
4011     width: 50%;
4012     background-color: #ccc;
4013     left: 25%;
4014     margin-top: 30px;
4015     border-radius: 2px;
4016 }
4017
4018 [dir='rtl'] .geocode-item {
4019     left: -25%;
4020 }
4021
4022 .geocode-item:hover {
4023     background-color: #aaa;
4024 }
4025
4026 .feature-list-item {
4027     background-color: #fff;
4028     font-weight: bold;
4029     height: 40px;
4030     line-height: 20px;
4031 }
4032 .feature-list-item:hover {
4033     background-color: #ececec;
4034 }
4035 .feature-list-item button {
4036     background: transparent;
4037 }
4038 .feature-list-item .label {
4039     text-align: left;
4040     padding: 10px 10px;
4041     white-space: nowrap;
4042     text-overflow: ellipsis;
4043     overflow: hidden;
4044     border-left: 1px solid rgba(0, 0, 0, .1);
4045 }
4046 [dir='rtl'] .feature-list-item .label {
4047     text-align: right;
4048 }
4049
4050 .feature-list-item .label .icon {
4051     opacity: .5;
4052 }
4053 .feature-list-item .close {
4054     float: right;
4055     padding: 10px;
4056 }
4057 .feature-list-item .close .icon {
4058     opacity: 1;
4059 }
4060 .feature-list-item .entity-type {
4061     color: #7092ff;
4062 }
4063 .feature-list-item:hover .entity-type {
4064     color: #597be7;
4065 }
4066 .feature-list-item .entity-name {
4067     font-weight: normal;
4068     color: #666;
4069     padding-left: 10px;
4070 }
4071 [dir='rtl'] .feature-list-item .entity-name {
4072     padding-left: 0;
4073     padding-right: 10px;
4074 }
4075
4076
4077 /* Preset List and Icons
4078 ------------------------------------------------------- */
4079 .preset-list  {
4080     width: 100%;
4081     padding: 20px 20px 10px 20px;
4082     border-bottom: 1px solid #ccc;
4083 }
4084
4085 .preset-list-item {
4086     margin-bottom: 10px;
4087 }
4088
4089 .preset-list-button-wrap {
4090     position: relative;
4091     height: 62px;
4092     display: flex;
4093     border: 1px solid #ccc;
4094     border-radius: 4px;
4095 }
4096
4097 .preset-list-button {
4098     width: 100%;
4099     height: 100%;
4100     position: relative;
4101     display: flex;
4102 }
4103
4104 .preset-list.filtered .preset-list-item:first-child .preset-list-button {
4105     background: #ececec;
4106 }
4107
4108 .preset-icon-container {
4109     position: relative;
4110     width: 60px;
4111     height: 60px;
4112     text-align: center;
4113     display: flex;
4114     align-items: center;
4115     justify-content: center;
4116 }
4117 .preset-icon-container.small {
4118     width: 40px;
4119     height: 40px;
4120     flex: 0 0 auto;
4121 }
4122 .preset-icon-container img.image-icon {
4123     width: 50px;
4124     height: 50px;
4125     object-fit: contain;
4126     border-radius: 2px;
4127 }
4128
4129 .preset-icon-point-border path {
4130     stroke: #333;
4131     stroke-width: 1.2;
4132     fill: transparent;
4133 }
4134
4135 .preset-icon-line {
4136     margin: auto;
4137     position: absolute;
4138     left: 0;
4139     right: 0;
4140     top: 0;
4141     width: 100%;
4142     height: 100%;
4143 }
4144 .preset-icon-container path {
4145     cursor: inherit;
4146 }
4147 .preset-icon-container circle.vertex {
4148     fill: #fff;
4149     stroke: rgba(0, 0, 0, 0.25);
4150 }
4151 .preset-icon-fill circle.midpoint {
4152     fill: transparent;
4153     stroke: rgba(0, 0, 0, 0.25);
4154 }
4155 /* use a consistent stroke width */
4156 .preset-icon-container path.line.stroke {
4157     stroke-width: 2 !important;
4158 }
4159 .preset-icon-container path.line.casing {
4160     stroke-width: 4 !important;
4161 }
4162
4163 .preset-icon-fill {
4164     margin: auto;
4165     position: absolute;
4166     width: 100%;
4167     height: 100%;
4168     left: 0;
4169     top: 0;
4170 }
4171 .preset-icon-container svg,
4172 .preset-icon-container svg > * {
4173     cursor: inherit !important;
4174 }
4175 .preset-icon-fill path.area.stroke {
4176     fill: transparent;
4177 }
4178
4179 .preset-icon-fill-vertex circle {
4180     stroke-width: 1.5px;
4181     stroke: #333;
4182     fill: #efefef;
4183     backface-visibility: hidden;
4184 }
4185
4186 .preset-icon {
4187     width: 100%;
4188     height:100%;
4189     position: absolute;
4190     z-index: 1;
4191 }
4192 .preset-icon .icon {
4193     position: absolute;
4194     margin: auto;
4195     left: 0;
4196     right: 0;
4197     width: 100%;
4198     height: 100%;
4199     transform: scale(0.48);
4200 }
4201 .preset-icon-container.small .preset-icon.point-geom .icon {
4202     transform: translateY(-7%) scale(0.27);
4203 }
4204 .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
4205     transform: translateY(-9%) scale(0.5);
4206 }
4207 .preset-icon.framed .icon {
4208     transform: scale(0.4);
4209 }
4210 .preset-icon.framed.line-geom .icon,
4211 .preset-icon.framed.route-geom .icon {
4212     top: 20%;
4213     transform: translateY(-30%) scale(0.4);
4214 }
4215 .preset-icon-iD .icon {
4216     transform: scale(1);
4217 }
4218 .preset-icon-iD.framed .icon {
4219     transform: scale(0.74);
4220 }
4221 .preset-icon-iD.framed.line-geom .icon,
4222 .preset-icon-iD.framed.route-geom .icon {
4223     transform: translateY(-30%) scale(0.74);
4224 }
4225 .preset-icon-container.fallback .preset-icon .icon {
4226     transform: scale(0.5) !important;
4227 }
4228
4229 .preset-list-button .label {
4230     display: flex;
4231     flex-flow: row wrap;
4232     align-items: center;
4233     background-color: #f6f6f6;
4234     text-align: left;
4235     position: absolute;
4236     top: 0;
4237     bottom: 0;
4238     right: 0;
4239     padding: 5px 10px;
4240     left: 60px;
4241     border-left: 1px solid rgba(0, 0, 0, .1);
4242 }
4243 [dir='rtl'] .preset-list-button .label {
4244     text-align: right;
4245     left: 0;
4246     right: 60px;
4247     border-left: none;
4248     border-right: 1px solid rgba(0, 0, 0, .1);
4249 }
4250 [dir='ltr'] .category .preset-list-button .label {
4251     border-radius: 0px 4px 4px 0px;
4252 }
4253 [dir='rtl'] .category .preset-list-button .label {
4254     border-radius: 4px 0px 0px 4px;
4255 }
4256
4257 .preset-list-button .label-inner {
4258     width: 100%;
4259 }
4260 .preset-list-button .label-inner .namepart {
4261     height: 17px;
4262     white-space: nowrap;
4263     text-overflow: ellipsis;
4264     overflow: hidden;
4265 }
4266
4267 .preset-list-button:hover .label,
4268 .preset-list-button:focus .label,
4269 .preset-list-button.disabled,
4270 .preset-list-button.disabled .label {
4271     background-color: #ececec;
4272 }
4273
4274 .preset-list-item button.preset-favorite-button,
4275 .preset-list-item button.tag-reference-button {
4276     height: 100%;
4277     width: 32px;
4278     flex: 0 0 auto;
4279     background: #f6f6f6;
4280 }
4281 [dir='ltr'] .preset-list-item button.preset-favorite-button,
4282 [dir='ltr'] .preset-list-item button.tag-reference-button {
4283     border-left: 1px solid #ccc;
4284 }
4285 [dir='rtl'] .preset-list-item button.preset-favorite-button,
4286 [dir='rtl'] .preset-list-item button.tag-reference-button {
4287     border-right: 1px solid #ccc;
4288 }
4289 [dir='ltr'] .preset-list-item button:last-child {
4290     border-radius: 0 4px 4px 0;
4291 }
4292 [dir='rtl'] .preset-list-item button:last-child {
4293     border-radius: 4px 0 0 4px;
4294 }
4295
4296 .preset-list-item button.preset-favorite-button:hover,
4297 .preset-list-item button.tag-reference-button:hover {
4298     background: #f1f1f1;
4299 }
4300 .preset-list-item button.preset-favorite-button .icon,
4301 .preset-list-item button.tag-reference-button .icon {
4302     opacity: .5;
4303 }
4304
4305 button.preset-favorite-button .icon {
4306     fill-opacity: 0;
4307     stroke-width: 1;
4308 }
4309 button.preset-favorite-button.active .icon {
4310     fill-opacity: inherit;
4311 }
4312
4313
4314 .current .preset-list-button,
4315 .current .preset-list-button .label {
4316     background-color: #e8ebff;
4317 }
4318
4319 .category .preset-list-button:after,
4320 .category .preset-list-button:before {
4321     content: "";
4322     position: absolute;
4323     top: -5px;
4324     left: -1px; right: -1px;
4325     border: 1px solid #ccc;
4326     border-bottom: none;
4327     border-radius: 6px 6px 0 0;
4328     height: 6px;
4329 }
4330
4331 .category .preset-list-button:before {
4332     top: -3px;
4333 }
4334
4335 .subgrid .preset-list {
4336     padding: 10px;
4337     margin-top: 0;
4338     border: 0;
4339     border-radius: 8px;
4340     width: -webkit-calc(100% + 20px);
4341     margin-left: -10px;
4342 }
4343 .subgrid .preset-list > *:last-child {
4344     margin-bottom: 0;
4345 }
4346
4347 .subgrid .arrow {
4348     border: solid rgba(0, 0, 0, 0);
4349     border-width: 10px;
4350     border-bottom-color: #ececec;
4351     width: 0;
4352     height: 0;
4353     margin-left: 50%;
4354     margin-left: -webkit-calc(50% - 10px);
4355 }
4356
4357
4358 /* Quick links
4359 ------------------------------------------------------- */
4360 .quick-links {
4361     display: flex;
4362     flex-flow: row wrap;
4363     justify-content: flex-end;
4364     padding: 0 20px;
4365 }
4366 .quick-link {
4367     margin: 0 5px;
4368 }
4369
4370 .data-editor .quick-links,
4371 .error-editor .quick-links,
4372 .note-editor .quick-links {
4373     padding: 5px 0 0 0;
4374 }
4375
4376
4377 /* Entity/Preset Editor
4378 ------------------------------------------------------- */
4379 .entity-issues,
4380 .preset-editor {
4381     overflow: hidden;
4382     padding: 10px 0px 5px 0px;
4383 }
4384 .entity-issues a.hide-toggle,
4385 .preset-editor a.hide-toggle {
4386     margin: 0 20px 5px 20px;
4387 }
4388 .entity-issues .disclosure-wrap-entity_issues,
4389 .preset-editor .form-fields-container {
4390     padding: 10px;
4391     margin: 0 10px 10px 10px;
4392     border-radius: 8px;
4393     background: #ececec;
4394 }
4395 .entity-issues .disclosure-wrap-entity_issues:empty,
4396 .preset-editor .form-fields-container:empty {
4397     display: none;
4398 }
4399 .entity-editor-pane .preset-list-item {
4400     margin-bottom: 0;
4401 }
4402
4403 /*
4404     The parts of a field:
4405     - `.form-field` is a `div` wraps the entire thing
4406     - `.field-label` is a `label` that wraps the top part, it contains;
4407        - `span` classed `label-text`
4408        - 0..n buttons for "remove", "modified", "tag reference"
4409     - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
4410        - usually an `input`
4411        - sometimes some buttons (translate, increment, decrement)
4412        - or could just be a `div` with anything really
4413     - `.tag-reference-body` at the bottom (usually hidden)
4414
4415    .------------------.                             -
4416    |  Name        | i |  <- .field-label        |
4417    +------------------+                               |
4418    |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
4419    '------------------'                               |
4420      tag reference       <- .tag-reference-body      |
4421                                                     -
4422 */
4423
4424 .form-field {
4425     display: flex;
4426     flex-flow: row wrap;
4427     margin-bottom: 10px;
4428     width: 100%;
4429     -webkit-transition: margin-bottom 200ms;
4430        -moz-transition: margin-bottom 200ms;
4431          -o-transition: margin-bottom 200ms;
4432             transition: margin-bottom 200ms;
4433 }
4434
4435 .form-field.nowrap,
4436 .wrap-form-field:last-child .form-field {
4437     margin-bottom: 0;
4438 }
4439
4440 /* A `label` element that wraps the top section */
4441 .field-label {
4442     display: flex;
4443     flex-flow: row nowrap;
4444     flex: 1 1 100%;
4445     height: 30px;
4446     position: relative;
4447     font-weight: bold;
4448     color: #333;
4449     background: #f6f6f6;
4450     border: 1px solid #ccc;
4451     border-radius: 4px 4px 0 0;
4452     overflow: hidden;
4453 }
4454 .field-label .label-text {
4455     flex: 1 1 auto;
4456     padding: 5px 0 5px 10px;
4457 }
4458 [dir='rtl'] .field-label .label-text {
4459     padding: 5px 10px 5px 0;
4460 }
4461
4462 .label-text .label-textannotation svg.icon {
4463     margin: 0 8px;
4464     color: #333;
4465     opacity: 0.5;
4466     width: 14px;
4467     height: 14px;
4468     vertical-align: text-top;
4469 }
4470
4471 .field-label button {
4472     flex: 0 0 32px;
4473     border-left: 1px solid #ccc;
4474     width: 32px;
4475     height: 100%;
4476     border-radius: 0;
4477     background: #f6f6f6;
4478 }
4479 [dir='rtl'] .field-label button {
4480     border-left: none;
4481     border-right: 1px solid #ccc;
4482 }
4483 .field-label button:hover {
4484     background: #f1f1f1;
4485 }
4486 .field-label .icon {
4487     opacity: .5;
4488 }
4489
4490 .field-label .modified-icon,
4491 .field-label .remove-icon,
4492 .field-label .remove-icon-multilingual {
4493     display: none;
4494 }
4495 .modified:not(.locked) .field-label .modified-icon,
4496 .present:not(.locked) .field-label .remove-icon,
4497 .present:not(.locked) .field-label .remove-icon-multilingual {
4498     display: inline-block;
4499 }
4500
4501 /* A `div` element that wraps the bottom section */
4502 .form-field-input-wrap {
4503     display: flex;
4504     flex-flow: row nowrap;
4505     width: 100%;
4506     flex: 1 1 auto;
4507     min-height: 30px;
4508     border-top: 0;
4509     border-radius: 0 0 4px 4px;
4510 }
4511 .nowrap .form-field-input-wrap {
4512     border-radius: 0;
4513 }
4514
4515
4516 .form-field-input-wrap > input,
4517 .form-field-input-wrap > label,
4518 .form-field-input-wrap > textarea,
4519 .form-field-input-wrap > ul.chiplist {
4520     flex: 1 1 auto;
4521     min-height: 30px;
4522     border: 1px solid #ccc;
4523     border-top: 0;
4524     border-radius: 0;
4525     overflow: hidden;
4526     position: relative;
4527 }
4528 .form-field-input-wrap > textarea {
4529     height: 65px;
4530     border-radius: 0 0 4px 4px;
4531     overflow: auto;
4532 }
4533
4534 /* Buttons inside fields */
4535 .form-field-button {
4536     flex: 0 0 auto;
4537     height: 30px;
4538     width: 32px;
4539     position: relative;
4540     background-color: #fff;
4541     border: 1px solid #ccc;
4542     border-radius: 0;
4543     border-top-width: 0;
4544     border-left-width: 0;
4545     vertical-align: top;
4546 }
4547 [dir='rtl'] .form-field-button {
4548     border-left-width: 1px;
4549     border-right-width: 0;
4550 }
4551 .form-field-button:hover {
4552     background-color: #f1f1f1;
4553 }
4554 .form-field-button .icon {
4555     fill: #333;
4556     opacity: .5;
4557 }
4558
4559
4560 /* round corners of first/last child elements */
4561 .form-field-input-wrap > button:last-of-type {
4562     border-bottom-right-radius: 4px;
4563 }
4564 [dir='rtl'] .form-field-input-wrap > button:last-of-type {
4565     border-bottom-left-radius: 4px;
4566 }
4567
4568
4569 /* Field - Access, Cycleway
4570 ------------------------------------------------------- */
4571 .form-field-input-access,
4572 .form-field-input-cycleway {
4573     flex: 1 1 auto;
4574     display: flex;
4575     flex-flow: row wrap;
4576 }
4577
4578 /* Field - lists with labeled input items
4579 ------------------------------------------------------- */
4580 .form-field ul.rows {
4581     flex: 1 1 auto;
4582     border: 1px solid #ccc;
4583     border-top: 0;
4584     border-radius: 0 0 4px 4px;
4585     overflow: hidden;
4586     width: 100%;
4587 }
4588 .form-field ul.rows li {
4589     border-top: 1px solid #ccc;
4590 }
4591 .form-field ul.rows li:first-child {
4592     border-top: 0;
4593 }
4594 .form-field ul.rows li {
4595     display: flex;
4596     flex-flow: row nowrap;
4597 }
4598 .form-field ul.rows li.labeled-input > span,
4599 .form-field ul.rows li.labeled-input > div {
4600     flex: 1 1 auto;
4601     width: 100%;
4602     border-radius: 0;
4603 }
4604 .form-field ul.rows li input {
4605     border-radius: 0;
4606     border-width: 0;
4607     width: 100%;
4608 }
4609 .form-field ul.rows li button {
4610     border-width: 0;
4611 }
4612 [dir='ltr'] .form-field ul.rows li.labeled-input input,
4613 [dir='ltr'] .form-field ul.rows li button {
4614     border-left-width: 1px;
4615 }
4616 [dir='rtl'] .form-field ul.rows li.labeled-input input,
4617 [dir='rtl'] .form-field ul.rows li button {
4618     border-right-width: 1px;
4619 }
4620
4621
4622 /* Field - Structure
4623 ------------------------------------------------------- */
4624 .structure-extras-wrap {
4625     width: 100%;
4626     padding: 10px 10px;
4627     background: #fff;
4628     border: 1px solid #ccc;
4629     border-top: 0px;
4630     border-radius: 0 0 4px 4px;
4631 }
4632 .structure-extras-wrap > ul.rows {
4633     border: 1px solid #ccc;
4634     border-radius: 4px;
4635 }
4636
4637
4638 /* Field - Combo / Multicombo
4639 ------------------------------------------------------- */
4640 .form-field-input-combo > input:only-of-type {
4641     border-radius: 0 0 4px 4px;
4642 }
4643 .form-field-input-combo.empty-combobox input,
4644 .form-field-input-multicombo .empty-combobox input {
4645     padding-right: 10px;
4646     padding-left: 10px;
4647 }
4648 .form-field-input-combo.empty-combobox .combobox-caret,
4649 .form-field-input-multicombo .empty-combobox .combobox-caret {
4650     display: none;
4651 }
4652
4653 .form-field-input-multicombo ul.chiplist {
4654     padding: 5px 8px 5px 8px;
4655     background: #fff;
4656     display: block;
4657     border-radius: 0 0 4px 4px;
4658     width: 100%;
4659 }
4660
4661 .form-field-input-multicombo li {
4662     display: inline-flex;
4663     flex-flow: row nowrap;
4664     align-items: center;
4665     margin-bottom: 3px;
4666     margin-top: 3px;
4667     border-radius: 4px;
4668 }
4669 [dir='ltr'] .form-field-input-multicombo li {
4670     margin-right: 6px;
4671 }
4672 [dir='rtl'] .form-field-input-multicombo li {
4673     margin-left: 6px;
4674 }
4675
4676 .form-field-input-multicombo li.chips {
4677     background-color: #eff2f7;
4678     border: 1px solid #ccd5e3;
4679     line-height: 25px;
4680     max-width: 100%;
4681 }
4682 [dir='ltr'] .form-field-input-multicombo li.chips {
4683     padding: 2px 0px 2px 5px;
4684 }
4685 [dir='rtl'] .form-field-input-multicombo li.chips {
4686     padding: 2px 5px 2px 0px;
4687 }
4688
4689 .form-field-input-multicombo li.chips span {
4690     display: block;
4691     flex: 1 1 auto;
4692     overflow: hidden;
4693     word-wrap: break-word;
4694 }
4695
4696 .form-field-input-multicombo a {
4697     font-family: Arial, Helvetica, sans-serif !important;
4698     font-size: 16px !important;
4699     padding: 0px 5px 0px 5px;
4700     margin: 0;
4701     cursor: pointer;
4702     color: #a6b4ce;
4703     display: block;
4704     text-align: center;
4705     flex: 0 0 auto;
4706 }
4707
4708 .form-field-input-multicombo .input-wrap {
4709     border: 1px solid #ddd;
4710     width: 100px;
4711     height: 31px;
4712 }
4713 .form-field-input-multicombo input {
4714     border: none;
4715     width: 100%;
4716     height: 100%;
4717 }
4718
4719 .form-field-input-multicombo input:focus {
4720     border-radius: 4px !important;
4721 }
4722
4723 .form-field-input-multicombo .full-line-chips li.chips {
4724     width: 100%;
4725 }
4726 .form-field-input-multicombo .full-line-chips .input-wrap {
4727     width: auto;
4728 }
4729
4730
4731 /* Field - Text / Numeric
4732 ------------------------------------------------------- */
4733 .form-field-input-text > input:only-of-type,
4734 .form-field-input-tel > input:only-of-type,
4735 .form-field-input-email > input:only-of-type,
4736 .form-field-input-url > input:only-of-type {
4737     border-radius: 0 0 4px 4px;
4738 }
4739 .form-field-input-number > input:only-of-type {
4740     border-radius: 0 0 0 4px;
4741 }
4742 [dir='rtl'] .form-field-input-number > input:only-of-type {
4743     border-radius: 0 0 4px 0;
4744 }
4745 .form-field-input-number > button:last-of-type {
4746     border-radius: 0 0 4px 0;
4747 }
4748 [dir='rtl'] .form-field-input-number > button:last-of-type {
4749     border-radius: 0 0 0 4px;
4750 }
4751
4752 /* draw the up/down on the buttons */
4753 .form-field-input-number button.decrement::after,
4754 .form-field-input-number button.increment::after {
4755     content: "";
4756     height: 0; width: 0;
4757     position: absolute;
4758     left: 0; right: 0; bottom: 0; top: 0;
4759     margin: auto;
4760 }
4761 .form-field-input-number button.decrement::after {
4762     border-top: 5px solid #ccc;
4763     border-left: 5px solid transparent;
4764     border-right: 5px solid transparent;
4765 }
4766 .form-field-input-number button.increment::after {
4767     border-bottom: 5px solid #ccc;
4768     border-left: 5px solid transparent;
4769     border-right: 5px solid transparent;
4770 }
4771
4772
4773 /* Field - Checkbox
4774 ------------------------------------------------------- */
4775 .form-field-input-check {
4776     display: flex;
4777     align-items: end;
4778     background: #fff;
4779     padding: 5px 10px;
4780     color: #7092ff;
4781     border: 1px solid #ccc;
4782     border-top: 0;
4783     cursor: pointer;
4784 }
4785 .form-field-input-check > input[type="checkbox"] {
4786     flex: 0 1 auto;
4787     min-height: 20px;
4788     width: 20px;
4789 }
4790 .form-field-input-check > span {
4791     flex: 1 1 auto;
4792 }
4793 .form-field-input-check > .reverser.button {
4794     flex: 0 1 auto;
4795     background-color: #eff2f7;
4796     border: 1px solid #ccd5e3;
4797     border-radius: 2px;
4798     padding: 0px 8px;
4799 }
4800 .form-field-input-check > .reverser.button.hide {
4801     display: none;
4802 }
4803
4804 .form-field-input-check:hover {
4805     background: #f1f1f1;
4806 }
4807 .form-field-input-check .set {
4808     color: inherit;
4809 }
4810 .form-field-input-check label:not(.set) input[type="checkbox"] {
4811     opacity: .5;
4812 }
4813
4814
4815 /* Field - Radio button
4816 ------------------------------------------------------- */
4817 .form-field-input-radio {
4818     flex: 1 1 auto;
4819     display: flex;
4820     flex-flow: row wrap;
4821 }
4822 .form-field-input-radio > label {
4823     flex: 1 1 auto;
4824     display: flex;
4825     flex-flow: row nowrap;
4826     width: 100%;
4827     padding: 5px 10px;
4828     height: 30px;
4829     background-color: #fff;
4830     color: #7092ff;
4831     cursor: pointer;
4832 }
4833 .form-field-input-radio > label:last-child {
4834     border-radius: 0 0 4px 4px;
4835 }
4836 .form-field-input-radio > label:hover {
4837     background-color: #ececec;
4838 }
4839 .form-field-input-radio > label.active {
4840     background-color: #e8ebff;
4841 }
4842 .form-field-input-radio > label:not(:last-of-type) {
4843     border-bottom: 1px solid #ccc;
4844 }
4845 .form-field-input-radio > label > input[type="radio"] {
4846     flex: 0 1 auto;
4847     width: 20px;
4848 }
4849 .form-field-input-radio > label > span {
4850     flex: 1 1 auto;
4851     overflow: hidden;
4852     white-space: nowrap;
4853     text-overflow: ellipsis;
4854 }
4855
4856 /* Hide placeholder for radio buttons if another is active, or not in hover state */
4857 .form-field-input-radio label.active ~ .placeholder,
4858 .form-field-input-radio .placeholder {
4859     padding: 0;
4860     opacity: 0;
4861     width: 0;
4862     line-height: 0;
4863     display: block;
4864     overflow: hidden;
4865 }
4866
4867
4868 /* Field - Maxspeed
4869 ------------------------------------------------------- */
4870 .form-field-input-maxspeed > input:first-of-type {
4871     border-radius: 0 0 0 4px;
4872 }
4873 [dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
4874     border-radius: 0 0 4px 0;
4875 }
4876 .form-field-input-maxspeed > input:last-of-type {  /* unit field */
4877     flex: 0 1 80px;
4878     width: 80px;
4879     border-left: 0;
4880     border-radius: 0 0 4px 0;
4881 }
4882 [dir='rtl'] .form-field-input-maxspeed > input:last-of-type {
4883     border-right: 0;
4884     border-radius: 0 0 0 4px;
4885 }
4886
4887
4888 /* Field - Localized Name
4889 ------------------------------------------------------- */
4890 .form-field-input-localized > input.localized-main {
4891     border-radius: 0 0 0 4px;
4892 }
4893 [dir='rtl'] .form-field-input-localized > input.localized-main {
4894     border-radius: 0 0 4px 0;
4895 }
4896 .form-field-input-localized > button.localized-add {
4897     border-radius: 0 0 4px 0;
4898 }
4899 [dir='rtl'] .form-field-input-localized > button.localized-add {
4900     border-radius: 0 0 0 4px;
4901 }
4902
4903 .form-field-input-localized button.localized-add.disabled,
4904 .form-field-input-localized input.localized-main.disabled,
4905 .form-field-input-localized input.localized-lang.disabled,
4906 .form-field-input-localized input.localized-value.disabled {
4907     color: #777;
4908     background-color: #eee;
4909     cursor: not-allowed;
4910 }
4911
4912 /* nested subfields for name in different languages */
4913 .localized-multilingual {
4914     padding: 0 10px;
4915     flex-basis: 100%;
4916 }
4917 .localized-multilingual .entry {
4918     position: relative;
4919     overflow: hidden;
4920 }
4921
4922 /* draws a little line connecting the multilingual field up to the name field */
4923 .localized-multilingual .entry::before {
4924     content: "";
4925     display: block;
4926     position: absolute;
4927     background: #ccc;
4928     height: 11px;
4929     width: 1px;
4930     left: 0;
4931     right: 0;
4932     top: -11px;
4933     margin: auto;
4934 }
4935
4936 .localized-multilingual .entry .localized-lang {
4937     border-radius: 0;
4938     border-top-width: 0;
4939     width: 100%;
4940 }
4941 .localized-multilingual .entry .localized-value {
4942     border-top-width: 0;
4943     border-radius: 0 0 4px 4px;
4944     width: 100%;
4945 }
4946
4947
4948 /* Field - Address
4949 ------------------------------------------------------- */
4950 .form-field-input-address {
4951     flex: 1 1 auto;
4952     display: flex;
4953     flex-flow: row wrap;
4954     border: 1px solid #ccc;
4955     border-top: 0px;
4956 }
4957
4958 .addr-row {
4959     flex: 1 1 auto;
4960     display: flex;
4961     width: 100%;
4962     min-height: 30px;
4963 }
4964
4965 .addr-row > input {
4966     flex: 1 1 auto;
4967     border-radius: 0;
4968     border-right: 0;
4969     border-bottom: 0;
4970 }
4971 [dir='rtl'] .addr-row input {
4972     border-right: 1px solid #ccc;
4973     border-left: 0;
4974 }
4975
4976 .addr-row:first-of-type input {
4977     border-top: 0;
4978 }
4979 .addr-row input:first-of-type {
4980     border-left: 0;
4981 }
4982 [dir='rtl'] .addr-row input:first-of-type {
4983     border-right: 0;
4984 }
4985 .addr-row:last-of-type input:first-of-type {
4986     border-radius: 0 0 0 4px;
4987 }
4988 [dir='rtl'] .addr-row:last-of-type input:first-of-type {
4989     border-radius: 0 0 4px 0;
4990 }
4991 .addr-row:last-of-type input:last-of-type {
4992     border-radius: 0 0 4px 0;
4993 }
4994 [dir='rtl'] .addr-row:last-of-type input:last-of-type {
4995     border-radius: 0 0 0 4px;
4996 }
4997
4998
4999 /* Field - Wikipedia
5000 ------------------------------------------------------- */
5001 .form-field-input-wikipedia {
5002     display: flex;
5003     flex-flow: row wrap;
5004     flex: 1 1 auto;
5005 }
5006
5007 .wiki-lang-container,
5008 .wiki-title-container {
5009     display: flex;
5010     flex-flow: row nowrap;
5011     flex: 1 1 auto;
5012     width: 100%;
5013 }
5014
5015 .wiki-lang-container > input.wiki-lang,
5016 .wiki-title-container > input.wiki-title {
5017     flex: 1 1 auto;
5018     border-top: 0;
5019     border-radius: 0;
5020 }
5021 .wiki-title-container > input.wiki-title {
5022     border-radius: 0 0 0 4px;
5023 }
5024 [dir='rtl'] .wiki-title-container > input.wiki-title {
5025     border-radius: 0 0 4px 0;
5026 }
5027 .wiki-title-container > button.wiki-link,
5028 .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5029     border-radius: 0 0 4px 0;
5030 }
5031 [dir='rtl'] .wiki-title-container > button.wiki-link,
5032 [dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5033     border-radius: 0 0 0 4px;
5034 }
5035
5036
5037 /* Field - Restriction Editor
5038 ------------------------------------------------------- */
5039 .form-field-input-restrictions {
5040     display: block;
5041     border: 1px solid #ccc;
5042     border-top: 0;
5043     border-radius: 0 0 4px 4px;
5044 }
5045
5046 .form-field-input-restrictions .restriction-controls-container {
5047     background-color: #fff;
5048     width: 100%;
5049     padding: 5px;
5050     border-top: 1px solid #ccc;
5051     border-radius: 0 0 4px 4px;
5052 }
5053
5054 .restriction-controls-container .restriction-controls {
5055     display: table;
5056     -moz-user-select: none;
5057     -webkit-user-select: none;
5058     -ms-user-select: none;
5059     user-select: none;
5060 }
5061
5062 .restriction-controls .restriction-control {
5063     display: table-row;
5064     padding: 5px 10px;
5065     height: 25px;
5066 }
5067
5068 .restriction-control input,
5069 .restriction-control span {
5070     display: table-cell;
5071     text-align: start;
5072     padding: 0px 5px;
5073 }
5074
5075 .restriction-control span.restriction-control-label {
5076     text-align: end;
5077 }
5078
5079 .restriction-control input {
5080     width: 60px;
5081     padding: 0;
5082     margin: 0px 5px;
5083     vertical-align: middle;
5084 }
5085
5086 .form-field-input-restrictions .restriction-container {
5087     position: relative;
5088     height: 370px;
5089 }
5090 /* zero width space, so container takes up space */
5091 .form-field-input-restrictions .restriction-container:after {
5092     content: '\200b';
5093 }
5094
5095 .form-field-input-restrictions svg.surface {
5096     width: 100%;
5097     height: 100%;
5098 }
5099
5100 .restriction-container .restriction-help {
5101     z-index: 1;
5102     position: absolute;
5103     top: 0;
5104     left: 0;
5105     right: 0;
5106     padding: 2px 6px;
5107     background-color: rgba(255, 255, 255, .8);
5108     color: #888;
5109     text-align: center;
5110     pointer-events: none;
5111
5112     -moz-user-select: none;
5113     -webkit-user-select: none;
5114     -ms-user-select: none;
5115     user-select: none;
5116 }
5117
5118 .restriction-help span {
5119     margin: 2px;
5120 }
5121
5122 .restriction-help .qualifier {
5123     color: #666;
5124     font-weight: bold;
5125 }
5126 .restriction-help .qualifier.allow {
5127     color: #8b5;
5128 }
5129 .restriction-help .qualifier.restrict {
5130     color: #d53;
5131 }
5132 .restriction-help .qualifier.only {
5133     color: #78f;
5134 }
5135
5136
5137 /* Field - Changeset Comment
5138 ------------------------------------------------------- */
5139 .form-field-comment:not(.present) #preset-input-comment {
5140     border-color: rgb(230, 100, 100);
5141 }
5142 .form-field-comment:not(.present) .field-label {
5143     border-color: rgb(230, 100, 100);
5144     background: rgba(230, 100, 100, 0.2);
5145 }
5146 .form-field-comment:not(.present) button {
5147     border-color: rgb(230, 100, 100);
5148 }
5149
5150
5151 /* Field - Combobox
5152 ------------------------------------------------------- */
5153 div.combobox {
5154     z-index: 9999;
5155     display: none;
5156     box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
5157     margin-top: -1px;
5158     background: #fff;
5159     max-height: 245px;
5160     overflow-y: auto;
5161     overflow-x: hidden;
5162     border: 1px solid #ccc;
5163     border-radius: 0 0 4px 4px;
5164 }
5165
5166 .combobox a {
5167     display: block;
5168     padding: 5px 10px;
5169     border-top: 1px solid #ccc;
5170     text-overflow: ellipsis;
5171     white-space: nowrap;
5172     overflow: hidden;
5173 }
5174
5175 .combobox a.selected,
5176 .combobox a:hover {
5177     background: #ececec;
5178 }
5179
5180 .combobox a:first-child {
5181     border-top: 0;
5182     padding: 4px 10px;
5183 }
5184
5185 .combobox-caret {
5186     display: inline-block;
5187     position: relative;
5188     height: 30px;
5189     width: 30px !important;
5190     margin-left: -30px;
5191     vertical-align: top;
5192     cursor: pointer;
5193 }
5194 [dir='rtl'] .combobox-caret {
5195   margin-left: 0;
5196   margin-right: -30px;
5197 }
5198
5199 .combobox-caret::after {
5200     content: "";
5201     height: 0; width: 0;
5202     position: absolute;
5203     left: 0; right: 0; bottom: 0; top: 0;
5204     margin: auto;
5205     border-top: 5px solid #ccc;
5206     border-left: 5px solid transparent;
5207     border-right: 5px solid transparent;
5208 }
5209
5210
5211 /* Field Help
5212 ------------------------------------------------------- */
5213 .field-help-body {
5214     display: block;
5215     position: absolute;
5216     top: 0;
5217     left: 20px;
5218     right: 20px;
5219     margin: 5px;
5220     padding: 8px;
5221     border: 1px solid #ccc;
5222     border-top: 0;
5223     border-radius: 0 0 4px 4px;
5224     z-index: 20;
5225     background: rgba(255,255,255,0.95);
5226     box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5227 }
5228
5229 .field-help-title h2 {
5230     padding: 10px;
5231     margin-bottom: 0px;
5232     font-size: 17px;
5233 }
5234 .field-help-title button {
5235     width: 45px;
5236     height: 55px;
5237     border-radius: 0;
5238 }
5239
5240 .field-help-nav {
5241     font-size: 13px;
5242     font-weight: bold;
5243     margin-bottom: 10px;
5244 }
5245 .field-help-nav-item {
5246     display: inline-block;
5247     padding: 5px 10px;
5248     cursor: pointer;
5249     color: #666;
5250 }
5251 .field-help-nav-item.active {
5252     color: #7092ff;
5253     border-bottom: 2px solid;
5254 }
5255 .field-help-nav-item:hover {
5256     color: #597be7;
5257     background-color: #efefef;
5258 }
5259
5260 .field-help-content {
5261     padding: 10px;
5262     overflow-y: auto;
5263     overflow-x: hidden;
5264 }
5265 .field-help-content h3 {
5266     font-size: 12px;
5267     margin-bottom: 5px;
5268 }
5269 .field-help-content p {
5270     margin-bottom: 15px;
5271 }
5272 .field-help-content ul li {
5273     list-style: inside;
5274     margin-bottom: 5px;
5275 }
5276
5277 .field-help-content .field-help-image {
5278     width: 100%;
5279     margin-bottom: 15px;
5280 }
5281
5282 .field-help-content svg.turn {
5283     width: 40px;
5284     height: 20px;
5285 }
5286 .field-help-content svg.shadow {
5287     opacity: 0.7;
5288     width: 60px;
5289     height: 20px;
5290 }
5291 .field-help-content svg.from {
5292     color: #777;
5293 }
5294 .field-help-content svg.allow {
5295     color: #5b3;
5296 }
5297 .field-help-content svg.restrict {
5298     color: #d53;
5299 }
5300 .field-help-content svg.only {
5301     color: #68f;
5302 }
5303
5304 .field-help-content p.from_shadow,
5305 .field-help-content p.allow_shadow,
5306 .field-help-content p.restrict_shadow,
5307 .field-help-content p.allow_turn,
5308 .field-help-content p.restrict_turn {
5309     margin-bottom: 5px;
5310 }
5311
5312
5313 /* More Fields dropdown
5314 ------------------------------------------------------- */
5315 .more-fields {
5316     padding: 0 20px 20px 20px;
5317     font-weight: bold;
5318 }
5319 .changeset-editor .more-fields {
5320     padding: 15px 20px 0 20px;
5321 }
5322
5323 .more-fields label {
5324     display: flex;
5325     flex-flow: row nowrap;
5326     justify-content: space-between;
5327     align-items: center;
5328 }
5329
5330 .more-fields input {
5331     margin-left: 10px;
5332     flex: 1 1 50%;
5333 }
5334 [dir='rtl'] .more-fields input {
5335     margin-left: auto;
5336     margin-right: 10px;
5337 }
5338
5339 .form-field-input-wrap .label {
5340     height: 30px;
5341     background: #f6f6f6;
5342     padding: 5px 10px;
5343 }
5344
5345
5346 /* Raw Tag Editor
5347 ------------------------------------------------------- */
5348 .raw-tag-options {
5349     display: flex;
5350     flex-flow: row nowrap;
5351     flex-direction: row-reverse;
5352     margin-top: -25px;
5353     padding: 0 3px;
5354 }
5355 button.raw-tag-option {
5356     flex: 0 0 20px;
5357     height: 20px;
5358     width: 20px;
5359     background: #aaa;
5360     color: #eee;
5361     margin: 0 3px;
5362 }
5363 button.raw-tag-option:focus,
5364 button.raw-tag-option:hover,
5365 button.raw-tag-option.active {
5366     color: #fff;
5367     background: #597be7;
5368 }
5369 button.raw-tag-option.selected {
5370     color: #fff;
5371     background: #7092ff;
5372 }
5373 button.raw-tag-option svg.icon {
5374     width: 14px;
5375     height: 14px;
5376     vertical-align: text-bottom;
5377 }
5378 [dir='ltr'] button.raw-tag-option-list {
5379     -moz-transform: scaleX(-1);
5380     -o-transform: scaleX(-1);
5381     -webkit-transform: scaleX(-1);
5382     transform: scaleX(-1);
5383     filter: FlipH;
5384     -ms-filter: "FlipH";
5385 }
5386
5387
5388 .tag-text {
5389     width: 100%;
5390     height: 100%;
5391     font-family: monospace;
5392     white-space: pre;
5393 }
5394
5395 .tag-text,
5396 .tag-list {
5397     margin-top: 10px;
5398 }
5399 .tag-row {
5400     width: 100%;
5401     position: relative;
5402 }
5403 .tag-row .inner-wrap {
5404     display: flex;
5405     flex-flow: row nowrap;
5406     width: 100%;
5407     position: relative;
5408 }
5409 .tag-row .key-wrap,
5410 .tag-row .value-wrap {
5411     flex: 1 1 50%;
5412 }
5413
5414 .tag-text.readonly,
5415 .tag-row.readonly,
5416 .tag-row.readonly input.key,
5417 .tag-row.readonly input.value,
5418 .tag-row.readonly button.remove {
5419     color: #777;
5420     background-color: #eee;
5421     cursor: not-allowed;
5422 }
5423
5424 .tag-row input {
5425     height: 31px;
5426     border: 0;
5427     border-radius: 0;
5428     border-bottom: 1px solid #ccc;
5429     border-left: 1px solid #ccc;
5430     width: 100%;
5431 }
5432 [dir='rtl'] .tag-row input {
5433     border-left: none;
5434     border-right: 1px solid #ccc;
5435 }
5436
5437
5438 .tag-row input.key {
5439     font-weight: bold;
5440     background-color: #f6f6f6;
5441 }
5442
5443 .tag-row input.value {
5444     border-right: 1px solid #ccc;
5445 }
5446 [dir='rtl'] .tag-row input.value {
5447     border-left: 1px solid #ccc;
5448 }
5449
5450 .tag-row:first-child input.key {
5451     border-top: 1px solid #ccc;
5452     border-top-left-radius: 4px;
5453 }
5454 [dir='rtl'] .tag-row:first-child input.key {
5455     border-top-left-radius: 0;
5456     border-top-right-radius: 4px;
5457 }
5458
5459 .tag-row:first-child input.value {
5460     border-top: 1px solid #ccc;
5461 }
5462 .tag-row button {
5463     flex: 0 0 32px;
5464     height: 31px;
5465     width: 32px;
5466     border: 1px solid #ccc;
5467     border-top-width: 0;
5468     border-left-width: 0;
5469 }
5470 [dir='rtl'] .tag-row button {
5471     border-left-width: 1px;
5472     border-right-width: 0;
5473 }
5474
5475 .tag-row button:hover {
5476     background: #f1f1f1;
5477 }
5478 .tag-row button .icon {
5479     opacity: .5;
5480 }
5481 .tag-row:first-child button {
5482     border-top-width: 1px;
5483 }
5484
5485 .tag-row:first-child .tag-reference-button {
5486     border-top-right-radius: 4px;
5487 }
5488 [dir='rtl'] .tag-row:first-child .tag-reference-button {
5489     border-top-left-radius: 4px;
5490     border-top-right-radius: 0;
5491 }
5492
5493 .tag-row:last-child .tag-reference-button {
5494     border-bottom-right-radius: 4px;
5495 }
5496 [dir='rtl'] .tag-row:last-child .tag-reference-button {
5497     border-bottom-left-radius: 4px;
5498     border-bottom-right-radius: 0;
5499 }
5500
5501 .tag-row .tag-reference-button {
5502     border-radius: 0;
5503 }
5504 [dir='rtl'] .tag-row .tag-reference-button {
5505     border-left-width: 1px;
5506     border-right-width: 0;
5507 }
5508
5509 /* Tag reference */
5510 .tag-reference-loading {
5511     background-color: #f5f5f5;
5512 }
5513 .tag-reference-loading .icon {
5514     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
5515     background-position: 0 0;
5516 }
5517
5518 .tag-reference-body {
5519     flex: 1 1 auto;
5520     width: 100%;
5521     overflow: hidden;
5522     display: none;
5523     padding-top: 10px;
5524 }
5525 .tag-reference-body.expanded {
5526     padding-bottom: 10px;
5527     display: inline-block;
5528 }
5529 .tag-reference-description {
5530
5531 }
5532 .tag-reference-link {
5533     display: block;
5534 }
5535
5536 img.tag-reference-wiki-image {
5537     float: right;
5538     width: 33.3333%;
5539     border-radius: 4px;
5540     margin: 0 0 0 5px;
5541 }
5542 [dir='rtl'] img.tag-reference-wiki-image {
5543     float: left;
5544     margin: 0 5px 0 0;
5545 }
5546
5547 .preset-list .tag-reference-body {
5548     position: relative;
5549     width: 100%;
5550 }
5551 .raw-tag-editor .tag-reference-body {
5552     width: 100%;
5553 }
5554 .raw-tag-editor .tag-row.readonly .tag-reference-body {
5555     background: #f6f6f6;
5556     color: #333;
5557 }
5558 .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
5559     border-bottom: 1px solid #ccc;
5560 }
5561 .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
5562     border-top: 1px solid #ccc;
5563 }
5564
5565
5566 /* Raw Member / Membership Editor
5567 ------------------------------------------------------- */
5568
5569 .raw-member-editor .member-list,
5570 .raw-membership-editor .member-list {
5571     padding-top: 10px;
5572 }
5573 .raw-member-editor .member-list li,
5574 .raw-membership-editor .member-list li {
5575     position: relative;
5576     border-radius: 4px;
5577     margin: 0;
5578     padding-bottom: 10px;
5579 }
5580 .raw-member-editor .member-row .member-entity-name,
5581 .raw-membership-editor .member-row .member-entity-name {
5582     font-weight: normal;
5583     padding-left: 10px;
5584 }
5585
5586 [dir='rtl'] .raw-member-editor .member-row .member-entity-name,
5587 [dir='rtl'] .raw-membership-editor .member-row .member-entity-name {
5588     padding-left:0;
5589     padding-right: 10px;
5590 }
5591
5592 .form-field-input-member > input.member-role {
5593     border-radius: 0 0 0 4px;
5594 }
5595 [dir='rtl'] .form-field-input-member > input.member-role {
5596     border-radius: 0 0 4px 0;
5597 }
5598
5599 .member-incomplete .form-field-input-member > input.member-role,
5600 [dir='rtl'] .member-incomplete .form-field-input-member > input.member-role {
5601     border-radius: 0 0 4px 4px;
5602 }
5603
5604 .member-incomplete .member-delete {
5605     display: none;
5606 }
5607
5608 .member-row-new .member-entity-input {
5609     flex: 1 1 100%;
5610     border-radius: 4px 4px 0 0;
5611     border: 0;
5612 }
5613
5614 .raw-member-editor .member-row.dragging {
5615     opacity: 0.75;
5616     z-index: 3000;
5617     /*
5618     -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
5619     -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
5620     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
5621     */
5622 }
5623 .raw-member-editor .member-row.dragging
5624
5625 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
5626 .raw-membership-editor.inspector-inner {
5627     margin-bottom: 150px;
5628 }
5629
5630 /* hidden field to prevent user from tabbing out of the sidebar */
5631 input.key-trap {
5632     height: 0px;
5633     width: 0px;
5634     padding: 0px;
5635     border: 1px solid rgba(0,0,0,0);
5636 }
5637
5638
5639 /* add tag, add relation buttons */
5640 .add-row {
5641     display: flex;
5642     width: 100%;
5643     flex-flow: row nowrap;
5644 }
5645 .add-row .add-tag,
5646 .add-row .add-relation,
5647 .add-row .space-value {
5648     flex: 1 1 50%;
5649 }
5650 .add-row .space-buttons {
5651     flex: 0 0 62px;
5652 }
5653 .add-row button {
5654     height: 30px;
5655     background: rgba(0,0,0,.5);
5656 }
5657 .add-row button:focus,
5658 .add-row button:hover {
5659     background: rgba(0,0,0,.8);
5660 }
5661
5662 .add-tag {
5663     border-radius: 0 0 4px 4px;
5664 }
5665 .add-relation {
5666     margin-top: 10px;
5667     border-radius: 4px;
5668 }
5669
5670
5671 /* OSM Note / KeepRight Editors
5672 ------------------------------------------------------- */
5673 .note-header,
5674 .error-header {
5675     background-color: #f6f6f6;
5676     border-radius: 5px;
5677     border: 1px solid #ccc;
5678     display: flex;
5679     flex-flow: row nowrap;
5680     align-items: center;
5681 }
5682
5683 .note-header-icon,
5684 .error-header-icon {
5685     background-color: #fff;
5686     padding: 10px;
5687     flex: 0 0 62px;
5688     position: relative;
5689     width: 60px;
5690     height: 60px;
5691     border-right: 1px solid #ccc;
5692     border-radius: 5px 0 0 5px;
5693 }
5694 [dir='rtl'] .note-header-icon,
5695 [dir='rtl'] .error-header-icon {
5696     border-right: unset;
5697     border-left: 1px solid #ccc;
5698     border-radius: 0 5px 5px 0;
5699 }
5700
5701 .note-header-icon .icon-wrap,
5702 .error-header-icon .icon-wrap {
5703     position: absolute;
5704     top: 0px;
5705 }
5706 .preset-icon-28 {
5707     position: absolute;
5708     top: 16px;
5709     left: 16px;
5710     margin: auto;
5711 }
5712 .preset-icon-28 .icon {
5713     width: 28px;
5714     height: 28px;
5715 }
5716
5717 .note-header-label,
5718 .error-header-label {
5719     background-color: #f6f6f6;
5720     padding: 0 15px;
5721     flex: 1 1 100%;
5722     font-size: 14px;
5723     font-weight: bold;
5724     border-radius: 0 5px 5px 0;
5725 }
5726 [dir='rtl'] .note-header-label,
5727 [dir='rtl'] .error-header-label {
5728     border-radius: 5px 0 0 5px;
5729 }
5730
5731 .note-category {
5732     margin: 20px 0px;
5733 }
5734
5735 .comments-container {
5736     background: #ececec;
5737     padding: 1px 10px;
5738     border-radius: 8px;
5739     margin-top: 20px;
5740 }
5741
5742 .comment {
5743     background-color: #fff;
5744     border-radius: 5px;
5745     border: 1px solid #ccc;
5746     margin: 10px auto;
5747     display: flex;
5748     flex-flow: row nowrap;
5749 }
5750 .comment-avatar {
5751     padding: 10px;
5752     flex: 0 0 62px;
5753 }
5754 .comment-avatar .icon.comment-avatar-icon {
5755     width: 40px;
5756     height: 40px;
5757     object-fit: cover;
5758     border: 1px solid #ccc;
5759     border-radius: 20px;
5760 }
5761 .comment-main {
5762     padding: 10px 10px 10px 0;
5763     flex: 1 1 100%;
5764     flex-flow: column nowrap;
5765     overflow: hidden;
5766     overflow-wrap: break-word;
5767 }
5768 [dir='rtl'] .comment-main {
5769     padding: 10px 0 10px 10px;
5770 }
5771
5772 .comment-metadata {
5773     flex-flow: row nowrap;
5774     justify-content: space-between;
5775 }
5776 .comment-author {
5777     font-weight: bold;
5778     color: #333;
5779 }
5780 .comment-date {
5781     color: #aaa;
5782 }
5783 .comment-text {
5784     color: #333;
5785     margin-top: 10px;
5786     overflow-y: auto;
5787     max-height: 250px;
5788 }
5789 .comment-text::-webkit-scrollbar {
5790     border-left: none;
5791 }
5792
5793 .note-save,
5794 .error-save {
5795     padding-top: 20px;
5796 }
5797
5798 .error-details {
5799     padding: 10px;
5800 }
5801 .error-details-container {
5802     background: #ececec;
5803     padding: 10px;
5804     margin-top: 20px;
5805     border-radius: 4px;
5806     border: 1px solid #ccc;
5807 }
5808 .error-details-description {
5809     margin-bottom: 10px;
5810 }
5811 .error-details-description-text::first-letter {
5812     text-transform: capitalize;
5813 }
5814 [dir='rtl'] .error-details-description-text::first-letter {
5815     text-transform: none;  /* #5877 */
5816 }
5817
5818 .note-save .new-comment-input,
5819 .error-save .new-comment-input {
5820     width: 100%;
5821     height: 100px;
5822     max-height: 300px;
5823     min-height: 100px;
5824 }
5825
5826 .note-save .detail-section,
5827 .error-save .detail-section {
5828     margin: 10px 0;
5829 }
5830
5831 .note-report {
5832     float: right;
5833 }
5834
5835
5836 /* Custom Data Editor
5837 ------------------------------------------------------- */
5838 .data-header {
5839     background-color: #f6f6f6;
5840     border-radius: 5px;
5841     border: 1px solid #ccc;
5842     display: flex;
5843     flex-flow: row nowrap;
5844     align-items: center;
5845 }
5846
5847 .data-header-icon {
5848     background-color: #fff;
5849     padding: 10px;
5850     flex: 0 0 62px;
5851     position: relative;
5852     width: 60px;
5853     height: 60px;
5854     border-right: 1px solid #ccc;
5855     border-radius: 5px 0 0 5px;
5856 }
5857 [dir='rtl'] .data-header-icon {
5858     border-right: unset;
5859     border-left: 1px solid #ccc;
5860     border-radius: 0 5px 5px 0;
5861 }
5862
5863 .data-header-icon .icon-wrap {
5864     position: absolute;
5865     top: 0px;
5866 }
5867
5868 .data-header-label {
5869     background-color: #f6f6f6;
5870     padding: 0 15px;
5871     flex: 1 1 100%;
5872     font-size: 14px;
5873     font-weight: bold;
5874     border-radius: 0 5px 5px 0;
5875 }
5876 [dir='rtl'] .data-header-label {
5877     border-radius: 5px 0 0 5px;
5878 }
5879
5880 /* custom data editor - no info/delete buttons */
5881 .data-editor.raw-tag-editor .tag-row button {
5882     display: none;
5883 }
5884 .data-editor.raw-tag-editor .tag-row .key-wrap,
5885 .data-editor.raw-tag-editor .tag-row .value-wrap {
5886     width: 50%;
5887 }
5888
5889
5890 /* Map Controls
5891 ------------------------------------------------------- */
5892 .map-controls {
5893     right: 0;
5894     top: 141px;
5895     width: 40px;
5896     position: fixed;
5897     z-index: 100;
5898 }
5899 [dir='rtl'] .map-controls {
5900     left: 0;
5901     right: auto;
5902 }
5903
5904 .map-control > button {
5905     position: relative;
5906     width: 40px;
5907     background: rgba(0,0,0,.5);
5908     border-radius: 0;
5909 }
5910
5911 .map-control > button:not(.disabled):hover,
5912 .map-control > button:not(.disabled):focus {
5913     background: rgba(0, 0, 0, .8);
5914 }
5915
5916 .map-control > button.active,
5917 .map-control > button.active:hover {
5918     background: #7092ff;
5919 }
5920
5921 .map-control > button.disabled .icon {
5922     color: rgba(255, 255, 255, 0.5);
5923 }
5924
5925
5926 /* Fullscreen Button (disabled)
5927 ------------------------------------------------------- */
5928 div.full-screen {
5929     display: inline-block;
5930     width: 40px;
5931     margin-right: 10px;
5932     display: none;
5933 }
5934
5935 div.full-screen .tooltip {
5936     min-width: 160px;
5937 }
5938
5939 div.full-screen > button, div.full-screen > button.active {
5940     width: 40px;
5941     height: 40px;
5942     background: transparent;
5943 }
5944
5945 div.full-screen > button:hover {
5946     background-color: rgba(0, 0, 0, .8);
5947 }
5948
5949
5950 /* Zoom Buttons
5951 ------------------------------------------------------- */
5952 .zoombuttons > button.zoom-in {
5953     border-radius: 4px 0 0 0;
5954 }
5955 [dir='rtl'] .zoombuttons > button.zoom-in {
5956     border-radius: 0 4px 0 0;
5957 }
5958
5959
5960 /* Geolocate Button
5961 ------------------------------------------------------- */
5962 .geolocate-control {
5963     margin-bottom: 10px;
5964 }
5965 .geolocate-control > button {
5966     border-radius: 0 0 0 4px;
5967 }
5968 [dir='rtl'] .geolocate-control > button {
5969     border-radius: 0 0 4px 0;
5970 }
5971
5972
5973 /* Background / Map Data / Help Pane buttons
5974 ------------------------------------------------------- */
5975 .help-control > button {
5976     border-radius: 0 0 0 4px;
5977 }
5978 [dir='rtl'] .help-control > button {
5979     border-radius: 0 0 4px 0;
5980 }
5981
5982 .map-data-control button {
5983     border-radius: 0;
5984 }
5985
5986 .background-control > button {
5987     border-radius: 4px 0 0 0;
5988 }
5989 [dir='rtl'] .background-control > button {
5990     border-radius: 0 4px 0 0;
5991 }
5992
5993
5994 /* Background / Map Data Settings
5995 ------------------------------------------------------- */
5996 .map-data-control,
5997 .background-control {
5998     position: relative;
5999 }
6000
6001 .imagery-faq {
6002     margin-bottom: 10px;
6003     white-space: nowrap;
6004 }
6005
6006 .layer-list, .controls-list {
6007     margin-bottom: 10px;
6008     border: 1px solid #ccc;
6009     border-radius: 4px;
6010 }
6011
6012 .layer-list > li {
6013     height: 30px;
6014     background-color: #fff;
6015     color: #7092ff;
6016     position: relative;
6017     display: flex;
6018 }
6019
6020 .layer-list:empty {
6021     display: none;
6022 }
6023
6024 .layer-list > li:first-child {
6025     border-radius: 3px 3px 0 0;
6026 }
6027 .layer-list > li:last-child {
6028     border-radius: 0 0 3px 3px;
6029 }
6030 .layer-list > li:only-child {
6031     border-radius: 3px;
6032 }
6033 .layer-list li:not(:last-child) {
6034     border-bottom: 1px solid #ccc;
6035 }
6036 .layer-list li:hover {
6037     background-color: #ececec;
6038 }
6039
6040 .layer-list li.active button,
6041 .layer-list li.switch button,
6042 .layer-list li.active,
6043 .layer-list li.switch {
6044     background: #e8ebff;
6045 }
6046
6047 .layer-list li.best > div.best {
6048     padding: 5px;
6049     flex: 0 0 auto;
6050 }
6051
6052 [dir='rtl'] .list-item-data-browse svg {
6053     transform: rotateY(180deg);
6054 }
6055
6056 /* make sure tooltip fits in map-control panel */
6057 /* if too wide, placement will be wrong the first time it displays */
6058 .layer-list li.best .tooltip-inner {
6059     max-width: 160px;
6060 }
6061
6062 .layer-list label {
6063     padding: 5px 10px;
6064     cursor: pointer;
6065     flex: 1 1 auto;
6066 }
6067
6068 [dir='ltr'] .layer-list .indented label {
6069     padding-left: 24px;
6070 }
6071 [dir='rtl'] .layer-list .indented label {
6072     padding-right: 24px;
6073 }
6074
6075 .layer-list label > span {
6076     display: block;
6077     overflow: hidden;
6078     white-space: nowrap;
6079     text-overflow: ellipsis;
6080 }
6081
6082 .map-data-pane .layer-list button,
6083 .background-pane .layer-list button {
6084     height: 100%;
6085     border-left: 1px solid #ccc;
6086     border-radius: 0;
6087     padding-left: 4px;
6088     padding-right: 4px;
6089 }
6090 [dir='rtl'] .map-data-pane .layer-list button,
6091 [dir='rtl'] .background-pane .layer-list button {
6092     border-left: none;
6093     border-right: 1px solid #ccc;
6094 }
6095
6096 .map-data-pane .layer-list button .icon,
6097 .background-pane .layer-list button .icon {
6098     opacity: 0.5;
6099 }
6100
6101 .map-data-pane .layer-list button:last-of-type,
6102 .background-pane .layer-list button:last-of-type {
6103     border-radius: 0 3px 3px 0;
6104 }
6105 [dir='rtl'] .map-data-pane .layer-list button:last-of-type,
6106 [dir='rtl'] .background-pane .layer-list button:last-of-type {
6107     border-radius: 3px 0 0 3px;
6108 }
6109
6110 .map-data-pane .vectortile-container .vectortile-header {
6111     padding-bottom: 5px;
6112 }
6113 .map-data-pane .vectortile-container .vectortile-footer {
6114     padding-bottom: 10px;
6115 }
6116
6117
6118 /* Issues
6119 ------------------------------------------------------- */
6120 .issue {
6121     overflow: hidden;
6122 }
6123 .issue .issue-label,
6124 .issue-label .issue-text {
6125     width: 100%;
6126     display: flex;
6127     flex-flow: row nowrap;
6128     cursor: pointer;
6129 }
6130
6131 .issue-text .issue-icon {
6132     flex: 0 0 auto;
6133     padding: 5px 7px;
6134 }
6135 .issue-text .issue-message {
6136     flex: 1 1 auto;
6137     padding: 5px 0;
6138 }
6139 .issue-label .issue-autofix {
6140     flex: 0 0 auto;
6141     padding: 5px 8px;
6142 }
6143 .issue-label .issue-info-button {
6144     height: unset;
6145     width: 32px;
6146     flex: 0 0 auto;
6147     border-left: 1px solid #ccc;
6148     background-color: rgba(0,0,0,0);
6149 }
6150 [dir='rtl'] .issue-label .issue-info-button {
6151     border-left: 0;
6152     border-right: 1px solid #ccc;
6153 }
6154 .issue-container .issue-label .issue-info-button .icon {
6155     opacity: 0.5;
6156 }
6157 .issue-container.active .issue-label .issue-info-button .icon {
6158     opacity: 0.7;
6159 }
6160 .issue-label .issue-info-button:last-child {
6161     border-radius: 0 4px 4px 0;
6162 }
6163 [dir='rtl'] .issue-label .issue-info-button:last-child {
6164     border-radius: 4px 0 0 4px;
6165 }
6166
6167 button.autofix.action {
6168     flex: 0 0 20px;
6169     height: 20px;
6170     width: 20px;
6171     background: #7092ff;
6172     color: #fff;
6173 }
6174 button.autofix.action:focus,
6175 button.autofix.action:hover,
6176 button.autofix.action.active {
6177     background: #597be7;
6178 }
6179
6180 /* fix all */
6181 .autofix-all {
6182     display: flex;
6183     flex-flow: row nowrap;
6184     flex-direction: row-reverse;
6185     margin-top: -25px;
6186     padding-bottom: 5px;
6187 }
6188 .autofix-all-link-text {
6189     padding: 0;
6190 }
6191 .autofix-all-link-icon svg {
6192     margin: 0 9px;
6193     background: currentColor;
6194     border-radius: 4px;
6195 }
6196 .autofix-all-link-icon svg use {
6197     color: #fff;
6198 }
6199
6200 /* warning styles */
6201 .warnings-list,
6202 .warnings-list *,
6203 .issue-container.active .issue.severity-warning,
6204 .issue-container.active .issue.severity-warning * {
6205     border-color: #fb2;
6206 }
6207
6208 .warnings-list .issue.severity-warning .issue-label,
6209 .issue.severity-warning .issue-fix-list,
6210 .mode-save .warning-section {
6211     background: #ffc;
6212 }
6213
6214 .issue-container.active .issue.severity-warning .issue-label {
6215     background: #ffa;
6216 }
6217
6218 .warnings-list .issue.severity-warning .issue-label:hover,
6219 .issue.severity-warning .issue-fix-item.actionable:hover {
6220     background: #ff8;
6221 }
6222
6223 .issue.severity-warning .issue-icon {
6224     color: #f90;
6225 }
6226
6227 .issue.severity-warning .issue-fix-item.actionable,
6228 .issue-container.active .issue.severity-warning .issue-info-button {
6229     color: #b15500;
6230     fill: #b15500;
6231     /*color: #7092ff;*/
6232     /*fill: #7092ff;*/
6233 }
6234 .issue.severity-warning .issue-fix-item.actionable:hover,
6235 .issue-container.active .issue.severity-warning .issue-info-button:hover {
6236     color: #7f3d00;
6237     fill: #7f3d00;
6238     /*color: #597be7;*/
6239     /*fill: #597be7;*/
6240 }
6241
6242 .notification-badge.warning {
6243     color: #ffdf5c;
6244 }
6245
6246
6247 /* error styles */
6248 .errors-list,
6249 .errors-list *,
6250 .issue-container.active .issue.severity-error,
6251 .issue-container.active .issue.severity-error * {
6252     border-color: #f77;
6253 }
6254
6255 .errors-list .issue.severity-error .issue-label,
6256 .issue.severity-error .issue-fix-list,
6257 .mode-save .error-section {
6258     background: #ffd6d6;
6259 }
6260
6261 .issue-container.active .issue.severity-error .issue-label {
6262     background: #ffc6c6;
6263 }
6264
6265 .errors-list .issue.severity-error .issue-label:hover,
6266 .issue.severity-error .issue-fix-item.actionable:hover {
6267     background: #ffb6b6;
6268 }
6269
6270 .issue.severity-error .issue-icon {
6271     color: #dd1400;
6272 }
6273
6274 .issue.severity-error .issue-fix-item.actionable,
6275 .issue-container.active .issue.severity-error .issue-info-button {
6276     color: #b91201;
6277     fill: #b91201;
6278     /*color: #7092ff;*/
6279     /*fill: #7092ff;*/
6280 }
6281 .issue.severity-error .issue-fix-item.actionable:hover,
6282 .issue-container.active .issue.severity-error .issue-info-button:hover {
6283     color: #840c00;
6284     fill: #840c00;
6285     /*color: #597be7;*/
6286     /*fill: #597be7;*/
6287 }
6288
6289 .notification-badge.error {
6290     color: #ff0c05;
6291 }
6292
6293
6294 /* Issues Pane */
6295 .issues-options-container {
6296     display: table;
6297 }
6298 .issues-option {
6299     display: table-row;
6300 }
6301 .issues-option-title {
6302     display: table-cell;
6303     font-weight: bold;
6304     padding-right: 10px;
6305 }
6306 [dir='rtl'] .issues-option-title {
6307     padding-right: 0;
6308     padding-left: 10px;
6309 }
6310 .issues-option label {
6311     display: table-cell;
6312     padding: 0 10px;
6313 }
6314
6315 .layer-list.issues-list li.issue {
6316     border-color: inherit;    /* override .layer-list styles */
6317     color: inherit;
6318     height: unset;
6319 }
6320
6321 .layer-list.issue-rules-list,
6322 .layer-list.issues-list,
6323 .layer-list.layer-feature-list {
6324     margin-bottom: 0;
6325 }
6326 .section-footer {
6327     display: flex;
6328     flex-flow: row nowrap;
6329     flex-direction: row-reverse;
6330     height: 30px;
6331 }
6332 .section-footer a {
6333     padding: 5px;
6334 }
6335
6336 .issues-none .box {
6337     border-radius: 4px;
6338     border: 1px solid #72d979;
6339     background: #c6ffca;
6340     padding: 5px !important;
6341     display: flex;
6342 }
6343 .issues-none .icon {
6344     color: #05ac10;
6345 }
6346
6347 input.square-degrees-input {
6348     padding: 2px !important; /* important needed for rtl */
6349     height: unset;
6350     text-align: center;
6351     background: rgba(0,0,0,0);
6352     color: currentColor;
6353 }
6354
6355
6356 /* Entity Issues List */
6357 .entity-issues .issue-container .issue {
6358     border-radius: 4px;
6359     border: 1px solid #ccc;
6360     background: #f6f6f6;
6361 }
6362 .entity-issues .issue-container:not(.active) .issue-text:hover,
6363 .entity-issues .issue-container:not(.active) .issue-info-button:hover {
6364     background: #f1f1f1;
6365 }
6366 .entity-issues .issue .issue-label .issue-text {
6367     padding-right: 10px;
6368 }
6369 [dir='rtl'] .entity-issues .issue .issue-label .issue-text {
6370     padding-right: unset;
6371     padding-left: 10px;
6372 }
6373
6374 .entity-issues .issue-container.active .issue-label .issue-text {
6375     font-weight: bold;
6376 }
6377 .entity-issues .issue-container:not(:last-of-type) {
6378     margin-bottom: 5px;
6379 }
6380 .entity-issues .issue-container.active:not(:first-of-type) {
6381     margin-top: 10px;
6382 }
6383 .entity-issues .issue-container.active:not(:last-of-type) {
6384     margin-bottom: 10px;
6385 }
6386
6387 /* fixes */
6388 .entity-issues .issue-fix-list {
6389     border-top: 1px solid;
6390     border-color: inherit;
6391 }
6392 .entity-issues .issue-container.active .issue-fix-list:empty {
6393     display: none;
6394 }
6395
6396 li.issue-fix-item {
6397     padding: 2px 10px 2px 20px;
6398 }
6399 [dir='rtl'] li.issue-fix-item {
6400     padding: 2px 20px 2px 10px;
6401 }
6402 li.issue-fix-item:first-of-type {
6403     padding-top: 5px;
6404 }
6405 li.issue-fix-item:last-of-type {
6406     padding-bottom: 5px;
6407 }
6408
6409 li.issue-fix-item .fix-message {
6410     padding: 0 10px;
6411 }
6412
6413 li.issue-fix-item.actionable {
6414     cursor: pointer;
6415 }
6416 li.issue-fix-item:not(.actionable) .fix-icon {
6417     color: #555;
6418     fill: #555;
6419 }
6420
6421 .issue-container:not(.active) ul.issue-fix-list {
6422     display: none;
6423 }
6424
6425 .issue-info {
6426     flex: 1 1 auto;
6427     width: 100%;
6428     overflow: hidden;
6429     display: none;
6430     padding: 10px 0;
6431 }
6432 .issue-info.expanded {
6433     display: inline-block;
6434 }
6435
6436 .issue-info .issue-reference {
6437     margin-bottom: 10px;
6438 }
6439 .issue-info .tagDiff-table {
6440     min-width: 60%;
6441     width: unset;
6442     border: 1px solid #ccc;
6443 }
6444 .issue-info .tagDiff-row {
6445     border: 1px solid #ccc;
6446 }
6447 .issue-info .tagDiff-cell {
6448     padding: 2px 10px;
6449     font-family: monospace;
6450     font-size: 10px;
6451     border: 1px solid #ccc;
6452 }
6453 .issue-info .tagDiff-cell-add {
6454     background: #dfd;
6455 }
6456 .issue-info .tagDiff-cell-remove {
6457     background: #fdd;
6458 }
6459
6460
6461 /* Background - Display Options Sliders
6462 ------------------------------------------------------- */
6463 .display-options-container {
6464     padding: 10px;
6465 }
6466
6467 .display-control h5 {
6468     padding-bottom: 0;
6469     padding-top: 10px;
6470 }
6471
6472 .display-control h5 span {
6473     margin: 5px;
6474 }
6475
6476 .display-control .display-option-input {
6477     height: 20px;
6478     width: 155px;
6479 }
6480
6481 .display-control button {
6482     height: 30px;
6483     width: 30px;
6484     margin-left: 5px;
6485     margin-right: 0px;
6486     vertical-align: text-bottom;
6487     border-radius: 4px;
6488 }
6489 [dir='rtl'] .display-control button {
6490     margin-left: 0px;
6491     margin-right: 5px;
6492 }
6493
6494
6495 /* Background - Adjust Alignment
6496 ------------------------------------------------------- */
6497 .background-pane .nudge-container {
6498     border: 1px solid #ccc;
6499     border-radius: 4px;
6500     padding: 10px;
6501 }
6502
6503 .nudge-container .nudge-instructions {
6504     padding-bottom: 15px;
6505 }
6506
6507 .nudge-container .nudge-outer-rect {
6508     background-color: #eee;
6509     border: 1px solid #ccc;
6510     border-radius: 2px;
6511     padding: 20px 0;
6512     width: 70%;
6513     display: flex;
6514     justify-content: center;
6515     align-items: center;
6516     margin: 0 auto;
6517     margin-top: 20px;
6518     cursor: move;
6519 }
6520
6521 .nudge-container .nudge-inner-rect {
6522     background-color: #fff;
6523     border: 1px solid #ccc;
6524     border-radius: 2px;
6525     width: 65%;
6526     min-height: 20px;
6527 }
6528
6529 .nudge-container .nudge::after {
6530     content: '';
6531     display: block;
6532     position: absolute;
6533     margin: auto;
6534     left: 0; right: 0; top: 0; bottom: 0;
6535     height: 0;
6536     width: 0;
6537 }
6538
6539 .nudge-container input {
6540     width: 100%;
6541     height: 20px;
6542     text-align: center;
6543     border: 0;
6544 }
6545
6546 .nudge-container input.error {
6547     border: 1px solid #ff7878;
6548     border-radius: 2px;
6549     background: #ffb;
6550 }
6551
6552 .nudge-container input:focus {
6553     background-color: transparent;
6554 }
6555
6556 .nudge-container button {
6557     float: left;
6558     display: block;
6559     width: 20%;
6560     position: relative;
6561     background-color: transparent;
6562 }
6563
6564 .nudge-container button.right {
6565     top: -50px;
6566     right: -85%;
6567 }
6568
6569 .nudge-container button.left {
6570     top: -50px;
6571     right: 45%;
6572 }
6573
6574 .nudge-container button.top {
6575     left: 20%;
6576     top: -104px;
6577 }
6578
6579 .nudge-container button.bottom {
6580     left: -20%;
6581 }
6582
6583 .nudge-container button.nudge-reset {
6584     right: -10px;
6585 }
6586
6587 .nudge-surface {
6588    position: absolute;
6589    z-index: 5000;
6590    left: 0;
6591    top: 0;
6592    width: 100%;
6593    height: 100%;
6594    background-color: transparent;
6595    cursor: move;
6596 }
6597
6598 .background-pane .nudge.right::after {
6599     border-top: 5px solid transparent;
6600     border-bottom: 5px solid transparent;
6601     border-left: 5px solid #222;
6602 }
6603
6604 .background-pane .nudge.left::after {
6605     border-top: 5px solid transparent;
6606     border-bottom: 5px solid transparent;
6607     border-right: 5px solid #222;
6608 }
6609
6610 .background-pane .nudge.top::after {
6611     border-right: 5px solid transparent;
6612     border-left: 5px solid transparent;
6613     border-bottom: 5px solid #222;
6614 }
6615
6616 .background-pane .nudge.bottom::after {
6617     border-right: 5px solid transparent;
6618     border-left: 5px solid transparent;
6619     border-top: 5px solid #222;
6620 }
6621
6622
6623 /* Side Panes - Background / Map Data / Help
6624 ------------------------------------------------------- */
6625 .map-panes {
6626     flex: 0 1 auto;
6627     position: relative;
6628     height: 100%;
6629 }
6630 .map-pane {
6631     position: relative;
6632     top: 0;
6633     width: 400px;
6634     height: 100%;
6635     padding-bottom: 60px;
6636     overflow: hidden;
6637     z-index: 10;
6638 }
6639
6640 .map-pane.help-wrap {
6641     width: 600px;
6642 }
6643
6644 .pane-heading {
6645     display: flex;
6646     flex-flow: row nowrap;
6647     justify-content: space-between;
6648     border-bottom: 1px solid #ccc;
6649     height: 60px;
6650 }
6651
6652 .pane-heading h2 {
6653     margin: 14px 20px;
6654 }
6655
6656 .pane-heading button {
6657     width: 40px;
6658     height: 100%;
6659     border-radius: 0;
6660 }
6661
6662 .pane-content {
6663     height: 100%;
6664     padding: 10px 40px 20px 20px;
6665     overflow-x: hidden;
6666     overflow-y: scroll;
6667     position: relative;
6668 }
6669 [dir='rtl'] .pane-content {
6670     padding: 10px 20px 20px 40px;
6671 }
6672
6673 .pane-content > div {
6674     padding-bottom: 15px;
6675 }
6676
6677
6678 /* Help
6679 ------------------------------------------------------- */
6680 .help-wrap p {
6681     font-size: 15px;
6682     margin-bottom: 20px;
6683 }
6684
6685 .help-wrap .left-content .body p code {
6686     padding: 3px 4px;
6687     font-size: 12px;
6688     color: #555;
6689     vertical-align: baseline;
6690     background-color: #f6f6f6;
6691     border: solid 1px #ccc;
6692     margin: 0 2px;
6693     border-bottom-color: #bbb;
6694     border-radius: 3px;
6695     box-shadow: inset 0 -1px 0 #bbb;
6696 }
6697
6698 .help-wrap .left-content .icon.pre-text {
6699     vertical-align: text-top;
6700     margin-right: 0;
6701     margin-left: 0;
6702     display: inline-block;
6703 }
6704
6705 .help-wrap .toc {
6706     width: 40%;
6707     float: right;
6708     margin-left: 20px;
6709     margin-bottom: 20px;
6710     padding-left: 5px;
6711 }
6712
6713 .help-wrap .toc li a,
6714 .help-wrap .nav a {
6715     display: block;
6716     border: 1px solid #ccc;
6717     padding: 5px 10px;
6718 }
6719
6720 .help-wrap .toc li a {
6721     border-bottom: 0;
6722 }
6723
6724 .help-wrap .toc li a:hover,
6725 .help-wrap .nav a:hover {
6726     background: #ececec;
6727 }
6728
6729 .help-wrap .toc li a.selected {
6730     background: #e8ebff;
6731 }
6732
6733 .help-wrap .toc li:first-child a {
6734     border-radius: 4px 4px 0 0;
6735 }
6736
6737 .help-wrap .toc li:nth-last-child(3) a {
6738     border-bottom: 1px solid #ccc;
6739     border-radius: 0 0 4px 4px
6740 }
6741
6742 .help-wrap .toc li.shortcuts a,
6743 .help-wrap .toc li.walkthrough a {
6744     overflow: hidden;
6745     margin-top: 10px;
6746     border-bottom: 1px solid #ccc;
6747     border-radius: 4px;
6748 }
6749
6750 .help-wrap .toc li.walkthrough a {
6751     text-align: center;
6752 }
6753
6754 .help-wrap .nav {
6755     position: relative;
6756     padding-bottom: 30px;
6757 }
6758
6759 .help-wrap .nav a {
6760     float: left;
6761     width: 50%;
6762     text-align: center;
6763 }
6764
6765 .help-wrap .nav a:first-child {
6766     border-radius: 4px 0 0 4px;
6767 }
6768
6769 .help-wrap .nav a:last-child:not(:only-child) {
6770     border-radius: 0 4px 4px 0;
6771     border-left: 0;
6772 }
6773
6774 .help-wrap .nav a:only-child {
6775     width: 100%;
6776     border-radius: 4px;
6777 }
6778
6779
6780 /* Inspector (hover styles)
6781 ------------------------------------------------------- */
6782 .inspector-hover .entity-issues .issue-container .issue .issue-label,
6783 .inspector-hover .form-field-input-wrap .label,
6784 .inspector-hover .form-field-input-multicombo .chiplist,
6785 .inspector-hover .form-field-button,
6786 .inspector-hover .structure-extras-wrap,
6787 .inspector-hover .comments-container .comment,
6788 .inspector-hover button,
6789 .inspector-hover input,
6790 .inspector-hover textarea,
6791 .inspector-hover label {
6792     background: #ececec;
6793 }
6794 .inspector-hover .preset-list-button,
6795 .inspector-hover .tag-row input {
6796     background: #f6f6f6;
6797 }
6798
6799 .inspector-hover a,
6800 .inspector-hover .form-field-input-multicombo .chips,
6801 .inspector-hover .form-field-input-check span,
6802 .inspector-hover .entity-issues .issue .icon {
6803     color: #666;
6804 }
6805
6806 .inspector-hover .form-field-input-multicombo .chips {
6807     background: #eee;
6808     border: 1px solid #ccc;
6809 }
6810
6811 /* no scrollbars */
6812 .inspector-hover div {
6813     overflow-x: hidden;
6814     overflow-y: hidden;
6815 }
6816
6817 /* hide and remove from layout */
6818 .inspector-hidden,
6819 .inspector-hover .preset-list-button-wrap .preset-favorite-button,
6820 .inspector-hover .preset-list-button-wrap .tag-reference-button,
6821 .inspector-hover label input[type="checkbox"],
6822 .inspector-hover label input[type="radio"],
6823 .inspector-hover .form-field-input-multicombo .input-wrap,
6824 .inspector-hover .form-field-input-radio label,
6825 .inspector-hover .form-field-input-radio label span,
6826 .inspector-hover .form-field-input-radio label.remove .icon,
6827 .inspector-hover .inspector-inner .add-row,
6828 .inspector-hover .entity-issues .issue-container .issue-fix-list,
6829 .inspector-hover .entity-issues .issue-container .issue-info-button {
6830     display: none;
6831 }
6832
6833 /* hide but preserve in layout */
6834 .inspector-hover .combobox-caret,
6835 .inspector-hover .header button,
6836 .inspector-hover .quick-links,
6837 .inspector-hover .form-field-input-multicombo .chips .remove,
6838 .inspector-hover .hide-toggle:before,
6839 .inspector-hover .more-fields,
6840 .inspector-hover .field-label button,
6841 .inspector-hover .tag-row button,
6842 .inspector-hover .footer * {
6843     opacity: 0;
6844 }
6845
6846 /* Unstyle the active entity issue on hover */
6847 .inspector-hover .entity-issues .issue-container.active {
6848     margin-top: 1px;
6849     margin-bottom: 1px;
6850 }
6851 .inspector-hover .entity-issues .issue-container * {
6852     border-color: #ccc !important;
6853 }
6854 .inspector-hover .entity-issues .issue-container.active .issue-label {
6855     border-bottom: 0;
6856 }
6857 .inspector-hover .entity-issues .issue-container.active .issue-label .issue-text {
6858     font-weight: normal;
6859 }
6860
6861
6862 /* Styles for raw tag inspector on hover */
6863 .inspector-hover .tag-row .key-wrap,
6864 .inspector-hover .tag-row .value-wrap {
6865     height: 31px;
6866 }
6867
6868 .inspector-hover .tag-row:first-child input.value {
6869     border-top-right-radius: 4px;
6870 }
6871 [dir='rtl'] .inspector-hover .tag-row:first-child input.value {
6872     border-top-right-radius: 0;
6873     border-top-left-radius: 4px;
6874 }
6875
6876 .inspector-hover .tag-row:last-child input.value {
6877     border-bottom-right-radius: 4px;
6878 }
6879 [dir='rtl'] .inspector-hover .tag-row:last-child input.value {
6880     border-bottom-right-radius: 0;
6881     border-bottom-left-radius: 4px;
6882 }
6883
6884 .inspector-hover .tag-row:last-child input.key {
6885     border-bottom-left-radius: 4px;
6886 }
6887 [dir='rtl'] .inspector-hover .tag-row:last-child input.key {
6888     border-bottom-left-radius: 0;
6889     border-bottom-right-radius: 4px;
6890 }
6891
6892 .inspector-hover .more-fields {
6893     max-height: 0;
6894     margin-bottom: -10px;
6895 }
6896
6897 /* Unstyle button fields */
6898 .inspector-hover .form-field-input-radio label.active,
6899 .inspector-hover .entity-editor-pane a.hide-toggle {
6900     opacity: 1;
6901     background-color: transparent;
6902     color: #666;
6903     padding-left: 0;
6904     border-width: 0;
6905 }
6906 .inspector-hover .form-field-input-radio button.active {
6907     padding-left: 10px;
6908 }
6909
6910 /* Show placeholder on hover for radio buttons */
6911 .inspector-hover .form-field-input-radio {
6912     border: 1px solid #ccc;
6913     border-top: 0;
6914     border-radius: 0 0 4px 4px;
6915 }
6916 .inspector-hover .form-field-input-radio .placeholder {
6917     opacity: 1;
6918     color: #666;
6919     padding: 5px 10px;
6920     line-height: 20px;
6921     width: 100%;
6922     border: 0;
6923 }
6924 .inspector-hover .form-field-input-radio .structure-extras-wrap {
6925     border: 0;
6926 }
6927
6928
6929 /* Raster Background Tiles
6930 ------------------------------------------------------- */
6931 img.tile {
6932     position: absolute;
6933     transform-origin: 0 0;
6934     -ms-transform-origin: 0 0;
6935     -webkit-transform-origin: 0 0;
6936     -moz-transform-origin: 0 0;
6937     -o-transform-origin: 0 0;
6938
6939     -moz-user-select: none;
6940     -webkit-user-select: none;
6941     -ms-user-select: none;
6942     user-select: none;
6943
6944     opacity: 0;
6945
6946     -webkit-transition: opacity 200ms linear;
6947     -moz-transition: opacity 200ms linear;
6948     transition: opacity 200ms linear;
6949 }
6950
6951 img.tile-loaded {
6952     opacity: 1;
6953 }
6954
6955 img.tile-removing {
6956     opacity: 0;
6957 }
6958
6959 .tile-label-debug {
6960     font-size: 10px;
6961     background: rgba(0, 0, 0, 0.7);
6962     color: #fff;
6963     position: absolute;
6964     text-align: center;
6965     padding: 5px;
6966     border-radius: 3px;
6967     z-index: 2;
6968     margin-left: -70px;
6969     margin-top: -20px;
6970
6971     transform-origin: 0 0;
6972     -ms-transform-origin: 0 0;
6973     -webkit-transform-origin: 0 0;
6974     -moz-transform-origin: 0 0;
6975     -o-transform-origin: 0 0;
6976
6977     -moz-user-select: none;
6978     -webkit-user-select: none;
6979     -ms-user-select: none;
6980     user-select: none;
6981 }
6982
6983 img.tile-debug {
6984     outline: 1px solid red;
6985 }
6986
6987
6988 /* Map
6989 ------------------------------------------------------- */
6990 #map {
6991     position: relative;
6992     overflow: hidden;
6993     height: 100%;
6994     background: #000;
6995     -moz-user-select: none;
6996     -webkit-user-select: none;
6997     -ms-user-select: none;
6998     user-select: none;
6999 }
7000
7001 #supersurface {
7002     transform-origin: 0 0;
7003     -ms-transform-origin: 0 0;
7004     -webkit-transform-origin: 0 0;
7005     -moz-transform-origin: 0 0;
7006     -o-transform-origin: 0 0;
7007 }
7008
7009 #supersurface, .layer {
7010     position: absolute;
7011     top: 0;
7012     left: 0;
7013     right: 0;
7014     bottom: 0;
7015 }
7016
7017
7018 /* Map-In-Map
7019 ------------------------------------------------------- */
7020 .map-in-map {
7021     position: absolute;
7022     overflow: hidden;
7023     top: 10px;
7024     width: 200px;
7025     height: 150px;
7026     z-index: 5;
7027     background: #000;
7028     border: #aaa 1px solid;
7029     box-shadow: 0 0 2em black;
7030 }
7031 [dir='ltr'] .map-in-map {
7032     left: 10px;
7033 }
7034 [dir='rtl'] .map-in-map {
7035     right: 10px;
7036 }
7037
7038 .map-in-map-tiles {
7039     transform-origin: 0 0;
7040     -ms-transform-origin: 0 0;
7041     -webkit-transform-origin: 0 0;
7042     -moz-transform-origin: 0 0;
7043     -o-transform-origin: 0 0;
7044
7045     -moz-user-select: none;
7046     -webkit-user-select: none;
7047     -ms-user-select: none;
7048     user-select: none;
7049 }
7050
7051 .map-in-map-viewport,
7052 .map-in-map-data {
7053     top: 0;
7054     left: 0;
7055     overflow: hidden;
7056     height: 100%;
7057     width: 100%;
7058 }
7059
7060 .map-in-map-viewport {
7061     position: absolute;
7062 }
7063
7064 .map-in-map-data {
7065     position: relative;
7066     z-index: 10;
7067 }
7068
7069 .map-in-map-bbox {
7070     fill: none;
7071     stroke: rgba(255, 255, 0, 0.75);
7072     stroke-width: 1;
7073     shape-rendering: crispEdges;
7074 }
7075
7076 .map-in-map-bbox.thick {
7077     stroke-width: 5;
7078 }
7079
7080
7081 /* Debug Data
7082 ------------------------------------------------------- */
7083 .debug {
7084     stroke: currentColor;
7085     fill: none;
7086     stroke-width: 2;
7087 }
7088 .map-in-map-data .debug {
7089     stroke-width: 1;
7090 }
7091
7092 .nocolor { color: rgba(0, 0, 0, 0); }
7093 .red     { color: rgba(255, 0, 0, 0.75); }
7094 .green   { color: rgba(0, 255, 0, 0.75); }
7095 .blue    { color: rgba(176, 176, 255, 0.75); }
7096 .yellow  { color: rgba(255, 255, 0, 0.75); }
7097 .cyan    { color: rgba(0, 255, 255, 0.75); }
7098 .magenta { color: rgba(255, 0, 255, 0.75); }
7099 .orange  { color: rgba(255, 153, 0, 0.75); }
7100 .pink    { color: rgba(255, 0, 153, 0.75); }
7101 .purple  { color: rgba(153, 0, 255, 0.75); }
7102
7103 .debug-legend {
7104     position: absolute;
7105     top: 70px;
7106     right: 80px;
7107     padding: 5px;
7108     border-radius: 4px;
7109     pointer-events: none;
7110 }
7111
7112 .debug-legend-item {
7113     padding-right: 5px;
7114 }
7115 .debug-legend-item:before {
7116     content: "\25A0";
7117     padding: 0 5px;
7118 }
7119
7120
7121 .over-map {
7122     position: absolute;
7123     left: 0;
7124     right: 0;
7125     top: 71px;
7126     bottom: 30px;
7127     pointer-events: none;
7128     display: flex;
7129     flex-direction: row-reverse;
7130     align-items: flex-end;
7131 }
7132 .over-map > * {
7133     pointer-events: auto;
7134 }
7135
7136 /* Information Panels
7137 ------------------------------------------------------- */
7138 .info-panels {
7139     display: flex;
7140     flex-flow: row-reverse wrap-reverse;
7141     width: 100%;
7142     z-index: 1;
7143     -ms-user-select: element;
7144     pointer-events: none;
7145 }
7146
7147 .panel-container h1,
7148 .panel-container h2,
7149 .panel-container h3,
7150 .panel-container h4,
7151 .panel-container h5 {
7152     display: inline-block;
7153     margin-bottom: 0;
7154 }
7155
7156 .panel-container h1,
7157 .panel-container h2,
7158 .panel-container h3 {
7159     color: #ff8;
7160 }
7161
7162 .panel-container {
7163     flex: 0 0 auto;
7164     margin: 0 2px 2px 0;
7165     border-radius: 4px;
7166     border: 1px solid rgba(0, 0, 0, 0.75);
7167     padding-bottom: 10px;
7168     width: 250px;
7169     pointer-events: auto;
7170 }
7171
7172 .panel-container .panel-title {
7173     border-radius: 4px 4px 0 0;
7174 }
7175
7176 .panel-title {
7177     padding: 5px 10px;
7178 }
7179
7180 .panel-title button.close {
7181     float: right;
7182     height: 20px;
7183     background: none;
7184     color: #ddd;
7185 }
7186 [dir='rtl'] .panel-title button.close {
7187     float: left;
7188 }
7189
7190 .panel-title button.close:hover {
7191     color: #fff;
7192 }
7193 .panel-title button.close .icon {
7194     height: 20px;
7195     width: 16px;
7196 }
7197
7198 .panel-content {
7199     padding: 5px 10px;
7200     position: relative;
7201 }
7202
7203 .panel-content li span {
7204     display: inline-block;
7205     white-space: nowrap;
7206     margin: 0 8px;
7207 }
7208
7209 .panel-content .button {
7210     display: inline-block;
7211     background: #7092ff;
7212     border-radius: 2px;
7213     padding: 0 4px;
7214     margin-top: 10px;
7215     margin-right: 10px;
7216     color: #fff;
7217 }
7218 [dir='rtl'] .panel-content .button {
7219     margin-right: auto;
7220     margin-left: 10px;
7221 }
7222
7223 .panel-content-history .links a {
7224     margin-left: 8px;
7225 }
7226 [dir='rtl'] .panel-content-history .links a {
7227     margin-left: auto;
7228     margin-right: 8px;
7229 }
7230 .panel-content-history h4 {
7231     padding-bottom: 0;
7232 }
7233 .panel-content-location .location-info {
7234     margin-top: 10px;
7235 }
7236
7237
7238 /* About Section, Attribution, Footer
7239 ------------------------------------------------------- */
7240 #about {
7241     width: 100%;
7242     position: absolute;
7243     right: 0;
7244     bottom: 0;
7245     border-radius: 0;
7246     pointer-events: none;
7247     display: flex;
7248     flex-direction: column;
7249     -ms-user-select: element;
7250 }
7251
7252 #attrib {
7253     width: 100%;
7254     height: 20px;
7255     margin-bottom: 5px;
7256 }
7257
7258 #attrib * { pointer-events: all; }
7259
7260 .base-layer-attribution,
7261 .overlay-layer-attribution {
7262     position: absolute;
7263     color: #ccc;
7264     font-size: 10px;
7265 }
7266
7267 .base-layer-attribution {
7268     left: 10px;
7269 }
7270
7271 .overlay-layer-attribution {
7272     right: 10px;
7273 }
7274
7275 .overlay-layer-attribution .attribution:not(:last-child):after {
7276     content: '; ';
7277 }
7278
7279 .attribution a,
7280 .attribution a:visited {
7281     color: #ccf;
7282 }
7283
7284 .attribution a:hover {
7285     color: #aaf;
7286 }
7287
7288 .attribution .source-image {
7289     height: 20px;
7290     vertical-align: middle;
7291     border-radius: 3px;
7292 }
7293
7294 .attribution span {
7295     margin: 0 3px;
7296 }
7297
7298 #footer {
7299     pointer-events: all;
7300     display: block;
7301     height: 30px;
7302 }
7303
7304
7305 /* Footer - Flash messages
7306 ------------------------------------------------------- */
7307 #flash-wrap {
7308     display: flex;
7309     flex: 0 0 100%;
7310     flex-flow: row nowrap;
7311     justify-content: space-between;
7312     max-height: 30px;
7313     position: absolute;
7314     right: 0;
7315     left: 0;
7316 }
7317
7318 .flash-content {
7319     display: flex;
7320     flex: 1 0 auto;
7321     flex-flow: row nowrap;
7322     align-items: center;
7323     padding: 2px;
7324     height: 30px;
7325 }
7326
7327 .flash-icon {
7328     flex: 0 0 auto;
7329     width: 20px;
7330     height: 20px;
7331     margin: 0 8px;
7332 }
7333
7334 .flash-icon circle {
7335     fill: #eee;
7336 }
7337 .flash-icon.disabled circle {
7338     cursor: auto;
7339     fill: rgba(255,255,255,0.7);
7340 }
7341
7342 .flash-icon use {
7343     color: #222;
7344 }
7345 .flash-icon.disabled use {
7346     color: rgba(32,32,32,0.7);
7347 }
7348
7349 .flash-icon.operation use {
7350     fill: #222;
7351     color: #79f;
7352 }
7353 .flash-icon.operation.disabled use {
7354     fill: rgba(32,32,32,0.7);
7355     color: rgba(40,40,40,0.7);
7356 }
7357
7358 .flash-text {
7359     flex: 1 1 auto;
7360 }
7361
7362 #footer-wrap {
7363     display: flex;
7364     flex: 0 0 100%;
7365     flex-flow: row nowrap;
7366     justify-content: space-between;
7367     max-height: 30px;
7368     position: absolute;
7369     right: 0;
7370     left: 0;
7371 }
7372
7373 .footer-show {
7374     bottom: 0px;
7375     transition: bottom 75ms linear;
7376     -moz-transition: bottom 75ms linear;
7377     -webkit-transition: bottom 75ms linear;
7378 }
7379
7380 .footer-hide {
7381     bottom: -35px;
7382     transition: bottom 75ms linear;
7383     -moz-transition: bottom 75ms linear;
7384     -webkit-transition: bottom 75ms linear;
7385 }
7386
7387
7388 /* Footer - Scale bar, About, Source Switcher
7389 ------------------------------------------------------- */
7390 #scale-block {
7391     vertical-align: bottom;
7392     width: 250px;
7393     max-height: 30px;
7394     flex: 0 0 250px;
7395     -moz-user-select: none;
7396     -webkit-user-select: none;
7397     -ms-user-select: none;
7398     user-select: none;
7399 }
7400
7401 #info-block {
7402     max-height: 30px;
7403     flex: 1 1 auto;
7404 }
7405
7406 #scale {
7407     height: 30px;
7408     width: 100%;
7409 }
7410 [dir='rtl'] #scale {
7411     transform: scaleX(-1);
7412 }
7413
7414 #scale:hover {
7415     cursor: pointer;
7416 }
7417
7418 #scale text {
7419     font: 12px sans-serif;
7420     stroke: none;
7421     fill: #ccc;
7422     text-anchor: start;
7423 }
7424 [dir='rtl'] #scale text {
7425     transform: scaleX(-1);
7426 }
7427
7428 #scale path {
7429     fill: none;
7430     stroke: #ccc;
7431     stroke-width: 1;
7432     shape-rendering: crispEdges;
7433 }
7434
7435 #about-list {
7436     text-align: right;
7437     margin-right: 10px;
7438     clear: right;
7439     overflow: hidden;
7440 }
7441 [dir='rtl'] #about-list {
7442     text-align: left;
7443     clear: left;
7444     margin-left: 10px;
7445     margin-right: 0;
7446 }
7447
7448 #about-list li {
7449     float: right;
7450     border-left: 1px solid rgba(255,255,255,.5);
7451     padding: 5px 0 5px 5px;
7452     margin-left: 5px;
7453 }
7454 [dir='rtl'] #about-list li {
7455     float: left;
7456     border-left: none;
7457     border-right: 1px solid rgba(255,255,255,.5);
7458     margin-left: 0;
7459     margin-right: 5px;
7460     padding: 5px 5px 5px 0;
7461 }
7462 #about-list li:empty {
7463     display: none;
7464 }
7465
7466 #about-list li:last-child {
7467     border-left: 0;
7468     margin-left: 0;
7469     padding-left: 0;
7470 }
7471 [dir='rtl'] #about-list li:last-child {
7472     border-right: none;
7473 }
7474
7475 #about-list a.chip {
7476     padding: 2px 4px 3px 4px;
7477     border-radius: 2px;
7478     color: #eee;
7479 }
7480 #about-list a.chip .icon {
7481     width: 14px;
7482     height: 14px;
7483     margin-top: 3px;
7484 }
7485 [dir='ltr'] #about-list a.chip .icon,
7486 [dir='ltr'] #about-list a.chip span {
7487     margin-right: 3px;
7488 }
7489 [dir='rtl'] #about-list a.chip .icon,
7490 [dir='rtl'] #about-list a.chip span {
7491     margin-left: 3px;
7492 }
7493
7494 .source-switch a.chip.live {
7495     background: #d32232;
7496     color: #fff;
7497 }
7498
7499 .feature-warning a.chip {
7500     background: #1e90ff;
7501 }
7502
7503 .issues-info a.chip.resolved-count {
7504     background: #15911E;
7505 }
7506 .issues-info a.chip.warnings-count {
7507     background: #DF8500;
7508 }
7509 [dir='ltr'] .issues-info a.chip:not(:last-child) {
7510     margin-right: 5px;
7511 }
7512 [dir='rtl'] .issues-info a.chip:not(:last-child) {
7513     margin-left: 5px;
7514 }
7515
7516 .user-list a:not(:last-child):after {
7517     content: ', ';
7518 }
7519
7520 .api-status {
7521     text-align: right;
7522     padding: 0px 10px;
7523     color: #eee;
7524     flex: 1 1 auto;
7525 }
7526 [dir='rtl'] .api-status {
7527     text-align: left;
7528 }
7529
7530 .api-status.offline,
7531 .api-status.readonly,
7532 .api-status.error {
7533     background: #a22;
7534 }
7535
7536 .api-status-login {
7537     color: #aaf;
7538 }
7539 .api-status-login:hover {
7540     color: #ccf;
7541 }
7542
7543 /* Notification Badges
7544 ------------------------------------------------------- */
7545 /* For an icon (e.g. new version) */
7546 .badge {
7547     display: inline-block;
7548     background: #d32232;
7549     width: 21px;
7550     height: 20px;
7551     border-radius: 11px;
7552     margin-left: 6px;
7553 }
7554 [dir='rtl'] .badge {
7555     margin-left: 0;
7556     margin-right: 6px;
7557 }
7558 .badge a {
7559     margin-right: 5px;
7560 }
7561 [dir='rtl'] .badge a {
7562     margin-right: 0;
7563     margin-left: 5px;
7564 }
7565 .badge .icon {
7566     vertical-align: baseline;
7567     width: 11px;
7568     height: 11px;
7569     color: #fff;
7570 }
7571
7572 /* For text (e.g. upcoming events) */
7573 .badge-text {
7574     display: inline-block;
7575     color: #fff;
7576     text-align: center;
7577     width: 16px;
7578     height: 16px;
7579     font-size: 10px;
7580     font-weight: bold;
7581     margin-left: 5px;
7582     background: #f00;
7583     border-radius: 9px;
7584 }
7585 [dir='rtl'] .badge-text {
7586     margin-left: 0;
7587     margin-right: 5px;
7588 }
7589
7590
7591 /* Modals / Prompts
7592 ------------------------------------------------------- */
7593 .modal {
7594     top: 40px;
7595     display: inline-block;
7596     position: absolute;
7597     border-radius: 3px;
7598     overflow: hidden;
7599     left: 0;
7600     right: 0;
7601     margin: auto;
7602     z-index: 50;
7603     width: 50%;
7604     min-width: 200px;
7605     max-width: 600px;
7606 }
7607
7608 .modal .loader {
7609     margin-bottom: 10px;
7610 }
7611 .modal .description {
7612     text-align: center;
7613 }
7614
7615 .shaded {
7616     z-index: 5000;
7617     position: absolute;
7618     top: 0;
7619     bottom: 0;
7620     left: 0;
7621     right: 0;
7622     overflow: auto;
7623 }
7624 .shaded:before {
7625     content:'';
7626     background: rgba(0,0,0,0.5);
7627     position: fixed;
7628     left: 0px; right: 0px; top: 0px; bottom: 0px;
7629 }
7630
7631 .modal-section {
7632     padding: 20px;
7633     border-bottom: 1px solid #ccc;
7634 }
7635 .modal-section.header h3 {
7636     padding: 0;
7637 }
7638 .modal-section.buttons {
7639     text-align: center;
7640 }
7641
7642 .modal-section.buttons button {
7643     min-width: 130px;
7644 }
7645
7646 .modal-section.buttons .action {
7647     display: inline-block;
7648     margin: 0 10px;
7649     text-align: center;
7650     vertical-align: middle;
7651 }
7652
7653 .save-section .buttons {
7654     display: flex;
7655     flex-wrap: wrap;
7656     justify-content: space-around;
7657     margin-bottom: 30px;
7658 }
7659
7660 .save-section .buttons .action,
7661 .save-section .buttons .secondary-action {
7662     width: 45%;
7663     margin: 10px auto;
7664     text-align: center;
7665     vertical-align: middle;
7666 }
7667
7668 .loading-modal {
7669     text-align: center;
7670 }
7671 .modal-actions {
7672     display: flex;
7673 }
7674 .modal-actions button {
7675     font-weight: normal;
7676     color: #7092ff;
7677     border-bottom: 1px solid #ccc;
7678     border-radius: 0;
7679     height: 160px;
7680     text-align: center;
7681     width: 100%;
7682 }
7683 .modal-actions button:hover {
7684     background-color: #ececec;
7685 }
7686
7687 .logo-small {
7688     height: 40px;
7689     width: 40px;
7690     margin: auto;
7691 }
7692
7693 .logo {
7694     height: 100px;
7695     width: 100%;
7696     max-width: 100px;
7697     margin: auto;
7698 }
7699
7700 .modal-actions > :first-child {
7701     border-right: 1px solid #ccc;
7702 }
7703
7704 .modal-section:last-child {
7705     border-bottom: 0;
7706 }
7707
7708 /* Restore Modal
7709 ------------------------------------------------------- */
7710 .modal-actions .logo-restore {
7711     color: #7092ff;
7712 }
7713 .modal-actions .logo-reset {
7714     color: #e06c5e;
7715 }
7716
7717 /* Success Screen / Community Index
7718 ------------------------------------------------------- */
7719 .save-success.body {
7720     overflow-y: scroll;
7721     overflow-x: hidden;
7722 }
7723
7724 .save-success .link-out {
7725     margin: 0px 5px;
7726     white-space: nowrap;
7727 }
7728
7729 .save-summary,
7730 .save-communityLinks {
7731     padding: 0px 20px 15px 20px;
7732 }
7733
7734 .save-communityLinks {
7735     border-top: 1px solid #ccc;
7736 }
7737
7738 .save-success table,
7739 .save-success p {
7740     margin-top: 15px;
7741 }
7742 .save-success h3 {
7743     font-size: 14px;
7744     margin-top: 15px;
7745     line-height: 1.5;
7746     padding-bottom: 0;
7747 }
7748 .save-success td {
7749     vertical-align: top;
7750 }
7751 .save-success td.cell-icon {
7752     width: 40px;
7753 }
7754 .save-success td.cell-detail {
7755     padding: 0 10px;
7756 }
7757 .save-success td.community-detail {
7758     padding-bottom: 15px;
7759 }
7760
7761 .summary-view-on-osm,
7762 .community-name {
7763     font-size: 14px;
7764     font-weight: bold;
7765 }
7766 .community-languages {
7767     margin-top: 5px;
7768     font-style: italic;
7769 }
7770 .community-languages:only-child {
7771     margin-top: 0;
7772 }
7773
7774 .community-detail a.hide-toggle,
7775 .community-detail a:visited.hide-toggle {
7776     font-size: 12px;
7777     font-weight: normal;
7778     padding-bottom: 0;
7779 }
7780 .community-detail .hide-toggle svg.icon.pre-text {
7781     width: 12px;
7782     height: 15px;
7783 }
7784
7785 .community-events {
7786     margin-top: 5px;
7787 }
7788
7789 .community-event,
7790 .community-more {
7791     background-color: #efefef;
7792     padding: 8px;
7793     border-radius: 4px;
7794     margin-bottom: 5px;
7795 }
7796
7797 .community-event-name {
7798     font-size: 14px;
7799     font-weight: bold;
7800 }
7801 .community-event-when {
7802     font-weight: bold;
7803 }
7804
7805 .community-missing {
7806     padding: 10px;
7807     text-align: center;
7808 }
7809
7810
7811 /* Splash Modal
7812 ------------------------------------------------------- */
7813 .modal-actions .logo-walkthrough,
7814 .modal-actions .logo-features {
7815     color: #7092ff;
7816 }
7817
7818
7819 /* Shortcuts Modal
7820 ------------------------------------------------------- */
7821 .modal-shortcuts {
7822     width: 90%;
7823     max-width: 950px;
7824 }
7825
7826 .modal-shortcuts .modal-section:last-child {
7827     padding-top: 10px;
7828     min-height: 275px;
7829 }
7830
7831 .modal-shortcuts .tabs-bar {
7832     text-align: center;
7833     padding-bottom: 5px;
7834     font-size: 16px;
7835     font-weight: bold;
7836 }
7837
7838 .modal-shortcuts .tab {
7839     display: inline-block;
7840     padding: 5px 10px;
7841     margin: 0 5px;
7842     cursor: pointer;
7843     color: #666;
7844 }
7845 .modal-shortcuts .tab.active {
7846     color: #7092ff;
7847     border-bottom: 2px solid;
7848 }
7849 .modal-shortcuts .tab:hover {
7850     color: #597be7;
7851     background-color: #efefef;
7852 }
7853
7854 .modal-shortcuts .shortcut-tab {
7855     display: flex;
7856     flex-flow: row wrap;
7857     justify-content: center;
7858 }
7859
7860 .modal-shortcuts .shortcut-column {
7861     width: auto;
7862 }
7863
7864 .modal-shortcuts .shortcut-tab-tools .shortcut-column {
7865     flex: 1 1 100%;
7866     width: 100%;
7867 }
7868
7869 .modal-shortcuts td {
7870     padding-bottom: 5px;
7871 }
7872
7873 .modal-shortcuts .shortcut-section {
7874     padding: 20px 0 10px 0;
7875 }
7876
7877 .modal-shortcuts .shortcut-keys {
7878     padding: 0 10px;
7879     color: #767676;
7880     text-align: right;
7881     white-space: nowrap;
7882 }
7883 [dir='rtl'] .modal-shortcuts .shortcut-keys {
7884     text-align: left;
7885 }
7886
7887 .modal-shortcuts .shortcut-keys kbd {
7888     display: inline-block;
7889     text-align: center;
7890     padding: 3px 5px;
7891     font-size: 11px;
7892     line-height: 12px;
7893     min-width: 12px;
7894     color: #555;
7895     vertical-align: baseline;
7896     background-color: #fcfcfc;
7897     border: solid 1px #ccc;
7898     margin: 0 2px;
7899     border-bottom-color: #bbb;
7900     border-radius: 3px;
7901     box-shadow: inset 0 -1px 0 #bbb;
7902 }
7903
7904 svg.mouseclick use.left {
7905     fill: rgba(112, 146, 255, 1);
7906     color: rgba(112, 146, 255, 0);
7907 }
7908 svg.mouseclick use.right {
7909     fill: rgba(112, 146, 255, 0);
7910     color: rgba(112, 146, 255, 1);
7911 }
7912
7913 .modal-shortcuts .shortcut-keys .gesture {
7914     color: #333;
7915     padding: 3px;
7916 }
7917
7918
7919 /* Settings Modals
7920 ------------------------------------------------------- */
7921 .settings-modal textarea {
7922     height: 70px;
7923     width: 100%;
7924 }
7925
7926 .settings-custom-background .instructions-template {
7927     margin-bottom: 20px;
7928 }
7929
7930 .settings-custom-data .instructions-url {
7931     margin-bottom: 10px;
7932 }
7933 .settings-custom-data .field-file,
7934 .settings-custom-data .instructions-template {
7935     margin-bottom: 20px;
7936 }
7937
7938
7939 /* Save Mode
7940 ------------------------------------------------------- */
7941 .mode-save a.user-info {
7942     display: inline-block;
7943 }
7944
7945 .mode-save .commit-form {
7946     margin-bottom: 0;
7947 }
7948
7949 .mode-save .user-info img {
7950     float: left;
7951 }
7952
7953 .mode-save h3 small.count {
7954     margin-right: 10px;
7955     text-align: center;
7956     float: left;
7957     height: 12px;
7958     min-width: 12px;
7959     font-size: 12px;
7960     line-height: 12px;
7961     border-radius: 24px;
7962     padding: 5px;
7963     background: #7092ff;
7964     color: #fff;
7965 }
7966
7967 .note-save .field-warning,
7968 .mode-save .field-warning {
7969     background: #ffb;
7970     border: 1px solid #ccc;
7971     border-radius: 4px;
7972     padding: 10px;
7973 }
7974
7975 .note-save .field-warning:empty,
7976 .mode-save .field-warning:empty {
7977     display: none;
7978 }
7979
7980 .mode-save .field-warning,
7981 .mode-save .changeset-info,
7982 .mode-save .request-review,
7983 .mode-save .commit-info {
7984     margin-bottom: 10px;
7985 }
7986
7987 .mode-save .request-review label {
7988     cursor: pointer;
7989 }
7990
7991 .mode-save .changeset-list {
7992     border: 1px solid #ccc;
7993     border-radius: 4px;
7994     background: #fff;
7995     margin-bottom: 10px;
7996 }
7997
7998 .mode-save .warning-section .changeset-list button {
7999     border-left: 1px solid #ccc;
8000 }
8001
8002 .mode-save .changeset-list li {
8003     position: relative;
8004     border-top: 1px solid #ccc;
8005     padding: 5px 10px;
8006     cursor: pointer;
8007 }
8008
8009 .mode-save .changeset-list li:hover {
8010     background-color: #ececec;
8011 }
8012
8013 .mode-save .changeset-list .alert {
8014     opacity: 0.5;
8015 }
8016
8017 .changeset-list li span.count {
8018     font-size: 10px;
8019     color: #555;
8020 }
8021
8022 .mode-save .commit-section .changeset-list button {
8023     border-left: 1px solid #ccc;
8024 }
8025
8026 .changeset-list li span.count:before { content: '('; }
8027
8028 .changeset-list li span.count:after { content: ')'; }
8029
8030 .changeset-list li:first-child { border-top: 0;}
8031
8032
8033 /* Conflict resolution
8034 ------------------------------------------------------- */
8035 .conflicts-help {
8036     padding: 20px;
8037     background-color: #ffffbb;
8038     border-bottom: 1px solid #ccc;
8039 }
8040
8041 .conflicts-buttons {
8042     padding: 20px;
8043 }
8044
8045 .mode-save button.conflicts-button {
8046     float: left;
8047 }
8048
8049 .conflict-container {
8050     border-bottom: 1px solid #ccc;
8051 }
8052
8053 .conflict-description {
8054     padding: 5px 20px;
8055     display: block;
8056 }
8057
8058 .conflicts-done {
8059     padding: 20px 20px 0 20px;
8060 }
8061
8062 .conflict-detail-container {
8063     padding: 10px 20px;
8064 }
8065
8066 .conflict-count {
8067     padding: 10px 20px;
8068 }
8069
8070 .conflict-choices {
8071     margin-top: 10px;
8072 }
8073
8074 .conflict-nav-buttons {
8075     padding: 10px 0 20px 0;
8076 }
8077
8078 .conflict-nav-button {
8079     height: 30px;
8080 }
8081
8082
8083 /* Notices (Zoom in to Edit)
8084 ------------------------------------------------------- */
8085 .notice {
8086     position: absolute;
8087     top: 15px;
8088     left: 0;
8089     right: 0;
8090     text-align: center;
8091 }
8092
8093 .notice .zoom-to {
8094     margin: auto;
8095     width: 300px;
8096     height: 70px;
8097     font-size: 150%;
8098     border-radius: 8px;
8099 }
8100
8101 .notice .zoom-to:hover,
8102 .notice .zoom-to:focus {
8103     background: rgba(0,0,0,0.6);
8104 }
8105
8106 .notice .zoom-to .icon {
8107     width: 30px;
8108     height: 30px;
8109     vertical-align: middle;
8110     margin-right: 10px;
8111 }
8112 [dir='rtl'] .notice .zoom-to .icon {
8113     margin-left: 10px;
8114     margin-right: 0;
8115 }
8116
8117
8118 /* Tooltips
8119 ------------------------------------------------------- */
8120 .tooltip {
8121     position: absolute;
8122     display: none;
8123     color: #333;
8124     font-size: 12px;
8125     white-space: initial;
8126 }
8127 .tooltip:not(.curtain-tooltip) {
8128     pointer-events: none;
8129 }
8130 .tooltip.in {
8131     opacity: 0.9;
8132     z-index: 5000;
8133     height: auto;
8134     display: block;
8135 }
8136 .tooltip.top {
8137     margin-top: -20px;
8138     text-align: center;
8139 }
8140 .tooltip.right {
8141     margin-left: 20px;
8142     text-align: left;
8143 }
8144 .tooltip.bottom {
8145     margin-top: 20px;
8146     text-align: center;
8147 }
8148 .tooltip.left {
8149     margin-left: -20px;
8150     text-align: right;
8151 }
8152
8153 .tooltip-inner {
8154     display: inline-block;
8155     border-radius: 3px;
8156     max-width: 200px;
8157     min-width: 80px;
8158     padding: 10px;
8159     font-weight: normal;
8160     background-color: #fff;
8161 }
8162
8163 .tail {
8164     width: 200px;
8165     height: 400px;
8166     pointer-events: none;
8167     opacity: .8;
8168     margin-top: -200px;
8169     position: absolute;
8170     background: transparent;
8171 }
8172 .tail::after {
8173     content: "";
8174     position: absolute;
8175     width: 0;
8176     height: 0;
8177     border-color: transparent;
8178     border-style: solid;
8179     top: 50%;
8180     right: -5px;
8181     margin-top: -5px;
8182     border-left-color: #fff;
8183     border-width: 5px 0 5px 5px;
8184 }
8185
8186 .tail div {
8187     border-radius: 3px;
8188     padding: 10px;
8189     background: #fff;
8190     position: absolute;
8191     top: 180px;
8192     left: 0;
8193     right: 0;
8194     margin: auto;
8195 }
8196
8197 .left.tail::after {
8198     content: "";
8199     position: absolute;
8200     width: 0;
8201     height: 0;
8202     border-color: transparent;
8203     border-style: solid;
8204     top: 50%;
8205     left: -5px;
8206     margin-top: -5px;
8207     border-right-color: #fff;
8208     border-width: 5px 5px 5px 0;
8209 }
8210
8211 .tooltip-arrow {
8212     position: absolute;
8213     width: 0;
8214     height: 0;
8215     border-color: transparent;
8216     border-style: solid;
8217 }
8218 .tooltip.top .tooltip-arrow {
8219     bottom: -5px;
8220     left: 50%;
8221     margin-left: -5px;
8222     border-top-color: #fff;
8223     border-width: 5px 5px 0;
8224 }
8225 .tooltip.right .tooltip-arrow {
8226     top: 50%;
8227     left: -5px;
8228     margin-top: -5px;
8229     border-right-color: #fff;
8230     border-width: 5px 5px 5px 0;
8231 }
8232 .tooltip.left .tooltip-arrow {
8233     top: 50%;
8234     right: -5px;
8235     margin-top: -5px;
8236     border-left-color: #fff;
8237     border-width: 5px 0 5px 5px;
8238 }
8239 .tooltip.bottom .tooltip-arrow {
8240     top: -5px;
8241     left: 50%;
8242     margin-left: -5px;
8243     border-bottom-color: #fff;
8244     border-width: 0 5px 5px;
8245 }
8246
8247 .tooltip-heading {
8248     font-weight: bold;
8249     background: #f6f6f6;
8250     padding: 10px;
8251     margin: -10px -10px 10px -10px;
8252     border-radius: 3px 3px 0 0;
8253     font-size: 14px;
8254 }
8255
8256 .keyhint-wrap {
8257     background: #f6f6f6;
8258     padding: 10px;
8259     margin: 10px -10px -10px -10px;
8260     border-radius: 0 0 3px 3px;
8261 }
8262 .tooltip-inner .keyhint {
8263     font-weight: bold;
8264     margin-left: 5px;
8265 }
8266
8267 [dir='rtl'] .tooltip-inner .keyhint {
8268     margin-left: 0;
8269     margin-right: 5px;
8270 }
8271
8272 /* dark tooltips for sidebar / panels */
8273 .tooltip.dark.top .tooltip-arrow,
8274 .map-pane .tooltip.top .tooltip-arrow,
8275 #sidebar .tooltip.top .tooltip-arrow {
8276     border-top-color: #000;
8277 }
8278 .tooltip.dark.bottom .tooltip-arrow,
8279 .map-pane .tooltip.bottom .tooltip-arrow,
8280 #sidebar .tooltip.bottom .tooltip-arrow {
8281     border-bottom-color: #000;
8282 }
8283 .tooltip.dark.left .tooltip-arrow,
8284 .map-pane .tooltip.left .tooltip-arrow,
8285 #sidebar .tooltip.left .tooltip-arrow {
8286     border-left-color: #000;
8287 }
8288 .tooltip.dark.right .tooltip-arrow,
8289 .map-pane .tooltip.right .tooltip-arrow,
8290 #sidebar .tooltip.right .tooltip-arrow {
8291     border-right-color: #000;
8292 }
8293 .tooltip.dark .tooltip-inner,
8294 .tooltip.dark .tooltip-heading,
8295 .tooltip.dark .keyhint-wrap,
8296 .map-pane .tooltip-inner,
8297 .map-pane .tooltip-heading,
8298 .map-pane .keyhint-wrap,
8299 #sidebar .tooltip-inner,
8300 #sidebar .tooltip-heading,
8301 #sidebar .keyhint-wrap {
8302     background: #000;
8303     color: #ccc;
8304 }
8305
8306 /* Exceptions for tooltip layouts */
8307
8308 /* commit warning tooltips need to be closer */
8309 .warning-section .tooltip.top {
8310     margin-top: -5px;
8311 }
8312
8313 /* Uncramp map-control tooltips */
8314 .map-control .tooltip {
8315     min-width: 160px;
8316 }
8317 .map-control .shortcuts .tooltip {
8318     max-width: 160px;
8319 }
8320
8321 /* Move over tooltips that are near the edge of screen */
8322 [dir='ltr'] .sidebar-toggle .tooltip {
8323     left: 0 !important;
8324 }
8325 [dir='rtl'] .sidebar-toggle .tooltip {
8326     right: 0 !important;
8327 }
8328 [dir='ltr'] .sidebar-toggle .tooltip .tooltip-arrow {
8329     left: 20px;
8330 }
8331 [dir='rtl'] .sidebar-toggle .tooltip .tooltip-arrow {
8332     right: 20px;
8333 }
8334 [dir='ltr'] .save .tooltip {
8335     left: auto !important;
8336     right: 0 !important;
8337 }
8338 [dir='rtl'] .save .tooltip {
8339     right: auto !important;
8340     left: 0 !important;
8341 }
8342 [dir='ltr'] .save .tooltip .tooltip-arrow {
8343     left: auto;
8344     right: 36px;
8345 }
8346 [dir='rtl'] .save .tooltip .tooltip-arrow {
8347     right: auto;
8348     left: 36px;
8349 }
8350
8351 li:first-of-type .badge .tooltip,
8352 li.hide + li.version .badge .tooltip {
8353     left: auto !important;
8354     right: 5px !important;
8355 }
8356 [dir='rtl'] li:first-of-type .badge .tooltip,
8357 [dir='rtl'] li.hide + li.version .badge .tooltip {
8358     left: 5px !important;
8359     right: auto !important;
8360 }
8361 li:first-of-type .badge .tooltip .tooltip-arrow,
8362 li.hide + li.version .badge .tooltip .tooltip-arrow {
8363     right: 15px !important;
8364     left: auto !important;
8365 }
8366 [dir='rtl'] li:first-of-type .badge .tooltip .tooltip-arrow,
8367 [dir='rtl'] li.hide + li.version .badge .tooltip .tooltip-arrow {
8368     left: 15px !important;
8369     right: auto !important;
8370 }
8371
8372
8373 /* Contextual Radial Menu (deprecated)
8374 ------------------------------------------------------- */
8375 .radial-menu-tooltip {
8376     opacity: 0.8;
8377     display: none;
8378     position: absolute;
8379     width: 200px;
8380 }
8381
8382 .radial-menu-background {
8383     fill: none;
8384     stroke: black;
8385     stroke-opacity: 0.5;
8386 }
8387
8388 .radial-menu-item circle {
8389     fill: #eee;
8390 }
8391
8392 .radial-menu-item circle:active,
8393 .radial-menu-item circle:hover {
8394     fill: #fff;
8395 }
8396
8397 .radial-menu-item.disabled circle {
8398     cursor: auto;
8399     fill: rgba(255,255,255,.5);
8400 }
8401
8402 .radial-menu-item use {
8403     fill: #222;
8404     color: #79f;
8405 }
8406
8407 .radial-menu-item.disabled use {
8408     fill: rgba(32,32,32,.5);
8409     color: rgba(40,40,40,.5);
8410 }
8411
8412
8413 /* Contextual Edit Menu
8414 ------------------------------------------------------- */
8415 .edit-menu-tooltip {
8416     display: none;
8417     position: absolute;
8418     width: 200px;
8419 }
8420
8421 .edit-menu-background {
8422     fill: #eee;
8423 }
8424
8425 .edit-menu-item rect {
8426     fill: #eee;
8427     cursor: default;
8428 }
8429
8430 .edit-menu-item rect:active,
8431 .edit-menu-item rect:hover {
8432     fill: #ccc;
8433 }
8434
8435 .edit-menu-item.disabled rect {
8436     cursor: not-allowed;
8437 }
8438 .edit-menu-item.disabled rect:hover {
8439     cursor: not-allowed;
8440     fill: #eee;
8441 }
8442
8443 .edit-menu-item use {
8444     fill: #222;
8445     color: #79f;
8446     pointer-events: none;
8447 }
8448 .edit-menu-item.disabled use {
8449     fill: rgba(32,32,32,.2);
8450     color: rgba(40,40,40,.2);
8451 }
8452
8453
8454 /* Lasso
8455 ------------------------------------------------------- */
8456 .lasso-path {
8457     fill-opacity: 0.3;
8458     stroke: #fff;
8459     stroke-width: 1;
8460     stroke-opacity: 1;
8461     stroke-dasharray: 5, 5;
8462 }
8463
8464
8465 /* Scrollbars
8466  ----------------------------------------------------- */
8467 ::-webkit-scrollbar {
8468     height: 20px;
8469     overflow: visible;
8470     width: 10px;
8471     background: #fff;
8472     border-left: 1px solid #DDD;
8473 }
8474
8475 ::-webkit-scrollbar-track {
8476     background-clip: padding-box;
8477     border: solid transparent;
8478     border-width: 0;
8479 }
8480
8481 ::-webkit-scrollbar-thumb {
8482     background-color: rgba(0,0,0,.2);
8483     background-clip: padding-box;
8484     border: solid transparent;
8485     border-width: 3px 3px 3px 4px;
8486     border-radius: 6px;
8487 }
8488 ::-webkit-scrollbar-track:hover,
8489 ::-webkit-scrollbar-track:active {
8490     background-color: rgba(0,0,0,.05);
8491 }
8492
8493
8494 /* Intro walkthrough
8495  ----------------------------------------------------- */
8496 .curtain-darkness {
8497     pointer-events: all;
8498     fill-opacity: 0.7;
8499     fill: #222;
8500     fill-rule: evenodd;
8501 }
8502
8503 .intro-nav-wrap {
8504     display: flex;
8505     flex-direction: row;
8506     position: absolute;
8507     left: 0;
8508     right: 0;
8509     bottom: 30px;
8510     padding: 10px;
8511     z-index: 1001;
8512 }
8513
8514 .intro-nav-wrap .intro-nav-wrap-logo {
8515     flex: 0 0 auto;
8516     height: 40px;
8517     width: 40px;
8518     color: #fff;
8519     margin: 0px 20px;
8520     vertical-align: middle;
8521 }
8522
8523 .intro-nav-wrap .joined {
8524     flex: 1 1 auto;
8525     display: flex;
8526     flex-direction: row;
8527 }
8528
8529 .intro-nav-wrap button.chapter {
8530     flex: 1 1 100%;
8531     padding: 0px 20px;
8532 }
8533
8534 .intro-nav-wrap button.chapter.next {
8535     animation-duration: 1s;
8536     animation-name: pulse;
8537     animation-iteration-count: infinite;
8538     animation-direction: alternate;
8539 }
8540 @keyframes pulse {
8541     from  { background: #7092ff; }
8542     to    { background: #c6d4ff; }
8543 }
8544
8545 .intro-nav-wrap button.chapter.finished {
8546     background: #8cd05f;
8547 }
8548
8549 .intro-nav-wrap button.chapter .status {
8550     display: none;
8551 }
8552
8553 .intro-nav-wrap button.chapter.finished .status {
8554     display: inline-block;
8555 }
8556
8557 .curtain-tooltip.tooltip.in {
8558     opacity: 1;
8559 }
8560 .curtain-tooltip.tooltip {
8561     text-align: left;
8562 }
8563 [dir='rtl'] .curtain-tooltip.tooltip {
8564     text-align: right;
8565 }
8566
8567 .curtain-tooltip .tooltip-inner {
8568     font-size: 15px;
8569     position: relative;
8570     padding: 20px;
8571 }
8572
8573 .curtain-tooltip .tooltip-inner .button-section,
8574 .curtain-tooltip .tooltip-inner .instruction {
8575     font-weight: bold;
8576     display: block;
8577     border-top: 1px solid #ccc;
8578     margin-top: 10px;
8579     margin-left: -20px;
8580     margin-right: -20px;
8581     padding: 10px 20px 0 20px;
8582 }
8583
8584 .curtain-tooltip .tooltip-inner .button-section button {
8585     width: 66.6666%;
8586 }
8587
8588 .curtain-tooltip .tooltip-inner .instruction:only-child {
8589     border: 0;
8590     padding: 0;
8591     margin: 0;
8592 }
8593
8594 .curtain-tooltip .tooltip-inner .icon.pre-text {
8595     vertical-align: text-top;
8596     margin-right: 0;
8597     margin-left: 0;
8598     display: inline-block;
8599 }
8600
8601 .curtain-tooltip.intro-points-describe ,
8602 .curtain-tooltip.intro-lines-name_road {
8603     top: 133px !important;
8604 }
8605
8606 .tooltip-illustration {
8607     height: 80px;
8608     width: 200px;
8609     margin-left: -20px;
8610     margin-top: -10px;
8611 }
8612 [dir='rtl'] .tooltip-illustration {
8613     margin-left: auto;
8614     margin-right: -20px;
8615 }
8616
8617 .curtain-tooltip.intro-mouse {
8618     -moz-user-select: none;
8619     -webkit-user-select: none;
8620     -ms-user-select: none;
8621     user-select: none;
8622 }
8623
8624 .curtain-tooltip.intro-mouse .counter {
8625     position: absolute;
8626     display: block;
8627     top: 50px;
8628     width: 100%;
8629     text-align: center;
8630     font-weight: bold;
8631     font-size: 14px;
8632     z-index: 1003;
8633 }
8634
8635 .curtain-tooltip.intro-mouse .tooltip-illustration use {
8636     fill: rgba(112, 146, 255, 0);
8637     color: rgba(112, 146, 255, 0);
8638 }
8639 .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
8640     fill: rgba(112, 146, 255, 1);
8641 }
8642 .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
8643     color: rgba(112, 146, 255, 1);
8644 }
8645
8646 .huge-modal-button {
8647     width: 100%;
8648     height: auto;
8649     padding: 20px;
8650 }
8651
8652 .huge-modal-button .illustration {
8653     height: 100px;
8654     width: 100px;
8655     color: #7092ff;
8656 }
8657
8658
8659 .list-item-photos.list-item-mapillary-map-features .request-data-link {
8660     float: right;
8661     margin-top: -20px;
8662 }
8663 [dir='rtl'] .list-item-photos.list-item-mapillary-map-features .request-data-link {
8664     float: left;
8665 }