vendor/assets/iD/iD.css.erb

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