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