vendor/assets/iD/iD.css.erb

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