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