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     pointer-events: none;
4781 }
4782 [dir='rtl'] .combobox-caret {
4783   margin-left: 0;
4784   margin-right: -30px;
4785 }
4786
4787 .combobox-caret::after {
4788     content: "";
4789     height: 0; width: 0;
4790     position: absolute;
4791     left: 0; right: 0; bottom: 0; top: 0;
4792     margin: auto;
4793     border-top: 5px solid #ccc;
4794     border-left: 5px solid transparent;
4795     border-right: 5px solid transparent;
4796 }
4797
4798 /* Remove the field's bottom border radius when combobox is open */
4799 /* For some reason this stops the combobox from overlapping the bottom of the field */
4800 .combobox + * textarea:focus,
4801 .combobox + * input:focus {
4802     border-bottom-left-radius: 0 !important;
4803     border-bottom-right-radius: 0 !important;
4804 }
4805
4806
4807 /* Field Help
4808 ------------------------------------------------------- */
4809 .field-help-body {
4810     display: block;
4811     position: absolute;
4812     top: 0;
4813     left: 20px;
4814     right: 20px;
4815     margin: 5px;
4816     padding: 8px;
4817     border: 1px solid #ccc;
4818     border-top: 0;
4819     border-radius: 0 0 4px 4px;
4820     z-index: 20;
4821     background: rgba(255,255,255,0.95);
4822     box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
4823 }
4824
4825 .field-help-title h2 {
4826     padding: 10px;
4827     margin-bottom: 0px;
4828     font-size: 17px;
4829 }
4830 .field-help-title button {
4831     width: 45px;
4832     height: 55px;
4833     border-radius: 0;
4834 }
4835
4836 .field-help-nav {
4837     font-size: 13px;
4838     font-weight: bold;
4839     margin-bottom: 10px;
4840 }
4841 .field-help-nav-item {
4842     display: inline-block;
4843     padding: 5px 10px;
4844     cursor: pointer;
4845     color: #666;
4846 }
4847 .field-help-nav-item.active {
4848     color: #7092ff;
4849     border-bottom: 2px solid;
4850 }
4851 .field-help-nav-item:hover {
4852     color: #597be7;
4853     background-color: #efefef;
4854 }
4855
4856 .field-help-content {
4857     padding: 10px;
4858     overflow-y: auto;
4859     overflow-x: hidden;
4860 }
4861 .field-help-content h3 {
4862     font-size: 12px;
4863     margin-bottom: 5px;
4864 }
4865 .field-help-content p {
4866     margin-bottom: 15px;
4867 }
4868 .field-help-content ul li {
4869     list-style: inside;
4870     margin-bottom: 5px;
4871 }
4872
4873 .field-help-content .field-help-image {
4874     width: 100%;
4875     margin-bottom: 15px;
4876 }
4877
4878 .field-help-content svg.turn {
4879     width: 40px;
4880     height: 20px;
4881 }
4882 .field-help-content svg.shadow {
4883     opacity: 0.7;
4884     width: 60px;
4885     height: 20px;
4886 }
4887 .field-help-content svg.from {
4888     color: #777;
4889 }
4890 .field-help-content svg.allow {
4891     color: #5b3;
4892 }
4893 .field-help-content svg.restrict {
4894     color: #d53;
4895 }
4896 .field-help-content svg.only {
4897     color: #68f;
4898 }
4899
4900 .field-help-content p.from_shadow,
4901 .field-help-content p.allow_shadow,
4902 .field-help-content p.restrict_shadow,
4903 .field-help-content p.allow_turn,
4904 .field-help-content p.restrict_turn {
4905     margin-bottom: 5px;
4906 }
4907
4908
4909 /* More Fields dropdown
4910 ------------------------------------------------------- */
4911 .more-fields {
4912     padding: 0 20px 20px 20px;
4913     font-weight: bold;
4914 }
4915 .changeset-editor .more-fields {
4916     padding: 15px 20px 0 20px;
4917 }
4918
4919 .more-fields label {
4920     display: flex;
4921     flex-flow: row nowrap;
4922     justify-content: space-between;
4923     align-items: center;
4924 }
4925
4926 .more-fields input {
4927     margin-left: 10px;
4928     flex: 1 1 50%;
4929 }
4930 [dir='rtl'] .more-fields input {
4931     margin-left: auto;
4932     margin-right: 10px;
4933 }
4934
4935 .form-field-input-wrap .label {
4936     height: 30px;
4937     background: #f6f6f6;
4938     padding: 5px 10px;
4939 }
4940
4941
4942 /* Raw Tag Editor
4943 ------------------------------------------------------- */
4944 .tag-list {
4945     padding-top: 10px;
4946 }
4947 .tag-row {
4948     width: 100%;
4949     position: relative;
4950 }
4951 .tag-row .inner-wrap {
4952     display: flex;
4953     flex-flow: row nowrap;
4954     width: 100%;
4955     position: relative;
4956 }
4957 .tag-row .key-wrap,
4958 .tag-row .value-wrap {
4959     flex: 1 1 50%;
4960 }
4961
4962 .tag-row.readonly,
4963 .tag-row.readonly input.key,
4964 .tag-row.readonly input.value,
4965 .tag-row.readonly button.remove {
4966     color: #777;
4967     background-color: #eee;
4968     cursor: not-allowed;
4969 }
4970
4971 .tag-row input {
4972     height: 31px;
4973     border: 0;
4974     border-radius: 0;
4975     border-bottom: 1px solid #ccc;
4976     border-left: 1px solid #ccc;
4977     width: 100%;
4978 }
4979 [dir='rtl'] .tag-row input {
4980     border-left: none;
4981     border-right: 1px solid #ccc;
4982 }
4983
4984
4985 .tag-row input.key {
4986     font-weight: bold;
4987     background-color: #f6f6f6;
4988 }
4989
4990 .tag-row input.value {
4991     border-right: 1px solid #ccc;
4992 }
4993 [dir='rtl'] .tag-row input.value {
4994     border-left: 1px solid #ccc;
4995 }
4996
4997 .tag-row:first-child input.key {
4998     border-top: 1px solid #ccc;
4999     border-top-left-radius: 4px;
5000 }
5001 [dir='rtl'] .tag-row:first-child input.key {
5002     border-top-left-radius: 0;
5003     border-top-right-radius: 4px;
5004 }
5005
5006 .tag-row:first-child input.value {
5007     border-top: 1px solid #ccc;
5008 }
5009 .tag-row button {
5010     flex: 0 0 32px;
5011     height: 31px;
5012     width: 32px;
5013     border: 1px solid #ccc;
5014     border-top-width: 0;
5015     border-left-width: 0;
5016 }
5017 [dir='rtl'] .tag-row button {
5018     border-left-width: 1px;
5019     border-right-width: 0;
5020 }
5021
5022 .tag-row button:hover {
5023     background: #f1f1f1;
5024 }
5025 .tag-row button .icon {
5026     opacity: .5;
5027 }
5028 .tag-row:first-child button {
5029     border-top-width: 1px;
5030 }
5031
5032 .tag-row:first-child .tag-reference-button {
5033     border-top-right-radius: 4px;
5034 }
5035 [dir='rtl'] .tag-row:first-child .tag-reference-button {
5036     border-top-left-radius: 4px;
5037     border-top-right-radius: 0;
5038 }
5039
5040 .tag-row:last-child .tag-reference-button {
5041     border-bottom-right-radius: 4px;
5042 }
5043 [dir='rtl'] .tag-row:last-child .tag-reference-button {
5044     border-bottom-left-radius: 4px;
5045     border-bottom-right-radius: 0;
5046 }
5047
5048 .tag-row .tag-reference-button {
5049     border-radius: 0;
5050 }
5051 [dir='rtl'] .tag-row .tag-reference-button {
5052     border-left-width: 1px;
5053     border-right-width: 0;
5054 }
5055
5056 /* Tag reference */
5057 .tag-reference-loading {
5058     background-color: #f5f5f5;
5059 }
5060 .tag-reference-loading .icon {
5061     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
5062     background-position: 0 0;
5063 }
5064
5065 .tag-reference-body {
5066     flex: 1 1 auto;
5067     width: 100%;
5068     overflow: hidden;
5069 }
5070 .tag-reference-body .tag-reference-description {
5071     margin: 10px 5px 0 5px;
5072 }
5073 .tag-reference-body a {
5074     display: block;
5075 }
5076 .tag-reference-body .tag-reference-description:last-child,
5077 .tag-reference-body a:last-child {
5078     margin-bottom: 15px;
5079 }
5080
5081 .preset-list .tag-reference-body {
5082     position: relative;
5083     width: 100%;
5084 }
5085 .raw-tag-editor .tag-reference-body {
5086     width: 100%;
5087 }
5088 .raw-tag-editor .tag-row.readonly .tag-reference-body {
5089     background: #f6f6f6;
5090     color: #333;
5091 }
5092 .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
5093     border-bottom: 1px solid #ccc;
5094 }
5095 .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
5096     border-top: 1px solid #ccc;
5097 }
5098
5099
5100 /* Raw Member / Membership Editor
5101 ------------------------------------------------------- */
5102 .raw-member-editor .member-list li:first-child,
5103 .raw-membership-editor .member-list li:first-child {
5104     padding-top: 10px;
5105 }
5106 .raw-member-editor .member-row .member-entity-name,
5107 .raw-membership-editor .member-row .member-entity-name {
5108     font-weight: normal;
5109     padding-left: 10px;
5110 }
5111
5112 [dir='rtl'] .raw-member-editor .member-row .member-entity-name,
5113 [dir='rtl'] .raw-membership-editor .member-row .member-entity-name {
5114     padding-left:0;
5115     padding-right: 10px;
5116 }
5117
5118 .form-field-input-member > input.member-role {
5119     border-radius: 0 0 0 4px;
5120 }
5121 [dir='rtl'] .form-field-input-member > input.member-role {
5122     border-radius: 0 0 4px 0;
5123 }
5124
5125 .member-incomplete .form-field-input-member > input.member-role,
5126 [dir='rtl'] .member-incomplete .form-field-input-member > input.member-role {
5127     border-radius: 0 0 4px 4px;
5128 }
5129
5130 .member-incomplete .member-delete {
5131     display: none;
5132 }
5133
5134 .member-row-new .member-entity-input {
5135     flex: 1 1 100%;
5136     border-radius: 4px 4px 0 0;
5137     border: 0;
5138 }
5139
5140 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
5141 .raw-membership-editor.inspector-inner {
5142     margin-bottom: 150px;
5143 }
5144
5145 /* hidden field to prevent user from tabbing out of the sidebar */
5146 input.key-trap {
5147     height: 0px;
5148     width: 0px;
5149     padding: 0px;
5150     border: 1px solid rgba(0,0,0,0);
5151 }
5152
5153
5154 /* add tag, add relation buttons */
5155 .add-row {
5156     display: flex;
5157     width: 100%;
5158     flex-flow: row nowrap;
5159 }
5160 .add-row .add-tag,
5161 .add-row .add-relation,
5162 .add-row .space-value {
5163     flex: 1 1 50%;
5164 }
5165 .add-row .space-buttons {
5166     flex: 0 0 62px;
5167 }
5168 .add-row button {
5169     height: 30px;
5170     background: rgba(0,0,0,.5);
5171 }
5172 .add-row button:focus,
5173 .add-row button:hover {
5174     background: rgba(0,0,0,.8);
5175 }
5176
5177 .add-tag {
5178     border-radius: 0 0 4px 4px;
5179 }
5180 .add-relation {
5181     margin-top: 10px;
5182     border-radius: 4px;
5183 }
5184
5185
5186 /* Inspector (hover styles)
5187 ------------------------------------------------------- */
5188 .inspector-hover .form-field-input-wrap .label,
5189 .inspector-hover .form-field-input-multicombo .chiplist,
5190 .inspector-hover .form-field-button,
5191 .inspector-hover .structure-extras-wrap,
5192 .inspector-hover .comments-container .comment,
5193 .inspector-hover button,
5194 .inspector-hover input,
5195 .inspector-hover textarea,
5196 .inspector-hover label {
5197     background: #ececec;
5198 }
5199 .inspector-hover .preset-list-button,
5200 .inspector-hover .tag-row input {
5201     background: #f6f6f6;
5202 }
5203
5204 .inspector-hover a,
5205 .inspector-hover .form-field-input-multicombo .chips,
5206 .inspector-hover .form-field-input-check span {
5207     color: #666;
5208 }
5209
5210 .inspector-hover .form-field-input-multicombo .chips {
5211     background: #eee;
5212     border: 1px solid #ccc;
5213 }
5214
5215 /* no scrollbars */
5216 .inspector-hover div {
5217     overflow-x: hidden;
5218     overflow-y: hidden;
5219 }
5220
5221 /* hide and remove from layout */
5222 .inspector-hidden,
5223 .inspector-hover .preset-list-button-wrap .tag-reference-button,
5224 .inspector-hover label input[type="checkbox"],
5225 .inspector-hover label input[type="radio"],
5226 .inspector-hover .form-field-input-multicombo .input-wrap,
5227 .inspector-hover .form-field-input-radio label,
5228 .inspector-hover .form-field-input-radio label span,
5229 .inspector-hover .form-field-input-radio label.remove .icon,
5230 .inspector-hover .inspector-inner .add-row {
5231     display: none;
5232 }
5233
5234 /* hide but preserve in layout */
5235 .inspector-hover .combobox-caret,
5236 .inspector-hover .header button,
5237 .inspector-hover .quick-links,
5238 .inspector-hover .form-field-input-multicombo .chips .remove,
5239 .inspector-hover .hide-toggle:before,
5240 .inspector-hover .more-fields,
5241 .inspector-hover .form-field-label button,
5242 .inspector-hover .tag-row button,
5243 .inspector-hover .footer * {
5244     opacity: 0;
5245 }
5246
5247 /* Styles for raw tag inspector on hover */
5248 .inspector-hover .tag-row .key-wrap,
5249 .inspector-hover .tag-row .value-wrap {
5250     height: 31px;
5251 }
5252
5253 .inspector-hover .tag-row:first-child input.value {
5254     border-top-right-radius: 4px;
5255 }
5256 [dir='rtl'] .inspector-hover .tag-row:first-child input.value {
5257     border-top-right-radius: 0;
5258     border-top-left-radius: 4px;
5259 }
5260
5261 .inspector-hover .tag-row:last-child input.value {
5262     border-bottom-right-radius: 4px;
5263 }
5264 [dir='rtl'] .inspector-hover .tag-row:last-child input.value {
5265     border-bottom-right-radius: 0;
5266     border-bottom-left-radius: 4px;
5267 }
5268
5269 .inspector-hover .tag-row:last-child input.key {
5270     border-bottom-left-radius: 4px;
5271 }
5272 [dir='rtl'] .inspector-hover .tag-row:last-child input.key {
5273     border-bottom-left-radius: 0;
5274     border-bottom-right-radius: 4px;
5275 }
5276
5277 .inspector-hover .more-fields {
5278     max-height: 0;
5279     margin-bottom: -10px;
5280 }
5281
5282 /* Unstyle button fields */
5283 .inspector-hover .form-field-input-radio label.active,
5284 .inspector-hover .entity-editor-pane a.hide-toggle {
5285     opacity: 1;
5286     background-color: transparent;
5287     color: #666;
5288     padding-left: 0;
5289     border-width: 0;
5290 }
5291 .inspector-hover .form-field-input-radio button.active {
5292     padding-left: 10px;
5293 }
5294
5295 /* Show placeholder on hover for radio buttons */
5296 .inspector-hover .form-field-input-radio {
5297     border: 1px solid #ccc;
5298     border-top: 0;
5299     border-radius: 0 0 4px 4px;
5300 }
5301 .inspector-hover .form-field-input-radio .placeholder {
5302     opacity: 1;
5303     color: #666;
5304     padding: 5px 10px;
5305     line-height: 20px;
5306     width: 100%;
5307     border: 0;
5308 }
5309 .inspector-hover .form-field-input-radio .structure-extras-wrap {
5310     border: 0;
5311 }
5312
5313
5314 /* OSM Note / KeepRight Editors
5315 ------------------------------------------------------- */
5316 .note-header,
5317 .kr_error-header {
5318     background-color: #f6f6f6;
5319     border-radius: 5px;
5320     border: 1px solid #ccc;
5321     display: flex;
5322     flex-flow: row nowrap;
5323     align-items: center;
5324 }
5325
5326 .note-header-icon,
5327 .kr_error-header-icon {
5328     background-color: #fff;
5329     padding: 10px;
5330     flex: 0 0 62px;
5331     position: relative;
5332     width: 60px;
5333     height: 60px;
5334     border-right: 1px solid #ccc;
5335     border-radius: 5px 0 0 5px;
5336 }
5337 [dir='rtl'] .note-header-icon,
5338 [dir='rtl'] .kr_error-header-icon {
5339     border-right: unset;
5340     border-left: 1px solid #ccc;
5341     border-radius: 0 5px 5px 0;
5342 }
5343
5344 .note-header-icon .icon-wrap,
5345 .kr_error-header-icon .icon-wrap {
5346     position: absolute;
5347     top: 0px;
5348 }
5349
5350 .note-header-label,
5351 .kr_error-header-label {
5352     background-color: #f6f6f6;
5353     padding: 0 15px;
5354     flex: 1 1 100%;
5355     font-size: 14px;
5356     font-weight: bold;
5357     border-radius: 0 5px 5px 0;
5358 }
5359 [dir='rtl'] .note-header-label,
5360 [dir='rtl'] .kr_error-header-label {
5361     border-radius: 5px 0 0 5px;
5362 }
5363
5364 .note-category {
5365     margin: 20px 0px;
5366 }
5367
5368 .comments-container {
5369     background: #ececec;
5370     padding: 1px 10px;
5371     border-radius: 8px;
5372     margin-top: 20px;
5373 }
5374
5375 .comment {
5376     background-color: #fff;
5377     border-radius: 5px;
5378     border: 1px solid #ccc;
5379     margin: 10px auto;
5380     display: flex;
5381     flex-flow: row nowrap;
5382 }
5383 .comment-avatar {
5384     padding: 10px;
5385     flex: 0 0 62px;
5386 }
5387 .comment-avatar .icon.comment-avatar-icon {
5388     width: 40px;
5389     height: 40px;
5390     object-fit: cover;
5391     border: 1px solid #ccc;
5392     border-radius: 20px;
5393 }
5394 .comment-main {
5395     padding: 10px 10px 10px 0;
5396     flex: 1 1 100%;
5397     flex-flow: column nowrap;
5398     overflow: hidden;
5399     overflow-wrap: break-word;
5400 }
5401 [dir='rtl'] .comment-main {
5402     padding: 10px 0 10px 10px;
5403 }
5404
5405 .comment-metadata {
5406     flex-flow: row nowrap;
5407     justify-content: space-between;
5408 }
5409 .comment-author {
5410     font-weight: bold;
5411     color: #333;
5412 }
5413 .comment-date {
5414     color: #aaa;
5415 }
5416 .comment-text {
5417     color: #333;
5418     margin-top: 10px;
5419     overflow-y: auto;
5420     max-height: 250px;
5421 }
5422 .comment-text::-webkit-scrollbar {
5423     border-left: none;
5424 }
5425
5426 .note-save,
5427 .keepRight-save {
5428     padding-top: 20px;
5429 }
5430 .kr_error-details,
5431 .kr_error-comment-container {
5432     padding: 10px;
5433 }
5434
5435 .keepRight-save .new-comment-input,
5436 .note-save .new-comment-input {
5437     width: 100%;
5438     height: 100px;
5439     max-height: 300px;
5440     min-height: 100px;
5441 }
5442
5443 .keepRight-save .detail-section,
5444 .note-save .detail-section {
5445     margin: 10px 0;
5446 }
5447
5448 .note-report {
5449     float: right;
5450 }
5451
5452 .kr_error-details-container {
5453     background: #ececec;
5454     padding: 10px;
5455     margin-top: 20px;
5456     border-radius: 4px;
5457     border: 1px solid #ccc;
5458 }
5459
5460 .kr_error-details-description {
5461     margin-bottom: 10px;
5462 }
5463 .kr_error-details-description-text::first-letter {
5464     text-transform: capitalize;
5465 }
5466
5467
5468 /* Custom Data Editor
5469 ------------------------------------------------------- */
5470 .data-header {
5471     background-color: #f6f6f6;
5472     border-radius: 5px;
5473     border: 1px solid #ccc;
5474     display: flex;
5475     flex-flow: row nowrap;
5476     align-items: center;
5477 }
5478
5479 .data-header-icon {
5480     background-color: #fff;
5481     padding: 10px;
5482     flex: 0 0 62px;
5483     position: relative;
5484     width: 60px;
5485     height: 60px;
5486     border-right: 1px solid #ccc;
5487     border-radius: 5px 0 0 5px;
5488 }
5489 [dir='rtl'] .data-header-icon {
5490     border-right: unset;
5491     border-left: 1px solid #ccc;
5492     border-radius: 0 5px 5px 0;
5493 }
5494
5495 .data-header-icon .icon-wrap {
5496     position: absolute;
5497     top: 0px;
5498 }
5499
5500 .data-header-label {
5501     background-color: #f6f6f6;
5502     padding: 0 15px;
5503     flex: 1 1 100%;
5504     font-size: 14px;
5505     font-weight: bold;
5506     border-radius: 0 5px 5px 0;
5507 }
5508 [dir='rtl'] .data-header-label {
5509     border-radius: 5px 0 0 5px;
5510 }
5511
5512 /* tag editor - no buttons */
5513 .data-editor.raw-tag-editor button {
5514     display: none;
5515 }
5516 .data-editor.raw-tag-editor .tag-row .key-wrap,
5517 .data-editor.raw-tag-editor .tag-row .value-wrap {
5518     width: 50%;
5519 }
5520
5521
5522 /* Map Controls
5523 ------------------------------------------------------- */
5524 .map-controls {
5525     right: 0;
5526     top: 132px;
5527     width: 40px;
5528     position: fixed;
5529     z-index: 100;
5530 }
5531 [dir='rtl'] .map-controls {
5532     left: 0;
5533     right: auto;
5534 }
5535
5536 .map-control > button {
5537     width: 40px;
5538     background: rgba(0,0,0,.5);
5539     border-radius: 0;
5540 }
5541
5542 .map-control > button:hover {
5543     background: rgba(0, 0, 0, .8);
5544 }
5545
5546 .map-control > button.active,
5547 .map-control > button.active:hover {
5548     background: #7092ff;
5549 }
5550
5551
5552 /* Fullscreen Button (disabled)
5553 ------------------------------------------------------- */
5554 div.full-screen {
5555     display: inline-block;
5556     width: 40px;
5557     margin-right: 10px;
5558     display: none;
5559 }
5560
5561 div.full-screen .tooltip {
5562     min-width: 160px;
5563 }
5564
5565 div.full-screen > button, div.full-screen > button.active {
5566     width: 40px;
5567     height: 40px;
5568     background: transparent;
5569 }
5570
5571 div.full-screen > button:hover {
5572     background-color: rgba(0, 0, 0, .8);
5573 }
5574
5575
5576 /* Zoom Buttons
5577 ------------------------------------------------------- */
5578 .zoombuttons > button.zoom-in {
5579     border-radius: 4px 0 0 0;
5580 }
5581 [dir='rtl'] .zoombuttons > button.zoom-in {
5582     border-radius: 0 4px 0 0;
5583 }
5584
5585
5586 /* Geolocate Button
5587 ------------------------------------------------------- */
5588 .geolocate-control {
5589     margin-bottom: 10px;
5590 }
5591 .geolocate-control > button {
5592     border-radius: 0 0 0 4px;
5593 }
5594 [dir='rtl'] .geolocate-control > button {
5595     border-radius: 0 0 4px 0;
5596 }
5597
5598
5599 /* Background / Map Data / Help Pane buttons
5600 ------------------------------------------------------- */
5601 .help-control > button {
5602     border-radius: 0 0 0 4px;
5603 }
5604 [dir='rtl'] .help-control > button {
5605     border-radius: 0 0 4px 0;
5606 }
5607
5608 .map-data-control button {
5609     border-radius: 0;
5610 }
5611
5612 .background-control > button {
5613     border-radius: 4px 0 0 0;
5614 }
5615 [dir='rtl'] .background-control > button {
5616     border-radius: 0 4px 0 0;
5617 }
5618
5619
5620 /* Background / Map Data Settings
5621 ------------------------------------------------------- */
5622 .map-data-control,
5623 .background-control {
5624     position: relative;
5625 }
5626
5627 .imagery-faq {
5628     margin-bottom: 10px;
5629     white-space: nowrap;
5630 }
5631
5632 .layer-list, .controls-list {
5633     margin-bottom: 10px;
5634     border: 1px solid #ccc;
5635     border-radius: 4px;
5636 }
5637
5638 .layer-list li {
5639     position: relative;
5640     height: 30px;
5641     background-color: #fff;
5642     color: #7092ff;
5643 }
5644
5645 .layer-list:empty {
5646     display: none;
5647 }
5648
5649 .layer-list > li:first-child {
5650     border-radius: 3px 3px 0 0;
5651 }
5652 .layer-list > li:last-child {
5653     border-radius: 0 0 3px 3px;
5654 }
5655 .layer-list > li:only-child {
5656     border-radius: 3px;
5657 }
5658 .layer-list li:not(:last-child) {
5659     border-bottom: 1px solid #ccc;
5660 }
5661 .layer-list li:hover {
5662     background-color: #ececec;
5663 }
5664
5665 .layer-list li.active button,
5666 .layer-list li.switch button,
5667 .layer-list li.active,
5668 .layer-list li.switch {
5669     background: #e8ebff;
5670 }
5671
5672 .layer-list li.best > div.best {
5673     display: inline-block;
5674     padding: 5px;
5675     float: right;
5676 }
5677
5678 [dir='rtl'] .list-item-data-browse svg {
5679     transform: rotateY(180deg);
5680 }
5681
5682 /* make sure tooltip fits in map-control panel */
5683 /* if too wide, placement will be wrong the first time it displays */
5684 .layer-list li.best .tooltip-inner {
5685     max-width: 160px;
5686 }
5687
5688 .layer-list label {
5689     display: block;
5690     padding: 5px 10px;
5691     cursor: pointer;
5692 }
5693
5694 .layer-list label > span {
5695     display: block;
5696     overflow: hidden;
5697     white-space: nowrap;
5698     text-overflow: ellipsis;
5699 }
5700
5701 .map-data-control .layer-list button,
5702 .background-control .layer-list button {
5703     float: right;
5704     height: 100%;
5705     width: 10%;
5706     border-left: 1px solid #ccc;
5707     border-radius: 0;
5708 }
5709 [dir='rtl'] .map-data-control .layer-list button,
5710 [dir='rtl'] .background-control .layer-list button {
5711     float: left;
5712     border-left: none;
5713     border-right: 1px solid #ccc;
5714 }
5715
5716 .map-data-control .layer-list button .icon,
5717 .background-control .layer-list button .icon {
5718     opacity: 0.5;
5719 }
5720
5721 .map-data-control .layer-list button:first-of-type,
5722 .background-control .layer-list button:first-of-type {
5723     border-radius: 0 3px 3px 0;
5724 }
5725 [dir='rtl'] .map-data-control .layer-list button:first-of-type,
5726 [dir='rtl'] .background-control .layer-list button:first-of-type {
5727     border-radius: 3px 0 0 3px;
5728 }
5729
5730 .map-data-control .vectortile-container .vectortile-header {
5731     padding-bottom: 5px;
5732 }
5733 .map-data-control .vectortile-container .vectortile-footer {
5734     padding-bottom: 10px;
5735 }
5736
5737
5738 /* Background - Display Options Sliders
5739 ------------------------------------------------------- */
5740 .display-options-container {
5741     padding: 10px;
5742 }
5743
5744 .display-control h5 {
5745     padding-bottom: 0;
5746     padding-top: 10px;
5747 }
5748
5749 .display-control h5 span {
5750     margin: 5px;
5751 }
5752
5753 .display-control .display-option-input {
5754     height: 20px;
5755     width: 155px;
5756 }
5757
5758 .display-control button {
5759     height: 30px;
5760     width: 30px;
5761     margin-left: 5px;
5762     margin-right: 0px;
5763     vertical-align: text-bottom;
5764     border-radius: 4px;
5765 }
5766 [dir='rtl'] .display-control button {
5767     margin-left: 0px;
5768     margin-right: 5px;
5769 }
5770
5771
5772 /* Background - Adjust Alignment
5773 ------------------------------------------------------- */
5774 .background-control .nudge-container {
5775     border: 1px solid #ccc;
5776     border-radius: 4px;
5777     padding: 10px;
5778 }
5779
5780 .nudge-container .nudge-instructions {
5781     padding-bottom: 15px;
5782 }
5783
5784 .nudge-container .nudge-outer-rect {
5785     background-color: #eee;
5786     border: 1px solid #ccc;
5787     border-radius: 2px;
5788     padding: 20px 0;
5789     width: 70%;
5790     display: flex;
5791     justify-content: center;
5792     align-items: center;
5793     margin: 0 auto;
5794     margin-top: 20px;
5795     cursor: move;
5796 }
5797
5798 .nudge-container .nudge-inner-rect {
5799     background-color: #fff;
5800     border: 1px solid #ccc;
5801     border-radius: 2px;
5802     width: 65%;
5803     min-height: 20px;
5804 }
5805
5806 .nudge-container .nudge::after {
5807     content: '';
5808     display: block;
5809     position: absolute;
5810     margin: auto;
5811     left: 0; right: 0; top: 0; bottom: 0;
5812     height: 0;
5813     width: 0;
5814 }
5815
5816 .nudge-container input {
5817     width: 100%;
5818     height: 20px;
5819     text-align: center;
5820     border: 0;
5821 }
5822
5823 .nudge-container input.error {
5824     border: 1px solid #ff7878;
5825     border-radius: 2px;
5826     background: #ffb;
5827 }
5828
5829 .nudge-container input:focus {
5830     background-color: transparent;
5831 }
5832
5833 .nudge-container button {
5834     float: left;
5835     display: block;
5836     width: 20%;
5837     position: relative;
5838     background-color: transparent;
5839 }
5840
5841 .nudge-container button.right {
5842     top: -50px;
5843     right: -85%;
5844 }
5845
5846 .nudge-container button.left {
5847     top: -50px;
5848     right: 45%;
5849 }
5850
5851 .nudge-container button.top {
5852     left: 20%;
5853     top: -104px;
5854 }
5855
5856 .nudge-container button.bottom {
5857     left: -20%;
5858 }
5859
5860 .nudge-container button.nudge-reset {
5861     right: -10px;
5862 }
5863
5864 .nudge-surface {
5865    position: absolute;
5866    z-index: 5000;
5867    left: 0;
5868    top: 0;
5869    width: 100%;
5870    height: 100%;
5871    background-color: transparent;
5872    cursor: move;
5873 }
5874
5875 .background-control .nudge.right::after {
5876     border-top: 5px solid transparent;
5877     border-bottom: 5px solid transparent;
5878     border-left: 5px solid #222;
5879 }
5880
5881 .background-control .nudge.left::after {
5882     border-top: 5px solid transparent;
5883     border-bottom: 5px solid transparent;
5884     border-right: 5px solid #222;
5885 }
5886
5887 .background-control .nudge.top::after {
5888     border-right: 5px solid transparent;
5889     border-left: 5px solid transparent;
5890     border-bottom: 5px solid #222;
5891 }
5892
5893 .background-control .nudge.bottom::after {
5894     border-right: 5px solid transparent;
5895     border-left: 5px solid transparent;
5896     border-top: 5px solid #222;
5897 }
5898
5899
5900 /* Side Panes - Background / Map Data / Help
5901 ------------------------------------------------------- */
5902 .map-pane {
5903     position: fixed;
5904     top: 60px;
5905     bottom: 30px;
5906     right: 0;
5907     width: 33.3333%;
5908     max-width: 400px;
5909     padding-bottom: 50px;
5910     overflow: hidden;
5911     z-index: -1;
5912 }
5913 [dir='rtl'] .map-pane {
5914     left: 0;
5915     right: auto !important;
5916 }
5917
5918 .map-pane.help-wrap {
5919     width: 50.0000%;
5920     max-width: 600px;
5921 }
5922
5923 .pane-heading {
5924     display: flex;
5925     flex-flow: row nowrap;
5926     justify-content: space-between;
5927     border-bottom: 1px solid #ccc;
5928 }
5929
5930 .pane-heading h2 {
5931     margin: 15px 20px;
5932 }
5933
5934 .pane-heading button {
5935     width: 40px;
5936     height: 61px;
5937     border-radius: 0;
5938 }
5939
5940 .pane-content {
5941     height: 100%;
5942     padding: 10px 50px 20px 20px;
5943     overflow-x: hidden;
5944     overflow-y: scroll;
5945 }
5946 [dir='rtl'] .pane-content {
5947     padding: 10px 20px 20px 50px;
5948 }
5949
5950 .pane-content > div {
5951     padding-bottom: 15px;
5952 }
5953
5954
5955 /* Help
5956 ------------------------------------------------------- */
5957 .help-wrap p {
5958     font-size: 15px;
5959     margin-bottom: 20px;
5960 }
5961
5962 .help-wrap .left-content .body p code {
5963     padding: 3px 4px;
5964     font-size: 12px;
5965     color: #555;
5966     vertical-align: baseline;
5967     background-color: #f6f6f6;
5968     border: solid 1px #ccc;
5969     margin: 0 2px;
5970     border-bottom-color: #bbb;
5971     border-radius: 3px;
5972     box-shadow: inset 0 -1px 0 #bbb;
5973 }
5974
5975 .help-wrap .left-content .icon.pre-text {
5976     vertical-align: text-top;
5977     margin-right: 0;
5978     margin-left: 0;
5979     display: inline-block;
5980 }
5981
5982 .help-wrap .toc {
5983     width: 40%;
5984     float: right;
5985     margin-left: 20px;
5986     margin-bottom: 20px;
5987     padding-left: 5px;
5988 }
5989
5990 .help-wrap .toc li a,
5991 .help-wrap .nav a {
5992     display: block;
5993     border: 1px solid #ccc;
5994     padding: 5px 10px;
5995 }
5996
5997 .help-wrap .toc li a {
5998     border-bottom: 0;
5999 }
6000
6001 .help-wrap .toc li a:hover,
6002 .help-wrap .nav a:hover {
6003     background: #ececec;
6004 }
6005
6006 .help-wrap .toc li a.selected {
6007     background: #e8ebff;
6008 }
6009
6010 .help-wrap .toc li:first-child a {
6011     border-radius: 4px 4px 0 0;
6012 }
6013
6014 .help-wrap .toc li:nth-last-child(3) a {
6015     border-bottom: 1px solid #ccc;
6016     border-radius: 0 0 4px 4px
6017 }
6018
6019 .help-wrap .toc li.shortcuts a,
6020 .help-wrap .toc li.walkthrough a {
6021     overflow: hidden;
6022     margin-top: 10px;
6023     border-bottom: 1px solid #ccc;
6024     border-radius: 4px;
6025 }
6026
6027 .help-wrap .toc li.walkthrough a {
6028     text-align: center;
6029 }
6030
6031 .help-wrap .nav {
6032     position: relative;
6033     padding-bottom: 30px;
6034 }
6035
6036 .help-wrap .nav a {
6037     float: left;
6038     width: 50%;
6039     text-align: center;
6040 }
6041
6042 .help-wrap .nav a:first-child {
6043     border-radius: 4px 0 0 4px;
6044 }
6045
6046 .help-wrap .nav a:last-child:not(:only-child) {
6047     border-radius: 0 4px 4px 0;
6048     border-left: 0;
6049 }
6050
6051 .help-wrap .nav a:only-child {
6052     width: 100%;
6053     border-radius: 4px;
6054 }
6055
6056
6057 /* Raster Background Tiles
6058 ------------------------------------------------------- */
6059 img.tile {
6060     position: absolute;
6061     transform-origin: 0 0;
6062     -ms-transform-origin: 0 0;
6063     -webkit-transform-origin: 0 0;
6064     -moz-transform-origin: 0 0;
6065     -o-transform-origin: 0 0;
6066
6067     -moz-user-select: none;
6068     -webkit-user-select: none;
6069     -ms-user-select: none;
6070     user-select: none;
6071
6072     opacity: 0;
6073
6074     -webkit-transition: opacity 200ms linear;
6075     -moz-transition: opacity 200ms linear;
6076     transition: opacity 200ms linear;
6077 }
6078
6079 img.tile-loaded {
6080     opacity: 1;
6081 }
6082
6083 img.tile-removing {
6084     opacity: 0;
6085 }
6086
6087 .tile-label-debug {
6088     font-size: 10px;
6089     background: rgba(0, 0, 0, 0.7);
6090     color: #fff;
6091     position: absolute;
6092     text-align: center;
6093     padding: 5px;
6094     border-radius: 3px;
6095     z-index: 2;
6096     margin-left: -70px;
6097     margin-top: -20px;
6098
6099     transform-origin: 0 0;
6100     -ms-transform-origin: 0 0;
6101     -webkit-transform-origin: 0 0;
6102     -moz-transform-origin: 0 0;
6103     -o-transform-origin: 0 0;
6104
6105     -moz-user-select: none;
6106     -webkit-user-select: none;
6107     -ms-user-select: none;
6108     user-select: none;
6109 }
6110
6111 img.tile-debug {
6112     outline: 1px solid red;
6113 }
6114
6115
6116 /* Map
6117 ------------------------------------------------------- */
6118 #map {
6119     position: relative;
6120     overflow: hidden;
6121     height: 100%;
6122     background: #000;
6123     -moz-user-select: none;
6124     -webkit-user-select: none;
6125     -ms-user-select: none;
6126     user-select: none;
6127 }
6128
6129 #supersurface {
6130     transform-origin: 0 0;
6131     -ms-transform-origin: 0 0;
6132     -webkit-transform-origin: 0 0;
6133     -moz-transform-origin: 0 0;
6134     -o-transform-origin: 0 0;
6135 }
6136
6137 #supersurface, .layer {
6138     position: absolute;
6139     top: 0;
6140     left: 0;
6141     right: 0;
6142     bottom: 0;
6143 }
6144
6145
6146 /* Map-In-Map
6147 ------------------------------------------------------- */
6148 .map-in-map {
6149     position: absolute;
6150     overflow: hidden;
6151     top: 60px;
6152     width: 200px;
6153     height: 150px;
6154     z-index: 5;
6155     background: #000;
6156     border: #aaa 1px solid;
6157     box-shadow: 0 0 2em black;
6158 }
6159
6160 .map-in-map-tiles {
6161     transform-origin: 0 0;
6162     -ms-transform-origin: 0 0;
6163     -webkit-transform-origin: 0 0;
6164     -moz-transform-origin: 0 0;
6165     -o-transform-origin: 0 0;
6166
6167     -moz-user-select: none;
6168     -webkit-user-select: none;
6169     -ms-user-select: none;
6170     user-select: none;
6171 }
6172
6173 .map-in-map-viewport,
6174 .map-in-map-data {
6175     top: 0;
6176     left: 0;
6177     overflow: hidden;
6178     height: 100%;
6179     width: 100%;
6180 }
6181
6182 .map-in-map-viewport {
6183     position: absolute;
6184 }
6185
6186 .map-in-map-data {
6187     position: relative;
6188     z-index: 10;
6189 }
6190
6191 .map-in-map-bbox {
6192     fill: none;
6193     stroke: rgba(255, 255, 0, 0.75);
6194     stroke-width: 1;
6195     shape-rendering: crispEdges;
6196 }
6197
6198 .map-in-map-bbox.thick {
6199     stroke-width: 5;
6200 }
6201
6202
6203 /* Debug Data
6204 ------------------------------------------------------- */
6205 .debug {
6206     stroke: currentColor;
6207     fill: none;
6208     stroke-width: 2;
6209 }
6210 .map-in-map-data .debug {
6211     stroke-width: 1;
6212 }
6213
6214 .nocolor { color: rgba(0, 0, 0, 0); }
6215 .red     { color: rgba(255, 0, 0, 0.75); }
6216 .green   { color: rgba(0, 255, 0, 0.75); }
6217 .blue    { color: rgba(176, 176, 255, 0.75); }
6218 .yellow  { color: rgba(255, 255, 0, 0.75); }
6219 .cyan    { color: rgba(0, 255, 255, 0.75); }
6220 .magenta { color: rgba(255, 0, 255, 0.75); }
6221 .orange  { color: rgba(255, 153, 0, 0.75); }
6222 .pink    { color: rgba(255, 0, 153, 0.75); }
6223 .purple  { color: rgba(153, 0, 255, 0.75); }
6224
6225 .debug-legend {
6226     position: absolute;
6227     top: 70px;
6228     right: 80px;
6229     padding: 5px;
6230     border-radius: 4px;
6231     pointer-events: none;
6232 }
6233
6234 .debug-legend-item {
6235     padding-right: 5px;
6236 }
6237 .debug-legend-item:before {
6238     content: "\25A0";
6239     padding: 0 5px;
6240 }
6241
6242
6243 /* Information Panels
6244 ------------------------------------------------------- */
6245 .info-panels {
6246     display: flex;
6247     flex-flow: row-reverse wrap-reverse;
6248     position: absolute;
6249     z-index: 1;
6250     right: 0;
6251     bottom: 30px;
6252     -ms-user-select: element;
6253 }
6254
6255 .info-panels h1,
6256 .info-panels h2,
6257 .info-panels h3,
6258 .info-panels h4,
6259 .info-panels h5 {
6260     display: inline-block;
6261     margin-bottom: 0;
6262 }
6263
6264 .info-panels h1,
6265 .info-panels h2,
6266 .info-panels h3 {
6267     color: #ff8;
6268 }
6269
6270 .panel-container {
6271     flex: 0 0 auto;
6272     margin: 2px 0 0 2px;
6273     border-radius: 4px;
6274     border: 1px solid rgba(0, 0, 0, 0.75);
6275     padding-bottom: 10px;
6276     width: 250px;
6277 }
6278
6279 .panel-container .panel-title {
6280     border-radius: 4px 4px 0 0;
6281 }
6282
6283 .panel-title {
6284     padding: 5px 10px;
6285 }
6286
6287 .panel-title button.close {
6288     float: right;
6289     height: 20px;
6290     background: none;
6291     color: #ddd;
6292 }
6293 [dir='rtl'] .panel-title button.close {
6294     float: left;
6295 }
6296
6297 .panel-title button.close:hover {
6298     color: #fff;
6299 }
6300 .panel-title button.close .icon {
6301     height: 20px;
6302     width: 16px;
6303 }
6304
6305 .panel-content {
6306     padding: 5px 10px;
6307     position: relative;
6308 }
6309
6310 .panel-content li span {
6311     display: inline-block;
6312     white-space: nowrap;
6313     margin: 0 8px;
6314 }
6315
6316 .panel-content .button {
6317     display: inline-block;
6318     background: #7092ff;
6319     border-radius: 2px;
6320     padding: 0 4px;
6321     margin-top: 10px;
6322     margin-right: 10px;
6323     color: #fff;
6324 }
6325 [dir='rtl'] .panel-content .button {
6326     margin-right: auto;
6327     margin-left: 10px;
6328 }
6329
6330 .panel-content-history .links a {
6331     margin-left: 8px;
6332 }
6333 [dir='rtl'] .panel-content-history .links a {
6334     margin-left: auto;
6335     margin-right: 8px;
6336 }
6337
6338 .panel-content-history .view-history-on-osm {
6339     display: block;
6340     margin-top: 10px;
6341 }
6342
6343 .panel-content-location .location-info {
6344     margin-top: 10px;
6345 }
6346
6347
6348 /* About Section, Attribution, Footer
6349 ------------------------------------------------------- */
6350 #about {
6351     width: 100%;
6352     position: absolute;
6353     right: 0;
6354     bottom: 0;
6355     border-radius: 0;
6356     pointer-events: none;
6357     display: flex;
6358     flex-direction: column;
6359     -ms-user-select: element;
6360 }
6361
6362 #attrib {
6363     width: 100%;
6364     height: 20px;
6365     margin-bottom: 5px;
6366 }
6367
6368 #attrib * { pointer-events: all; }
6369
6370 .base-layer-attribution,
6371 .overlay-layer-attribution {
6372     position: absolute;
6373     color: #ccc;
6374     font-size: 10px;
6375 }
6376
6377 .base-layer-attribution {
6378     left: 10px;
6379 }
6380
6381 .overlay-layer-attribution {
6382     right: 10px;
6383 }
6384
6385 .overlay-layer-attribution .attribution:not(:last-child):after {
6386     content: '; ';
6387 }
6388
6389 .attribution a,
6390 .attribution a:visited {
6391     color: #ccf;
6392 }
6393
6394 .attribution a:hover {
6395     color: #aaf;
6396 }
6397
6398 .attribution .source-image {
6399     height: 20px;
6400     vertical-align: middle;
6401     border-radius: 3px;
6402 }
6403
6404 .attribution span {
6405     margin: 0 3px;
6406 }
6407
6408 #footer {
6409     pointer-events: all;
6410     display: block;
6411     height: 30px;
6412 }
6413
6414
6415 /* Footer - Flash messages
6416 ------------------------------------------------------- */
6417 #flash-wrap {
6418     display: flex;
6419     flex: 0 0 100%;
6420     flex-flow: row nowrap;
6421     justify-content: space-between;
6422     max-height: 30px;
6423     position: absolute;
6424     right: 0;
6425     left: 0;
6426 }
6427
6428 .flash-content {
6429     display: flex;
6430     flex: 1 0 auto;
6431     flex-flow: row nowrap;
6432     align-items: center;
6433     padding: 2px;
6434     height: 30px;
6435 }
6436
6437 .flash-icon {
6438     flex: 0 0 auto;
6439     width: 20px;
6440     height: 20px;
6441     margin: 0 8px;
6442 }
6443
6444 .flash-icon circle {
6445     fill: #eee;
6446 }
6447 .flash-icon.disabled circle {
6448     cursor: auto;
6449     fill: rgba(255,255,255,0.7);
6450 }
6451
6452 .flash-icon use {
6453     color: #222;
6454 }
6455 .flash-icon.disabled use {
6456     color: rgba(32,32,32,0.7);
6457 }
6458
6459 .flash-icon.operation use {
6460     fill: #222;
6461     color: #79f;
6462 }
6463 .flash-icon.operation.disabled use {
6464     fill: rgba(32,32,32,0.7);
6465     color: rgba(40,40,40,0.7);
6466 }
6467
6468 .flash-text {
6469     flex: 1 1 auto;
6470 }
6471
6472 #footer-wrap {
6473     display: flex;
6474     flex: 0 0 100%;
6475     flex-flow: row nowrap;
6476     justify-content: space-between;
6477     max-height: 30px;
6478     position: absolute;
6479     right: 0;
6480     left: 0;
6481 }
6482
6483 .footer-show {
6484     bottom: 0px;
6485     transition: bottom 75ms linear;
6486     -moz-transition: bottom 75ms linear;
6487     -webkit-transition: bottom 75ms linear;
6488 }
6489
6490 .footer-hide {
6491     bottom: -35px;
6492     transition: bottom 75ms linear;
6493     -moz-transition: bottom 75ms linear;
6494     -webkit-transition: bottom 75ms linear;
6495 }
6496
6497
6498 /* Footer - Scale bar, About, Source Switcher
6499 ------------------------------------------------------- */
6500 #scale-block {
6501     vertical-align: bottom;
6502     width: 250px;
6503     max-height: 30px;
6504     flex: 0 0 250px;
6505     -moz-user-select: none;
6506     -webkit-user-select: none;
6507     -ms-user-select: none;
6508     user-select: none;
6509 }
6510
6511 #info-block {
6512     max-height: 30px;
6513     flex: 1 1 auto;
6514 }
6515
6516 #scale {
6517     height: 30px;
6518     width: 100%;
6519 }
6520 [dir='rtl'] #scale {
6521     transform: scaleX(-1);
6522 }
6523
6524 #scale:hover {
6525     cursor: pointer;
6526 }
6527
6528 #scale text {
6529     font: 12px sans-serif;
6530     stroke: none;
6531     fill: #ccc;
6532     text-anchor: start;
6533 }
6534 [dir='rtl'] #scale text {
6535     transform: scaleX(-1);
6536 }
6537
6538 #scale path {
6539     fill: none;
6540     stroke: #ccc;
6541     stroke-width: 1;
6542     shape-rendering: crispEdges;
6543 }
6544
6545 #about-list {
6546     text-align: right;
6547     margin-right: 10px;
6548     clear: right;
6549     overflow: hidden;
6550 }
6551 [dir='rtl'] #about-list {
6552     text-align: left;
6553     clear: left;
6554     margin-left: 10px;
6555     margin-right: 0;
6556 }
6557
6558 #about-list li {
6559     float: right;
6560     border-left: 1px solid rgba(255,255,255,.5);
6561     padding: 5px 0 5px 5px;
6562     margin-left: 5px;
6563 }
6564 [dir='rtl'] #about-list li {
6565     float: left;
6566     border-left: none;
6567     border-right: 1px solid rgba(255,255,255,.5);
6568     margin-left: 0;
6569     margin-right: 5px;
6570     padding: 5px 5px 5px 0;
6571 }
6572
6573 #about-list li:last-child {
6574     border-left: 0;
6575     margin-left: 0;
6576     padding-left: 0;
6577 }
6578 [dir='rtl'] #about-list li:last-child {
6579     border-right: none;
6580 }
6581
6582 .source-switch a {
6583     padding: 2px 4px 4px 4px;
6584     border-radius: 2px;
6585 }
6586 .source-switch a.live {
6587     background: #d32232;
6588     color: #fff;
6589 }
6590
6591 .feature-warning a {
6592     background: #1e90ff;
6593     padding: 2px 4px 4px 4px;
6594     border-radius: 2px;
6595     color: #eee;
6596 }
6597
6598 .user-list a:not(:last-child):after {
6599     content: ', ';
6600 }
6601
6602 .api-status {
6603     text-align: right;
6604     padding: 0px 10px;
6605     color: #eee;
6606     flex: 1 1 auto;
6607 }
6608 [dir='rtl'] .api-status {
6609     text-align: left;
6610 }
6611
6612 .api-status.offline,
6613 .api-status.readonly,
6614 .api-status.error {
6615     background: #a22;
6616 }
6617
6618 .api-status-login {
6619     color: #aaf;
6620 }
6621 .api-status-login:hover {
6622     color: #ccf;
6623 }
6624
6625 /* Notification Badges
6626 ------------------------------------------------------- */
6627 /* For an icon (e.g. new version) */
6628 .badge {
6629     display: inline-block;
6630     background: #d32232;
6631     width: 21px;
6632     height: 20px;
6633     border-radius: 11px;
6634     margin-left: 6px;
6635 }
6636 [dir='rtl'] .badge {
6637     margin-left: 0;
6638     margin-right: 6px;
6639 }
6640 .badge a {
6641     margin-right: 5px;
6642 }
6643 [dir='rtl'] .badge a {
6644     margin-right: 0;
6645     margin-left: 5px;
6646 }
6647 .badge .icon {
6648     vertical-align: baseline;
6649     width: 11px;
6650     height: 11px;
6651     fill: #fff;
6652 }
6653
6654 /* For text (e.g. upcoming events) */
6655 .badge-text {
6656     display: inline-block;
6657     color: #fff;
6658     text-align: center;
6659     width: 16px;
6660     height: 16px;
6661     font-size: 10px;
6662     font-weight: bold;
6663     margin-left: 5px;
6664     background: #f00;
6665     border-radius: 9px;
6666 }
6667 [dir='rtl'] .badge-text {
6668     margin-left: 0;
6669     margin-right: 5px;
6670 }
6671
6672
6673 /* Modals / Prompts
6674 ------------------------------------------------------- */
6675 .modal {
6676     top: 40px;
6677     display: inline-block;
6678     position: absolute;
6679     border-radius: 3px;
6680     overflow: hidden;
6681     left: 0;
6682     right: 0;
6683     margin: auto;
6684     z-index: 50;
6685 }
6686
6687 .modal .loader {
6688     margin-bottom: 10px;
6689 }
6690 .modal .description {
6691     text-align: center;
6692 }
6693
6694 .shaded {
6695     z-index: 49;
6696     position: absolute;
6697     top: 0;
6698     bottom: 0;
6699     left: 0;
6700     right: 0;
6701     overflow: auto;
6702 }
6703 .shaded:before {
6704     content:'';
6705     background: rgba(0,0,0,0.5);
6706     position: fixed;
6707     left: 0px; right: 0px; top: 0px; bottom: 0px;
6708 }
6709
6710 .modal-section {
6711     padding: 20px;
6712     border-bottom: 1px solid #ccc;
6713 }
6714 .modal-section.header h3 {
6715     padding: 0;
6716 }
6717 .modal-section.buttons {
6718     text-align: center;
6719 }
6720
6721 .modal-section.buttons button {
6722     min-width: 130px;
6723 }
6724
6725 .modal-section.buttons .action {
6726     display: inline-block;
6727     margin: 0 10px;
6728     text-align: center;
6729     vertical-align: middle;
6730 }
6731
6732 .save-section .buttons {
6733     display: flex;
6734     flex-wrap: wrap;
6735     justify-content: space-around;
6736     margin-bottom: 30px;
6737 }
6738
6739 .save-section .buttons .action,
6740 .save-section .buttons .secondary-action {
6741     width: 45%;
6742     margin: 10px auto;
6743     text-align: center;
6744     vertical-align: middle;
6745 }
6746
6747 .loading-modal {
6748     text-align: center;
6749 }
6750
6751 .modal-actions button {
6752     font-weight: normal;
6753     color: #7092ff;
6754     border-bottom: 1px solid #ccc;
6755     border-radius: 0;
6756     height: 160px;
6757     text-align: center;
6758     display: inline-block;
6759 }
6760 .modal-actions button:hover {
6761     background-color: #ececec;
6762 }
6763
6764 .logo-small {
6765     height: 40px;
6766     width: 40px;
6767     margin: auto;
6768 }
6769
6770 .logo {
6771     height: 100px;
6772     width: 100%;
6773     max-width: 100px;
6774     margin: auto;
6775 }
6776
6777 .modal-actions > :first-child {
6778     border-right: 1px solid #ccc;
6779 }
6780
6781 .modal-section:last-child {
6782     border-bottom: 0;
6783 }
6784
6785 /* Restore Modal
6786 ------------------------------------------------------- */
6787 .modal-actions .logo-restore {
6788     color: #7092ff;
6789 }
6790 .modal-actions .logo-reset {
6791     color: #e06c5e;
6792 }
6793
6794 /* Success Screen / Community Index
6795 ------------------------------------------------------- */
6796 .save-success.body {
6797     overflow-y: scroll;
6798     overflow-x: hidden;
6799 }
6800
6801 .save-success .link-out {
6802     margin: 0px 5px;
6803     white-space: nowrap;
6804 }
6805
6806 .save-summary,
6807 .save-communityLinks {
6808     padding: 0px 20px 15px 20px;
6809 }
6810
6811 .save-communityLinks {
6812     border-top: 1px solid #ccc;
6813 }
6814
6815 .save-success table,
6816 .save-success p {
6817     margin-top: 15px;
6818 }
6819 .save-success h3 {
6820     font-size: 14px;
6821     margin-top: 15px;
6822     line-height: 1.5;
6823     padding-bottom: 0;
6824 }
6825 .save-success td {
6826     vertical-align: top;
6827 }
6828 .save-success td.cell-icon {
6829     width: 40px;
6830 }
6831 .save-success td.cell-detail {
6832     padding: 0 10px;
6833 }
6834 .save-success td.community-detail {
6835     padding-bottom: 15px;
6836 }
6837
6838 .summary-view-on-osm,
6839 .community-name {
6840     font-size: 14px;
6841     font-weight: bold;
6842 }
6843 .community-languages {
6844     margin-top: 5px;
6845     font-style: italic;
6846 }
6847 .community-languages:only-child {
6848     margin-top: 0;
6849 }
6850
6851 .community-detail a.hide-toggle,
6852 .community-detail a:visited.hide-toggle {
6853     font-size: 12px;
6854     font-weight: normal;
6855     padding-bottom: 0;
6856 }
6857 .community-detail .hide-toggle svg.icon.pre-text {
6858     width: 12px;
6859     height: 15px;
6860 }
6861
6862 .community-events {
6863     margin-top: 5px;
6864 }
6865
6866 .community-event,
6867 .community-more {
6868     background-color: #efefef;
6869     padding: 8px;
6870     border-radius: 4px;
6871     margin-bottom: 5px;
6872 }
6873
6874 .community-event-name {
6875     font-size: 14px;
6876     font-weight: bold;
6877 }
6878 .community-event-when {
6879     font-weight: bold;
6880 }
6881
6882 .community-missing {
6883     padding: 10px;
6884     text-align: center;
6885 }
6886
6887
6888 /* Splash Modal
6889 ------------------------------------------------------- */
6890 .modal-actions .logo-walkthrough,
6891 .modal-actions .logo-features {
6892     color: #7092ff;
6893 }
6894
6895
6896 /* Shortcuts Modal
6897 ------------------------------------------------------- */
6898 .modal-shortcuts {
6899     width: 90%;
6900     max-width: 950px;
6901 }
6902
6903 .modal-shortcuts .modal-section:last-child {
6904     padding-top: 10px;
6905     min-height: 275px;
6906 }
6907
6908 .modal-shortcuts .tabs-bar {
6909     text-align: center;
6910     padding-bottom: 5px;
6911     font-size: 16px;
6912     font-weight: bold;
6913 }
6914
6915 .modal-shortcuts .tab {
6916     display: inline-block;
6917     padding: 5px 10px;
6918     margin: 0 5px;
6919     cursor: pointer;
6920     color: #666;
6921 }
6922 .modal-shortcuts .tab.active {
6923     color: #7092ff;
6924     border-bottom: 2px solid;
6925 }
6926 .modal-shortcuts .tab:hover {
6927     color: #597be7;
6928     background-color: #efefef;
6929 }
6930
6931 .modal-shortcuts .shortcut-tab {
6932     display: flex;
6933     flex-flow: row wrap;
6934 }
6935
6936 .modal-shortcuts .shortcut-column {
6937     flex: 1 1 50%;
6938     width: 50%;
6939 }
6940
6941 .modal-shortcuts .shortcut-tab-tools .shortcut-column {
6942     flex: 1 1 100%;
6943     width: 100%;
6944 }
6945
6946 .modal-shortcuts td {
6947     padding-bottom: 5px;
6948 }
6949
6950 .modal-shortcuts .shortcut-section {
6951     padding: 20px 0 10px 0;
6952 }
6953
6954 .modal-shortcuts .shortcut-keys {
6955     padding: 0 10px;
6956     color: #767676;
6957     text-align: right;
6958 }
6959 [dir='rtl'] .modal-shortcuts .shortcut-keys {
6960     text-align: left;
6961 }
6962
6963 .modal-shortcuts .shortcut-keys kbd {
6964     display: inline-block;
6965     text-align: center;
6966     padding: 3px 5px;
6967     font-size: 11px;
6968     line-height: 12px;
6969     min-width: 12px;
6970     color: #555;
6971     vertical-align: baseline;
6972     background-color: #fcfcfc;
6973     border: solid 1px #ccc;
6974     margin: 0 2px;
6975     border-bottom-color: #bbb;
6976     border-radius: 3px;
6977     box-shadow: inset 0 -1px 0 #bbb;
6978 }
6979
6980 svg.mouseclick use.left {
6981     fill: rgba(112, 146, 255, 1);
6982     color: rgba(112, 146, 255, 0);
6983 }
6984 svg.mouseclick use.right {
6985     fill: rgba(112, 146, 255, 0);
6986     color: rgba(112, 146, 255, 1);
6987 }
6988
6989 .modal-shortcuts .shortcut-keys .gesture {
6990     color: #333;
6991     padding: 3px;
6992 }
6993
6994
6995 /* Settings Modals
6996 ------------------------------------------------------- */
6997 .settings-modal textarea {
6998     height: 70px;
6999     width: 100%;
7000 }
7001
7002 .settings-custom-background .instructions-template {
7003     margin-bottom: 20px;
7004 }
7005
7006 .settings-custom-data .instructions-url {
7007     margin-bottom: 10px;
7008 }
7009 .settings-custom-data .field-file,
7010 .settings-custom-data .instructions-template {
7011     margin-bottom: 20px;
7012 }
7013
7014
7015 /* Save Mode
7016 ------------------------------------------------------- */
7017 .mode-save a.user-info {
7018     display: inline-block;
7019 }
7020
7021 .mode-save .commit-form {
7022     margin-bottom: 0;
7023 }
7024
7025 .mode-save .user-info img {
7026     float: left;
7027 }
7028
7029 .mode-save h3 small.count {
7030     margin-right: 10px;
7031     text-align: center;
7032     float: left;
7033     height: 12px;
7034     min-width: 12px;
7035     font-size: 12px;
7036     line-height: 12px;
7037     border-radius: 24px;
7038     padding: 5px;
7039     background: #7092ff;
7040     color: #fff;
7041 }
7042
7043 .note-save .field-warning,
7044 .mode-save .field-warning {
7045     background: #ffb;
7046     border: 1px solid #ccc;
7047     border-radius: 4px;
7048     padding: 10px;
7049 }
7050
7051 .note-save .field-warning:empty,
7052 .mode-save .field-warning:empty {
7053     display: none;
7054 }
7055
7056 .mode-save .field-warning,
7057 .mode-save .changeset-info,
7058 .mode-save .request-review,
7059 .mode-save .commit-info {
7060     margin-bottom: 10px;
7061 }
7062
7063 .mode-save .request-review label {
7064     cursor: pointer;
7065 }
7066
7067 .mode-save .changeset-list {
7068     border: 1px solid #ccc;
7069     border-radius: 4px;
7070     background: #fff;
7071     margin-bottom: 10px;
7072 }
7073
7074 .mode-save .warning-section {
7075     background: #ffb;
7076 }
7077
7078 .mode-save .error-section {
7079     background: #ffa5a5;
7080 }
7081
7082 .mode-save .warning-section .changeset-list button {
7083     border-left: 1px solid #ccc;
7084 }
7085
7086 .mode-save .changeset-list li {
7087     position: relative;
7088     border-top: 1px solid #ccc;
7089     padding: 5px 10px;
7090     cursor: pointer;
7091 }
7092
7093 .mode-save .changeset-list li:hover {
7094     background-color: #ececec;
7095 }
7096
7097 .mode-save .changeset-list .alert {
7098     opacity: 0.5;
7099 }
7100
7101 .changeset-list li span.count {
7102     font-size: 10px;
7103     color: #555;
7104 }
7105
7106 .mode-save .commit-section .changeset-list button {
7107     border-left: 1px solid #ccc;
7108 }
7109
7110 .changeset-list li span.count:before { content: '('; }
7111
7112 .changeset-list li span.count:after { content: ')'; }
7113
7114 .changeset-list li:first-child { border-top: 0;}
7115
7116
7117 /* Conflict resolution
7118 ------------------------------------------------------- */
7119 .conflicts-help {
7120     padding: 20px;
7121     background-color: #ffffbb;
7122     border-bottom: 1px solid #ccc;
7123 }
7124
7125 .conflicts-buttons {
7126     padding: 20px;
7127 }
7128
7129 .mode-save button.conflicts-button {
7130     float: left;
7131 }
7132
7133 .conflict-container {
7134     border-bottom: 1px solid #ccc;
7135 }
7136
7137 .conflict-description {
7138     padding: 5px 20px;
7139     display: block;
7140 }
7141
7142 .conflicts-done {
7143     padding: 20px 20px 0 20px;
7144 }
7145
7146 .conflict-detail-container {
7147     padding: 10px 20px;
7148 }
7149
7150 .conflict-count {
7151     padding: 10px 20px;
7152 }
7153
7154 .conflict-choices {
7155     margin-top: 10px;
7156 }
7157
7158 .conflict-nav-buttons {
7159     padding: 10px 0 20px 0;
7160 }
7161
7162 .conflict-nav-button {
7163     height: 30px;
7164 }
7165
7166
7167 /* Notices (Zoom in to Edit)
7168 ------------------------------------------------------- */
7169 .notice {
7170     position: absolute;
7171     top: 45px;
7172     left: 0;
7173     right: 0;
7174     text-align: center;
7175 }
7176
7177 .notice .zoom-to {
7178     margin: auto;
7179     width: 300px;
7180     height: 70px;
7181     font-size: 150%;
7182     border-radius: 8px;
7183 }
7184
7185 .notice .zoom-to:hover {
7186     background: rgba(0,0,0,0.6);
7187 }
7188
7189 .notice .zoom-to .icon {
7190     width: 30px;
7191     height: 30px;
7192     vertical-align: middle;
7193     margin-right: 10px;
7194 }
7195 [dir='rtl'] .notice .zoom-to .icon {
7196     margin-left: 10px;
7197     margin-right: 0;
7198 }
7199
7200
7201 /* Tooltips
7202 ------------------------------------------------------- */
7203 .tooltip {
7204     position: absolute;
7205     display: none;
7206     color: #333;
7207     font-size: 12px;
7208     white-space: initial;
7209 }
7210 .tooltip.in {
7211     opacity: 0.9;
7212     z-index: 1030;
7213     height: auto;
7214     display: block;
7215 }
7216 .tooltip.top {
7217     margin-top: -20px;
7218     text-align: center;
7219 }
7220 .tooltip.right {
7221     margin-left: 20px;
7222     text-align: left;
7223 }
7224 .tooltip.bottom {
7225     margin-top: 20px;
7226     text-align: center;
7227 }
7228 .tooltip.left {
7229     margin-left: -20px;
7230     text-align: right;
7231 }
7232
7233 .tooltip-inner {
7234     display: inline-block;
7235     border-radius: 3px;
7236     max-width: 200px;
7237     min-width: 80px;
7238     padding: 10px;
7239     font-weight: normal;
7240     background-color: #fff;
7241 }
7242
7243 .tail {
7244     width: 200px;
7245     height: 400px;
7246     pointer-events: none;
7247     opacity: .8;
7248     margin-top: -200px;
7249     position: absolute;
7250     background: transparent;
7251 }
7252 .tail::after {
7253     content: "";
7254     position: absolute;
7255     width: 0;
7256     height: 0;
7257     border-color: transparent;
7258     border-style: solid;
7259     top: 50%;
7260     right: -5px;
7261     margin-top: -5px;
7262     border-left-color: #fff;
7263     border-width: 5px 0 5px 5px;
7264 }
7265
7266 .tail div {
7267     border-radius: 3px;
7268     padding: 10px;
7269     background: #fff;
7270     position: absolute;
7271     top: 180px;
7272     left: 0;
7273     right: 0;
7274     margin: auto;
7275 }
7276
7277 .left.tail::after {
7278     content: "";
7279     position: absolute;
7280     width: 0;
7281     height: 0;
7282     border-color: transparent;
7283     border-style: solid;
7284     top: 50%;
7285     left: -5px;
7286     margin-top: -5px;
7287     border-right-color: #fff;
7288     border-width: 5px 5px 5px 0;
7289 }
7290
7291 .tooltip-arrow {
7292     position: absolute;
7293     width: 0;
7294     height: 0;
7295     border-color: transparent;
7296     border-style: solid;
7297 }
7298 .tooltip.top .tooltip-arrow {
7299     bottom: -5px;
7300     left: 50%;
7301     margin-left: -5px;
7302     border-top-color: #fff;
7303     border-width: 5px 5px 0;
7304 }
7305 .tooltip.right .tooltip-arrow {
7306     top: 50%;
7307     left: -5px;
7308     margin-top: -5px;
7309     border-right-color: #fff;
7310     border-width: 5px 5px 5px 0;
7311 }
7312 .tooltip.left .tooltip-arrow {
7313     top: 50%;
7314     right: -5px;
7315     margin-top: -5px;
7316     border-left-color: #fff;
7317     border-width: 5px 0 5px 5px;
7318 }
7319 .tooltip.bottom .tooltip-arrow {
7320     top: -5px;
7321     left: 50%;
7322     margin-left: -5px;
7323     border-bottom-color: #fff;
7324     border-width: 0 5px 5px;
7325 }
7326
7327 .tooltip-heading {
7328     font-weight: bold;
7329     background: #f6f6f6;
7330     padding: 10px;
7331     margin: -10px -10px 10px -10px;
7332     border-radius: 3px 3px 0 0;
7333     font-size: 14px;
7334 }
7335
7336 .keyhint-wrap {
7337     background: #f6f6f6;
7338     padding: 10px;
7339     margin: 10px -10px -10px -10px;
7340     border-radius: 0 0 3px 3px;
7341 }
7342 .tooltip-inner .keyhint {
7343     font-weight: bold;
7344     margin-left: 5px;
7345 }
7346
7347 [dir='rtl'] .tooltip-inner .keyhint {
7348     margin-left: 0;
7349     margin-right: 5px;
7350 }
7351
7352 /* dark tooltips for sidebar / panels */
7353 .map-pane .tooltip.top .tooltip-arrow,
7354 #sidebar .tooltip.top .tooltip-arrow {
7355     border-top-color: #000;
7356 }
7357 .map-pane .tooltip.bottom .tooltip-arrow,
7358 #sidebar .tooltip.bottom .tooltip-arrow {
7359     border-bottom-color: #000;
7360 }
7361 .map-pane .tooltip.left .tooltip-arrow,
7362 #sidebar .tooltip.left .tooltip-arrow {
7363     border-left-color: #000;
7364 }
7365 .map-pane .tooltip.right .tooltip-arrow,
7366 #sidebar .tooltip.right .tooltip-arrow {
7367     border-right-color: #000;
7368 }
7369 .map-pane .tooltip-inner,
7370 .map-pane .tooltip-heading,
7371 .map-pane .keyhint-wrap,
7372 #sidebar .tooltip-inner,
7373 #sidebar .tooltip-heading,
7374 #sidebar .keyhint-wrap {
7375     background: #000;
7376     color: #ccc;
7377 }
7378
7379 /* Exceptions for tooltip layouts */
7380
7381 /* commit warning tooltips need to be closer */
7382 .warning-section .tooltip.top {
7383     margin-top: -5px;
7384 }
7385
7386 /* Uncramp map-control tooltips */
7387 .map-control .tooltip {
7388     min-width: 160px;
7389 }
7390 .map-control .shortcuts .tooltip {
7391     max-width: 160px;
7392 }
7393
7394 /* Move over tooltips that are near the edge of screen */
7395 button.sidebar-toggle .tooltip .tooltip-arrow {
7396     left: 36px;
7397 }
7398 [dir='rtl'] button.sidebar-toggle .tooltip .tooltip-arrow {
7399     left: auto;
7400     right: 36px;
7401 }
7402
7403 li:first-of-type .badge .tooltip,
7404 li.hide + li.version .badge .tooltip {
7405     left: auto !important;
7406     right: 5px !important;
7407 }
7408 [dir='rtl'] li:first-of-type .badge .tooltip,
7409 [dir='rtl'] li.hide + li.version .badge .tooltip {
7410     left: 5px !important;
7411     right: auto !important;
7412 }
7413 li:first-of-type .badge .tooltip .tooltip-arrow,
7414 li.hide + li.version .badge .tooltip .tooltip-arrow {
7415     right: 15px !important;
7416     left: auto !important;
7417 }
7418 [dir='rtl'] li:first-of-type .badge .tooltip .tooltip-arrow,
7419 [dir='rtl'] li.hide + li.version .badge .tooltip .tooltip-arrow {
7420     left: 15px !important;
7421     right: auto !important;
7422 }
7423
7424
7425 /* Contextual Radial Menu (deprecated)
7426 ------------------------------------------------------- */
7427 .radial-menu-tooltip {
7428     opacity: 0.8;
7429     display: none;
7430     position: absolute;
7431     width: 200px;
7432 }
7433
7434 .radial-menu-background {
7435     fill: none;
7436     stroke: black;
7437     stroke-opacity: 0.5;
7438 }
7439
7440 .radial-menu-item circle {
7441     fill: #eee;
7442 }
7443
7444 .radial-menu-item circle:active,
7445 .radial-menu-item circle:hover {
7446     fill: #fff;
7447 }
7448
7449 .radial-menu-item.disabled circle {
7450     cursor: auto;
7451     fill: rgba(255,255,255,.5);
7452 }
7453
7454 .radial-menu-item use {
7455     fill: #222;
7456     color: #79f;
7457 }
7458
7459 .radial-menu-item.disabled use {
7460     fill: rgba(32,32,32,.5);
7461     color: rgba(40,40,40,.5);
7462 }
7463
7464
7465 /* Contextual Edit Menu
7466 ------------------------------------------------------- */
7467 .edit-menu-tooltip {
7468     display: none;
7469     position: absolute;
7470     width: 200px;
7471 }
7472
7473 .edit-menu-background {
7474     fill: #eee;
7475 }
7476
7477 .edit-menu-item rect {
7478     fill: #eee;
7479     cursor: default;
7480 }
7481
7482 .edit-menu-item rect:active,
7483 .edit-menu-item rect:hover {
7484     fill: #ccc;
7485 }
7486
7487 .edit-menu-item.disabled rect {
7488     cursor: not-allowed;
7489 }
7490 .edit-menu-item.disabled rect:hover {
7491     cursor: not-allowed;
7492     fill: #eee;
7493 }
7494
7495 .edit-menu-item use {
7496     fill: #222;
7497     color: #79f;
7498     pointer-events: none;
7499 }
7500 .edit-menu-item.disabled use {
7501     fill: rgba(32,32,32,.2);
7502     color: rgba(40,40,40,.2);
7503 }
7504
7505
7506 /* Lasso
7507 ------------------------------------------------------- */
7508 .lasso-path {
7509     fill-opacity: 0.3;
7510     stroke: #fff;
7511     stroke-width: 1;
7512     stroke-opacity: 1;
7513     stroke-dasharray: 5, 5;
7514 }
7515
7516
7517 /* Scrollbars
7518  ----------------------------------------------------- */
7519 ::-webkit-scrollbar {
7520     height: 20px;
7521     overflow: visible;
7522     width: 10px;
7523     background: #fff;
7524     border-left: 1px solid #DDD;
7525 }
7526
7527 ::-webkit-scrollbar-track {
7528     background-clip: padding-box;
7529     border: solid transparent;
7530     border-width: 0;
7531 }
7532
7533 ::-webkit-scrollbar-thumb {
7534     background-color: rgba(0,0,0,.2);
7535     background-clip: padding-box;
7536     border: solid transparent;
7537     border-width: 3px 3px 3px 4px;
7538     border-radius: 6px;
7539 }
7540 ::-webkit-scrollbar-track:hover,
7541 ::-webkit-scrollbar-track:active {
7542     background-color: rgba(0,0,0,.05);
7543 }
7544
7545
7546 /* Intro walkthrough
7547  ----------------------------------------------------- */
7548 .curtain-darkness {
7549     pointer-events: all;
7550     fill-opacity: 0.7;
7551     fill: #222;
7552     fill-rule: evenodd;
7553 }
7554
7555 .intro-nav-wrap {
7556     display: flex;
7557     flex-direction: row;
7558     position: absolute;
7559     left: 0;
7560     right: 0;
7561     bottom: 30px;
7562     padding: 10px;
7563     z-index: 1001;
7564 }
7565
7566 .intro-nav-wrap .intro-nav-wrap-logo {
7567     flex: 0 0 auto;
7568     height: 40px;
7569     width: 40px;
7570     color: #fff;
7571     margin: 0px 20px;
7572     vertical-align: middle;
7573 }
7574
7575 .intro-nav-wrap .joined {
7576     flex: 1 1 auto;
7577     display: flex;
7578     flex-direction: row;
7579 }
7580
7581 .intro-nav-wrap button.chapter {
7582     flex: 1 1 100%;
7583     padding: 0px 20px;
7584 }
7585
7586 .intro-nav-wrap button.chapter.next {
7587     animation-duration: 1s;
7588     animation-name: pulse;
7589     animation-iteration-count: infinite;
7590     animation-direction: alternate;
7591 }
7592 @keyframes pulse {
7593     from  { background: #7092ff; }
7594     to    { background: #c6d4ff; }
7595 }
7596
7597 .intro-nav-wrap button.chapter.finished {
7598     background: #8cd05f;
7599 }
7600
7601 .intro-nav-wrap button.chapter .status {
7602     display: none;
7603 }
7604
7605 .intro-nav-wrap button.chapter.finished .status {
7606     display: inline-block;
7607 }
7608
7609 .curtain-tooltip.tooltip.in {
7610     opacity: 1;
7611 }
7612 .curtain-tooltip.tooltip {
7613     text-align: left;
7614 }
7615 [dir='rtl'] .curtain-tooltip.tooltip {
7616     text-align: right;
7617 }
7618
7619 .curtain-tooltip .tooltip-inner {
7620     font-size: 15px;
7621     position: relative;
7622     padding: 20px;
7623 }
7624
7625 .curtain-tooltip .tooltip-inner .button-section,
7626 .curtain-tooltip .tooltip-inner .instruction {
7627     font-weight: bold;
7628     display: block;
7629     border-top: 1px solid #ccc;
7630     margin-top: 10px;
7631     margin-left: -20px;
7632     margin-right: -20px;
7633     padding: 10px 20px 0 20px;
7634 }
7635
7636 [dir='rtl'] .curtain-tooltip .tooltip-inner .button-section button.col8 {
7637     float: right;
7638 }
7639
7640 .curtain-tooltip .tooltip-inner .instruction:only-child {
7641     border: 0;
7642     padding: 0;
7643     margin: 0;
7644 }
7645
7646 .curtain-tooltip .tooltip-inner .icon.pre-text {
7647     vertical-align: text-top;
7648     margin-right: 0;
7649     margin-left: 0;
7650     display: inline-block;
7651 }
7652
7653 .curtain-tooltip.intro-points-describe ,
7654 .curtain-tooltip.intro-lines-name_road {
7655     top: 133px !important;
7656 }
7657
7658 .tooltip-illustration {
7659     height: 80px;
7660     width: 200px;
7661     margin-left: -20px;
7662     margin-top: -10px;
7663 }
7664 [dir='rtl'] .tooltip-illustration {
7665     margin-left: auto;
7666     margin-right: -20px;
7667 }
7668
7669 .curtain-tooltip.intro-mouse {
7670     -moz-user-select: none;
7671     -webkit-user-select: none;
7672     -ms-user-select: none;
7673     user-select: none;
7674 }
7675
7676 .curtain-tooltip.intro-mouse .counter {
7677     position: absolute;
7678     display: block;
7679     top: 50px;
7680     width: 100%;
7681     text-align: center;
7682     font-weight: bold;
7683     font-size: 14px;
7684     z-index: 1003;
7685 }
7686
7687 .curtain-tooltip.intro-mouse .tooltip-illustration use {
7688     fill: rgba(112, 146, 255, 0);
7689     color: rgba(112, 146, 255, 0);
7690 }
7691 .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
7692     fill: rgba(112, 146, 255, 1);
7693 }
7694 .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
7695     color: rgba(112, 146, 255, 1);
7696 }
7697
7698 .huge-modal-button {
7699     width: 100%;
7700     height: auto;
7701     padding: 20px;
7702 }
7703
7704 .huge-modal-button .illustration {
7705     height: 100px;
7706     width: 100px;
7707     color: #7092ff;
7708 }