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