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