vendor/assets/iD/iD.css.erb

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