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