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