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