vendor/assets/iD/iD.css.erb

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