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 .ideditor div, .ideditor span, .ideditor applet, .ideditor object, .ideditor iframe, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor h6, .ideditor p, .ideditor blockquote, .ideditor pre, .ideditor a, .ideditor abbr, .ideditor acronym, .ideditor address, .ideditor big, .ideditor cite, .ideditor code, .ideditor del, .ideditor dfn, .ideditor em, .ideditor img, .ideditor ins, .ideditor kbd, .ideditor q, .ideditor s, .ideditor samp, .ideditor small, .ideditor strike, .ideditor strong, .ideditor sub, .ideditor sup, .ideditor tt, .ideditor var, .ideditor b, .ideditor u, .ideditor i, .ideditor center, .ideditor dl, .ideditor dt, .ideditor dd, .ideditor ol, .ideditor ul, .ideditor li, .ideditor fieldset, .ideditor form, .ideditor label, .ideditor legend, .ideditor table, .ideditor caption, .ideditor tbody, .ideditor tfoot, .ideditor thead, .ideditor tr, .ideditor th, .ideditor td, .ideditor article, .ideditor aside, .ideditor canvas, .ideditor details, .ideditor embed, .ideditor figure, .ideditor figcaption, .ideditor footer, .ideditor header, .ideditor hgroup, .ideditor menu, .ideditor nav, .ideditor output, .ideditor ruby, .ideditor section, .ideditor summary, .ideditor time, .ideditor mark, .ideditor audio, .ideditor video {
   7         margin: 0;
   8         padding: 0;
   9         border: 0;
  10         font-size: 100%;
  11         font: inherit;
  12         vertical-align: baseline;
  13 }
  14 /* HTML5 display-role reset for older browsers */
  15 .ideditor article, .ideditor aside, .ideditor details, .ideditor figcaption, .ideditor figure, .ideditor footer, .ideditor header, .ideditor hgroup, .ideditor menu, .ideditor nav, .ideditor section {
  16         display: block;
  17 }
  18 .ideditor ol, .ideditor ul {
  19         list-style: none;
  20 }
  21 .ideditor blockquote, .ideditor q {
  22         quotes: none;
  23 }
  24 .ideditor blockquote:before, .ideditor blockquote:after, .ideditor q:before, .ideditor q:after {
  25         content: '';
  26         content: none;
  27 }
  28 .ideditor table {
  29         border-collapse: collapse;
  30         border-spacing: 0;
  31 }
  32 .ideditor a { text-decoration: none;}
  33 /*
  34  * 1. Corrects font family not being inherited in all browsers.
  35  * 2. Corrects font size not being inherited in all browsers.
  36  * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
  37  */
  38
  39 .ideditor button,
  40 .ideditor input,
  41 .ideditor select,
  42 .ideditor textarea {
  43     font-family: inherit; /* 1 */
  44     font-size: 100%; /* 2 */
  45     margin: 0; /* 3 */
  46     padding: 0;
  47 }
  48
  49 /*
  50  * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
  51  * the UA stylesheet.
  52  */
  53
  54 .ideditor button,
  55 .ideditor input {
  56     line-height: inherit;
  57         letter-spacing: inherit;
  58 }
  59
  60 /* Hide default number spinner controls */
  61 .ideditor input[type="number"]::-webkit-inner-spin-button,
  62 .ideditor input[type="number"]::-webkit-outer-spin-button {
  63         display: none;
  64 }
  65 .ideditor input[type=number] {
  66     -moz-appearance: textfield;
  67 }
  68
  69 /*
  70  * 1. Corrects inability to style clickable `input` types in iOS.
  71  * 2. Improves usability and consistency of cursor style between image-type
  72  *    `input` and others.
  73  */
  74
  75 .ideditor button,
  76 .ideditor input[type="button"],
  77 .ideditor input[type="reset"],
  78 .ideditor input[type="submit"] {
  79     -webkit-appearance: button; /* 1 */
  80     cursor: pointer; /* 2 */
  81 }
  82
  83 /*
  84  * Re-set default cursor for disabled elements.
  85  */
  86
  87 .ideditor button[disabled],
  88 .ideditor input[disabled] {
  89     cursor: default;
  90 }
  91
  92 /*
  93  * 1. Addresses box sizing set to `content-box` in IE 8/9.
  94  * 2. Removes excess padding in IE 8/9.
  95  */
  96
  97 .ideditor input[type="checkbox"],
  98 .ideditor input[type="radio"] {
  99     box-sizing: border-box; /* 1 */
 100     padding: 0; /* 2 */
 101 }
 102
 103 /*
 104  * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 105  * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 106  *    (include `-moz` to future-proof).
 107  */
 108
 109 .ideditor input[type="search"] {
 110     -webkit-appearance: none; /* 1 */
 111     box-sizing: border-box;
 112 }
 113
 114 /*
 115  * Removes inner padding and search cancel button in Safari 5 and Chrome
 116  * on OS X.
 117  */
 118
 119 .ideditor input[type="search"]::-webkit-search-cancel-button,
 120 .ideditor input[type="search"]::-webkit-search-decoration {
 121     -webkit-appearance: none;
 122 }
 123
 124 /*
 125  * Removes inner padding and border in Firefox 4+.
 126  */
 127
 128 .ideditor button::-moz-focus-inner,
 129 .ideditor input::-moz-focus-inner {
 130     border: 0;
 131     padding: 0;
 132 }
 133
 134 /*
 135 ** Markup free clearing
 136 ** Details: http://www.positioniseverything.net/easyclearing.html
 137 */
 138 .ideditor .cf:before,
 139 .ideditor .cf:after {
 140     content: " "; /* 1 */
 141     display: table; /* 2 */
 142 }
 143
 144 .ideditor .cf:after {
 145     clear: both;
 146 }
 147 .ideditor {
 148     color-scheme: light;
 149     --bg-color: #fff; /* ~Bootstrap .bg-body */
 150     --bg-color-2: #f6f6f6; /* ~Bootstrap .bg-body-tertiary */
 151     --bg-color-3: #ececec; /* ~Bootstrap .bg-body-secondary */
 152     --active-bg-color: #f1f1f1; /* in the middle between --bg-color-2 and --bg-color-3 */
 153     --transparent-bg-color: #fffc;
 154     --transparent-button-color: #fff4;
 155     --border-color: #ccc; /* ~Bootstrap .border-secondary-subtle */
 156     --transparent-border-color: #cccccc94; /* --border-color with alpha value to match rgba(0, 0, 0, .1) over --bg-color-2 */
 157     --border-color-2: #ddd; /* mix 66% of --border-color with white */
 158     --outset-color: #fcfcfc; /* brighter than --border-color with white */
 159     --shadow-color: #bbb; /* mix 91.5% of --border-color with black */
 160     --text-color: #333;
 161     --link-color: #7092ff;
 162     --link-focus-color: #597be7;
 163     --muted-text-color: #aaa;
 164     --transparent-text-color: #2223;
 165     --transparent-text-emphasis-color: #0007;
 166     --passive-bg-color: #cccccc; /* = --border-color */
 167     --passive-text-color: #888;
 168     --widget-color: #222;
 169     --widget-bg-color: #eee;
 170     --nested-bg-color: #eff2f7;
 171     --nested-highlight-color: #e3e8ef;
 172     --nested-border-color: #ccd5e3;
 173     --selected-bg-color: #e8ebff;
 174     --dark-tooltip-text-color: #fff;
 175     --dark-tooltip-bg-color: #444;
 176
 177     --bg-filter: none;
 178     --mix-blend-mode: normal;
 179     --bg-blend-mode: normal;
 180
 181     --valid-bg-color: #cfc;
 182     --valid-label-color: #afa;
 183     --valid-highlight-color: #8f8;
 184     --valid-border-color: #2f2;
 185     --valid-text-color: #0b0;
 186     --valid-highlight-text-color: #080;
 187     --valid-icon-color: #0f0;
 188
 189     --suggestion-bg-color: #cef;
 190     --suggestion-label-color: #adf;
 191     --suggestion-highlight-color: #8cf;
 192     --suggestion-border-color: #29f;
 193     --suggestion-text-color: #05b;
 194     --suggestion-highlight-text-color: #038;
 195     --suggestion-icon-color: #07f;
 196
 197     --warning-bg-color: #ffc; /* mix 60% of --warning-label-color with white */
 198     --warning-label-color: #ffa;
 199     --warning-highlight-color: #ff8; /* ~saturate(1.5) of --warning-label-color */
 200     --warning-border-color: #fb2;
 201     --warning-text-color: #b15500;
 202     --warning-highlight-text-color: #7f3d00;
 203     --warning-icon-color: #f90;
 204
 205     --error-bg-color: #fcc;
 206     --error-label-color: #faa;
 207     --error-highlight-color: #f88;
 208     --error-border-color: #f22;
 209     --error-text-color: #a00;
 210     --error-highlight-text-color: #800;
 211     --error-icon-color: #f00;
 212 }
 213
 214 .ideditor.theme-dark {
 215         color-scheme: dark;
 216         --bg-color: #212529;
 217         --bg-color-2: #2b3035;
 218         --bg-color-3: #343a40;
 219         --active-bg-color: #30353b;
 220         --passive-bg-color: #41464b;
 221         --transparent-bg-color: #111c;
 222         --transparent-button-color: #3338;
 223         --border-color: #41464b;
 224         --transparent-border-color: #41464b94;
 225         --border-color-2: #32363b;
 226         --outset-color: #54595d;
 227         --shadow-color: #3b4045;
 228         --text-color: #dee2e6;
 229         --link-color: #7b92db;
 230         --link-focus-color: #7e9cff;
 231         --muted-text-color: #6e7276;
 232         --transparent-text-color: #eee3;
 233         --transparent-text-emphasis-color: #fff7;
 234         --widget-color: #e9ecef;
 235         --widget-bg-color: #31373c;
 236         --nested-bg-color: #2d2e33;
 237         --nested-highlight-color: #33363b;
 238         --nested-border-color: #3e434e;
 239         --selected-bg-color: #3b3c49;
 240         --dark-tooltip-text-color: #ccc;
 241         --dark-tooltip-bg-color: #000;
 242
 243         --bg-filter: invert();
 244         --mix-blend-mode: screen;
 245         --bg-blend-mode: difference;
 246
 247         --valid-bg-color: #030;
 248         --valid-label-color: #050;
 249         --valid-highlight-color: #060;
 250         --valid-border-color: #080;
 251         --valid-text-color: #3e3;
 252         --valid-highlight-text-color: #6e6;
 253
 254         --suggestion-bg-color: #023;
 255         --suggestion-label-color: #047;
 256         --suggestion-highlight-color: #036;
 257         --suggestion-border-color: #06d;
 258         --suggestion-text-color: #38e;
 259         --suggestion-highlight-text-color: #6ae;
 260
 261         --warning-bg-color: #332701;
 262         --warning-label-color: #554102;
 263         --warning-highlight-color: #5f4100;
 264         --warning-border-color: #7e3b00;
 265         --warning-text-color: #e98c38;
 266         --warning-highlight-text-color: #f0ac71;
 267
 268         --error-bg-color: #300;
 269         --error-label-color: #500;
 270         --error-highlight-color: #600;
 271         --error-border-color: #800;
 272         --error-text-color: #e33;
 273         --error-highlight-text-color: #e66;
 274     }
 275
 276 @media (prefers-color-scheme: dark) {
 277     .ideditor:not(.theme-light) {
 278         color-scheme: dark;
 279         --bg-color: #212529;
 280         --bg-color-2: #2b3035;
 281         --bg-color-3: #343a40;
 282         --active-bg-color: #30353b;
 283         --passive-bg-color: #41464b;
 284         --transparent-bg-color: #111c;
 285         --transparent-button-color: #3338;
 286         --border-color: #41464b;
 287         --transparent-border-color: #41464b94;
 288         --border-color-2: #32363b;
 289         --outset-color: #54595d;
 290         --shadow-color: #3b4045;
 291         --text-color: #dee2e6;
 292         --link-color: #7b92db;
 293         --link-focus-color: #7e9cff;
 294         --muted-text-color: #6e7276;
 295         --transparent-text-color: #eee3;
 296         --transparent-text-emphasis-color: #fff7;
 297         --widget-color: #e9ecef;
 298         --widget-bg-color: #31373c;
 299         --nested-bg-color: #2d2e33;
 300         --nested-highlight-color: #33363b;
 301         --nested-border-color: #3e434e;
 302         --selected-bg-color: #3b3c49;
 303         --dark-tooltip-text-color: #ccc;
 304         --dark-tooltip-bg-color: #000;
 305
 306         --bg-filter: invert();
 307         --mix-blend-mode: screen;
 308         --bg-blend-mode: difference;
 309
 310         --valid-bg-color: #030;
 311         --valid-label-color: #050;
 312         --valid-highlight-color: #060;
 313         --valid-border-color: #080;
 314         --valid-text-color: #3e3;
 315         --valid-highlight-text-color: #6e6;
 316
 317         --suggestion-bg-color: #023;
 318         --suggestion-label-color: #047;
 319         --suggestion-highlight-color: #036;
 320         --suggestion-border-color: #06d;
 321         --suggestion-text-color: #38e;
 322         --suggestion-highlight-text-color: #6ae;
 323
 324         --warning-bg-color: #332701;
 325         --warning-label-color: #554102;
 326         --warning-highlight-color: #5f4100;
 327         --warning-border-color: #7e3b00;
 328         --warning-text-color: #e98c38;
 329         --warning-highlight-text-color: #f0ac71;
 330
 331         --error-bg-color: #300;
 332         --error-label-color: #500;
 333         --error-highlight-color: #600;
 334         --error-border-color: #800;
 335         --error-text-color: #e33;
 336         --error-highlight-text-color: #e66;
 337     }
 338 }
 339 /* base styles */
 340 .ideditor {
 341     background-color: var(--bg-color);
 342 }
 343
 344 .ideditor .layer-osm path {
 345     fill: none;
 346 }
 347
 348 /* IE/Edge needs these overrides for markers to show up */
 349 .ideditor .layer-osm path.oneway-marker-path          { fill: #000; }
 350 .ideditor .layer-osm path.sided-marker-natural-path   { fill: rgb(170, 170, 170); }
 351 .ideditor .layer-osm path.sided-marker-coastline-path { fill: #77dede; }
 352 .ideditor .layer-osm path.sided-marker-barrier-path   { fill: #ddd; }
 353 .ideditor .layer-osm path.sided-marker-man_made-path  { fill: #fff; }
 354
 355 /* IE/Edge rule for <use> marker style */
 356 .ideditor .layer-osm path.viewfield-marker-path {
 357     fill: #333;
 358     fill-opacity: 0.75;
 359     stroke: #fff;
 360     stroke-width: 0.5px;
 361     stroke-opacity: 0.75;
 362 }
 363 .ideditor .fill-wireframe .layer-osm path.viewfield-marker-path {   /* IE/Edge rule for <use> marker style */
 364     fill: none;
 365 }
 366
 367 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
 368 .ideditor .layer-osm use.icon path { fill: #333; }                       /* FF svg Maki icons */
 369 .ideditor .layer-osm .turn use path { fill: #000; }                      /* FF turn restriction icons */
 370 .ideditor #turn-only-shape2, .ideditor #turn-only-u-shape2 { fill: #7092ff; }      /* FF turn-only, turn-only-u */
 371 .ideditor #turn-no-shape2, .ideditor #turn-no-u-shape2     { fill: #e06d5f; }      /* FF turn-no, turn-no-u */
 372 .ideditor #turn-yes-shape2, .ideditor #turn-yes-u-shape2   { fill: #8cd05f; }      /* FF turn-yes, turn-yes-u */
 373
 374
 375 /* No interactivity except what we specifically allow */
 376 .ideditor .data-layer.osm *,
 377 .ideditor .data-layer.notes *,
 378 .ideditor .data-layer.keepRight * {
 379     pointer-events: none;
 380 }
 381
 382 .ideditor .lasso .main-map {
 383     pointer-events: visibleStroke;
 384 }
 385
 386
 387 /* `.target` objects are interactive */
 388 /* They can be picked up, clicked, hovered, or things can connect to them */
 389 .ideditor .qaItem.target,
 390 .ideditor .note.target,
 391 .ideditor .node.target,
 392 .ideditor .turn .target {
 393     pointer-events: fill;
 394     fill-opacity: 0.8;
 395     fill: currentColor;
 396     stroke: none;
 397 }
 398
 399 .ideditor .way.target {
 400     pointer-events: stroke;
 401     fill: none;
 402     stroke-width: 12;
 403     stroke-opacity: 0.8;
 404     stroke: currentColor;
 405     stroke-linecap: round;
 406     stroke-linejoin: round;
 407 }
 408
 409 .ideditor[pointer='pen'] .way.target {
 410     stroke-width: 18;
 411 }
 412 .ideditor[pointer='touch'] .way.target {
 413     stroke-width: 32;
 414 }
 415 .ideditor[pointer='touch'] .node.vertex.target {
 416     pointer-events: painted;
 417     stroke: currentColor;
 418     stroke-width: 10;
 419 }
 420
 421 /* `.target-nope` objects are explicitly forbidden to join to */
 422 .ideditor .surface:not(.nope-disabled) .node.target.target-nope,
 423 .ideditor .surface:not(.nope-disabled) .way.target.target-nope {
 424     cursor: not-allowed;
 425 }
 426
 427
 428 /* `.active` objects (currently being drawn or dragged) are not interactive */
 429 /* This is important to allow the events to drop through to whatever is */
 430 /* below them on the map, so you can still hover and connect to other things. */
 431 .ideditor .layer-osm .active {
 432     pointer-events: none !important;
 433 }
 434
 435 /* points, notes & QA */
 436
 437 /* points, notes, markers */
 438 .ideditor g.qaItem .stroke,
 439 .ideditor g.note .stroke {
 440     stroke: #222;
 441     stroke-width: 1;
 442     fill: #222;
 443     opacity: 0.6;
 444 }
 445
 446 .ideditor g.qaItem.active .stroke,
 447 .ideditor g.note.active .stroke {
 448     stroke: #222;
 449     stroke-width: 1;
 450     fill: #222;
 451     opacity: 0.8;
 452 }
 453
 454 .ideditor g.point .stroke {
 455     stroke: #444;
 456     stroke-width: 1;
 457     fill: #fff;
 458 }
 459
 460
 461 .ideditor g.qaItem .shadow,
 462 .ideditor g.point .shadow,
 463 .ideditor g.note .shadow {
 464     fill: none;
 465     stroke: #f6634f;
 466     stroke-width: 16;
 467     stroke-opacity: 0;
 468 }
 469
 470 .ideditor g.qaItem.hover:not(.selected) .shadow,
 471 .ideditor g.note.hover:not(.selected) .shadow,
 472 .ideditor g.point.related:not(.selected) .shadow,
 473 .ideditor g.point.hover:not(.selected) .shadow {
 474     stroke-opacity: 0.5;
 475 }
 476
 477 .ideditor g.qaItem.selected .shadow,
 478 .ideditor g.note.selected .shadow,
 479 .ideditor g.point.selected .shadow {
 480     stroke-opacity: 0.7;
 481 }
 482
 483 /* g.note ellipse.stroke, */
 484 .ideditor g.point ellipse.stroke {
 485     display: none;
 486 }
 487 .ideditor.mode-drag-note g.note.active ellipse.stroke,
 488 .ideditor.mode-drag-node g.point.active ellipse.stroke {
 489     display: block;
 490 }
 491
 492
 493 /* vertices and midpoints */
 494 .ideditor g.vertex .fill {
 495     fill: #000;
 496 }
 497 .ideditor g.vertex .stroke {
 498     stroke: #666;
 499     stroke-width: 1;
 500     fill: white;
 501 }
 502 .ideditor g.vertex.shared .stroke {
 503     fill: #bbb;
 504 }
 505 .ideditor g.midpoint .fill {
 506     fill: #eee;
 507     stroke: #444;
 508     stroke-opacity: .6;
 509     opacity: .7;
 510 }
 511
 512 .ideditor g.vertex .shadow,
 513 .ideditor g.midpoint .shadow {
 514     stroke-width: 6;
 515     fill: #f6634f;
 516     fill-opacity: 0;
 517 }
 518
 519 .ideditor g.vertex.related:not(.selected) .shadow,
 520 .ideditor g.vertex.hover:not(.selected) .shadow,
 521 .ideditor g.midpoint.related:not(.selected) .shadow,
 522 .ideditor g.midpoint.hover:not(.selected) .shadow {
 523     fill-opacity: 0.5;
 524 }
 525
 526 .ideditor g.vertex.selected .shadow {
 527     fill-opacity: 0.7;
 528 }
 529
 530
 531 /* lines */
 532 .ideditor .preset-icon .icon.iD-other-line {
 533     color: #989898;
 534 }
 535 .ideditor .preset-icon-container path.line.casing {
 536     stroke: #afafaf;
 537 }
 538
 539 .ideditor path.line {
 540     stroke-linecap: round;
 541     stroke-linejoin: round;
 542 }
 543
 544 .ideditor path.stroke {
 545     stroke: #000;
 546     stroke-width: 4;
 547 }
 548
 549 .ideditor path.shadow {
 550     stroke: #f6634f;
 551     stroke-width: 16;
 552     stroke-opacity: 0;
 553     stroke-linecap: round;
 554     stroke-linejoin: round;
 555 }
 556
 557 .ideditor path.shadow.related:not(.selected),
 558 .ideditor path.shadow.hover:not(.selected) {
 559     stroke-opacity: 0.4;
 560 }
 561
 562 .ideditor path.shadow.selected {
 563     stroke-opacity: 0.7;
 564 }
 565
 566 .ideditor path.line.stroke {
 567     stroke: #fff;
 568     stroke-width: 2;
 569 }
 570
 571
 572 /* Labels / Markers */
 573 .ideditor text {
 574     font-size: 10px;
 575     color: #222;
 576     opacity: 1;
 577 }
 578
 579 .ideditor .oneway .textpath.tag-waterway {
 580     fill: #002F35;
 581 }
 582
 583 .ideditor .onewaygroup path.oneway,
 584 .ideditor .viewfieldgroup path.viewfield,
 585 .ideditor .sidedgroup path.sided {
 586     stroke-width: 6px;
 587 }
 588
 589 .ideditor text.arealabel-halo,
 590 .ideditor text.linelabel-halo,
 591 .ideditor text.pointlabel-halo,
 592 .ideditor text.arealabel,
 593 .ideditor text.linelabel,
 594 .ideditor text.pointlabel {
 595     dominant-baseline: middle;
 596     text-anchor: middle;
 597     font-size: 12px;
 598     font-weight: bold;
 599     fill: #333;
 600     transition: opacity 100ms linear;
 601 }
 602
 603 .ideditor .labels-group.halo text {
 604     opacity: 0.7;
 605     stroke: #fff;
 606     stroke-width: 5px;
 607     stroke-miterlimit: 1;
 608 }
 609
 610 .ideditor text.nolabel {
 611     opacity: 0 !important;
 612 }
 613 .ideditor text.point {
 614     font-size: 10px;
 615 }
 616
 617 .ideditor .icon.areaicon-halo {
 618     opacity: 0.6;
 619     stroke: #999;
 620     stroke-width: 2px;
 621     stroke-miterlimit: 1;
 622 }
 623 .ideditor .icon.areaicon {
 624     fill: #222;
 625     opacity: 0.8;
 626 }
 627
 628
 629 /* Wikidata-tagged */
 630 .ideditor g.point.tag-wikidata path.stroke,
 631 .ideditor g.vertex.tag-wikidata circle.stroke {
 632     stroke-width: 2px;
 633     stroke: #666;
 634     fill: #eee;
 635 }
 636 .ideditor g.point.tag-wikidata .icon,
 637 .ideditor g.vertex.tag-wikidata .icon {
 638     color: #666;
 639 }
 640
 641 /* Selected Members */
 642 .ideditor g.vertex.selected-member .shadow,
 643 .ideditor g.point.selected-member .shadow,
 644 .ideditor path.shadow.selected-member {
 645     stroke-opacity: 0.95;
 646     stroke: #FFDE70;
 647 }
 648
 649 /* Highlighting */
 650 .ideditor g.point.highlighted .shadow,
 651 .ideditor path.shadow.highlighted {
 652     stroke-opacity: 0.95;
 653     stroke: #7092ff;
 654 }
 655 .ideditor g.vertex.highlighted .shadow {
 656     stroke-width: 7;
 657     stroke-opacity: 0.95;
 658     stroke: #7092ff;
 659 }
 660
 661 /* Turn Restrictions */
 662 .ideditor .points-group.turns g.turn rect,
 663 .ideditor .points-group.turns g.turn circle {
 664     fill: none;
 665 }
 666
 667 /* Turn restriction paths and vertices */
 668 .ideditor .surface.tr .way.target,
 669 .ideditor .surface.tr path.shadow.selected,
 670 .ideditor .surface.tr path.shadow.related {
 671     stroke-width: 25px;
 672 }
 673
 674 .ideditor .surface.tr path.shadow.selected,
 675 .ideditor .surface.tr path.shadow.related,
 676 .ideditor .surface.tr g.vertex.selected .shadow,
 677 .ideditor .surface.tr g.vertex.related .shadow {
 678     stroke-opacity: 0.7;
 679     stroke: #777;
 680 }
 681 .ideditor .surface.tr path.shadow.related.allow,
 682 .ideditor .surface.tr g.vertex.related.allow .shadow {
 683     stroke: #5b3;
 684 }
 685 .ideditor .surface.tr path.shadow.related.restrict,
 686 .ideditor .surface.tr g.vertex.related.restrict .shadow {
 687     stroke: #d53;
 688 }
 689 .ideditor .surface.tr path.shadow.related.only,
 690 .ideditor .surface.tr g.vertex.related.only .shadow {
 691     stroke: #68f;
 692 }
 693
 694 /* Visual Diffs
 695 ------------------
 696 `highlight-edited` - visual diff activated
 697 `added` - entity was created by the user
 698 `moved` - node has different coordinates
 699 `geometry-edited` - way has different nodes
 700 `segment-edited` - one or both adjacents nodes moved
 701 `retagged` - some tagging change has occurred
 702 */
 703
 704 /* Vertex visual diffs */
 705 .ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow,
 706 .ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow,
 707 .ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
 708     fill-opacity: 0.8;
 709 }
 710 .ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow {
 711     fill: rgb(133, 255, 103);
 712 }
 713 .ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow {
 714     fill: #fcde5a;
 715 }
 716 .ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
 717     fill: rgb(255, 126, 46);
 718 }
 719
 720 /* Point visual diffs */
 721 .ideditor .highlight-edited g.points g.node.point.added > path.shadow,
 722 .ideditor .highlight-edited g.points g.node.point.retagged > path.shadow,
 723 .ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
 724     stroke-opacity: 0.8;
 725     stroke-width: 10;
 726 }
 727 .ideditor .highlight-edited g.points g.node.point.added > path.shadow {
 728     stroke: rgb(133, 255, 103);
 729 }
 730 .ideditor .highlight-edited g.points g.node.point.retagged > path.shadow {
 731     stroke: #fcde5a;
 732 }
 733 .ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
 734     stroke: rgb(255, 126, 46);
 735 }
 736
 737 /* Line/area segment visual diffs
 738 - segments are rendered on top of the ways for convenience and to differentiate
 739   them from entire line diffs, so make them thin
 740 */
 741 .ideditor .highlight-edited g.lines > path.line.segment-edited,
 742 .ideditor .highlight-edited g.areas > path.area.segment-edited {
 743     stroke: rgb(255, 126, 46);
 744     stroke-dasharray: 10, 3;
 745     stroke-width: 1.5 !important;
 746     stroke-opacity: 1;
 747 }
 748
 749 /* Entire line/area visual diffs */
 750 .ideditor .highlight-edited path.line.shadow.added,
 751 .ideditor .highlight-edited path.line.shadow.retagged,
 752 .ideditor .highlight-edited path.line.shadow.geometry-edited,
 753 .ideditor .highlight-edited path.area.shadow.added,
 754 .ideditor .highlight-edited path.area.shadow.retagged,
 755 .ideditor .highlight-edited path.area.shadow.geometry-edited {
 756     stroke-opacity: 0.6;
 757 }
 758 .ideditor .highlight-edited.fill-wireframe path.line.shadow.added,
 759 .ideditor .highlight-edited.fill-wireframe path.line.shadow.retagged,
 760 .ideditor .highlight-edited.fill-wireframe path.line.shadow.geometry-edited,
 761 .ideditor .highlight-edited.fill-wireframe path.area.shadow.added,
 762 .ideditor .highlight-edited.fill-wireframe path.area.shadow.retagged,
 763 .ideditor .highlight-edited.fill-wireframe path.area.shadow.geometry-edited {
 764     stroke-width: 3;
 765 }
 766 .ideditor .highlight-edited path.line.shadow.added,
 767 .ideditor .highlight-edited path.area.shadow.added {
 768     stroke: rgb(133, 255, 103);
 769 }
 770 .ideditor .highlight-edited path.area.shadow.retagged,
 771 .ideditor .highlight-edited path.line.shadow.retagged {
 772     stroke: #fcde5a;
 773 }
 774 .ideditor .highlight-edited path.line.shadow.geometry-edited,
 775 .ideditor .highlight-edited path.area.shadow.geometry-edited {
 776     stroke: rgb(255, 126, 46);
 777 }
 778
 779 /* Default - light gray */
 780 .ideditor path.area.stroke {
 781     stroke: rgb(170, 170, 170);
 782     stroke-width: 1;
 783 }
 784 .ideditor path.area.fill {
 785     stroke-width: 0;
 786     stroke: rgba(255, 255, 255, 0.3);
 787     fill: rgba(255, 255, 255, 0.3);
 788     fill-rule: evenodd;
 789 }
 790 .ideditor .preset-icon-fill path.fill {
 791     stroke: rgb(170, 170, 170);
 792     fill: rgba(170, 170, 170, 0.3);
 793 }
 794
 795 .ideditor path.shadow.old-multipolygon,
 796 .ideditor path.stroke.old-multipolygon {
 797     stroke-dasharray: 100, 5;
 798     stroke-linecap: butt;
 799 }
 800
 801
 802 /* Green things */
 803 .ideditor path.stroke.tag-barrier-hedge,
 804 .ideditor path.stroke.tag-landuse-flowerbed,
 805 .ideditor path.stroke.tag-landuse-forest,
 806 .ideditor path.stroke.tag-landuse-grass,
 807 .ideditor path.stroke.tag-landuse-recreation_ground,
 808 .ideditor path.stroke.tag-landuse-village_green,
 809 .ideditor path.stroke.tag-leisure-garden,
 810 .ideditor path.stroke.tag-leisure-golf_course,
 811 .ideditor path.stroke.tag-leisure-nature_reserve,
 812 .ideditor path.stroke.tag-leisure-park,
 813 .ideditor path.stroke.tag-leisure-pitch,
 814 .ideditor path.stroke.tag-leisure-track,
 815 .ideditor path.stroke.tag-natural,
 816 .ideditor path.stroke.tag-natural-wood,
 817 .ideditor path.stroke.tag-golf-tee,
 818 .ideditor path.stroke.tag-golf-fairway,
 819 .ideditor path.stroke.tag-golf-rough,
 820 .ideditor path.stroke.tag-golf-green {
 821     stroke: rgb(140, 208, 95);
 822 }
 823 .ideditor path.fill.tag-barrier-hedge,
 824 .ideditor path.fill.tag-landuse-flowerbed,
 825 .ideditor path.fill.tag-landuse-forest,
 826 .ideditor path.fill.tag-landuse-grass,
 827 .ideditor path.fill.tag-landuse-recreation_ground,
 828 .ideditor path.fill.tag-landuse-village_green,
 829 .ideditor path.fill.tag-leisure-garden,
 830 .ideditor path.fill.tag-leisure-golf_course,
 831 .ideditor path.fill.tag-leisure-nature_reserve,
 832 .ideditor path.fill.tag-leisure-park,
 833 .ideditor path.fill.tag-leisure-pitch,
 834 .ideditor path.fill.tag-leisure-track,
 835 .ideditor path.fill.tag-natural,
 836 .ideditor path.fill.tag-natural-wood,
 837 .ideditor path.fill.tag-golf-tee,
 838 .ideditor path.fill.tag-golf-fairway,
 839 .ideditor path.fill.tag-golf-rough,
 840 .ideditor path.fill.tag-golf-green {
 841     stroke: rgba(140, 208, 95, 0.3);
 842     fill: rgba(140, 208, 95, 0.3);
 843 }
 844 .ideditor .pattern-color-forest,
 845 .ideditor .pattern-color-forest_broadleaved,
 846 .ideditor .pattern-color-forest_needleleaved,
 847 .ideditor .pattern-color-forest_leafless,
 848 .ideditor .pattern-color-wood,
 849 .ideditor .pattern-color-grass {
 850     fill: rgba(140, 208, 95, 0.3);
 851 }
 852
 853
 854 /* Blue things */
 855 .ideditor path.stroke.tag-amenity-fountain,
 856 .ideditor path.stroke.tag-leisure-swimming_pool,
 857 .ideditor path.stroke.tag-natural-bay,
 858 .ideditor path.stroke.tag-natural-strait,
 859 .ideditor path.stroke.tag-natural-water {
 860     stroke: rgb(119, 211, 222);
 861 }
 862 .ideditor path.fill.tag-amenity-fountain,
 863 .ideditor path.fill.tag-leisure-swimming_pool,
 864 .ideditor path.fill.tag-natural-bay,
 865 .ideditor path.fill.tag-natural-strait,
 866 .ideditor path.fill.tag-natural-water {
 867     stroke: rgba(119, 211, 222, 0.3);
 868     fill: rgba(119, 211, 222, 0.3);
 869 }
 870 .ideditor .pattern-color-waves,
 871 .ideditor .pattern-color-water_standing,
 872 .ideditor .pattern-color-pond {
 873     fill: rgba(119, 211, 222, 0.3);
 874 }
 875
 876
 877 /* Yellow things */
 878 .ideditor path.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
 879 .ideditor path.stroke.tag-leisure-pitch.tag-sport-baseball,
 880 .ideditor path.stroke.tag-leisure-pitch.tag-sport-softball,
 881 .ideditor path.stroke.tag-leisure-track,
 882 .ideditor path.stroke.tag-natural-beach,
 883 .ideditor path.stroke.tag-natural-sand,
 884 .ideditor path.stroke.tag-natural-scrub,
 885 .ideditor path.stroke.tag-amenity-childcare,
 886 .ideditor path.stroke.tag-amenity-kindergarten,
 887 .ideditor path.stroke.tag-amenity-school,
 888 .ideditor path.stroke.tag-amenity-college,
 889 .ideditor path.stroke.tag-amenity-university,
 890 .ideditor path.stroke.tag-amenity-research_institute {
 891     stroke: rgba(255, 255, 148, 0.75);
 892 }
 893 .ideditor path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
 894 .ideditor path.fill.tag-leisure-pitch.tag-sport-baseball,
 895 .ideditor path.fill.tag-leisure-pitch.tag-sport-softball,
 896 .ideditor path.fill.tag-leisure-track,
 897 .ideditor path.fill.tag-natural-beach,
 898 .ideditor path.fill.tag-natural-sand,
 899 .ideditor path.fill.tag-natural-scrub,
 900 .ideditor path.fill.tag-amenity-childcare,
 901 .ideditor path.fill.tag-amenity-kindergarten,
 902 .ideditor path.fill.tag-amenity-school,
 903 .ideditor path.fill.tag-amenity-college,
 904 .ideditor path.fill.tag-amenity-university,
 905 .ideditor path.fill.tag-amenity-research_institute {
 906     stroke: rgba(255, 255, 148, 0.25);
 907     fill: rgba(255, 255, 148, 0.25);
 908 }
 909 .ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
 910 .ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-baseball,
 911 .ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-softball,
 912 .ideditor .preset-icon-fill path.area.stroke.tag-leisure-track,
 913 .ideditor .preset-icon-fill path.area.stroke.tag-natural-beach,
 914 .ideditor .preset-icon-fill path.area.stroke.tag-natural-sand,
 915 .ideditor .preset-icon-fill path.area.stroke.tag-natural-scrub,
 916 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-childcare,
 917 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-kindergarten,
 918 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-school,
 919 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-college,
 920 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-university,
 921 .ideditor .preset-icon-fill path.area.stroke.tag-amenity-research_institute {
 922     stroke: rgb(232, 232, 0);
 923 }
 924 .ideditor .pattern-color-beach,
 925 .ideditor .pattern-color-sand,
 926 .ideditor .pattern-color-scrub {
 927     fill: rgba(255, 255, 148, 0.2);
 928 }
 929
 930
 931 /* Gold things */
 932 .ideditor path.stroke.tag-landuse-residential,
 933 .ideditor path.stroke.tag-status-construction {
 934     stroke: rgb(196, 189, 25);
 935 }
 936 .ideditor path.fill.tag-landuse-residential,
 937 .ideditor path.fill.tag-status-construction {
 938     stroke: rgba(196, 189, 25, 0.3);
 939     fill: rgba(196, 189, 25, 0.3);
 940 }
 941 .ideditor .pattern-color-construction {
 942     fill: rgba(196, 189, 25, 0.3);
 943 }
 944
 945
 946 /* Orange things */
 947 .ideditor path.stroke.tag-landuse-retail,
 948 .ideditor path.stroke.tag-landuse-commercial,
 949 .ideditor path.stroke.tag-landuse-landfill,
 950 .ideditor path.stroke.tag-military,
 951 .ideditor path.stroke.tag-landuse-military {
 952     stroke: rgb(214, 136, 26);
 953 }
 954 .ideditor path.fill.tag-landuse-retail,
 955 .ideditor path.fill.tag-landuse-commercial,
 956 .ideditor path.fill.tag-landuse-landfill,
 957 .ideditor path.fill.tag-military,
 958 .ideditor path.fill.tag-landuse-military {
 959     stroke: rgba(214, 136, 26, 0.3);
 960     fill: rgba(214, 136, 26, 0.3);
 961 }
 962 .ideditor .pattern-color-landfill {
 963     fill: rgba(214, 136, 26, 0.3);
 964 }
 965
 966
 967 /* Pink things */
 968 .ideditor path.stroke.tag-landuse-industrial,
 969 .ideditor path.stroke.tag-power-plant {
 970     stroke: rgb(228, 164, 245);
 971 }
 972 .ideditor path.fill.tag-landuse-industrial,
 973 .ideditor path.fill.tag-power-plant {
 974     stroke: rgba(228, 164, 245, 0.3);
 975     fill: rgba(228, 164, 245, 0.3);
 976 }
 977
 978
 979 /* Teal things */
 980 .ideditor path.stroke.tag-natural-wetland {
 981     stroke: rgb(153, 225, 170);
 982 }
 983 .ideditor path.fill.tag-natural-wetland {
 984     stroke: rgba(153, 225, 170, 0.3);
 985     fill: rgba(153, 225, 170, 0.3);
 986 }
 987 .ideditor .preset-icon-fill path.area.fill.tag-natural-wetland {
 988     fill: rgba(153, 225, 170, 0.2);
 989 }
 990 .ideditor .pattern-color-wetland,
 991 .ideditor .pattern-color-wetland_marsh,
 992 .ideditor .pattern-color-wetland_swamp,
 993 .ideditor .pattern-color-wetland_bog,
 994 .ideditor .pattern-color-wetland_reedbed {
 995     fill: rgba(153, 225, 170, 0.3);
 996 }
 997
 998
 999 /* Light Green things */
1000 .ideditor path.stroke.tag-landuse-cemetery,
1001 .ideditor path.stroke.tag-landuse-farmland,
1002 .ideditor path.stroke.tag-landuse-grass.tag-golf-green,
1003 .ideditor path.stroke.tag-landuse-meadow,
1004 .ideditor path.stroke.tag-landuse-orchard,
1005 .ideditor path.stroke.tag-landuse-vineyard {
1006     stroke: rgb(191, 232, 63);
1007 }
1008 .ideditor path.fill.tag-landuse-cemetery,
1009 .ideditor path.fill.tag-landuse-farmland,
1010 .ideditor path.fill.tag-landuse-grass.tag-golf-green,
1011 .ideditor path.fill.tag-landuse-meadow,
1012 .ideditor path.fill.tag-landuse-orchard,
1013 .ideditor path.fill.tag-landuse-vineyard {
1014     stroke: rgba(191, 232, 63, 0.3);
1015     fill: rgba(191, 232, 63, 0.3);
1016 }
1017 .ideditor .preset-icon-fill path.area.fill.tag-landuse-cemetery,
1018 .ideditor .preset-icon-fill path.area.fill.tag-landuse-farmland,
1019 .ideditor .preset-icon-fill path.area.fill.tag-landuse-grass.tag-golf-green,
1020 .ideditor .preset-icon-fill path.area.fill.tag-landuse-meadow,
1021 .ideditor .preset-icon-fill path.area.fill.tag-landuse-orchard,
1022 .ideditor .preset-icon-fill path.area.fill.tag-landuse-vineyard {
1023     fill: rgba(191, 232, 63, 0.4);
1024 }
1025 .ideditor .pattern-color-cemetery,
1026 .ideditor .pattern-color-cemetery_buddhist,
1027 .ideditor .pattern-color-cemetery_christian,
1028 .ideditor .pattern-color-cemetery_jewish,
1029 .ideditor .pattern-color-cemetery_muslim,
1030 .ideditor .pattern-color-farmland,
1031 .ideditor .pattern-color-golf_green,
1032 .ideditor .pattern-color-meadow,
1033 .ideditor .pattern-color-orchard,
1034 .ideditor .pattern-color-vineyard {
1035     fill: rgba(191, 232, 63, 0.3);
1036 }
1037
1038
1039 /* Tan things */
1040 .ideditor path.stroke.tag-landuse-farmyard,
1041 .ideditor path.stroke.tag-leisure-horse_riding {
1042     stroke: rgb(245, 220, 186);
1043 }
1044 .ideditor path.fill.tag-landuse-farmyard,
1045 .ideditor path.fill.tag-leisure-horse_riding {
1046     stroke: rgba(245, 220, 186, 0.3);
1047     fill: rgba(245, 220, 186, 0.3);
1048 }
1049 .ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard
1050 .preset-icon-fill path.area.stroke.tag-leisure-horse_riding {
1051     stroke: rgb(226, 177, 111);
1052 }
1053 .ideditor .pattern-color-farmyard {
1054     fill: rgba(245, 220, 186, 0.3);
1055 }
1056
1057
1058 /* Dark Gray things */
1059 .ideditor path.stroke.tag-amenity-parking,
1060 .ideditor path.stroke.tag-landuse-railway,
1061 .ideditor path.stroke.tag-landuse-quarry,
1062 .ideditor path.stroke.tag-leisure-pitch.tag-sport-basketball,
1063 .ideditor path.stroke.tag-leisure-pitch.tag-sport-skateboard,
1064 .ideditor path.stroke.tag-man_made-adit,
1065 .ideditor path.stroke.tag-man_made-groyne,
1066 .ideditor path.stroke.tag-man_made-breakwater,
1067 .ideditor path.stroke.tag-natural-bare_rock,
1068 .ideditor path.stroke.tag-natural-cave_entrance,
1069 .ideditor path.stroke.tag-natural-cliff,
1070 .ideditor path.stroke.tag-natural-rock,
1071 .ideditor path.stroke.tag-natural-scree,
1072 .ideditor path.stroke.tag-natural-stone,
1073 .ideditor path.stroke.tag-natural-shingle,
1074 .ideditor path.stroke.tag-waterway-dam,
1075 .ideditor path.stroke.tag-waterway-weir {
1076     stroke: rgb(170, 170, 170);
1077 }
1078 .ideditor path.fill.tag-amenity-parking,
1079 .ideditor path.fill.tag-landuse-railway,
1080 .ideditor path.fill.tag-landuse-quarry,
1081 .ideditor path.fill.tag-leisure-pitch.tag-sport-basketball,
1082 .ideditor path.fill.tag-leisure-pitch.tag-sport-skateboard,
1083 .ideditor path.fill.tag-man_made-adit,
1084 .ideditor path.fill.tag-man_made-groyne,
1085 .ideditor path.fill.tag-man_made-breakwater,
1086 .ideditor path.fill.tag-natural-bare_rock,
1087 .ideditor path.fill.tag-natural-cliff,
1088 .ideditor path.fill.tag-natural-cave_entrance,
1089 .ideditor path.fill.tag-natural-rock,
1090 .ideditor path.fill.tag-natural-scree,
1091 .ideditor path.fill.tag-natural-stone,
1092 .ideditor path.fill.tag-natural-shingle,
1093 .ideditor path.fill.tag-waterway-dam,
1094 .ideditor path.fill.tag-waterway-weir {
1095     stroke: rgba(140, 140, 140, 0.5);
1096     fill: rgba(140, 140, 140, 0.5);
1097 }
1098 .ideditor .pattern-color-quarry {
1099     fill: rgba(140, 140, 140, 0.5);
1100 }
1101
1102
1103 /* Light gray overrides */
1104 .ideditor path.stroke.tag-natural-cave_entrance,
1105 .ideditor path.stroke.tag-natural-glacier {
1106     stroke: rgb(170, 170, 170);
1107 }
1108 .ideditor path.fill.tag-natural-cave_entrance,
1109 .ideditor path.fill.tag-natural-glacier {
1110     stroke: rgba(255, 255, 255, 0.3);
1111     fill: rgba(255, 255, 255, 0.3);
1112 }
1113 .ideditor .preset-icon-fill path.fill.tag-natural-cave_entrance,
1114 .ideditor .preset-icon-fill path.fill.tag-natural-glacier {
1115     stroke: rgb(170, 170, 170);
1116     fill: rgba(170, 170, 170, 0.3);
1117 }
1118 .ideditor preset-icon-container
1119
1120
1121 .preset-icon .icon.tag-highway.other-line {
1122     color: #fff;
1123     fill: #777;
1124 }
1125 .ideditor path.line.casing.tag-highway {
1126     stroke: #444;
1127 }
1128 .ideditor path.line.stroke.tag-highway {
1129     stroke: #ccc;
1130 }
1131
1132 /* wide highways */
1133 .ideditor path.line.shadow.tag-highway {
1134     stroke-width: 20;
1135 }
1136 .ideditor path.line.casing.tag-highway {
1137     stroke-width: 10;
1138 }
1139 .ideditor path.line.stroke.tag-highway {
1140     stroke-width: 8;
1141 }
1142 .ideditor .low-zoom path.line.shadow.tag-highway {
1143     stroke-width: 16;
1144 }
1145 .ideditor .low-zoom path.line.casing.tag-highway {
1146     stroke-width: 7;
1147 }
1148 .ideditor .low-zoom path.line.stroke.tag-highway {
1149     stroke-width: 5;
1150 }
1151
1152 .ideditor .preset-icon .icon.tag-highway-motorway,
1153 .ideditor .preset-icon .icon.tag-highway-motorway_link {
1154     color: #CF2081;
1155     fill: #70372f;
1156 }
1157 .ideditor path.line.stroke.tag-highway-motorway,
1158 .ideditor path.line.stroke.tag-highway-motorway_link,
1159 .ideditor path.line.stroke.tag-motorway {
1160     stroke: #CF2081;
1161 }
1162 .ideditor path.line.casing.tag-highway-motorway,
1163 .ideditor path.line.casing.tag-highway-motorway_link,
1164 .ideditor path.line.casing.tag-motorway {
1165     stroke: #70372f;
1166 }
1167
1168 .ideditor .preset-icon .icon.tag-highway-trunk,
1169 .ideditor .preset-icon .icon.tag-highway-trunk_link {
1170     color: #DD2F22;
1171     fill: #70372f;
1172 }
1173 .ideditor path.line.stroke.tag-highway-trunk,
1174 .ideditor path.line.stroke.tag-highway-trunk_link,
1175 .ideditor path.line.stroke.tag-trunk {
1176     stroke: #DD2F22;
1177 }
1178 .ideditor path.line.casing.tag-highway-trunk,
1179 .ideditor path.line.casing.tag-highway-trunk_link,
1180 .ideditor path.line.casing.tag-trunk {
1181     stroke: #70372f;
1182 }
1183
1184 .ideditor .preset-icon .icon.tag-highway-primary,
1185 .ideditor .preset-icon .icon.tag-highway-primary_link {
1186     color: #F99806;
1187     fill: #70372f;
1188 }
1189 .ideditor path.line.stroke.tag-highway-primary,
1190 .ideditor path.line.stroke.tag-highway-primary_link,
1191 .ideditor path.line.stroke.tag-primary {
1192     stroke: #F99806;
1193 }
1194 .ideditor path.line.casing.tag-highway-primary,
1195 .ideditor path.line.casing.tag-highway-primary_link,
1196 .ideditor path.line.casing.tag-primary {
1197     stroke: #70372f;
1198 }
1199
1200 .ideditor .preset-icon .icon.tag-highway-secondary,
1201 .ideditor .preset-icon .icon.tag-highway-secondary_link {
1202     color: #F3F312;
1203     fill: #70372f;
1204 }
1205 .ideditor path.line.stroke.tag-highway-secondary,
1206 .ideditor path.line.stroke.tag-highway-secondary_link,
1207 .ideditor path.line.stroke.tag-secondary {
1208     stroke: #F3F312;
1209 }
1210 .ideditor path.line.casing.tag-highway-secondary,
1211 .ideditor path.line.casing.tag-highway-secondary_link,
1212 .ideditor path.line.casing.tag-secondary {
1213     stroke: #70372f;
1214 }
1215
1216 .ideditor .preset-icon .icon.tag-highway-tertiary,
1217 .ideditor .preset-icon .icon.tag-highway-tertiary_link {
1218     color: #FFF9B3;
1219     fill: #70372f;
1220 }
1221 .ideditor path.line.stroke.tag-highway-tertiary,
1222 .ideditor path.line.stroke.tag-highway-tertiary_link,
1223 .ideditor path.line.stroke.tag-tertiary {
1224     stroke: #FFF9B3;
1225 }
1226 .ideditor path.line.casing.tag-highway-tertiary,
1227 .ideditor path.line.casing.tag-highway-tertiary_link,
1228 .ideditor path.line.casing.tag-tertiary {
1229     stroke: #70372f;
1230 }
1231
1232 .ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway,
1233 .ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway_link {
1234     color: #58a9ed;
1235     fill: #2c5476;
1236 }
1237 .ideditor .legacy-carto path.line.stroke.tag-highway-motorway,
1238 .ideditor .legacy-carto path.line.stroke.tag-highway-motorway_link,
1239 .ideditor .legacy-carto path.line.stroke.tag-motorway {
1240     stroke: #58a9ed;
1241 }
1242 .ideditor .legacy-carto path.line.casing.tag-highway-motorway,
1243 .ideditor .legacy-carto path.line.casing.tag-highway-motorway_link,
1244 .ideditor .legacy-carto path.line.casing.tag-motorway {
1245     stroke: #2c5476;
1246 }
1247
1248 .ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk,
1249 .ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk_link {
1250     color: #8cd05f;
1251     fill: #46682f;
1252 }
1253 .ideditor .legacy-carto path.line.stroke.tag-highway-trunk,
1254 .ideditor .legacy-carto path.line.stroke.tag-highway-trunk_link,
1255 .ideditor .legacy-carto path.line.stroke.tag-trunk {
1256     stroke: #8cd05f;
1257 }
1258 .ideditor .legacy-carto path.line.casing.tag-highway-trunk,
1259 .ideditor .legacy-carto path.line.casing.tag-highway-trunk_link,
1260 .ideditor .legacy-carto path.line.casing.tag-trunk {
1261     stroke: #46682f;
1262 }
1263
1264 .ideditor .legacy-carto .preset-icon .icon.tag-highway-primary,
1265 .ideditor .legacy-carto .preset-icon .icon.tag-highway-primary_link {
1266     color: #e06d5f;
1267     fill: #70372f;
1268 }
1269 .ideditor .legacy-carto path.line.stroke.tag-highway-primary,
1270 .ideditor .legacy-carto path.line.stroke.tag-highway-primary_link,
1271 .ideditor .legacy-carto path.line.stroke.tag-primary {
1272     stroke: #e06d5f;
1273 }
1274 .ideditor .legacy-carto path.line.casing.tag-highway-primary,
1275 .ideditor .legacy-carto path.line.casing.tag-highway-primary_link,
1276 .ideditor .legacy-carto path.line.casing.tag-primary {
1277     stroke: #70372f;
1278 }
1279
1280 .ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary,
1281 .ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary_link {
1282     color: #eab056;
1283     fill: #75582b;
1284 }
1285 .ideditor .legacy-carto path.line.stroke.tag-highway-secondary,
1286 .ideditor .legacy-carto path.line.stroke.tag-highway-secondary_link,
1287 .ideditor .legacy-carto path.line.stroke.tag-secondary {
1288     stroke: #eab056;
1289 }
1290 .ideditor .legacy-carto path.line.casing.tag-highway-secondary,
1291 .ideditor .legacy-carto path.line.casing.tag-highway-secondary_link,
1292 .ideditor .legacy-carto path.line.casing.tag-secondary {
1293     stroke: #75582b;
1294 }
1295
1296 .ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary,
1297 .ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary_link {
1298     color: #ffff7e;
1299     fill: #7f7f3f;
1300 }
1301 .ideditor .legacy-carto path.line.stroke.tag-highway-tertiary,
1302 .ideditor .legacy-carto path.line.stroke.tag-highway-tertiary_link,
1303 .ideditor .legacy-carto path.line.stroke.tag-tertiary {
1304     stroke: #ffff7e;
1305 }
1306 .ideditor .legacy-carto path.line.casing.tag-highway-tertiary,
1307 .ideditor .legacy-carto path.line.casing.tag-highway-tertiary_link,
1308 .ideditor .legacy-carto path.line.casing.tag-tertiary {
1309     stroke: #7f7f3f;
1310 }
1311
1312 .ideditor .preset-icon .icon.tag-highway-residential {
1313     color: #fff;
1314     fill: #444;
1315 }
1316 .ideditor path.line.stroke.tag-highway-residential,
1317 .ideditor path.line.stroke.tag-residential {
1318     stroke: #fff;
1319 }
1320 .ideditor path.line.casing.tag-highway-residential,
1321 .ideditor path.line.casing.tag-residential {
1322     stroke: #444;
1323 }
1324
1325 .ideditor .preset-icon .icon.tag-highway-unclassified {
1326     color: #dca;
1327     fill: #444;
1328 }
1329 .ideditor path.line.stroke.tag-highway-unclassified,
1330 .ideditor path.line.stroke.tag-unclassified {
1331     stroke: #dca;
1332 }
1333 .ideditor path.line.casing.tag-highway-unclassified,
1334 .ideditor path.line.casing.tag-unclassified {
1335     stroke: #444;
1336 }
1337
1338
1339 /* narrow highways */
1340 .ideditor path.line.shadow.tag-highway-living_street,
1341 .ideditor path.line.shadow.tag-highway-bus_guideway,
1342 .ideditor path.line.shadow.tag-highway-service,
1343 .ideditor path.line.shadow.tag-highway-track,
1344 .ideditor path.line.shadow.tag-highway-road,
1345 .ideditor path.line.shadow.tag-highway-motorway_link,
1346 .ideditor path.line.shadow.tag-highway-trunk_link,
1347 .ideditor path.line.shadow.tag-highway-primary_link,
1348 .ideditor path.line.shadow.tag-highway-secondary_link,
1349 .ideditor path.line.shadow.tag-highway-tertiary_link {
1350     stroke-width: 16;
1351 }
1352 .ideditor path.line.casing.tag-highway-living_street,
1353 .ideditor path.line.casing.tag-highway-bus_guideway,
1354 .ideditor path.line.casing.tag-highway-service,
1355 .ideditor path.line.casing.tag-highway-track,
1356 .ideditor path.line.casing.tag-highway-road,
1357 .ideditor path.line.casing.tag-highway-motorway_link,
1358 .ideditor path.line.casing.tag-highway-trunk_link,
1359 .ideditor path.line.casing.tag-highway-primary_link,
1360 .ideditor path.line.casing.tag-highway-secondary_link,
1361 .ideditor path.line.casing.tag-highway-tertiary_link {
1362     stroke-width: 7;
1363 }
1364 .ideditor path.line.stroke.tag-highway-living_street,
1365 .ideditor path.line.stroke.tag-highway-bus_guideway,
1366 .ideditor path.line.stroke.tag-highway-service,
1367 .ideditor path.line.stroke.tag-highway-track,
1368 .ideditor path.line.stroke.tag-highway-road,
1369 .ideditor path.line.stroke.tag-highway-motorway_link,
1370 .ideditor path.line.stroke.tag-highway-trunk_link,
1371 .ideditor path.line.stroke.tag-highway-primary_link,
1372 .ideditor path.line.stroke.tag-highway-secondary_link,
1373 .ideditor path.line.stroke.tag-highway-tertiary_link {
1374     stroke-width: 5;
1375 }
1376 .ideditor path.line.casing.tag-highway-service.tag-service-driveway {
1377     stroke-width: 6.25;
1378 }
1379 .ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
1380     stroke-width: 4.25;
1381 }
1382
1383 .ideditor path.line.shadow.tag-highway-path,
1384 .ideditor path.line.shadow.tag-highway-footway,
1385 .ideditor path.line.shadow.tag-highway-cycleway,
1386 .ideditor path.line.shadow.tag-highway-bridleway,
1387 .ideditor path.line.shadow.tag-highway-corridor,
1388 .ideditor path.line.shadow.tag-highway-ladder,
1389 .ideditor path.line.shadow.tag-highway-via_ferrata,
1390 .ideditor path.line.shadow.tag-highway-steps {
1391     stroke-width: 16;
1392 }
1393 .ideditor path.line.casing.tag-highway-path,
1394 .ideditor path.line.casing.tag-highway-footway,
1395 .ideditor path.line.casing.tag-highway-cycleway,
1396 .ideditor path.line.casing.tag-highway-bridleway,
1397 .ideditor path.line.casing.tag-highway-corridor,
1398 .ideditor path.line.casing.tag-highway-ladder,
1399 .ideditor path.line.casing.tag-highway-via_ferrata,
1400 .ideditor path.line.casing.tag-highway-steps {
1401     stroke-width: 5;
1402 }
1403 .ideditor path.line.stroke.tag-highway-path,
1404 .ideditor path.line.stroke.tag-highway-footway,
1405 .ideditor path.line.stroke.tag-highway-cycleway,
1406 .ideditor path.line.stroke.tag-highway-bridleway,
1407 .ideditor path.line.stroke.tag-highway-corridor,
1408 .ideditor path.line.stroke.tag-highway-ladder,
1409 .ideditor path.line.stroke.tag-highway-via_ferrata,
1410 .ideditor path.line.stroke.tag-highway-steps {
1411     stroke-width: 3;
1412 }
1413
1414 .ideditor .low-zoom path.line.shadow.tag-highway-living_street,
1415 .ideditor .low-zoom path.line.shadow.tag-highway-bus_guideway,
1416 .ideditor .low-zoom path.line.shadow.tag-highway-service,
1417 .ideditor .low-zoom path.line.shadow.tag-highway-track,
1418 .ideditor .low-zoom path.line.shadow.tag-highway-road,
1419 .ideditor .low-zoom path.line.shadow.tag-highway-motorway_link,
1420 .ideditor .low-zoom path.line.shadow.tag-highway-trunk_link,
1421 .ideditor .low-zoom path.line.shadow.tag-highway-primary_link,
1422 .ideditor .low-zoom path.line.shadow.tag-highway-secondary_link,
1423 .ideditor .low-zoom path.line.shadow.tag-highway-tertiary_link {
1424     stroke-width: 12;
1425 }
1426 .ideditor .low-zoom path.line.casing.tag-highway-living_street,
1427 .ideditor .low-zoom path.line.casing.tag-highway-bus_guideway,
1428 .ideditor .low-zoom path.line.casing.tag-highway-service,
1429 .ideditor .low-zoom path.line.casing.tag-highway-track,
1430 .ideditor .low-zoom path.line.casing.tag-highway-road,
1431 .ideditor .low-zoom path.line.casing.tag-highway-motorway_link,
1432 .ideditor .low-zoom path.line.casing.tag-highway-trunk_link,
1433 .ideditor .low-zoom path.line.casing.tag-highway-primary_link,
1434 .ideditor .low-zoom path.line.casing.tag-highway-secondary_link,
1435 .ideditor .low-zoom path.line.casing.tag-highway-tertiary_link {
1436     stroke-width: 5;
1437 }
1438 .ideditor .low-zoom path.line.stroke.tag-highway-living_street,
1439 .ideditor .low-zoom path.line.stroke.tag-highway-bus_guideway,
1440 .ideditor .low-zoom path.line.stroke.tag-highway-service,
1441 .ideditor .low-zoom path.line.stroke.tag-highway-track,
1442 .ideditor .low-zoom path.line.stroke.tag-highway-road,
1443 .ideditor .low-zoom path.line.stroke.tag-highway-motorway_link,
1444 .ideditor .low-zoom path.line.stroke.tag-highway-trunk_link,
1445 .ideditor .low-zoom path.line.stroke.tag-highway-primary_link,
1446 .ideditor .low-zoom path.line.stroke.tag-highway-secondary_link,
1447 .ideditor .low-zoom path.line.stroke.tag-highway-tertiary_link {
1448     stroke-width: 3;
1449 }
1450 .ideditor .low-zoom  path.line.casing.tag-highway-service.tag-service-driveway {
1451     stroke-width: 4.25;
1452 }
1453 .ideditor .low-zoom  path.line.stroke.tag-highway-service.tag-service-driveway {
1454     stroke-width: 2.25;
1455 }
1456
1457 .ideditor .low-zoom path.line.shadow.tag-highway-path,
1458 .ideditor .low-zoom path.line.shadow.tag-highway-footway,
1459 .ideditor .low-zoom path.line.shadow.tag-highway-cycleway,
1460 .ideditor .low-zoom path.line.shadow.tag-highway-bridleway,
1461 .ideditor .low-zoom path.line.shadow.tag-highway-corridor,
1462 .ideditor .low-zoom path.line.shadow.tag-highway-ladder,
1463 .ideditor .low-zoom path.line.shadow.tag-highway-via_ferrata,
1464 .ideditor .low-zoom path.line.shadow.tag-highway-steps {
1465     stroke-width: 12;
1466 }
1467 .ideditor .low-zoom path.line.casing.tag-highway-path,
1468 .ideditor .low-zoom path.line.casing.tag-highway-footway,
1469 .ideditor .low-zoom path.line.casing.tag-highway-cycleway,
1470 .ideditor .low-zoom path.line.casing.tag-highway-bridleway,
1471 .ideditor .low-zoom path.line.casing.tag-highway-corridor,
1472 .ideditor .low-zoom path.line.casing.tag-highway-ladder,
1473 .ideditor .low-zoom path.line.casing.tag-highway-via_ferrata,
1474 .ideditor .low-zoom path.line.casing.tag-highway-steps {
1475     stroke-width: 3;
1476 }
1477 .ideditor .low-zoom path.line.stroke.tag-highway-path,
1478 .ideditor .low-zoom path.line.stroke.tag-highway-footway,
1479 .ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
1480 .ideditor .low-zoom path.line.stroke.tag-highway-bridleway,
1481 .ideditor .low-zoom path.line.stroke.tag-highway-corridor,
1482 .ideditor .low-zoom path.line.stroke.tag-highway-ladder,
1483 .ideditor .low-zoom path.line.stroke.tag-highway-via_ferrata,
1484 .ideditor .low-zoom path.line.stroke.tag-highway-steps {
1485     stroke-width: 1;
1486 }
1487
1488 /* living streets */
1489 .ideditor .preset-icon .icon.tag-highway-living-street {
1490     color: #bbb;
1491     fill: #ddd;
1492 }
1493 .ideditor path.line.stroke.tag-highway-living_street,
1494 .ideditor path.line.stroke.tag-living_street {
1495     stroke: #ccc;
1496 }
1497 .ideditor path.line.casing.tag-highway-living_street,
1498 .ideditor path.line.casing.tag-living_street {
1499     stroke: #fff;
1500 }
1501
1502 /* corridors */
1503 .ideditor .preset-icon .icon.tag-highway-corridor {
1504     color: #8cd05f;
1505     fill: #fff;
1506 }
1507 .ideditor path.line.stroke.tag-highway-corridor,
1508 .ideditor path.line.stroke.tag-corridor {
1509     stroke: #fff;
1510     stroke-dasharray: 2, 8;
1511 }
1512 .ideditor .low-zoom path.line.stroke.tag-highway-corridor,
1513 .ideditor .low-zoom path.line.stroke.tag-corridor {
1514     stroke-dasharray: 1, 4;
1515 }
1516 .ideditor path.line.casing.tag-highway-corridor,
1517 .ideditor path.line.casing.tag-corridor {
1518     stroke: #8cd05f;
1519     stroke-linecap: round;
1520     stroke-dasharray: none;
1521 }
1522
1523 /* pedestrian streets */
1524 .ideditor .preset-icon .icon.tag-highway-pedestrian {
1525     color: #988;
1526 }
1527 .ideditor path.line.stroke.tag-highway-pedestrian,
1528 .ideditor path.line.stroke.tag-pedestrian {
1529     stroke: #fff;
1530     stroke-width: 3.5;
1531     stroke-dasharray: 6, 6;
1532     stroke-linecap: butt;
1533 }
1534 .ideditor path.line.stroke.tag-highway-pedestrian.tag-oneway,
1535 .ideditor path.line.stroke.tag-pedestrian.tag-oneway {
1536     stroke-dasharray: 6, 6, 6, 18;
1537     stroke-dashoffset: 9;
1538 }
1539 .ideditor .low-zoom path.line.stroke.tag-highway-pedestrian,
1540 .ideditor .low-zoom path.line.stroke.tag-pedestrian {
1541     stroke-width: 2;
1542     stroke-dasharray: 4, 4;
1543 }
1544 .ideditor path.line.casing.tag-highway-pedestrian,
1545 .ideditor path.line.casing.tag-pedestrian {
1546     stroke: #988;
1547     stroke-linecap: round;
1548     stroke-dasharray: none;
1549 }
1550 .ideditor .preset-icon-container path.line.stroke.tag-highway-pedestrian {
1551     stroke-dasharray: 12, 12;
1552 }
1553
1554 /* unknown roads */
1555 .ideditor .preset-icon .icon.tag-highway-road {
1556     color: #9e9e9e;
1557     fill: #666;
1558 }
1559 .ideditor path.line.stroke.tag-highway-road,
1560 .ideditor path.line.stroke.tag-road {
1561     stroke: #9e9e9e;
1562 }
1563 .ideditor path.line.casing.tag-highway-road,
1564 .ideditor path.line.casing.tag-road {
1565     stroke: #666;
1566 }
1567
1568 /* service roads */
1569 .ideditor path.line.stroke.tag-highway-service {
1570     stroke: #fff;
1571 }
1572 .ideditor path.line.casing.tag-highway-service {
1573     stroke: #666;
1574 }
1575
1576 /* special service roads and bus guideways */
1577 /* with `service=* tag`  (e.g. parking_aisle, alley, drive-through) */
1578 .ideditor path.line.stroke.tag-highway-bus_guideway,
1579 .ideditor path.line.stroke.tag-highway-service.tag-service {
1580     stroke: #dca;
1581 }
1582 .ideditor path.line.casing.tag-highway-bus_guideway,
1583 .ideditor path.line.casing.tag-highway-service.tag-service {
1584     stroke: #666;
1585 }
1586
1587 .ideditor path.line.stroke.tag-highway-service.tag-service-parking_aisle {
1588     stroke: #cccac7;
1589 }
1590 .ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
1591     stroke: #fff6e4;
1592 }
1593 .ideditor path.line.stroke.tag-highway-service.tag-service-emergency_access {
1594     stroke: #ddb2aa;
1595 }
1596
1597 /* unmaintained track roads */
1598 .ideditor path.line.stroke.tag-highway-track,
1599 .ideditor path.line.stroke.tag-track {
1600     stroke: #c5b59f;
1601 }
1602 .ideditor path.line.casing.tag-highway-track,
1603 .ideditor path.line.casing.tag-track {
1604     stroke: #746f6f;
1605 }
1606
1607 /* paths */
1608 .ideditor path.line.stroke.tag-highway-path,
1609 .ideditor path.line.stroke.tag-highway-footway,
1610 .ideditor path.line.stroke.tag-highway-cycleway,
1611 .ideditor path.line.stroke.tag-highway-bridleway {
1612     stroke-linecap: butt;
1613     stroke-dasharray: 6, 6;
1614 }
1615 .ideditor path.line.stroke.tag-highway-path.tag-oneway,
1616 .ideditor path.line.stroke.tag-highway-footway.tag-oneway,
1617 .ideditor path.line.stroke.tag-highway-cycleway.tag-oneway,
1618 .ideditor path.line.stroke.tag-highway-bridleway.tag-oneway {
1619     stroke-dasharray: 6, 6, 6, 18;
1620     stroke-dashoffset: 9;
1621 }
1622 .ideditor .low-zoom path.line.stroke.tag-highway-path,
1623 .ideditor .low-zoom path.line.stroke.tag-highway-footway,
1624 .ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
1625 .ideditor .low-zoom path.line.stroke.tag-highway-bridleway {
1626     stroke-linecap: butt;
1627     stroke-dasharray: 3, 3;
1628 }
1629
1630 /* style for features that should have highway=footway but don't yet */
1631 .ideditor path.line.stroke.tag-crossing,
1632 .ideditor path.line.stroke.tag-footway-access_aisle,
1633 .ideditor path.line.stroke.tag-public_transport-platform,
1634 .ideditor path.line.stroke.tag-highway-platform,
1635 .ideditor path.line.stroke.tag-railway-platform,
1636 .ideditor path.line.stroke.tag-railway-platform_edge,
1637 .ideditor path.line.stroke.tag-man_made-pier {
1638     stroke: #dca;
1639 }
1640
1641 .ideditor path.line.casing.tag-highway-path,
1642 .ideditor path.line.casing.tag-highway-footway.tag-public_transport-platform,
1643 .ideditor path.line.casing.tag-highway-footway.tag-man_made-pier,
1644 .ideditor path.line.casing.tag-highway.tag-crossing,
1645 .ideditor path.line.casing.tag-highway.tag-footway-access_aisle {
1646     stroke: #dca;
1647     stroke-linecap: round;
1648     stroke-dasharray: none;
1649 }
1650 .ideditor path.line.casing.tag-highway-footway,
1651 .ideditor path.line.casing.tag-highway-cycleway,
1652 .ideditor path.line.casing.tag-highway-bridleway {
1653     stroke: #fff;
1654     stroke-linecap: round;
1655     stroke-dasharray: none;
1656 }
1657
1658 .ideditor .preset-icon .icon.tag-highway-path,
1659 .ideditor .preset-icon .icon.tag-highway-footway.tag-public_transport-platform,
1660 .ideditor .preset-icon .icon.tag-highway-footway.tag-man_made-pier {
1661     color: #988;
1662     fill: #dca;
1663 }
1664 .ideditor path.line.stroke.tag-highway-path {
1665     stroke: #988;
1666 }
1667 .ideditor path.line.stroke.tag-highway-path.tag-bridge-boardwalk {
1668     stroke: #dca;
1669 }
1670
1671 /* footways */
1672 .ideditor .preset-icon .icon.tag-route-foot,
1673 .ideditor .preset-icon .icon.tag-route-hiking,
1674 .ideditor .preset-icon .icon.tag-highway-footway {
1675     color: #988;
1676     fill: #fff;
1677 }
1678 .ideditor path.line.stroke.tag-highway-footway,
1679 .ideditor path.line.stroke.tag-highway-bus_stop,
1680 .ideditor .preset-icon-container path.casing.tag-highway-footway {
1681     stroke: #988;
1682 }
1683 .ideditor .preset-icon .icon.tag-highway-footway.tag-footway-sidewalk {
1684     color: #d4b4b4;
1685 }
1686 .ideditor path.stroke.tag-highway-footway.tag-footway-sidewalk,
1687 .ideditor .preset-icon-container path.casing.tag-highway-footway.tag-footway-sidewalk {
1688     stroke: #d4b4b4;
1689 }
1690 .ideditor .preset-icon-container path.stroke.tag-highway-footway:not(.tag-crossing-marked):not(.tag-crossing-unmarked):not(.tag-footway-access_aisle):not(.tag-man_made-pier):not(.tag-public_transport-platform) {
1691     stroke: #fff;
1692 }
1693
1694 /* cycleways */
1695 .ideditor .preset-icon .icon.tag-route-bicycle,
1696 .ideditor .preset-icon .icon.tag-highway-cycleway {
1697     color: #58a9ed;
1698     fill: #fff;
1699 }
1700 .ideditor path.line.stroke.tag-highway-cycleway,
1701 .ideditor .preset-icon-container path.casing.tag-highway-cycleway {
1702     stroke: #58a9ed;
1703 }
1704 .ideditor .preset-icon-container path.stroke.tag-highway-cycleway:not(.tag-crossing) {
1705     stroke: #fff;
1706 }
1707
1708 /* bridleways */
1709 .ideditor .preset-icon .icon.tag-route-horse,
1710 .ideditor .preset-icon .icon.tag-highway-bridleway {
1711     color: #e06d5f;
1712     fill: #fff;
1713 }
1714 .ideditor path.line.stroke.tag-highway-bridleway,
1715 .ideditor .preset-icon-container path.casing.tag-highway-bridleway {
1716     stroke: #e06d5f;
1717 }
1718 .ideditor .preset-icon-container path.stroke.tag-highway-bridleway {
1719     stroke: #fff;
1720 }
1721
1722 /* racetracks */
1723 .ideditor .preset-icon .icon.tag-leisure-track {
1724     color: rgb(229, 184, 43);
1725 }
1726 .ideditor path.line.stroke.tag-leisure-track,
1727 .ideditor .preset-icon-container path.casing.tag-highway.tag-leisure-track {
1728     stroke: rgb(229, 184, 43);
1729 }
1730 .ideditor .preset-icon-container path.line.stroke.tag-highway.tag-leisure-track {
1731     stroke: #fff;
1732 }
1733
1734 /* steps */
1735 .ideditor .preset-icon .icon.tag-highway-steps,
1736 .ideditor .preset-icon .icon.tag-highway-ladder {
1737     color: #81d25c;
1738     fill: #fff;
1739 }
1740 .ideditor path.line.stroke.tag-highway-steps,
1741 .ideditor path.line.stroke.tag-highway-ladder {
1742     stroke-linecap: butt;
1743     stroke-dasharray: 3, 3;
1744 }
1745 .ideditor .low-zoom path.line.stroke.tag-highway-steps,
1746 .ideditor .low-zoom path.line.stroke.tag-highway-ladder {
1747     stroke-dasharray: 2, 2;
1748 }
1749 .ideditor path.line.casing.tag-highway-steps,
1750 .ideditor path.line.casing.tag-highway-ladder {
1751     stroke: #fff;
1752     stroke-linecap: round;
1753     stroke-dasharray: none;
1754 }
1755 .ideditor path.line.stroke.tag-highway-steps,
1756 .ideditor path.line.stroke.tag-highway-ladder,
1757 .ideditor .preset-icon-container path.line.casing.tag-highway-steps,
1758 .ideditor .preset-icon-container path.line.casing.tag-highway-ladder {
1759     stroke: #81d25c;
1760 }
1761 .ideditor .preset-icon-container path.line.stroke.tag-highway-steps,
1762 .ideditor .preset-icon-container path.line.stroke.tag-highway-ladder {
1763     stroke: #fff;
1764 }
1765
1766 .ideditor path.line.casing.tag-highway-via_ferrata {
1767     stroke: none;
1768 }
1769
1770 .ideditor path.line.stroke.tag-highway-via_ferrata {
1771     stroke-width: 5;
1772     stroke: #6f1f1f;
1773     stroke-linecap: round;
1774     stroke-dasharray: 0, 9;
1775 }
1776
1777 /* crossings */
1778 .ideditor path.line.stroke.tag-highway.tag-crossing-unmarked {
1779     stroke-dasharray: 6, 4;
1780 }
1781 .ideditor path.line.stroke.tag-highway.tag-crossing-unmarked.tag-oneway {
1782     stroke-dasharray: 6, 4, 6, 20;
1783     stroke-dashoffset: 8;
1784 }
1785 .ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-unmarked {
1786     stroke-dasharray: 3, 2;
1787 }
1788 .ideditor path.line.stroke.tag-highway.tag-crossing-marked {
1789     stroke-dasharray: 6, 3;
1790 }
1791 .ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-marked {
1792     stroke-dasharray: 3, 1.5;
1793 }
1794 .ideditor path.line.stroke.tag-highway-footway.tag-crossing-marked {
1795     stroke: #4c4444;
1796 }
1797 .ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-marked {
1798     color: #4c4444;
1799 }
1800 .ideditor path.line.stroke.tag-highway-footway.tag-crossing-unmarked {
1801     stroke: #776a6a;
1802 }
1803 .ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-unmarked {
1804     color: #776a6a;
1805 }
1806 .ideditor path.line.stroke.tag-highway-cycleway.tag-crossing-marked {
1807     stroke: #446077;
1808 }
1809 .ideditor .preset-icon .icon.tag-highway-cycleway.tag-crossing-marked {
1810     color: #446077;
1811 }
1812
1813 .ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
1814     stroke-dasharray: 4, 2;
1815     stroke: #4c4444;
1816 }
1817 .ideditor .low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle,
1818 .ideditor .preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle {
1819     stroke-dasharray: 2.5, 1.5;
1820 }
1821 .ideditor .preset-icon .icon.tag-highway.tag-footway-access_aisle {
1822     color: #4c4444;
1823 }
1824
1825
1826 /* highway midpoints */
1827 .ideditor g.midpoint.tag-highway-corridor .fill,
1828 .ideditor g.midpoint.tag-highway-steps .fill,
1829 .ideditor g.midpoint.tag-highway-ladder .fill,
1830 .ideditor g.midpoint.tag-highway-path .fill,
1831 .ideditor g.midpoint.tag-highway-footway .fill,
1832 .ideditor g.midpoint.tag-highway-cycleway .fill,
1833 .ideditor g.midpoint.tag-highway-bridleway .fill {
1834     fill: #fff;
1835     stroke: #333;
1836     stroke-opacity: .8;
1837     opacity: .8;
1838 }
1839 /* aeroways */
1840
1841 /* areas */
1842 .ideditor path.area.stroke.tag-aeroway,
1843 .ideditor .low-zoom path.area.stroke.tag-aeroway {
1844     stroke: #fff;
1845     stroke-dasharray: none;
1846     stroke-width: 1;
1847 }
1848 .ideditor path.area.fill.tag-aeroway-runway {
1849     stroke: rgba(0, 0, 0, 0.6);
1850     fill: rgba(0, 0, 0, 0.6);
1851 }
1852
1853 /* lines */
1854 /* narrow aeroways (taxiway) */
1855 .ideditor path.line.shadow.tag-aeroway-taxiway,
1856 .ideditor path.line.shadow.tag-taxiway {
1857     stroke-width: 16;
1858 }
1859 .ideditor path.line.casing.tag-aeroway-taxiway,
1860 .ideditor path.line.casing.tag-taxiway {
1861     stroke: #666;
1862     stroke-width: 7;
1863 }
1864 .ideditor path.line.stroke.tag-aeroway-taxiway,
1865 .ideditor path.line.stroke.tag-taxiway {
1866     stroke: #ff0;
1867     stroke-width: 5;
1868 }
1869 .ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway,
1870 .ideditor .low-zoom path.line.shadow.tag-taxiway {
1871     stroke-width: 12;
1872 }
1873 .ideditor .low-zoom path.line.casing.tag-aeroway-taxiway,
1874 .ideditor .low-zoom path.line.casing.tag-taxiway {
1875     stroke-width: 5;
1876 }
1877 .ideditor .low-zoom path.line.stroke.tag-aeroway-taxiway,
1878 .ideditor .low-zoom path.line.stroke.tag-taxiway {
1879     stroke-width: 3;
1880 }
1881
1882 /* wide aeroways (runway) */
1883 .ideditor .preset-icon .icon.tag-aeroway-runway,
1884 .ideditor .preset-icon .icon.tag-runway {
1885     color: #444;
1886     fill: #000;
1887 }
1888 .ideditor path.line.shadow.tag-aeroway-runway {
1889     stroke-width: 20;
1890 }
1891 .ideditor path.line.casing.tag-aeroway-runway {
1892     stroke-width: 10;
1893     stroke: #000;
1894     stroke-linecap: square;
1895 }
1896 .ideditor path.line.stroke.tag-aeroway-runway {
1897     stroke: #fff;
1898     stroke-width: 2;
1899     stroke-linecap: butt;
1900     stroke-dasharray: 24, 48;
1901     stroke-dashoffset: -7;
1902 }
1903 .ideditor .low-zoom path.line.shadow.tag-aeroway-runway {
1904     stroke-width: 16;
1905 }
1906 .ideditor .low-zoom path.line.casing.tag-aeroway-runway {
1907     stroke-width: 7;
1908 }
1909 .ideditor .low-zoom path.line.stroke.tag-aeroway-runway {
1910     stroke-width: 2;
1911     stroke-dasharray: 12, 24;
1912 }
1913 .ideditor .preset-icon-container path.line.stroke.tag-aeroway-runway {
1914     stroke-dasharray: 0, 14, 8, 14;
1915 }
1916 /* railways */
1917
1918 /* defaults */
1919 .ideditor .preset-icon .icon.tag-railway.other-line {
1920     color: #fff;
1921     fill: #777;
1922 }
1923 .ideditor .preset-icon .icon.tag-railway {
1924     color: #555;
1925 }
1926
1927 /* lines */
1928 /* narrow widths */
1929 .ideditor path.line.shadow.tag-railway {
1930     stroke-width: 16;
1931 }
1932 .ideditor path.line.casing.tag-railway {
1933     stroke-width: 7;
1934 }
1935 .ideditor path.line.stroke.tag-railway {
1936     stroke-width: 2;
1937     stroke-linecap: butt;
1938     stroke-dasharray: 10,8;
1939 }
1940 .ideditor path.line.stroke.tag-railway.tag-oneway {
1941     stroke-dasharray: 10, 26;
1942     stroke-dashoffset: 5;
1943 }
1944 .ideditor .low-zoom path.line.shadow.tag-railway {
1945     stroke-width: 12;
1946 }
1947 .ideditor .low-zoom path.line.casing.tag-railway {
1948     stroke-width: 5;
1949 }
1950 .ideditor .low-zoom path.line.stroke.tag-railway {
1951     stroke-width: 2;
1952     stroke-dasharray: 6, 6;
1953 }
1954 .ideditor .preset-icon-container path.line.stroke.tag-railway:not(.tag-status),
1955 .ideditor .preset-icon-container path.line.stroke.tag-railway.tag-status-disused {
1956     stroke-dasharray: 6;
1957 }
1958
1959 .ideditor path.line.casing.tag-railway.tag-railway-platform_edge,
1960 .ideditor path.line.casing.tag-railway.tag-railway-platform {
1961     stroke-width: 0;
1962 }
1963 .ideditor path.line.stroke.tag-railway.tag-railway-platform_edge,
1964 .ideditor path.line.stroke.tag-railway.tag-railway-platform {
1965     stroke-dasharray: none;
1966 }
1967
1968 /* styles */
1969 .ideditor path.line.casing.tag-railway {
1970     stroke: #555;
1971 }
1972 .ideditor path.line.stroke.tag-railway {
1973     stroke: #eee;
1974 }
1975
1976 .ideditor .preset-icon .icon.tag-railway.tag-status {
1977     color: #999;
1978 }
1979 .ideditor path.line.casing.tag-railway.tag-status {
1980     stroke: #999;
1981 }
1982 .ideditor path.line.stroke.tag-railway.tag-status:not(.tag-service) {
1983     stroke: #eee;
1984 }
1985 .ideditor .preset-icon .icon.tag-railway.tag-status-disused {
1986     color: #808080;
1987 }
1988 .ideditor path.line.casing.tag-railway.tag-status-disused {
1989     stroke: #808080;
1990 }
1991
1992 .ideditor path.line.casing.tag-railway-subway {
1993     stroke: #222;
1994 }
1995 .ideditor path.line.stroke.tag-railway-subway {
1996     stroke: #bbb;
1997 }
1998
1999 /* railways with `service=* tag` (e.g. sidings, crossovers, etc.) */
2000 .ideditor path.line.stroke.tag-railway.tag-service {
2001     stroke: #dca;
2002 }
2003 .ideditor path.line.casing.tag-railway.tag-service {
2004     stroke: #666;
2005 }/* waterways */
2006
2007 /* defaults */
2008 .ideditor .preset-icon .icon.tag-waterway.other-line {
2009     color: #7dd;
2010     fill: #7dd;
2011 }
2012 .ideditor .preset-icon .icon.tag-type-waterway:not(.tag-waterway-dam),
2013 .ideditor .preset-icon .icon.tag-waterway:not(.tag-waterway-dam) {
2014     color: #7dd;
2015     fill: #fff;
2016 }
2017
2018
2019 /* areas */
2020 .ideditor path.area.stroke.tag-waterway-dock,
2021 .ideditor path.area.stroke.tag-waterway-boatyard,
2022 .ideditor path.area.stroke.tag-waterway-fuel {
2023     stroke: white;
2024     stroke-width: 1;
2025 }
2026 .ideditor path.area.casing.tag-waterway-dock,
2027 .ideditor path.area.casing.tag-waterway-boatyard,
2028 .ideditor path.area.casing.tag-waterway-fuel {
2029     stroke: none;
2030 }
2031 .ideditor path.area.fill.tag-waterway-dock,
2032 .ideditor path.area.fill.tag-waterway-boatyard,
2033 .ideditor path.area.fill.tag-waterway-fuel {
2034     stroke: rgba(255, 255, 255, 0.3);
2035     fill: rgba(255, 255, 255, 0.3);
2036 }
2037
2038 /* lines */
2039 .ideditor path.line.fill.tag-waterway:not(.tag-waterway-dam) {
2040     stroke: rgba(119, 211, 222, 0.3);
2041     fill: rgba(119, 211, 222, 0.3);
2042 }
2043 .ideditor path.line.casing.tag-waterway:not(.tag-waterway-dam) {
2044     stroke: #444;
2045 }
2046 .ideditor path.line.stroke.tag-waterway:not(.tag-waterway-dam) {
2047     stroke: #7dd;
2048 }
2049
2050
2051 /* narrow waterways (default) */
2052 .ideditor path.line.shadow.tag-waterway {
2053     stroke-width: 16;
2054 }
2055 .ideditor path.line.casing.tag-waterway {
2056     stroke-width: 7;
2057 }
2058 .ideditor path.line.stroke.tag-waterway {
2059     stroke-width: 5;
2060 }
2061
2062 .ideditor .low-zoom path.line.shadow.tag-waterway {
2063     stroke-width: 12;
2064 }
2065 .ideditor .low-zoom path.line.casing.tag-waterway {
2066     stroke-width: 5;
2067 }
2068 .ideditor .low-zoom path.line.stroke.tag-waterway {
2069     stroke-width: 3;
2070 }
2071
2072
2073 /* wide waterways (river) */
2074 .ideditor path.line.shadow.tag-waterway-river,
2075 .ideditor path.line.shadow.tag-waterway-flowline {
2076     stroke-width: 20;
2077 }
2078 .ideditor path.line.casing.tag-waterway-river,
2079 .ideditor path.line.casing.tag-waterway-flowline {
2080     stroke-width: 10;
2081 }
2082 .ideditor path.line.stroke.tag-waterway-river,
2083 .ideditor path.line.stroke.tag-waterway-flowline {
2084     stroke-width: 8;
2085 }
2086
2087 .ideditor .low-zoom path.line.shadow.tag-waterway-river,
2088 .ideditor .low-zoom path.line.shadow.tag-waterway-flowline {
2089     stroke-width: 16;
2090 }
2091 .ideditor .low-zoom path.line.casing.tag-waterway-river,
2092 .ideditor .low-zoom path.line.casing.tag-waterway-flowline {
2093     stroke-width: 7;
2094 }
2095 .ideditor .low-zoom path.line.stroke.tag-waterway-river,
2096 .ideditor .low-zoom path.line.stroke.tag-waterway-flowline {
2097     stroke-width: 5;
2098 }
2099
2100 .ideditor path.line.stroke.tag-waterway-flowline {
2101     stroke-opacity: 0.5;
2102 }
2103 .ideditor path.line.casing.tag-waterway-flowline {
2104     display: none;
2105 }
2106
2107
2108 /* ditch */
2109 .ideditor .preset-icon .icon.tag-waterway-ditch {
2110     color: #39a;
2111 }
2112 .ideditor path.line.stroke.tag-waterway-ditch {
2113     stroke: #39a;
2114 }
2115
2116 /* narrow width miscellaneous things */
2117 .ideditor path.line.shadow.tag-aerialway,
2118 .ideditor path.line.shadow.tag-attraction-summer_toboggan,
2119 .ideditor path.line.shadow.tag-attraction-water_slide,
2120 .ideditor path.line.shadow.tag-golf-cartpath,
2121 .ideditor path.line.shadow.tag-man_made-pipeline,
2122 .ideditor path.line.shadow.tag-natural-tree_row,
2123 .ideditor path.line.shadow.tag-roller_coaster-track,
2124 .ideditor path.line.shadow.tag-roller_coaster-support,
2125 .ideditor path.line.shadow.tag-piste {
2126     stroke-width: 16;
2127 }
2128 .ideditor path.line.casing.tag-aerialway,
2129 .ideditor path.line.casing.tag-attraction-summer_toboggan,
2130 .ideditor path.line.casing.tag-attraction-water_slide,
2131 .ideditor path.line.casing.tag-golf-cartpath,
2132 .ideditor path.line.casing.tag-man_made-pipeline,
2133 .ideditor path.line.casing.tag-natural-tree_row,
2134 .ideditor path.line.casing.tag-roller_coaster-track,
2135 .ideditor path.line.casing.tag-roller_coaster-support,
2136 .ideditor path.line.casing.tag-piste {
2137     stroke-width: 7;
2138 }
2139 .ideditor path.line.stroke.tag-aerialway,
2140 .ideditor path.line.stroke.tag-attraction-summer_toboggan,
2141 .ideditor path.line.stroke.tag-attraction-water_slide,
2142 .ideditor path.line.stroke.tag-golf-cartpath,
2143 .ideditor path.line.stroke.tag-man_made-pipeline,
2144 .ideditor path.line.stroke.tag-natural-tree_row,
2145 .ideditor path.line.stroke.tag-roller_coaster-track,
2146 .ideditor path.line.stroke.tag-roller_coaster-support,
2147 .ideditor path.line.stroke.tag-piste {
2148     stroke-width: 5;
2149 }
2150
2151 .ideditor .low-zoom path.line.shadow.tag-aerialway,
2152 .ideditor .low-zoom path.line.shadow.tag-attraction-summer_toboggan,
2153 .ideditor .low-zoom path.line.shadow.tag-attraction-water_slide,
2154 .ideditor .low-zoom path.line.shadow.tag-golf-cartpath,
2155 .ideditor .low-zoom path.line.shadow.tag-man_made-pipeline,
2156 .ideditor .low-zoom path.line.shadow.tag-natural-tree_row,
2157 .ideditor .low-zoom path.line.shadow.tag-roller_coaster-track,
2158 .ideditor .low-zoom path.line.shadow.tag-roller_coaster-support,
2159 .ideditor .low-zoom path.line.shadow.tag-piste {
2160     stroke-width: 12;
2161 }
2162 .ideditor .low-zoom path.line.casing.tag-aerialway,
2163 .ideditor .low-zoom path.line.casing.tag-attraction-summer_toboggan,
2164 .ideditor .low-zoom path.line.casing.tag-attraction-water_slide,
2165 .ideditor .low-zoom path.line.casing.tag-golf-cartpath,
2166 .ideditor .low-zoom path.line.casing.tag-man_made-pipeline,
2167 .ideditor .low-zoom path.line.casing.tag-natural-tree_row,
2168 .ideditor .low-zoom path.line.casing.tag-roller_coaster-track,
2169 .ideditor .low-zoom path.line.casing.tag-roller_coaster-support,
2170 .ideditor .low-zoom path.line.casing.tag-piste {
2171     stroke-width: 5;
2172 }
2173 .ideditor .low-zoom path.line.stroke.tag-aerialway,
2174 .ideditor .low-zoom path.line.stroke.tag-attraction-summer_toboggan,
2175 .ideditor .low-zoom path.line.stroke.tag-attraction-water_slide,
2176 .ideditor .low-zoom path.line.stroke.tag-golf-cartpath,
2177 .ideditor .low-zoom path.line.stroke.tag-man_made-pipeline,
2178 .ideditor .low-zoom path.line.stroke.tag-natural-tree_row,
2179 .ideditor .low-zoom path.line.stroke.tag-roller_coaster-track,
2180 .ideditor .low-zoom path.line.stroke.tag-roller_coaster-support,
2181 .ideditor .low-zoom path.line.stroke.tag-piste {
2182     stroke-width: 3;
2183 }
2184
2185
2186 /* ferry routes  */
2187 .ideditor .preset-icon .icon.tag-route-ferry {
2188     color: #58a9ed;
2189     fill: #fff;
2190 }
2191 .ideditor path.line.shadow.tag-route-ferry {
2192     stroke-width: 16;
2193 }
2194 .ideditor path.line.stroke.tag-route-ferry {
2195     stroke: #58a9ed;
2196     stroke-width: 3;
2197     stroke-linecap: butt;
2198     stroke-dasharray: 12,8;
2199 }
2200 .ideditor .low-zoom path.line.shadow.tag-route-ferry {
2201     stroke-width: 12;
2202 }
2203 .ideditor .low-zoom path.line.stroke.tag-route-ferry,
2204 .ideditor .preset-icon-container path.line.stroke.tag-route-ferry {
2205     stroke-width: 2;
2206     stroke-dasharray: 6,4;
2207 }
2208 .ideditor path.line.casing.tag-route-ferry {
2209     stroke: none;
2210 }
2211
2212
2213 /* aerialways */
2214 .ideditor path.line.stroke.tag-aerialway {
2215     stroke: #c55;
2216 }
2217 .ideditor path.line.casing.tag-aerialway {
2218     stroke: #444;
2219 }
2220
2221
2222 /* pistes */
2223 .ideditor path.line.stroke.tag-piste {
2224     stroke: #a9d;
2225 }
2226 .ideditor path.line.casing.tag-piste {
2227     stroke: #444;
2228 }
2229
2230 /* climbing routes */
2231 .ideditor path.line.stroke.tag-climbing-route {
2232     stroke: #6f1f1f;
2233     stroke-linecap: round;
2234     stroke-dasharray: 0, 7;
2235     stroke-width: 3;
2236 }
2237
2238 /* Attractions */
2239 .ideditor path.line.stroke.tag-attraction-summer_toboggan {
2240     stroke: #9e9e9e;
2241 }
2242 .ideditor path.line.casing.tag-attraction-summer_toboggan {
2243     stroke: #666;
2244 }
2245
2246 .ideditor path.line.stroke.tag-attraction-water_slide {
2247     stroke: #aae0cb;
2248 }
2249 .ideditor path.line.casing.tag-attraction-water_slide {
2250     stroke: #3d6c71;
2251 }
2252
2253 .ideditor path.line.stroke.tag-roller_coaster-track {
2254     stroke: #dddddd;
2255     stroke-width: 3;
2256     stroke-dasharray: 5, 1;
2257     stroke-linecap: butt;
2258 }
2259 .ideditor path.line.casing.tag-roller_coaster-track {
2260     stroke: #707070;
2261 }
2262
2263 .ideditor path.line.stroke.tag-roller_coaster-support {
2264     stroke: #707070;
2265 }
2266 .ideditor path.line.casing.tag-roller_coaster-support {
2267     visibility: hidden;
2268 }
2269
2270
2271 /* golf cartpaths (like service roads) */
2272 .ideditor .preset-icon .icon.tag-golf-cartpath {
2273     color: #dca;
2274     fill: #666;
2275 }
2276 .ideditor path.line.stroke.tag-golf-cartpath {
2277     stroke: #dca;
2278 }
2279 .ideditor path.line.casing.tag-golf-cartpath {
2280     stroke: #666;
2281 }
2282
2283
2284 /* power and pipeline */
2285 .ideditor .preset-icon .icon.tag-man_made-pipeline,
2286 .ideditor .preset-icon .icon.tag-power {
2287     color: #939393;
2288     fill: #939393;
2289 }
2290
2291
2292 /* power */
2293 .ideditor path.line.stroke.tag-power {
2294     stroke: #939393;
2295     stroke-width: 2;
2296 }
2297 .ideditor path.line.casing.tag-power {
2298     stroke: none;
2299 }
2300
2301
2302 /* pipeline */
2303 .ideditor path.line.stroke.tag-man_made-pipeline {
2304     stroke: #cbd0d8;
2305     stroke-linecap: butt;
2306     stroke-dasharray: 80, 1.25;
2307 }
2308 .ideditor path.line.casing.tag-man_made-pipeline {
2309     stroke: #666;
2310 }
2311 .ideditor .low-zoom path.line.stroke.tag-man_made-pipeline {
2312     stroke-dasharray: 40, 1;
2313 }
2314 .ideditor .preset-icon-container path.line.stroke.tag-man_made-pipeline {
2315     stroke-dasharray: 19, 1;
2316 }
2317
2318
2319 /* boundaries */
2320 .ideditor path.line.stroke.tag-boundary {
2321     stroke: #fff;
2322     stroke-width: 2;
2323     stroke-linecap: butt;
2324     stroke-dasharray: 20, 5, 5, 5;
2325 }
2326 .ideditor path.line.casing.tag-boundary {
2327     stroke: #82b5fe;
2328     stroke-width: 6;
2329 }
2330
2331 .ideditor path.line.casing.tag-boundary-protected_area,
2332 .ideditor path.line.casing.tag-boundary-national_park {
2333     stroke: #b0e298;
2334 }
2335
2336
2337 /* barriers and similar */
2338 .ideditor path.line.stroke.tag-barrier:not(.tag-barrier-hedge):not(.tag-waterway) {
2339     stroke: #ddd;
2340 }
2341 .ideditor .preset-icon-container path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
2342     stroke: rgb(170, 170, 170);
2343 }
2344 .ideditor path.line.casing.tag-natural,
2345 .ideditor path.line.casing.tag-barrier:not(.tag-waterway),
2346 .ideditor path.line.casing.tag-man_made-groyne,
2347 .ideditor path.line.casing.tag-man_made-breakwater {
2348     stroke: none;
2349 }
2350 .ideditor path.line.stroke.tag-barrier:not(.tag-waterway),
2351 .ideditor path.line.stroke.tag-man_made-groyne,
2352 .ideditor path.line.stroke.tag-man_made-breakwater {
2353     stroke-width: 3px;
2354     stroke-linecap: round;
2355     stroke-dasharray: 15, 5, 1, 5;
2356 }
2357 .ideditor .low-zoom path.line.stroke.tag-barrier:not(.tag-waterway),
2358 .ideditor .low-zoom path.line.stroke.tag-man_made-groyne,
2359 .ideditor .low-zoom path.line.stroke.tag-man_made-breakwater {
2360     stroke-width: 2px;
2361     stroke-linecap: butt;
2362     stroke-dasharray: 8, 2, 2, 2;
2363 }
2364 .ideditor .preset-icon-container path.line.stroke.tag-barrier,
2365 .ideditor .preset-icon-container path.line.stroke.tag-man_made-groyne,
2366 .ideditor .preset-icon-container path.line.stroke.tag-man_made-breakwater {
2367     stroke-dasharray: 1, 4, 6, 4;
2368 }
2369 .ideditor path.line.stroke.tag-barrier.tag-barrier-wall,
2370 .ideditor path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
2371 .ideditor path.line.stroke.tag-barrier.tag-barrier-city_wall {
2372     stroke-linecap: butt;
2373     stroke-dasharray: 16, 3, 9, 3;
2374 }
2375 .ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-wall,
2376 .ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
2377 .ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-city_wall,
2378 .ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-wall,
2379 .ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
2380 .ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-city_wall {
2381     stroke-dasharray: 8, 1, 4, 1;
2382 }
2383
2384
2385 /* bridges */
2386 .ideditor path.line.casing.tag-bridge {
2387     stroke-opacity: 0.6;
2388     stroke: #000 !important;
2389     stroke-width: 16;
2390     stroke-linecap: butt;
2391     stroke-dasharray: none;
2392 }
2393 .ideditor path.line.shadow.tag-bridge {
2394     stroke-width: 24;
2395 }
2396 .ideditor .low-zoom path.line.shadow.tag-bridge {
2397     stroke-width: 16;
2398 }
2399 .ideditor .low-zoom path.line.casing.tag-bridge {
2400     stroke-width: 10;
2401 }
2402
2403 .ideditor path.line.shadow.tag-railway.tag-bridge,
2404 .ideditor path.line.shadow.tag-highway-living_street.tag-bridge,
2405 .ideditor path.line.shadow.tag-highway-path.tag-bridge,
2406 .ideditor path.line.shadow.tag-highway-corridor.tag-bridge,
2407 .ideditor path.line.shadow.tag-highway-pedestrian.tag-bridge,
2408 .ideditor path.line.shadow.tag-highway-service.tag-bridge,
2409 .ideditor path.line.shadow.tag-highway-track.tag-bridge,
2410 .ideditor path.line.shadow.tag-highway-steps.tag-bridge,
2411 .ideditor path.line.shadow.tag-highway-ladder.tag-bridge,
2412 .ideditor path.line.shadow.tag-highway-footway.tag-bridge,
2413 .ideditor path.line.shadow.tag-highway-cycleway.tag-bridge,
2414 .ideditor path.line.shadow.tag-highway-bridleway.tag-bridge {
2415     stroke-width: 18;
2416 }
2417 .ideditor path.line.casing.tag-railway.tag-bridge,
2418 .ideditor path.line.casing.tag-highway-living_street.tag-bridge,
2419 .ideditor path.line.casing.tag-highway-path.tag-bridge,
2420 .ideditor path.line.casing.tag-highway-corridor.tag-bridge,
2421 .ideditor path.line.casing.tag-highway-pedestrian.tag-bridge,
2422 .ideditor path.line.casing.tag-highway-service.tag-bridge,
2423 .ideditor path.line.casing.tag-highway-track.tag-bridge,
2424 .ideditor path.line.casing.tag-highway-steps.tag-bridge,
2425 .ideditor path.line.casing.tag-highway-ladder.tag-bridge,
2426 .ideditor path.line.casing.tag-highway-footway.tag-bridge,
2427 .ideditor path.line.casing.tag-highway-cycleway.tag-bridge,
2428 .ideditor path.line.casing.tag-highway-bridleway.tag-bridge {
2429     stroke-width: 10;
2430 }
2431
2432 .ideditor .low-zoom path.line.shadow.tag-railway.tag-bridge,
2433 .ideditor .low-zoom path.line.shadow.tag-highway-living_street.tag-bridge,
2434 .ideditor .low-zoom path.line.shadow.tag-highway-path.tag-bridge,
2435 .ideditor .low-zoom path.line.shadow.tag-highway-corridor.tag-bridge,
2436 .ideditor .low-zoom path.line.shadow.tag-highway-pedestrian.tag-bridge,
2437 .ideditor .low-zoom path.line.shadow.tag-highway-service.tag-bridge,
2438 .ideditor .low-zoom path.line.shadow.tag-highway-track.tag-bridge,
2439 .ideditor .low-zoom path.line.shadow.tag-highway-steps.tag-bridge,
2440 .ideditor .low-zoom path.line.shadow.tag-highway-ladder.tag-bridge,
2441 .ideditor .low-zoom path.line.shadow.tag-highway-footway.tag-bridge,
2442 .ideditor .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge,
2443 .ideditor .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge {
2444     stroke-width: 14;
2445 }
2446 .ideditor .low-zoom path.line.casing.tag-railway.tag-bridge,
2447 .ideditor .low-zoom path.line.casing.tag-highway-living_street.tag-bridge,
2448 .ideditor .low-zoom path.line.casing.tag-highway-path.tag-bridge,
2449 .ideditor .low-zoom path.line.casing.tag-highway-corridor.tag-bridge,
2450 .ideditor .low-zoom path.line.casing.tag-highway-pedestrian.tag-bridge,
2451 .ideditor .low-zoom path.line.casing.tag-highway-service.tag-bridge,
2452 .ideditor .low-zoom path.line.casing.tag-highway-track.tag-bridge,
2453 .ideditor .low-zoom path.line.casing.tag-highway-steps.tag-bridge,
2454 .ideditor .low-zoom path.line.casing.tag-highway-ladder.tag-bridge,
2455 .ideditor .low-zoom path.line.casing.tag-highway-footway.tag-bridge,
2456 .ideditor .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge,
2457 .ideditor .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge {
2458     stroke-width: 6;
2459 }
2460
2461
2462 /* tunnels */
2463 .ideditor path.line.stroke.tag-tunnel,
2464 .ideditor path.line.stroke.tag-location-underground,
2465 .ideditor path.line.stroke.tag-location-underwater {
2466     stroke-opacity: 0.3;
2467 }
2468 .ideditor path.line.casing.tag-tunnel,
2469 .ideditor path.line.casing.tag-location-underground,
2470 .ideditor path.line.casing.tag-location-underwater {
2471     stroke-opacity: 0.5;
2472     stroke-linecap: butt;
2473     stroke-dasharray: none;
2474 }
2475
2476
2477 /* embankments / cuttings */
2478 .ideditor path.line.shadow.tag-embankment,
2479 .ideditor path.line.shadow.tag-cutting {
2480     stroke-width: 28;
2481 }
2482 .ideditor path.line.casing.tag-embankment,
2483 .ideditor path.line.casing.tag-cutting {
2484     stroke-opacity: 0.5;
2485     stroke: #000;
2486     stroke-width: 22;
2487     stroke-dasharray: 2, 4;
2488     stroke-linecap: butt;
2489 }
2490
2491 .ideditor .low-zoom path.line.shadow.tag-embankment,
2492 .ideditor .low-zoom path.line.shadow.tag-cutting {
2493     stroke-width: 14;
2494 }
2495 .ideditor .low-zoom path.line.casing.tag-embankment,
2496 .ideditor .low-zoom path.line.casing.tag-cutting {
2497     stroke-width: 10;
2498 }
2499
2500
2501 /* Surface - unpaved */
2502 .ideditor path.line.casing.tag-unpaved {
2503     stroke: #ccc;
2504     stroke-linecap: butt;
2505     stroke-dasharray: 4, 4;
2506 }
2507 .ideditor .low-zoom path.line.casing.tag-unpaved {
2508     stroke-dasharray: 3, 3;
2509 }
2510 .ideditor path.line.casing.tag-bridge.tag-unpaved {
2511     stroke: #000;
2512 }
2513 /* Surface - semipaved */
2514 .ideditor path.line.casing.tag-semipaved {
2515     stroke-linecap: butt;
2516     stroke-dasharray: 6, 2;
2517 }
2518 .ideditor .low-zoom path.line.casing.tag-semipaved {
2519     stroke-dasharray: 5, 2;
2520 }
2521 .ideditor path.line.casing.tag-bridge.tag-semipaved {
2522     stroke: #000;
2523 }
2524
2525
2526 /* Status (e.g. proposed, abandoned) */
2527 .ideditor path.area.stroke.tag-status:not(.tag-status-disused),
2528 .ideditor path.line.stroke.tag-status:not(.tag-status-disused),
2529 .ideditor path.area.casing.tag-status:not(.tag-status-disused),
2530 .ideditor path.line.casing.tag-status:not(.tag-status-disused) {
2531     stroke-linecap: butt;
2532     stroke-dasharray: 7, 3;
2533 }
2534 .ideditor .low-zoom path.area.stroke.tag-status:not(.tag-status-disused),
2535 .ideditor .low-zoom path.line.stroke.tag-status:not(.tag-status-disused),
2536 .ideditor .low-zoom path.area.casing.tag-status:not(.tag-status-disused),
2537 .ideditor .low-zoom path.line.casing.tag-status:not(.tag-status-disused) {
2538     stroke-dasharray: 5, 2;
2539 }
2540
2541 /* Road Closed Status */
2542 .ideditor .preset-icon .icon.tag-highway.tag-status-construction {
2543     color: #fc6c14;
2544     fill: #fff;
2545 }
2546 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction {
2547     stroke-width: 20;
2548 }
2549 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction {
2550     stroke-width: 10;
2551     stroke-linecap: butt;
2552     stroke-dasharray: none
2553 }
2554 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction {
2555     stroke-width: 8;
2556     stroke-linecap: butt;
2557     stroke-dasharray: 10, 10;
2558 }
2559 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction,
2560 .ideditor .preset-icon-container path.line.stroke.tag-highway.tag-status.tag-status-construction {
2561     stroke: #fff;
2562 }
2563 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction,
2564 .ideditor .preset-icon-container path.line.casing.tag-highway.tag-status.tag-status-construction {
2565     stroke: #fc6c14;
2566 }
2567 .ideditor .low-zoom path.line.shadow.tag-highway.tag-status.tag-status-construction {
2568     stroke-width: 16;
2569 }
2570 .ideditor .low-zoom path.line.casing.tag-highway.tag-status.tag-status-construction {
2571     stroke-width: 7;
2572 }
2573 .ideditor .low-zoom path.line.stroke.tag-highway.tag-status.tag-status-construction {
2574     stroke-width: 5;
2575     stroke-dasharray: 8, 8;
2576 }
2577
2578 /** Closed Paths */
2579 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-path,
2580 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
2581 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
2582 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
2583 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
2584 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
2585 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
2586     stroke-width: 15;
2587 }
2588 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-path,
2589 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
2590 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
2591 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
2592 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
2593 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
2594 .ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
2595     stroke-width: 5;
2596     stroke-linecap: butt;
2597     stroke-dasharray: none
2598 }
2599 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-path,
2600 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
2601 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
2602 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
2603 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
2604 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
2605 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
2606     stroke-width: 4;
2607     stroke-linecap: butt;
2608     stroke-dasharray: 10, 10;
2609 }
2610
2611 /** Proposed Paths */
2612 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
2613 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
2614 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
2615 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
2616 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
2617 .ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
2618     stroke-width: 15;
2619 }
2620 .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
2621 .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
2622 .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
2623 .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
2624 .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
2625 .ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
2626     stroke-width: 4.5;
2627 }
2628 .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-path,
2629 .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-footway,
2630 .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-cycleway,
2631 .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-bridleway,
2632 .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-steps,
2633 .ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-ladder {
2634     stroke-width: 10;
2635 }
2636 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
2637 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
2638 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
2639 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
2640 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
2641 .ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
2642     stroke-width: 3;
2643 }
2644
2645 /* Buildings */
2646 .ideditor path.stroke.tag-building {
2647     stroke: rgb(224, 110, 95);
2648 }
2649 .ideditor path.fill.tag-building {
2650     stroke: rgba(224, 110, 95, 0.3);
2651     fill: rgba(224, 110, 95, 0.3);
2652 }
2653 /* Cursors */
2654
2655 .ideditor .nope,
2656 .ideditor .nope * {
2657     cursor: not-allowed !important;
2658 }
2659
2660 .ideditor .map-in-map,
2661 .ideditor .main-map {
2662     cursor: auto; /* Opera */
2663     cursor: url(<%= asset_path("iD/img/cursor/grab.png") %>) 9 9, auto; /* FF */
2664 }
2665
2666 .ideditor.mode-browse .point,
2667 .ideditor.mode-select .point,
2668 .ideditor.mode-select-data .point,
2669 .ideditor.mode-select-error .point,
2670 .ideditor.mode-select-note .point {
2671     cursor: pointer; /* Opera */
2672     cursor: url(<%= asset_path("iD/img/cursor/select-point.png") %>), pointer; /* FF */
2673 }
2674
2675 .ideditor.mode-browse .vertex,
2676 .ideditor.mode-select .vertex,
2677 .ideditor.mode-select-data .vertex,
2678 .ideditor.mode-select-error .vertex,
2679 .ideditor.mode-select-note .vertex {
2680     cursor: pointer; /* Opera */
2681     cursor: url(<%= asset_path("iD/img/cursor/select-vertex.png") %>), pointer; /* FF */
2682 }
2683
2684 .ideditor.mode-browse .line,
2685 .ideditor.mode-select .line,
2686 .ideditor.mode-select-data .line,
2687 .ideditor.mode-select-error .line,
2688 .ideditor.mode-select-note .line {
2689     cursor: pointer; /* Opera */
2690     cursor: url(<%= asset_path("iD/img/cursor/select-line.png") %>), pointer; /* FF */
2691 }
2692
2693 .ideditor.mode-browse .area,
2694 .ideditor.mode-select .area,
2695 .ideditor.mode-select-data .area,
2696 .ideditor.mode-select-error .area,
2697 .ideditor.mode-select-note .area {
2698     cursor: pointer; /* Opera */
2699     cursor: url(<%= asset_path("iD/img/cursor/select-area.png") %>), pointer; /* FF */
2700 }
2701
2702 .ideditor.mode-browse .midpoint,
2703 .ideditor.mode-select .midpoint,
2704 .ideditor.mode-select-data .midpoint,
2705 .ideditor.mode-select-error .midpoint,
2706 .ideditor.mode-select-note .midpoint {
2707     cursor: pointer; /* Opera */
2708     cursor: url(<%= asset_path("iD/img/cursor/select-split.png") %>), pointer; /* FF */
2709 }
2710
2711 .ideditor.mode-select .behavior-multiselect .point,
2712 .ideditor.mode-select .behavior-multiselect .vertex,
2713 .ideditor.mode-select .behavior-multiselect .line,
2714 .ideditor.mode-select .behavior-multiselect .area {
2715     cursor: pointer; /* Opera */
2716     cursor: url(<%= asset_path("iD/img/cursor/select-add.png") %>), pointer; /* FF */
2717 }
2718
2719 .ideditor.mode-select .behavior-multiselect .selected {
2720     cursor: pointer; /* Opera */
2721     cursor: url(<%= asset_path("iD/img/cursor/select-remove.png") %>), pointer; /* FF */
2722 }
2723
2724 .ideditor.mode-add-preset .main-map,
2725 .ideditor.mode-draw-line .main-map,
2726 .ideditor.mode-draw-area .main-map,
2727 .ideditor.mode-add-line  .main-map,
2728 .ideditor.mode-add-area  .main-map,
2729 .ideditor.mode-drag-node .main-map,
2730 .ideditor.mode-drag-note .main-map {
2731     cursor: crosshair; /* Opera */
2732     cursor: url(<%= asset_path("iD/img/cursor/draw.png") %>) 9 9, crosshair; /* FF */
2733 }
2734
2735 .ideditor.mode-draw-line .way.target,
2736 .ideditor.mode-draw-area .way.target,
2737 .ideditor.mode-add-line  .way.target,
2738 .ideditor.mode-add-area  .way.target,
2739 .ideditor.mode-drag-node .way.target {
2740     cursor: crosshair; /* Opera */
2741     cursor: url(<%= asset_path("iD/img/cursor/draw-connect-line.png") %>) 9 9, crosshair; /* FF */
2742 }
2743
2744 .ideditor.mode-draw-line .vertex.target,
2745 .ideditor.mode-draw-area .vertex.target,
2746 .ideditor.mode-add-line  .vertex.target,
2747 .ideditor.mode-add-area  .vertex.target,
2748 .ideditor.mode-drag-node .vertex.target {
2749     cursor: crosshair; /* Opera */
2750     cursor: url(<%= asset_path("iD/img/cursor/draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
2751 }
2752
2753 .ideditor.mode-add-point .main-map,
2754 .ideditor.mode-add-note .main-map,
2755 .ideditor.mode-browse.lasso .main-map,
2756 .ideditor.mode-browse.lasso .way,
2757 .ideditor.mode-browse.lasso .vertex,
2758 .ideditor.mode-browse.lasso .midpoint,
2759 .ideditor.mode-select.lasso .main-map,
2760 .ideditor.mode-select.lasso .way,
2761 .ideditor.mode-select.lasso .vertex,
2762 .ideditor.mode-select.lasso .midpoint {
2763     cursor: crosshair; /* Opera */
2764     cursor: url(<%= asset_path("iD/img/cursor/draw.png") %>) 9 9, crosshair; /* FF */
2765 }
2766
2767 .ideditor.mode-browse .note,
2768 .ideditor.mode-select .note,
2769 .ideditor.mode-select-data .note,
2770 .ideditor.mode-select-error .note,
2771 .ideditor.mode-select-note .note {
2772     cursor: pointer;
2773 }
2774
2775 .ideditor.mode-browse .qaItem,
2776 .ideditor.mode-select .qaItem,
2777 .ideditor.mode-select-data .qaItem,
2778 .ideditor.mode-select-error .qaItem,
2779 .ideditor.mode-select-note .qaItem {
2780     cursor: pointer;
2781 }
2782
2783 /* turn restriction editor */
2784 .ideditor .turn rect,
2785 .ideditor .turn circle {
2786     cursor: pointer;
2787 }
2788 /* legend */
2789 .ideditor li.list-item-photos.active:after {
2790     display: block;
2791     content: "";
2792     height: 100%;
2793     position: absolute;
2794     right: 0;
2795     width: 8px;
2796 }
2797 .ideditor[dir='rtl'] li.list-item-photos.active:after {
2798     right: auto;
2799     left: 0;
2800 }
2801
2802 .ideditor .disabled-panel {
2803     pointer-events: none;
2804     opacity: 0.5;
2805 }
2806
2807 /* photo viewer div */
2808 .ideditor .photoviewer {
2809     position: relative;
2810     flex-shrink: 0;
2811     margin-bottom: 10px;
2812     width: 330px;
2813     height: 250px;
2814     padding: 5px;
2815     background-color: var(--bg-color);
2816 }
2817 .ideditor[dir='ltr'] .photoviewer {
2818     margin-left: 10px;
2819     margin-right: 2px;
2820 }
2821 .ideditor[dir='rtl'] .photoviewer {
2822     margin-right: 10px;
2823     margin-left: 2px;
2824 }
2825
2826 @media screen and (min-width: 1600px) {
2827     .ideditor .photoviewer {
2828         width: 490px;
2829         height: 370px;
2830     }
2831 }
2832
2833 .ideditor .photoviewer button.thumb-hide {
2834     border-radius: 0;
2835     padding: 5px;
2836     position: absolute;
2837     right: 5px;
2838     top: 5px;
2839     z-index: 50;
2840 }
2841
2842 .ideditor .photoviewer button.set-photo-from-viewer {
2843     border-radius: 0;
2844     padding: 5px;
2845     position: absolute;
2846     left: 5px;
2847     top: 5px;
2848     z-index: 50;
2849 }
2850
2851 .ideditor .photoviewer button.resize-handle-xy {
2852     border-radius: 0;
2853     position: absolute;
2854     top: 0;
2855     right: 0;
2856     z-index: 49;
2857     cursor: nesw-resize;
2858     height: 25px;
2859     width: 25px;
2860 }
2861
2862 .ideditor .photoviewer button.resize-handle-x {
2863     border-radius: 0;
2864     position: absolute;
2865     top: 0;
2866     right: 0;
2867     bottom: 0;
2868     z-index: 48;
2869     cursor: ew-resize;
2870     height: auto;
2871     width: 6px;
2872 }
2873
2874 .ideditor .photoviewer button.resize-handle-y {
2875     border-radius: 0;
2876     position: absolute;
2877     top: 0;
2878     right: 0;
2879     z-index: 48;
2880     cursor: ns-resize;
2881     height: 6px;
2882     width: 100%;
2883 }
2884
2885
2886 .ideditor .photo-wrapper {
2887     width: 100%;
2888     height: 100%;
2889     overflow: hidden;
2890 }
2891
2892 .ideditor .photo-wrapper .photo-attribution {
2893     position: absolute;
2894     bottom: 0;
2895     right: 0;
2896     width: 100%;
2897     font-size: 10px;
2898     text-align: right;
2899     line-height: 150%;
2900     padding: 4px 8px;
2901     z-index: 10;
2902 }
2903 .ideditor .photo-attribution-dual {
2904     display: flex;
2905     justify-content: space-between;
2906 }
2907
2908 .ideditor .photo-attribution a,
2909 .ideditor .photo-attribution a:visited,
2910 .ideditor .photo-attribution span {
2911     padding: 4px 2px;
2912     color: #fff;
2913     text-wrap: nowrap;
2914 }
2915
2916 /* markers and sequences */
2917 .ideditor .viewfield-group {
2918     pointer-events: none;
2919 }
2920 .ideditor.mode-browse .viewfield-group,
2921 .ideditor.mode-select .viewfield-group,
2922 .ideditor.mode-select-data .viewfield-group,
2923 .ideditor.mode-select-error .viewfield-group,
2924 .ideditor.mode-select-note .viewfield-group {
2925     pointer-events: visible;
2926     cursor: pointer;
2927 }
2928
2929 .ideditor .viewfield-group circle {
2930     stroke: #555;
2931     stroke-width: 1;
2932     stroke-opacity: 0.4;
2933     fill-opacity: 0.4;
2934 }
2935 .ideditor .viewfield-group .viewfield {
2936     stroke-width: 0;
2937     stroke: #222;
2938     fill-opacity: 0.4;
2939 }
2940 .ideditor .viewfield-group.highlighted circle {
2941     stroke: #222;
2942     stroke-opacity: 0.9;
2943     fill-opacity: 0.9;
2944 }
2945 .ideditor .viewfield-group.highlighted .viewfield {
2946     stroke-width: 1;
2947     fill-opacity: 0.8;
2948 }
2949 .ideditor .viewfield-group.hovered circle {
2950     fill: #eebb00;
2951     stroke: #222;
2952     stroke-width: 2;
2953     stroke-opacity: 0.9;
2954     fill-opacity: 0.9;
2955 }
2956 .ideditor .viewfield-group.hovered .viewfield {
2957     fill: #eebb00;
2958     stroke: #222;
2959     stroke-width: 1;
2960     fill-opacity: 0.8;
2961 }
2962 .ideditor .viewfield-group.currentView circle {
2963     fill: #ffee00;
2964     stroke: #222;
2965     stroke-width: 2;
2966     stroke-opacity: 1;
2967     fill-opacity: 1;
2968 }
2969 .ideditor .viewfield-group.currentView .viewfield {
2970     fill: #ffee00;
2971     stroke: #222;
2972     stroke-width: 1;
2973     stroke-opacity: 1;
2974     fill-opacity: 0.9;
2975 }
2976
2977
2978 .ideditor .viewfield-group.currentView .viewfield-scale {
2979     transform: scale(2,2);
2980 }
2981
2982 .ideditor .sequence {
2983     fill: none;
2984     stroke-width: 2;
2985     stroke-opacity: 0.6;
2986 }
2987 .ideditor .sequence.highlighted,
2988 .ideditor .sequence.currentView {
2989     stroke-width: 4;
2990     stroke-opacity: 1;
2991 }
2992
2993
2994 /* Streetside Image Layer */
2995 .ideditor li.list-item-photos.list-item-streetside.active:after {
2996     background-color: #0fffc4;
2997 }
2998 .ideditor .layer-streetside-images {
2999     pointer-events: none;
3000 }
3001 .ideditor .layer-streetside-images .viewfield-group * {
3002     fill: #0fffc4;
3003 }
3004 .ideditor .layer-streetside-images .sequence {
3005     stroke: #0fffc4;
3006     stroke-opacity: 0.85;  /* bump opacity - only one per road */
3007 }
3008
3009 /* Vegbilder Image Layer */
3010 .ideditor li.list-item-photos.list-item-vegbilder.active:after {
3011     background-color: #ed1c2e;
3012 }
3013 .ideditor .layer-vegbilder {
3014     pointer-events: none;
3015 }
3016 .ideditor .layer-vegbilder .viewfield-group * {
3017     fill: #ed1c2e;
3018 }
3019 .ideditor .layer-vegbilder .sequence {
3020     stroke: #ed1c2e;
3021     stroke-opacity: 0.85;  /* bump opacity - only one per road */
3022 }
3023
3024
3025 /* Mapillary Image Layer */
3026 .ideditor li.list-item-photos.list-item-mapillary.active:after {
3027     background-color: #55ff22;
3028 }
3029 .ideditor .layer-mapillary {
3030     pointer-events: none;
3031 }
3032 .ideditor .layer-mapillary .viewfield-group * {
3033     fill: #55ff22;
3034 }
3035 .ideditor .layer-mapillary .sequence {
3036     stroke: #55ff22;
3037 }
3038
3039
3040 /* Mapillary Traffic Signs and Map Features Layers */
3041 .ideditor .layer-mapillary-detections {
3042     pointer-events: none;
3043 }
3044 .ideditor .layer-mapillary-detections .icon-detected {
3045     outline: 2px solid transparent;
3046     pointer-events: visible;
3047     cursor: pointer;
3048     opacity: 0.75;
3049 }
3050 .ideditor .layer-mapillary-detections .icon-detected rect {
3051     fill: none;
3052 }
3053 .ideditor .layer-mapillary-detections .icon-detected:active {
3054     opacity: 1;
3055 }
3056 .ideditor .layer-mapillary-detections .icon-detected:active rect {
3057     outline: 3px solid rgba(255, 238, 0, 0.6);
3058 }
3059 @media (hover: hover) {
3060     .ideditor .layer-mapillary-detections .icon-detected:hover {
3061         opacity: 1;
3062     }
3063     .ideditor .layer-mapillary-detections .icon-detected:hover rect {
3064         outline: 3px solid rgba(255, 238, 0, 0.6);
3065     }
3066 }
3067 .ideditor .layer-mapillary-detections .icon-detected.currentView {
3068     opacity: 1;
3069 }
3070 .ideditor .layer-mapillary-detections .icon-detected.currentView rect {
3071     outline: 3px solid rgba(255, 238, 0, 1);
3072 }
3073
3074
3075 /* KartaView Image Layer */
3076 .ideditor li.list-item-photos.list-item-kartaview.active:after {
3077     background-color: #20c4ff;
3078 }
3079 .ideditor .layer-kartaview {
3080     pointer-events: none;
3081 }
3082 .ideditor .layer-kartaview .viewfield-group * {
3083     fill: #20c4ff;
3084 }
3085 .ideditor .layer-kartaview .sequence {
3086     stroke: #20c4ff;
3087 }
3088
3089
3090 /* Mapilio Image Layer */
3091 .ideditor li.list-item-photos.list-item-mapilio.active:after {
3092     background-color: #0056f1;
3093 }
3094 .ideditor .layer-mapilio {
3095     pointer-events: none;
3096 }
3097 .ideditor .layer-mapilio .viewfield-group * {
3098     fill: #0056f1;
3099 }
3100 .ideditor .layer-mapilio .viewfield-group:not(.currentView):not(.hovered) * {
3101     stroke: #ffffff;
3102     stroke-opacity: .6;
3103     fill-opacity: .6;
3104 }
3105 .ideditor .layer-mapilio .sequence {
3106     stroke: #0056f1;
3107 }
3108 .ideditor .photo-controls-mapilio {
3109     display: flex;
3110     align-items: center;
3111     justify-content: center;
3112     gap: 4px;
3113 }
3114 .ideditor .photo-controls-mapilio button {
3115     padding:0 6px;
3116     pointer-events: initial;
3117 }
3118 .ideditor .mapilio-wrapper {
3119     position: relative;
3120     background-color: #000;
3121     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
3122     background-position: center;
3123     background-repeat: no-repeat;
3124 }
3125 .ideditor #ideditor-viewer-mapilio-simple-wrap {
3126     height: 100%;
3127 }
3128 .ideditor #ideditor-viewer-mapilio-simple {
3129     width: 100%;
3130     height: 100%;
3131     transform-origin: 0 0;
3132 }
3133 .ideditor #ideditor-viewer-mapilio-simple img {
3134     width: 100%;
3135     height: 100%;
3136     -o-object-fit: cover;
3137        object-fit: cover;
3138     overflow: hidden;
3139 }
3140
3141 /* panoramax Image Layer */
3142 .ideditor li.list-item-photos.list-item-panoramax.active:after {
3143     background-color: #ff6f00;
3144 }
3145 .ideditor .layer-panoramax {
3146     pointer-events: none;
3147 }
3148 .ideditor .layer-panoramax .viewfield-group * {
3149     fill: #ff6f00;
3150     stroke: #ffffff;
3151     stroke-opacity: .6;
3152     fill-opacity: .6;
3153 }
3154 .ideditor .layer-panoramax .sequence {
3155     stroke: #ff6f00;
3156 }
3157 .ideditor .photo-controls-panoramax {
3158     display: flex;
3159     align-items: center;
3160     justify-content: center;
3161     gap: 4px;
3162 }
3163 .ideditor .photo-controls-panoramax button {
3164     padding:0 6px;
3165     pointer-events: initial;
3166 }
3167
3168 .ideditor label.panoramax-hd {
3169     float: left;
3170     cursor: pointer;
3171 }
3172 .ideditor .panoramax-hd span {
3173     margin-top: 2px;
3174 }
3175 .ideditor .panoramax-hd input[type="checkbox"] {
3176     width: 12px;
3177     height: 12px;
3178     margin: 0 2px;
3179 }
3180
3181 .ideditor .slider-wrap {
3182     display: inline-block;
3183     width: 100%;
3184 }
3185
3186 .ideditor .date-slider-label {
3187     display: flex;
3188     justify-content: space-between;
3189 }
3190
3191 .ideditor .list-option-date-slider {
3192     width: 100%;
3193 }
3194
3195 .ideditor .yearSliderSpan{
3196     padding: 2px;
3197 }
3198
3199
3200 .ideditor .list-item-date-slider label{
3201     display: block !important;
3202 }
3203
3204 /* Streetside Viewer (pannellum) */
3205 .ideditor .ms-wrapper .photo-attribution {
3206     line-height: 1.1em;
3207     padding: 4px 2px;
3208 }
3209 .ideditor .ms-wrapper .photo-attribution .image-link {
3210     display: block;
3211 }
3212 .ideditor .ms-wrapper .photo-attribution .attribution-row {
3213     display: flex;
3214     flex-flow: row nowrap;
3215     justify-content: space-between;
3216     align-items: center;
3217     padding: 0 5px;
3218 }
3219 .ideditor .ms-wrapper .photo-attribution .image-view-link {
3220     text-align: left;
3221     margin: 0 5px;
3222 }
3223 .ideditor .ms-wrapper .photo-attribution .image-report-link {
3224     text-align: right;
3225 }
3226
3227 .ideditor .ms-wrapper .photo-attribution a:active {
3228     color: #0fffc4;
3229 }
3230 @media (hover: hover) {
3231     .ideditor .ms-wrapper .photo-attribution a:hover {
3232         color: #0fffc4;
3233     }
3234 }
3235
3236 .ideditor .ms-wrapper .pnlm-compass.pnlm-control,
3237 .ideditor .vegbilder-wrapper  .pnlm-compass.pnlm-control,
3238 .ideditor .panoramax-wrapper  .pnlm-compass.pnlm-control {
3239     width: 26px;
3240     height: 26px;
3241     left: 4px;
3242     top: 60px;
3243     background-size: contain;
3244     background-repeat: no-repeat no-repeat;
3245 }
3246
3247 .ideditor label.streetside-hires {
3248     cursor: pointer;
3249 }
3250 .ideditor .streetside-hires span {
3251     margin-top: 2px;
3252 }
3253 .ideditor .streetside-hires input[type="checkbox"] {
3254     float: left;
3255     width: 12px;
3256     height: 12px;
3257     margin: 0 5px;
3258 }
3259
3260 .ideditor .pnlm-zoom-controls {
3261     margin-top: 6px;
3262 }
3263
3264
3265 /* Mapillary viewer */
3266 .ideditor #ideditor-mly .domRenderer .TagSymbol {
3267     font-size: 10px;
3268     background-color: rgba(0,0,0,0.4);
3269     padding: 0 4px;
3270     border-radius: 4px;
3271     top: -25px;
3272 }
3273
3274 .ideditor .mly-wrapper .mapillary-attribution-container {
3275     display: flex;
3276     align-items: center;
3277 }
3278
3279 .ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-icon-container {
3280     display: flex;
3281     align-items: center;
3282 }
3283
3284 .ideditor .mapillary-attribution-image-container {
3285   height: auto;
3286 }
3287
3288 .ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-username {
3289     padding: 0px 8px 0 6px;
3290 }
3291
3292 .ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-date {
3293     margin-right: 6px;
3294 }
3295
3296 /* KartaView viewer */
3297 .ideditor .kartaview-wrapper {
3298     position: relative;
3299     background-color: #000;
3300     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
3301     background-position: center;
3302     background-repeat: no-repeat;
3303 }
3304
3305 .ideditor .kartaview-wrapper img {
3306     width: 100%;
3307     height: 100%;
3308     overflow: hidden;
3309     -o-object-fit: cover;
3310        object-fit: cover;
3311 }
3312
3313 .ideditor .kartaview-wrapper .photo-attribution a:active {
3314     color: #20c4ff;
3315 }
3316 @media (hover: hover) {
3317     .ideditor .kartaview-wrapper .photo-attribution a:hover {
3318         color: #20c4ff;
3319     }
3320 }
3321
3322 .ideditor .kartaview-image-wrap {
3323     width: 100%;
3324     height: 100%;
3325     transform-origin: 0 0;
3326 }
3327
3328 .ideditor .panoramax-wrapper .photo-attribution a:active {
3329     color: #ff6f00;
3330 }
3331
3332 @media (hover: hover) {
3333     .ideditor .panoramax-wrapper .photo-attribution a:hover {
3334         color: #ff6f00;
3335     }
3336 }
3337
3338 .ideditor .photo-wrapper {
3339     position: relative;
3340     background-color: #000;
3341     background-position: center;
3342     background-repeat: no-repeat;
3343 }
3344
3345 .ideditor .photo-wrapper.show-loader {
3346     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
3347 }
3348
3349 .ideditor .photoviewer .plane-frame {
3350     height: 100%;
3351     width: 100%;
3352     transform-origin: 0 0;
3353 }
3354
3355 .ideditor .photoviewer .plane-frame > img.plane-photo {
3356     cursor: grab;
3357 }
3358 .ideditor .photoviewer .plane-frame.grabbing > img.plane-photo {
3359     cursor: grabbing;
3360 }
3361 /* override pannellum's custom cursors to use browser defaults */
3362 .ideditor .pnlm-grab {
3363     cursor: grab !important;
3364 }
3365 .ideditor .pnlm-grabbing {
3366     cursor: grabbing !important;
3367 }
3368
3369 /* photo-controls (step forward, back, rotate) */
3370 .ideditor .photo-controls-wrap {
3371     text-align: center;
3372     position: absolute;
3373     top: 10px;
3374     width: 100%;
3375     z-index: 10;
3376     pointer-events: none;
3377 }
3378
3379 .ideditor .photo-controls {
3380     display: inline-block;
3381     z-index: 10;
3382     pointer-events: initial;
3383 }
3384
3385 .ideditor .photo-controls button,
3386 .ideditor .photo-controls button:focus {
3387     height: 18px;
3388     width: 18px;
3389     line-height: 18px;
3390     background: rgba(0,0,0,0.65);
3391     color: #eee;
3392     border-radius: 0;
3393 }
3394 .ideditor .photo-controls button:first-of-type {
3395     border-radius: 3px 0 0 3px;
3396 }
3397 .ideditor .photo-controls button:last-of-type {
3398     border-radius: 0 3px 3px 0;
3399 }
3400 .ideditor .photo-controls button:active {
3401     background: rgba(0,0,0,0.85);
3402     color: #fff;
3403 }
3404 @media (hover: hover) {
3405     .ideditor .photo-controls button:hover {
3406         background: rgba(0,0,0,0.85);
3407         color: #fff;
3408     }
3409 }
3410
3411 /* local georeferenced photos */
3412 .ideditor .layer-local-photos {
3413     pointer-events: none;
3414 }
3415 .ideditor .layer-local-photos .viewfield-group * {
3416     fill: #ed00d9;
3417 }
3418 .ideditor .local-photos {
3419     display: flex;
3420 }
3421 .ideditor .local-photos > div {
3422     width: 50%;
3423 }
3424 .ideditor .local-photos > div:first-child {
3425     margin-right: 20px;
3426 }
3427
3428 .ideditor .list-local-photos {
3429     max-height: 40vh;
3430     overflow-y: scroll;
3431     overflow-x: auto;
3432     /* workaround for something like "overflow-x: visible"
3433        see https://stackoverflow.com/a/39554003 */
3434     margin-left: -100px;
3435     padding-left: 100px;
3436     margin-top: -20px;
3437     padding-top: 20px;
3438     min-height: 100px;
3439 }
3440 .ideditor .list-local-photos::-webkit-scrollbar {
3441     border-left: none;
3442 }
3443 .ideditor .list-local-photos li {
3444     list-style: none;
3445     display: flex;
3446     justify-content: space-between;
3447     height: 30px;
3448 }
3449 .ideditor .list-local-photos span.filename {
3450     display: block;
3451     width: 100%;
3452     white-space: nowrap;
3453     overflow: hidden;
3454     text-overflow: ellipsis;
3455     line-height: 30px;
3456     padding-left: 8px;
3457     border-bottom: 1px solid #ccc;
3458     border-left: 1px solid #ccc;
3459     border-right: 1px solid #ccc;
3460 }
3461 .ideditor .list-local-photos li:first-child span.filename {
3462     border-top: 1px solid #ccc;
3463     border-top-left-radius: 4px;
3464 }
3465 .ideditor .list-local-photos li:first-child button {
3466     border-top: 1px solid #ccc;
3467 }
3468 .ideditor .list-local-photos li:first-child button.remove {
3469     border-top-right-radius: 4px;
3470 }
3471 .ideditor .list-local-photos li:last-child span.filename {
3472     border-bottom-left-radius: 4px;
3473 }
3474 .ideditor .list-local-photos li:last-child button.remove {
3475     border-bottom-right-radius: 4px;
3476 }
3477 .ideditor .list-local-photos li.invalid button.zoom-to-data {
3478     display: none;
3479 }
3480 .ideditor .list-local-photos li button.no-geolocation {
3481     display: none;
3482 }
3483 .ideditor .list-local-photos li.invalid button.no-geolocation {
3484     display: block;
3485     color: red;
3486 }
3487 .ideditor .list-local-photos .placeholder div {
3488     display: block;
3489     height: 40px;
3490     width: 40px;
3491     background-position: center;
3492     background-size: cover;
3493     background-repeat: no-repeat;
3494     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
3495     filter: invert(1);
3496 }
3497 .ideditor .local-photos label.button {
3498     background: var(--link-color);
3499     color: #fff;
3500     font-weight: bold;
3501     padding: 10px 25px;
3502     text-align: center;
3503     font-size: 12px;
3504     display: inline-block;
3505     border-radius: 4px;
3506     cursor: pointer;
3507 }
3508
3509 .ideditor .photo-controls-local {
3510     display: flex;
3511     align-items: center;
3512     justify-content: center;
3513     gap: 4px;
3514 }
3515 .ideditor .photo-controls-local button {
3516     padding:0 6px;
3517     pointer-events: initial;
3518 }
3519
3520 .ideditor .photo-controls-local button:disabled {
3521     background: rgba(255,255,255,.25);
3522 }
3523
3524
3525 /* OSM Notes and QA Layers */
3526
3527 .ideditor .qa-header-icon .qaItem-fill,
3528 .ideditor .layer-keepRight .qaItem .qaItem-fill,
3529 .ideditor .layer-osmose .qaItem .qaItem-fill {
3530     stroke: #333;
3531     stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */
3532 }
3533
3534 .ideditor .note-header-icon .note-fill,
3535 .ideditor .layer-notes .note .note-fill {
3536     color: #f30;
3537     stroke: #333;
3538     stroke-width: 40px;
3539 }
3540 .ideditor .note-header-icon.new .note-fill,
3541 .ideditor .layer-notes .note.new .note-fill {
3542     color: #fe0;
3543     stroke: #333;
3544     stroke-width: 40px;
3545 }
3546 .ideditor .note-header-icon.closed .note-fill,
3547 .ideditor .layer-notes .note.closed .note-fill {
3548     color: #5d0;
3549     stroke: #333;
3550     stroke-width: 40px;
3551 }
3552
3553 /* slight adjustments to preset icon for note icons */
3554 .ideditor .note-header-icon .preset-icon-28 {
3555     top: 18px;
3556 }
3557 .ideditor .note-header-icon .note-icon-annotation {
3558     position: absolute;
3559     top: 22px;
3560     left: 22px;
3561     margin: auto;
3562 }
3563 .ideditor .note-header-icon .note-icon-annotation .icon {
3564     width: 15px;
3565     height: 15px;
3566 }
3567
3568 /* adjustment to center QA icons */
3569 .ideditor .qa-header-icon .preset-icon-28 {
3570     top: auto;
3571     left: auto;
3572 }
3573 .ideditor .qa-header-icon {
3574     display: flex;
3575     align-items: center;
3576     justify-content: center;
3577 }
3578
3579 /* Keep Right Issues
3580 ------------------------------------------------------- */
3581 .ideditor .keepRight.itemType-20,
3582 .ideditor .keepRight.itemType-40,
3583 .ideditor .keepRight.itemType-210,
3584 .ideditor .keepRight.itemType-270,
3585 .ideditor .keepRight.itemType-310,
3586 .ideditor .keepRight.itemType-320,
3587 .ideditor .keepRight.itemType-350 {   /* improper bridge tag */
3588     color: #ff9;
3589 }
3590
3591 .ideditor .keepRight.itemType-50 {    /* almost junctions */
3592     color: #88f;
3593 }
3594
3595 .ideditor .keepRight.itemType-60,
3596 .ideditor .keepRight.itemType-70,
3597 .ideditor .keepRight.itemType-90,
3598 .ideditor .keepRight.itemType-100,
3599 .ideditor .keepRight.itemType-110,
3600 .ideditor .keepRight.itemType-150,
3601 .ideditor .keepRight.itemType-220,
3602 .ideditor .keepRight.itemType-380 {   /* non-physical sport tag */
3603     color: #5d0;
3604 }
3605
3606 .ideditor .keepRight.itemType-130 {   /* disconnected ways */
3607     color: #fa3;
3608 }
3609
3610 .ideditor .keepRight.itemType-170 {   /* FIXME tag */
3611     color: #ff0;
3612 }
3613
3614 .ideditor .keepRight.itemType-190 {   /* intersection without junction */
3615     color: #f33;
3616 }
3617
3618 .ideditor .keepRight.itemType-200 {   /* overlapping ways */
3619     color: #fdbf6f;
3620 }
3621
3622 .ideditor .keepRight.itemType-160,
3623 .ideditor .keepRight.itemType-230 {   /* layer conflict */
3624     color: #b60;
3625 }
3626
3627 .ideditor .keepRight.itemType-280 {   /* boundary issues */
3628     color: #5f47a0;
3629 }
3630
3631 .ideditor .keepRight.itemType-180,
3632 .ideditor .keepRight.itemType-290 {   /* turn restriction issues */
3633     color: #ace;
3634 }
3635
3636 .ideditor .keepRight.itemType-300,
3637 .ideditor .keepRight.itemType-390 {   /* missing tracktype */
3638     color: #090;
3639 }
3640
3641 .ideditor .keepRight.itemType-360,
3642 .ideditor .keepRight.itemType-370,
3643 .ideditor .keepRight.itemType-410 {   /* website issues */
3644     color: #f9b;
3645 }
3646
3647 .ideditor .keepRight.itemType-120,
3648 .ideditor .keepRight.itemType-400 {   /* geometry / turn angles */
3649     color: #c35;
3650 }
3651
3652 /* Custom Map Data (geojson, gpx, kml, vector tile) */
3653 .ideditor .layer-mapdata {
3654     pointer-events: none;
3655 }
3656
3657 .ideditor .layer-mapdata path.shadow {
3658     pointer-events: stroke;
3659     stroke: #f6634f;
3660     stroke-width: 16;
3661     stroke-opacity: 0;
3662     fill: none;
3663 }
3664 .ideditor .layer-mapdata path.MultiPoint.shadow,
3665 .ideditor .layer-mapdata path.Point.shadow {
3666     pointer-events: fill;
3667     fill: #f6634f;
3668     fill-opacity: 0;
3669 }
3670 .ideditor .layer-mapdata path.shadow.hover:not(.selected) {
3671     stroke-opacity: 0.4;
3672 }
3673 .ideditor .layer-mapdata path.shadow.selected {
3674     stroke-opacity: 0.7;
3675 }
3676
3677 .ideditor .layer-mapdata path.stroke {
3678     stroke: #ff26d4;
3679     stroke-width: 2;
3680     fill: none;
3681 }
3682
3683 .ideditor .layer-mapdata path.fill {
3684     stroke-width: 0;
3685     stroke-opacity: 0.3;
3686     stroke: #ff26d4;
3687     fill: #ff26d4;
3688     fill-opacity: 0.3;
3689     fill-rule: evenodd;
3690 }
3691
3692 .ideditor .layer-mapdata text.label-halo,
3693 .ideditor .layer-mapdata text.label {
3694     font-size: 10px;
3695     font-weight: bold;
3696     dominant-baseline: middle;
3697 }
3698 .ideditor .layer-mapdata text.label {
3699     fill: #ddd;
3700 }
3701 .ideditor .layer-mapdata text.label.hover,
3702 .ideditor .layer-mapdata text.label.selected {
3703     fill: #fff;
3704 }
3705 .ideditor .layer-mapdata text.label-halo {
3706     opacity: 0.7;
3707     stroke: #000;
3708     stroke-width: 5px;
3709     stroke-miterlimit: 1;
3710 }
3711 /* Fill Styles */
3712
3713 .ideditor .low-zoom.fill-wireframe path.stroke,
3714 .ideditor .fill-wireframe path.stroke {
3715     stroke-width: 1 !important;
3716     stroke-opacity: 0.5 !important;
3717     stroke-dasharray: none !important;
3718     fill: none !important;
3719 }
3720 .ideditor .low-zoom.fill-wireframe .layer-mapdata path.stroke,
3721 .ideditor .fill-wireframe .layer-mapdata path.stroke {
3722     stroke-width: 2 !important;
3723     stroke-opacity: 1 !important;
3724 }
3725
3726 .ideditor .low-zoom.fill-wireframe path.shadow,
3727 .ideditor .fill-wireframe path.shadow {
3728     stroke-width: 12;
3729 }
3730
3731 .ideditor .fill-wireframe path.shadow.related:not(.selected),
3732 .ideditor .fill-wireframe path.shadow.hover:not(.selected) {
3733     stroke-opacity: 0.4;
3734 }
3735 .ideditor .fill-wireframe path.shadow.selected {
3736     stroke-opacity: 0.6;
3737 }
3738
3739 .ideditor .fill-wireframe .point,
3740 .ideditor .fill-wireframe .areaicon,
3741 .ideditor .fill-wireframe .areaicon-halo,
3742 .ideditor .fill-wireframe path.casing,
3743 .ideditor .fill-wireframe path.fill,
3744 .ideditor .fill-wireframe path.oneway {
3745     display: none !important;
3746 }
3747
3748 .ideditor .fill-partial path.area.fill {
3749     fill-opacity: 0;
3750     stroke-width: 60px;
3751     pointer-events: none;
3752 }
3753 .ideditor .fill-partial path.area.fill.tag-building_part {
3754     stroke-width: 40px;
3755 }
3756 .ideditor .fill-partial path.area.fill.tag-indoor {
3757     stroke-width: 20px;
3758 }
3759 .ideditor .fill-partial path.area.fill.tag-amenity-parking_space {
3760     stroke-width: 30px;
3761 }
3762 .ideditor.mode-browse .fill-partial path.area.fill,
3763 .ideditor.mode-select .fill-partial path.area.fill,
3764 .ideditor.mode-select-data .fill-partial path.area.fill,
3765 .ideditor.mode-select-error .fill-partial path.area.fill,
3766 .ideditor.mode-select-note .fill-partial path.area.fill {
3767     pointer-events: visibleStroke;
3768 }
3769 .ideditor.mode-browse .fill-full path.area.fill,
3770 .ideditor.mode-select .fill-full path.area.fill,
3771 .ideditor.mode-select-data .fill-full path.area.fill,
3772 .ideditor.mode-select-error .fill-full path.area.fill,
3773 .ideditor.mode-select-note .fill-full path.area.fill {
3774     pointer-events: visibleFill;
3775 }.ideditor svg.preset-icon-category-border path {
3776     stroke-width: 1;
3777     stroke: rgb(170, 170, 170);
3778     fill: rgba(170, 170, 170, 0.3);
3779 }
3780
3781 .ideditor .preset-category-barrier svg.preset-icon-category-border path {
3782     stroke: rgb(200, 144, 144);
3783     fill: rgba(200, 144, 144, 0.3);
3784 }
3785
3786 .ideditor .preset-category-building svg.preset-icon-category-border path {
3787     stroke: rgb(224, 110, 95);
3788     fill: rgba(224, 110, 95, 0.3);
3789 }
3790
3791 .ideditor .preset-category-landuse svg.preset-icon-category-border path {
3792     stroke: rgb(196, 189, 25);
3793     fill: rgba(196, 189, 25, 0.3);
3794 }
3795
3796 .ideditor .preset-category-natural svg.preset-icon-category-border path,
3797 .ideditor .preset-category-playground svg.preset-icon-category-border path,
3798 .ideditor .preset-category-golf svg.preset-icon-category-border path {
3799     stroke: rgb(140, 208, 95);
3800     fill: rgba(140, 208, 95, 0.3);
3801 }
3802
3803 .ideditor .preset-category-water svg.preset-icon-category-border path,
3804 .ideditor .preset-category-waterway svg.preset-icon-category-border path {
3805     stroke: rgb(119, 211, 222);
3806     fill: rgba(119, 211, 222, 0.3);
3807 }
3808
3809 .ideditor .preset-category-utility svg.preset-icon-category-border path {
3810     stroke: rgb(125, 125, 125);
3811     fill: rgba(219, 219, 125, 0.3);
3812 }
3813
3814 .ideditor .preset-category-path svg.preset-icon-category-border path {
3815     stroke: rgb(221, 221, 204);
3816     fill: rgba(221, 221, 204, 0.3);
3817 }
3818
3819 .ideditor .preset-category-road_service svg.preset-icon-category-border path,
3820 .ideditor .preset-category-road_minor svg.preset-icon-category-border path,
3821 .ideditor .preset-category-road_major svg.preset-icon-category-border path {
3822     stroke: #999;
3823 }
3824
3825 .ideditor .preset-category-rail svg.preset-icon-category-border path {
3826     stroke: #555;
3827 }
3828 /* Basics
3829 ------------------------------------------------------- */
3830 /* the root element of iD */
3831 .ideditor {
3832     height: 100%;
3833     width: 100%;
3834     margin: 0;
3835     padding: 0;
3836     border: 0;
3837     overflow: hidden;
3838
3839     /* Establish a local stacking context so all elements within iD are on the
3840        same layer relative to elements outside iD - #7457.
3841        https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
3842     */
3843     position: relative;
3844     z-index: 0;
3845
3846     font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont,
3847         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
3848         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
3849         sans-serif;
3850     color: var(--text-color);
3851
3852     touch-action: none;
3853     -ms-user-select: none;
3854     -ms-content-zooming: none;
3855 }
3856 .ideditor div {
3857     /* disable pinch-to-zoom of the UI on touch devices */
3858     touch-action: pan-x pan-y;
3859 }
3860
3861 .ideditor .main-content {
3862     position: relative;
3863     display: flex;
3864     flex-direction: column;
3865     overflow: hidden;
3866     height: 100%;
3867     touch-action: none;
3868 }
3869
3870 .ideditor .main-content.active {
3871     filter: none !important;
3872     transition-duration: 200ms;
3873 }
3874
3875 .ideditor .main-content.inactive {
3876     filter: grayscale(80%) brightness(80%);
3877     transition-duration: 200ms;
3878 }
3879
3880 .ideditor #ideditor-defs {
3881     /* Can't be display: none or the clippaths are ignored. */
3882     position: absolute;
3883     width: 0;
3884     height: 0;
3885 }
3886
3887 .ideditor div, .ideditor textarea, .ideditor label, .ideditor input, .ideditor form, .ideditor span, .ideditor ul, .ideditor li, .ideditor ol, .ideditor a, .ideditor button, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor p, .ideditor img {
3888     box-sizing: border-box;
3889 }
3890
3891 .ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
3892     -webkit-tap-highlight-color: rgba(0,0,0,0);
3893     -webkit-touch-callout: none;
3894 }
3895
3896 .ideditor ul li {
3897     list-style: none;
3898 }
3899
3900 .ideditor a,
3901 .ideditor button {
3902     cursor: pointer;
3903 }
3904
3905 .ideditor h2 {
3906     font-size: 25px;
3907     line-height: 1.25;
3908     font-weight: bold;
3909     margin-bottom: 20px;
3910 }
3911 .ideditor .header h2 {
3912     font-size: 20px;
3913     line-height: 1.25;
3914     font-weight: bold;
3915     margin-bottom: 0px;
3916 }
3917
3918 .ideditor h3:last-child,
3919 .ideditor h4:last-child { margin-bottom: 0;}
3920
3921 .ideditor h3 {
3922     font-size: 16px;
3923     line-height: 1.25;
3924     font-weight: bold;
3925     margin-bottom: 10px;
3926 }
3927 .ideditor h4, .ideditor h5 {
3928     font-size: 12px;
3929     font-weight: bold;
3930     padding-bottom: 10px;
3931 }
3932
3933 .ideditor button:focus,
3934 .ideditor textarea:focus,
3935 .ideditor input[type=text]:focus,
3936 .ideditor input[type=search]:focus,
3937 .ideditor input[type=number]:focus,
3938 .ideditor input[type=url]:focus,
3939 .ideditor input[type=tel]:focus,
3940 .ideditor input[type=email]:focus,
3941 .ideditor input[type=date]:focus {
3942     outline-color: transparent;
3943     outline-style: none;
3944 }
3945
3946 .ideditor ::-moz-placeholder {
3947     color: #aaa;
3948     opacity: 1; /* Firefox */
3949 }
3950
3951 .ideditor ::placeholder {
3952     color: #aaa;
3953     opacity: 1; /* Firefox */
3954 }
3955
3956 .ideditor p {
3957     font-size: 12px;
3958     margin: 0;
3959     padding: 0;
3960 }
3961 .ideditor p:last-child {
3962     padding-bottom: 0;
3963 }
3964 .ideditor em {
3965     font-style: italic;
3966 }
3967 .ideditor strong {
3968     font-weight: bold;
3969 }
3970 .ideditor a,
3971 .ideditor a:visited,
3972 .ideditor a:active {
3973         color: var(--link-color);
3974 }
3975 .ideditor a:focus {
3976     color: var(--link-focus-color);
3977 }
3978 @media (hover: hover) {
3979     .ideditor a:hover {
3980         color: var(--link-focus-color);
3981     }
3982 }
3983 .ideditor kbd {
3984     display: inline-block;
3985     text-align: center;
3986     padding: 3px 5px;
3987     font-size: 11px;
3988     line-height: 1.3;
3989     min-width: 0.9em;
3990     vertical-align: baseline;
3991     background-color: var(--outset-color);
3992     border: solid 1px var(--border-color);
3993     margin: 0 2px;
3994     border-bottom-color: var(--shadow-color);
3995     border-radius: 3px;
3996     box-shadow: inset 0 -1px 0 var(--shadow-color);
3997 }
3998
3999 .ideditor code {
4000     font-family: ui-monospace, monospace, monospace;
4001     background: rgba(174, 174, 174, 0.25);
4002     padding: 1px 2px;
4003 }
4004
4005 /* Forms
4006 ------------------------------------------------------- */
4007 .ideditor textarea,
4008 .ideditor input[type=text],
4009 .ideditor input[type=search],
4010 .ideditor input[type=number],
4011 .ideditor input[type=url],
4012 .ideditor input[type=tel],
4013 .ideditor input[type=email],
4014 .ideditor input[type=date] {
4015     background-color: var(--bg-color);
4016     color: var(--text-color);
4017     border: 1px solid var(--border-color);
4018     padding: 0px 10px 0px 10px;
4019     border-radius: 4px;
4020     text-overflow: ellipsis;
4021     overflow: auto;
4022 }
4023 .ideditor input[type=text],
4024 .ideditor input[type=search],
4025 .ideditor input[type=number],
4026 .ideditor input[type=url],
4027 .ideditor input[type=tel],
4028 .ideditor input[type=email],
4029 .ideditor input[type=date],
4030 .ideditor input[type=color] {
4031     /* need this since line-height interpretation may vary by font or browser */
4032     height: 2.585em;
4033 }
4034 .ideditor textarea  {
4035     min-height: 2em;
4036     padding-top: 5px;
4037     padding-bottom: 5px;
4038     resize: vertical;
4039     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
4040         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
4041         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
4042         sans-serif;
4043 }
4044
4045 .ideditor textarea:active,
4046 .ideditor input:active,
4047 .ideditor textarea:focus,
4048 .ideditor input:focus {
4049     background-color: var(--active-bg-color);
4050 }
4051
4052 .ideditor textarea.disabled,
4053 .ideditor input.disabled {
4054     color: var(--passive-text-color);
4055     background-color: var(--bg-color-3);
4056     cursor: not-allowed;
4057 }
4058
4059 .ideditor input[type="checkbox"],
4060 .ideditor input[type="radio"] {
4061     width: 14px;
4062     height: 14px;
4063     margin-right: 6px;
4064     cursor: pointer;
4065     vertical-align: middle;
4066 }
4067 .ideditor[dir='rtl'] input[type="checkbox"],
4068 .ideditor[dir='rtl'] input[type="radio"] {
4069     margin-left: 6px;
4070     margin-right: 0;
4071 }
4072
4073 .ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
4074     font-style: italic;
4075 }
4076
4077 .ideditor input.mixed::placeholder,
4078 .ideditor textarea.mixed::placeholder {
4079     font-style: italic;
4080 }
4081
4082 .ideditor[dir='rtl'] input:-moz-placeholder[dir="auto"] {
4083     /* hard-set rtl for placeholder texts in rtl locales, see
4084        https://github.com/openstreetmap/iD/pull/11091#issuecomment-2936953197 */
4085     direction: rtl;
4086 }
4087
4088 .ideditor[dir='rtl'] input:placeholder-shown[dir="auto"] {
4089     /* hard-set rtl for placeholder texts in rtl locales, see
4090        https://github.com/openstreetmap/iD/pull/11091#issuecomment-2936953197 */
4091     direction: rtl;
4092 }
4093
4094 /* keytraps need to be invisible yet not be display:none or visibility:hidden */
4095 .ideditor .keytrap {
4096     width: 0;
4097     height: 0;
4098     padding: 0;
4099     margin: 0;
4100     border: 0;
4101 }
4102
4103 /* tables */
4104 .ideditor table {
4105     background-color: var(--bg-color);
4106     border-collapse: collapse;
4107     width: 100%;
4108     border-spacing: 0;
4109 }
4110 .ideditor table th {
4111     text-align: left;
4112 }
4113 .ideditor table.tags, .ideditor table.tags td, .ideditor table.tags th {
4114     border: 1px solid var(--border-color);
4115     padding: 4px;
4116 }
4117
4118 .ideditor ::-ms-clear {
4119    display: none;
4120 }
4121
4122 /* Grid
4123 ------------------------------------------------------- */
4124 .ideditor .col6  { float: left; width: 50.0000%; max-width: 600px; }
4125 .ideditor .col12 { float: left; width: 100.0000%; }
4126
4127
4128 /* Utility Classes
4129 ------------------------------------------------------- */
4130 .ideditor .fillL {
4131     background: var(--bg-color);
4132     color: var(--text-color);
4133 }
4134 .ideditor .fillL2 {
4135     background: var(--bg-color-2);
4136     color: var(--text-color);
4137 }
4138 .ideditor .fillL3 {
4139     background: var(--bg-color-3);
4140     color: var(--text-color);
4141 }
4142 .ideditor .fillD {
4143     background: rgba(0,0,0,.5);
4144     color: #fff;
4145 }
4146 .ideditor .fillD2 {
4147     background: rgba(0,0,0,.75);
4148     color: #fff;
4149 }
4150
4151 .ideditor .fl { float: left;}
4152 .ideditor .fr { float: right;}
4153 .ideditor .al { left: 0; }
4154 .ideditor .ar { right: 0; }
4155
4156 .ideditor input.hide,
4157 .ideditor textarea.hide,
4158 .ideditor div.hide,
4159 .ideditor form.hide,
4160 .ideditor button.hide,
4161 .ideditor a.hide,
4162 .ideditor ul.hide,
4163 .ideditor li.hide {
4164     display: none;
4165 }
4166
4167 .ideditor .deemphasize {
4168     color: var(--muted-text-color);
4169 }
4170 .ideditor .content {
4171     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
4172 }
4173 .ideditor .loading.loading {
4174     background-color: #aaa;
4175     background-blend-mode: var(--bg-blend-mode);
4176     background-image: url(<%= asset_path("iD/img/loader_bg.gif") %>);
4177     background-size: 5px 5px;
4178 }
4179
4180
4181 /* Buttons
4182 ------------------------------------------------------- */
4183 .ideditor button {
4184     text-align: center;
4185     border: 0;
4186     background: var(--bg-color);
4187     color: var(--text-color);
4188     font-size: 12px;
4189     display: inline-block;
4190     border-radius: 4px;
4191 }
4192
4193 .ideditor button:focus,
4194 .ideditor button:active,
4195 .ideditor button.hover {
4196     background-color: var(--bg-color-3);
4197 }
4198 @media (hover: hover) {
4199     .ideditor button:hover {
4200         background-color: var(--bg-color-3);
4201     }
4202 }
4203 .ideditor button.active {
4204     background: var(--link-color);
4205 }
4206 .ideditor button.disabled {
4207     background-color: var(--transparent-button-color);
4208     color: var(--transparent-text-emphasis-color);
4209     cursor: not-allowed;
4210 }
4211 .ideditor button.disabled .icon {
4212     fill: var(--transparent-text-emphasis-color);
4213 }
4214
4215 .ideditor .joined > * {
4216     border-radius: 0;
4217     border-right: 1px solid rgba(0,0,0,.5);
4218 }
4219 .ideditor[dir='rtl'] .joined > * {
4220     border-left: 1px solid rgba(0,0,0,.5);
4221     border-right: none;
4222 }
4223
4224 .ideditor .fillL .joined > * {
4225     border-right: 1px solid var(--bg-color);
4226 }
4227 .ideditor .joined > *:first-child {
4228     border-radius: 4px 0 0 4px;
4229 }
4230 .ideditor[dir='rtl'] .joined > *:first-child {
4231     border-radius: 0 4px 4px 0;
4232 }
4233 .ideditor .joined > *:last-child {
4234     border-right-width: 0;
4235     border-radius: 0 4px 4px 0;
4236 }
4237 .ideditor[dir='rtl'] .joined > *.bar-button:last-child {
4238     border-radius: 4px 0 0 4px;
4239 }
4240
4241
4242 /* Action buttons */
4243 .ideditor button.action {
4244     background: var(--link-color);
4245     color: #fff;
4246     font-weight: bold;
4247 }
4248 .ideditor button.action:focus,
4249 .ideditor button.action:active {
4250     background: var(--link-focus-color);
4251 }
4252 .ideditor button.secondary-action {
4253     background: var(--bg-color-3);
4254     font-weight: bold;
4255 }
4256 .ideditor button.secondary-action:focus,
4257 .ideditor button.secondary-action:active {
4258     background: var(--passive-bg-color);
4259 }
4260
4261 .ideditor button.action.disabled,
4262 .ideditor button[disabled].action {
4263     background: var(--passive-bg-color);
4264     color: var(--passive-text-color);
4265     cursor: not-allowed;
4266 }
4267
4268 .ideditor button.action,
4269 .ideditor button.secondary-action {
4270     padding: 10px 5px;
4271 }
4272
4273 @media (hover: hover) {
4274     .ideditor button.action:hover {
4275         background: var(--link-focus-color);
4276     }
4277     .ideditor button.secondary-action:hover {
4278         background: var(--passive-bg-color);
4279     }
4280     .ideditor button.action.disabled:hover,
4281     .ideditor button[disabled].action:hover {
4282         background: var(--passive-bg-color);
4283         color: var(--passive-text-color);
4284         cursor: not-allowed;
4285     }
4286 }
4287
4288
4289 /* Icons
4290 ------------------------------------------------------- */
4291 .ideditor .icon {
4292     vertical-align: middle;
4293     width: 20px;
4294     height: 20px;
4295 }
4296
4297 .ideditor .icon.operation use {
4298     fill: var(--widget-color);
4299     color: #79f;
4300 }
4301 .ideditor button.disabled .icon.operation use,
4302 .ideditor .icon.operation.disabled use {
4303     fill: var(--transparent-text-color);
4304     color: var(--transparent-text-color);
4305 }
4306
4307 .ideditor .icon.monochrome use {
4308     fill: currentColor;
4309 }
4310
4311 .ideditor .icon.inline {
4312     vertical-align: text-top;
4313     display: inline-block;
4314     width: 1.17em;
4315     height: 1.17em;
4316     margin: 0px 3px;
4317 }
4318
4319 .ideditor .icon.pre-text {
4320     margin-right: 5px;
4321 }
4322 .ideditor[dir='rtl'] .icon.pre-text {
4323     margin-left: 5px;
4324     margin-right: 0;
4325 }
4326
4327 .ideditor .icon.pre-text.user-icon {
4328     margin-left: 5px;
4329     margin-right: 5px;
4330 }
4331
4332 .ideditor .icon.light {
4333     color: #fff;
4334     fill: currentColor;
4335 }
4336 .ideditor .icon.created {
4337     color: #00ca07;
4338 }
4339 .ideditor .icon.modified {
4340     color: #666;
4341 }
4342 .ideditor .icon.deleted {
4343     color: #ea0000;
4344 }
4345
4346 .ideditor .user-icon {
4347     max-height: 20px;
4348     max-width: 20px;
4349     height: auto;
4350     width: auto;
4351     border-radius: 3px;
4352 }
4353
4354 .ideditor .icon-annotation {
4355     color: #333;
4356     vertical-align: baseline;
4357 }
4358
4359 .ideditor button.loading .icon {
4360     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
4361     background-position: 0 0;
4362     background-size: auto;
4363 }
4364
4365
4366 /* Toolbar / Persistent UI Elements
4367 ------------------------------------------------------- */
4368 .ideditor .top-toolbar-wrap {
4369     position: relative;
4370     z-index: 101;
4371 }
4372 .ideditor .top-toolbar {
4373     display: flex;
4374     flex-flow: row nowrap;
4375     justify-content: space-between;
4376     padding: 10px 0 0 0;
4377     overflow-x: auto;
4378     overflow-y: hidden;
4379     height: 100%;
4380     width: 100%;
4381
4382     /* hide scrollbar but allow scrolling */
4383     scrollbar-width: none; /* Firefox */
4384     -ms-overflow-style: none; /* IE, Edge */
4385 }
4386 .ideditor .top-toolbar::-webkit-scrollbar {
4387     display: none; /* Chrome, Safari, Opera */
4388 }
4389 .ideditor .top-toolbar .toolbar-item {
4390     display: flex;
4391     flex: 0 1 auto;
4392     flex-flow: column wrap;
4393     justify-content: center;
4394 }
4395 .ideditor .top-toolbar .toolbar-item .item-content {
4396     display: flex;
4397     flex: 0 1 auto;
4398     flex-flow: row nowrap;
4399     justify-content: center;
4400     height: 40px;
4401     width: auto;
4402     margin: 0 5px;
4403 }
4404 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
4405 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
4406     margin-right: 10px;
4407 }
4408 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
4409 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
4410     margin-left: 10px;
4411 }
4412 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
4413 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
4414     padding-right: 5px;
4415 }
4416 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
4417 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
4418     padding-left: 5px;
4419 }
4420 .ideditor .top-toolbar .toolbar-item .item-label {
4421     text-align: center;
4422     font-size: 11px;
4423     white-space: nowrap;
4424     margin: 1px 2px 2px 2px;
4425 }
4426 .ideditor .top-toolbar .toolbar-item.spacer {
4427     width: 100%;
4428     flex-grow: 2;
4429 }
4430 .ideditor .top-toolbar .toolbar-item:first-child {
4431     justify-content: flex-start;
4432 }
4433 .ideditor .top-toolbar .toolbar-item:last-child {
4434     justify-content: flex-end;
4435 }
4436 .ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
4437     display: none;
4438 }
4439 .ideditor button.bar-button {
4440     flex: 0 0 auto;
4441     flex-flow: row nowrap;
4442     align-items: center;
4443     padding: 0 10px;
4444     min-width: 30px;
4445     white-space: nowrap;
4446     display: flex;
4447     font-weight: bold;
4448 }
4449 .ideditor button.bar-button .icon {
4450     flex: 0 0 20px;
4451 }
4452 .ideditor button.bar-button .label {
4453     flex: 0 1 auto;
4454     padding: 0 5px;
4455 }
4456
4457 .ideditor button.bar-button.dragging {
4458     opacity: 0.75;
4459     z-index: 200;
4460 }
4461 .ideditor button.bar-button.dragging .tooltip {
4462     display: none;
4463 }
4464 .ideditor button.bar-button.dragging.removing {
4465     cursor: url(<%= asset_path("iD/img/cursor/select-remove.png") %>), pointer;
4466 }
4467
4468 .ideditor button.save {
4469     background-image: linear-gradient(0, var(--accent-color), var(--accent-color));
4470 }
4471 .ideditor button.save .count {
4472     display: inline-block;
4473     min-width: 32px;
4474     text-align: center;
4475 }
4476
4477 .ideditor .help-pane svg.icon.inline.add-note,
4478 .ideditor button.add-note svg.icon {
4479     height: 15px;
4480     width: 15px;
4481     color: rgba(0,0,0,0.25);
4482     stroke: var(--text-color);
4483     stroke-width: 60px;
4484     margin-top: 3px;
4485 }
4486 .ideditor button.add-note svg.icon {
4487     margin-left: unset;
4488     margin-right: 4px;
4489 }
4490 .ideditor[dir='rtl'] button.add-note svg.icon {
4491     margin-left: 4px;
4492     margin-right: unset;
4493 }
4494 .ideditor .help-pane svg.icon.inline.add-note {
4495     margin-left: 3px;
4496     margin-right: 3px;
4497 }
4498
4499 .ideditor .spinner {
4500     opacity: .5;
4501     position: absolute;
4502     right: 4px;
4503     bottom: 4px;
4504     height: 20px;
4505     width: 20px;
4506 }
4507 .ideditor .spinner img {
4508     height: 100%;
4509     width: 100%;
4510     background: transparent;
4511     border-radius: 100%;
4512 }
4513 .ideditor[dir='rtl'] .spinner img {
4514     transform: scaleX(-1);
4515     filter: FlipH;
4516     -ms-filter: "FlipH";
4517 }
4518
4519
4520 .ideditor .top-toolbar.narrow .spinner,
4521 .ideditor .top-toolbar.narrow button.bar-button .label {
4522     display: none;
4523 }
4524 .ideditor .top-toolbar.narrow button .count {
4525     border-left-width: 0;
4526     border-right-width: 0;
4527 }
4528
4529 .ideditor[dir='ltr'] .undo-redo button:first-of-type {
4530     margin-right: 1px;
4531 }
4532 .ideditor[dir='rtl'] .undo-redo button:first-of-type {
4533     margin-left: 1px;
4534 }
4535
4536 /* Header for modals / panes
4537 ------------------------------------------------------- */
4538 .ideditor .header {
4539     border-bottom: 1px solid var(--border-color);
4540     padding: 20px 40px;
4541     position: relative;
4542     display: flex;
4543     align-items: center;
4544     justify-content: center;
4545     flex: 0 0 auto;
4546 }
4547
4548 .ideditor .header h3 {
4549     text-align: center;
4550     margin-bottom: 0;
4551     text-overflow: ellipsis;
4552     overflow: hidden;
4553     padding: 0;
4554 }
4555
4556 .ideditor .header button,
4557 .ideditor .modal > button {
4558     border-radius: 0;
4559     width: 40px;
4560     text-align: center;
4561     overflow: hidden;
4562 }
4563
4564 .ideditor .header button {
4565     position: relative;
4566     height: 100%;
4567 }
4568
4569 .ideditor .field-help-title button.close,
4570 .ideditor .sidebar .header button.close,
4571 .ideditor .preset-list-pane .header button.preset-choose {
4572     position: absolute;
4573     right: 0;
4574     top: 0;
4575 }
4576 .ideditor[dir='rtl'] .field-help-title button.close,
4577 .ideditor[dir='rtl'] .sidebar .header button.close,
4578 .ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
4579     left: 0;
4580     right: auto;
4581 }
4582
4583 .ideditor .entity-editor-pane .header button.preset-choose {
4584     position: absolute;
4585     left: 0;
4586     top: 0;
4587 }
4588 .ideditor[dir='rtl'] .entity-editor-pane .header button.preset-choose {
4589     left: auto;
4590     right: 0;
4591 }
4592
4593 .ideditor .preset-choose {
4594     font-size: 16px;
4595     line-height: 1.25;
4596     font-weight: bold;
4597 }
4598
4599 .ideditor .modal > button {
4600     position: absolute;
4601     right: 0;
4602     top: 0;
4603     height: 59px;
4604     z-index: 50;
4605 }
4606 .ideditor[dir='rtl'] .modal > button {
4607     left: 0;
4608     right: unset;
4609 }
4610
4611 .ideditor .footer {
4612     position: absolute;
4613     bottom: 0;
4614     margin: 0;
4615     padding: 0 15px;
4616     border-top: 1px solid var(--border-color);
4617     background-color: var(--bg-color-2);
4618     width: 100%;
4619     height: 2.5em;
4620     z-index: 1;
4621     flex-wrap: wrap;
4622     justify-content: space-between;
4623     align-items: center;
4624     list-style: none;
4625     display: flex;
4626 }
4627
4628 .ideditor .footer > a {
4629     justify-content: center;
4630 }
4631
4632 /* Hide/Toggle collapsible sections (aka Disclosure)
4633 ------------------------------------------------------- */
4634 .ideditor .hide-toggle .icon.pre-text {
4635     vertical-align: middle;
4636     width: 16px;
4637     height: 16px;
4638     margin-top: -3px;
4639 }
4640
4641 .ideditor a:visited.hide-toggle,
4642 .ideditor a.hide-toggle {
4643     display: inline-block;
4644     font-size: 14px;
4645     font-weight: bold;
4646     margin-bottom: 5px;
4647 }
4648
4649
4650 /* Sidebar / Inspector
4651 ------------------------------------------------------- */
4652 .ideditor .sidebar {
4653     position: relative;
4654     float: left;
4655     height: 100%;
4656     z-index: 10;
4657     background: var(--bg-color-2);
4658     -ms-user-select: element;
4659     border: 0px solid var(--border-color);
4660     border-right-width: 1px;
4661 }
4662 .ideditor[dir='rtl'] .sidebar {
4663     float: right;
4664     border-right-width: 0px;
4665     border-left-width: 1px;
4666 }
4667
4668 .ideditor .sidebar-resizer {
4669     position: absolute;
4670     top: 0;
4671     right: -10px;
4672     width: 10px;
4673     height: 100%;
4674     cursor: col-resize;
4675     /* disable drag-to-select */
4676     -webkit-user-select: none;
4677        -moz-user-select: none;
4678             user-select: none;
4679 }
4680 .ideditor[dir='rtl'] .sidebar-resizer {
4681     right: auto;
4682     left: -6px;
4683 }
4684
4685 .ideditor .sidebar.collapsed > *:not(.sidebar-resizer) {
4686     display: none;
4687 }
4688 .ideditor .sidebar.collapsed .sidebar-resizer {
4689     /* make target wider to avoid the user accidentally resizing window */
4690     width: 10px;
4691     right: -10px;
4692 }
4693 .ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
4694     left: -10px;
4695 }
4696
4697 .ideditor .sidebar-component {
4698     position: absolute;
4699     top: 0;
4700     left: 0;
4701     bottom: 0;
4702     right: 0;
4703     display: flex;
4704     flex-direction: column;
4705 }
4706
4707 .ideditor .sidebar-component .body {
4708     width: 100%;
4709     height: 100%;
4710     overflow-y: auto;
4711     overflow-x: hidden;
4712     position: relative;
4713 }
4714
4715 .ideditor .panewrap {
4716     position: absolute;
4717     width: 200%;
4718     height: 100%;
4719     right: -100%;
4720 }
4721
4722 .ideditor .pane {
4723     position: absolute;
4724     width: 50%;
4725     top: 0;
4726     bottom: 2.5em;
4727     display: flex;
4728     flex-direction: column;
4729 }
4730
4731 .ideditor .pane:first-child {
4732     left: 0;
4733 }
4734
4735 .ideditor .pane:last-child {
4736     right: 0;
4737 }
4738 .ideditor .feature-list-pane {
4739     display: flex;
4740     flex-direction: column;
4741     height: 100%;
4742 }
4743
4744 .ideditor .inspector-wrap {
4745     width: 100%;
4746     height: 100%;
4747     overflow: hidden;
4748     position: relative;
4749 }
4750
4751 .ideditor .inspector-hidden {
4752     display: none;
4753 }
4754
4755 .ideditor .inspector-body {
4756     overflow-y: scroll;
4757     overflow-x: hidden;
4758     position: relative;
4759     height: 100%;
4760     flex: 1 1 100%;
4761 }
4762 .ideditor .entity-editor {
4763     padding: 20px;
4764 }
4765 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
4766 .ideditor .entity-editor > div:last-child {
4767     margin-bottom: 150px;
4768 }
4769
4770 .ideditor .sidebar .search-header {
4771     position: relative;
4772     overflow: hidden;
4773     flex: 0 0 auto;
4774 }
4775 .ideditor .sidebar .search-header .icon {
4776     display: inline-block;
4777     position: absolute;
4778     left: 10px;
4779     height: 100%;
4780     pointer-events: none;
4781 }
4782 .ideditor[dir='rtl'] .sidebar .search-header .icon {
4783     left: auto;
4784     right: 10px;
4785 }
4786
4787 .ideditor .sidebar .search-header input {
4788     width: 100%;
4789     padding: 0 10px;
4790     height: 3em;
4791     border-radius: 0;
4792     border-width: 0;
4793     border-bottom-width: 1px;
4794     text-indent: 30px;
4795     font-size: 18px;
4796     font-weight: bold;
4797 }
4798
4799 .ideditor .section:not(:last-child),
4800 .ideditor .map-pane .section {
4801     margin-bottom: 30px;
4802 }
4803
4804
4805 /* Feature List / Search Results
4806 ------------------------------------------------------- */
4807 .ideditor .feature-list  {
4808     width: 100%;
4809 }
4810 .ideditor .no-results-item,
4811 .ideditor .feature-list-item {
4812     width: 100%;
4813     position: relative;
4814     border-bottom: 1px solid var(--border-color);
4815     border-radius: 0;
4816 }
4817 .ideditor .no-results-item {
4818     padding: 10px;
4819     font-weight: bold;
4820 }
4821
4822 .ideditor .geocode-item {
4823     width: 100%;
4824     max-width: 200px;
4825     margin: 30px auto;
4826     min-height: 40px;
4827 }
4828
4829 .ideditor .feature-list-item {
4830     display: flex;
4831 }
4832 .ideditor .feature-list-item .label {
4833     text-align: left;
4834     padding: 10px;
4835     white-space: nowrap;
4836     text-overflow: ellipsis;
4837     overflow: hidden;
4838     flex: 1 1 auto;
4839 }
4840 .ideditor[dir='rtl'] .feature-list-item .label {
4841     text-align: right;
4842 }
4843
4844 .ideditor .feature-list-item .label .icon {
4845     opacity: .5;
4846 }
4847 .ideditor .feature-list-item .close {
4848     padding: 10px;
4849
4850 }
4851 .ideditor .feature-list-item .close .icon {
4852     opacity: 0.5;
4853 }
4854 .ideditor .feature-list-item .entity-type {
4855     color: var(--link-color);
4856     font-weight: bold;
4857 }
4858 .ideditor .feature-list-item:active .entity-type,
4859 .ideditor .feature-list-item:focus .entity-type {
4860     color: var(--link-focus-color);
4861 }
4862 @media (hover: hover) {
4863     .ideditor .feature-list-item:hover .entity-type {
4864         color: var(--link-focus-color);
4865     }
4866 }
4867 .ideditor .feature-list-item .entity-name {
4868     color: var(--passive-text-color);
4869     padding-left: 10px;
4870 }
4871 .ideditor[dir='rtl'] .feature-list-item .entity-name {
4872     padding-left: 0;
4873     padding-right: 10px;
4874 }
4875 .ideditor .section-selected-features .feature-list {
4876     border: 1px solid var(--border-color);
4877     border-radius: 4px;
4878     overflow: hidden;
4879     margin-top: 5px;
4880 }
4881 .ideditor .section-selected-features .feature-list-item:last-child {
4882     border: none;
4883 }
4884 .ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:first-child) {
4885     border-top-left-radius: 0;
4886     border-bottom-left-radius: 0;
4887 }
4888 .ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
4889     border-top-right-radius: 0;
4890     border-bottom-right-radius: 0;
4891 }
4892 .ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:last-child) {
4893     border-top-right-radius: 0;
4894     border-bottom-right-radius: 0;
4895 }
4896 .ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
4897     border-top-left-radius: 0;
4898     border-bottom-left-radius: 0;
4899 }
4900
4901 /* Preset List and Icons
4902 ------------------------------------------------------- */
4903 .ideditor .preset-list  {
4904     width: 100%;
4905     padding: 20px 20px 10px 20px;
4906 }
4907
4908 .ideditor .preset-list-item {
4909     margin-bottom: 10px;
4910     position: static;
4911 }
4912
4913 .ideditor .preset-list-button-wrap {
4914     min-height: 62px;
4915     display: flex;
4916     border: 1px solid var(--border-color);
4917     border-radius: 4px;
4918 }
4919
4920 .ideditor .preset-list-button {
4921     width: 100%;
4922     height: 100%;
4923     position: relative;
4924     display: flex;
4925     align-items: center;
4926 }
4927
4928 .ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
4929     background: var(--bg-color-3);
4930 }
4931
4932 .ideditor .preset-icon-container {
4933     position: relative;
4934     width: 60px;
4935     height: 60px;
4936     text-align: center;
4937     display: flex;
4938     align-items: center;
4939     justify-content: center;
4940     flex: 0 0 auto;
4941 }
4942 .ideditor .preset-icon-container.small {
4943     width: 40px;
4944     height: 40px;
4945     flex: 0 0 auto;
4946 }
4947 .ideditor .preset-icon-container img.image-icon {
4948     width: 50px;
4949     height: 50px;
4950     -o-object-fit: contain;
4951        object-fit: contain;
4952     border-radius: 2px;
4953     z-index: 2;
4954     visibility: hidden;
4955 }
4956 .ideditor .preset-icon-container.showing-img img.image-icon {
4957     visibility: visible;
4958 }
4959 .ideditor .preset-icon-container.showing-img *:not(.image-icon) {
4960     display: none;
4961 }
4962
4963 .ideditor .preset-icon-point-border path {
4964     stroke: #333;
4965     stroke-width: 1.2;
4966     fill: transparent;
4967 }
4968
4969 .ideditor .preset-icon-category-border path {
4970     stroke: #999;
4971     stroke-width: 1px;
4972     fill: transparent;
4973     -webkit-backface-visibility: hidden;
4974             backface-visibility: hidden;
4975     vector-effect: non-scaling-stroke;
4976 }
4977
4978 .ideditor .preset-icon-line {
4979     margin: auto;
4980     position: absolute;
4981     left: 0;
4982     right: 0;
4983     top: 0;
4984     width: 100%;
4985     height: 100%;
4986 }
4987 .ideditor .preset-icon-container path {
4988     cursor: inherit;
4989 }
4990 .ideditor .preset-icon-container circle.vertex {
4991     fill: #fff;
4992     stroke: rgba(0, 0, 0, 0.25);
4993 }
4994 .ideditor .preset-icon-fill circle.midpoint {
4995     fill: transparent;
4996     stroke: rgba(0, 0, 0, 0.25);
4997 }
4998 /* use a consistent stroke width */
4999 .ideditor .preset-icon-container path.line.stroke {
5000     stroke-width: 2 !important;
5001 }
5002 .ideditor .preset-icon-container path.line.casing {
5003     stroke-width: 4 !important;
5004 }
5005
5006 .ideditor .preset-icon-fill {
5007     margin: auto;
5008     position: absolute;
5009     width: 100%;
5010     height: 100%;
5011     left: 0;
5012     top: 0;
5013 }
5014 .ideditor .preset-icon-container svg,
5015 .ideditor .preset-icon-container svg > * {
5016     cursor: inherit !important;
5017 }
5018 .ideditor .preset-icon-fill path.area.stroke {
5019     fill: transparent;
5020 }
5021
5022 .ideditor .preset-icon-fill-vertex circle {
5023     stroke-width: 1.5px;
5024     stroke: var(--text-color);
5025     fill: var(--bg-color-3);
5026     -webkit-backface-visibility: hidden;
5027             backface-visibility: hidden;
5028 }
5029
5030 .ideditor .preset-icon {
5031     width: 100%;
5032     height:100%;
5033     position: absolute;
5034     z-index: 1;
5035 }
5036 .ideditor .preset-icon .icon {
5037     position: absolute;
5038     margin: auto;
5039     left: 0;
5040     right: 0;
5041     width: 100%;
5042     height: 100%;
5043     transform: scale(0.48);
5044 }
5045 .ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
5046     transform: translateY(-7%) scale(0.27);
5047 }
5048 .ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
5049     transform: translateY(-9%) scale(0.5);
5050 }
5051 .ideditor .preset-icon.framed .icon {
5052     transform: scale(0.4);
5053 }
5054 .ideditor .preset-icon.framed.line-geom:not(.category) .icon,
5055 .ideditor .preset-icon.framed.route-geom .icon {
5056     top: 20%;
5057     transform: translateY(-30%) scale(0.4);
5058 }
5059 .ideditor .preset-icon-iD .icon {
5060     transform: scale(1);
5061 }
5062 .ideditor .preset-icon-iD.framed .icon {
5063     transform: scale(0.74);
5064 }
5065 .ideditor .preset-icon-iD.framed.line-geom:not(.category) .icon,
5066 .ideditor .preset-icon-iD.framed.route-geom .icon {
5067     transform: translateY(-30%) scale(0.74);
5068 }
5069 .ideditor .preset-icon-container.fallback .preset-icon .icon {
5070     transform: scale(0.5) !important;
5071 }
5072
5073 .ideditor .preset-list-button .label {
5074     display: flex;
5075     flex-flow: row wrap;
5076     align-items: center;
5077     background: var(--bg-color-2);
5078     text-align: left;
5079     padding: 5px 10px;
5080     border-left: 1px solid var(--transparent-border-color);
5081     flex: 1 1 100%;
5082     align-self: stretch;
5083 }
5084 .ideditor[dir='rtl'] .preset-list-button .label {
5085     text-align: right;
5086     border-left: none;
5087     border-right: 1px solid var(--transparent-border-color);
5088 }
5089 .ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
5090     border-top-right-radius: 4px;
5091     border-bottom-right-radius: 4px;
5092 }
5093 .ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
5094     border-top-left-radius: 4px;
5095     border-bottom-left-radius: 4px;
5096 }
5097 .ideditor[dir='ltr'] .category .preset-list-button .label {
5098     border-radius: 0px 4px 4px 0px;
5099 }
5100 .ideditor[dir='rtl'] .category .preset-list-button .label {
5101     border-radius: 4px 0px 0px 4px;
5102 }
5103
5104 .ideditor .preset-list-item.mixed-types .label {
5105     font-style: italic;
5106 }
5107
5108 .ideditor button.preset-reset .label.flash-bg {
5109     animation: flash-bg 750ms;
5110 }
5111 @keyframes flash-bg {
5112     0% { background-color: var(--bg-color); }
5113     100% { background-color: var(--bg-color-2); }
5114 }
5115
5116 .ideditor .preset-list-button .label-inner {
5117     width: 100%;
5118     line-height: 1.35em;
5119 }
5120 .ideditor .preset-list-button .label-inner .namepart {
5121     text-overflow: ellipsis;
5122 }
5123 .ideditor .preset-list-button .label-inner .namepart:nth-child(1) {
5124     font-weight: bold;
5125 }
5126
5127 .ideditor .preset-list-button:focus .label,
5128 .ideditor .preset-list-button:active .label,
5129 .ideditor .preset-list-button.disabled,
5130 .ideditor .preset-list-button.disabled .label {
5131     background-color: var(--bg-color-3);
5132 }
5133 @media (hover: hover) {
5134     .ideditor .preset-list-button:hover .label {
5135         background-color: var(--bg-color-3);
5136     }
5137 }
5138
5139 .ideditor .preset-list-button-wrap button.tag-reference-button {
5140     width: 32px;
5141     flex: 0 0 auto;
5142 }
5143 .ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
5144     background: var(--bg-color-2);
5145 }
5146 .ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
5147     border-left: 1px solid var(--border-color);
5148 }
5149 .ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
5150     border-right: 1px solid var(--border-color);
5151 }
5152 .ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
5153     border-radius: 0 4px 4px 0;
5154 }
5155 .ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
5156     border-radius: 4px 0 0 4px;
5157 }
5158 .ideditor .preset-list-button-wrap button.tag-reference-button .icon {
5159     opacity: .5;
5160 }
5161 .ideditor .preset-list-button-wrap .accessory-buttons {
5162     display: flex;
5163 }
5164
5165
5166 .ideditor .current .preset-list-button,
5167 .ideditor .current .preset-list-button .label {
5168     background-color: var(--selected-bg-color);
5169 }
5170
5171 .ideditor .category .preset-list-button:after,
5172 .ideditor .category .preset-list-button:before {
5173     content: "";
5174     position: absolute;
5175     top: -5px;
5176     left: -1px; right: -1px;
5177     border: 1px solid var(--border-color);
5178     border-bottom: none;
5179     border-radius: 6px 6px 0 0;
5180     height: 6px;
5181 }
5182
5183 .ideditor .category .preset-list-button:before {
5184     top: -3px;
5185 }
5186
5187 .ideditor .subgrid .preset-list {
5188     width: auto;
5189     padding: 10px;
5190     margin: 0 -10px;
5191     border: 0;
5192     border-radius: 8px;
5193 }
5194 .ideditor .subgrid .preset-list > *:last-child {
5195     margin-bottom: 0;
5196 }
5197
5198 .ideditor .subgrid .arrow {
5199     border: solid rgba(0, 0, 0, 0);
5200     border-width: 10px;
5201     border-bottom-color: var(--bg-color-3);
5202     width: 0;
5203     height: 0;
5204     margin-left: 50%;
5205     margin-left: calc(50% - 10px);
5206 }
5207
5208
5209 /* Quick links
5210 ------------------------------------------------------- */
5211 .ideditor .quick-links {
5212     display: flex;
5213     flex-flow: row wrap;
5214     justify-content: flex-end;
5215     padding: 5px 0 0 0;
5216 }
5217 .ideditor .quick-link {
5218     margin: 0 5px;
5219 }
5220
5221
5222 /* Entity/Preset Editor
5223 ------------------------------------------------------- */
5224 .ideditor .section .grouped-items-area {
5225     padding: 10px;
5226     margin: 0 -10px 10px -10px;
5227     border-radius: 8px;
5228     background: var(--bg-color-3);
5229 }
5230 .ideditor .section .grouped-items-area:empty {
5231     display: none;
5232 }
5233
5234 /*
5235     The parts of a field:
5236     - `.form-field` is a `div` wraps the entire thing
5237     - `.field-label` is a `label` that wraps the top part, it contains;
5238        - `span` classed `label-text`
5239        - 0..n buttons for "remove", "modified", "tag reference"
5240     - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
5241        - usually an `input`
5242        - sometimes some buttons (translate, increment, decrement)
5243        - or could just be a `div` with anything really
5244     - `.tag-reference-body` at the bottom (usually hidden)
5245
5246    .------------------.                             -
5247    |  Name        | i |  <- .field-label        |
5248    +------------------+                               |
5249    |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
5250    '------------------'                               |
5251      tag reference       <- .tag-reference-body      |
5252                                                     -
5253 */
5254
5255 .ideditor .form-field {
5256     display: flex;
5257     flex-flow: row wrap;
5258     margin-bottom: 10px;
5259     width: 100%;
5260     transition: margin-bottom 200ms;
5261 }
5262
5263 .ideditor .form-field.nowrap,
5264 .ideditor .wrap-form-field:last-child .form-field {
5265     margin-bottom: 0;
5266 }
5267
5268 /* A `label` element that wraps the top section */
5269 .ideditor .field-label {
5270     display: flex;
5271     flex-flow: row nowrap;
5272     flex: 1 1 100%;
5273     position: relative;
5274     font-weight: bold;
5275     color: var(--text-color);
5276     background: var(--bg-color-2);
5277     border: 1px solid var(--border-color);
5278     border-radius: 4px 4px 0 0;
5279     overflow: hidden;
5280 }
5281 .ideditor .field-label .label-text {
5282     overflow: hidden;
5283     text-overflow: ellipsis;
5284     flex: 1 1 auto;
5285     padding: 5px 0 4px 10px;
5286 }
5287 .ideditor[dir='rtl'] .field-label .label-text {
5288     padding: 5px 10px 4px 0;
5289 }
5290 .ideditor .field-label .label-text {
5291     white-space: nowrap;
5292 }
5293
5294 .ideditor .label-text .label-textannotation svg.icon {
5295     margin: 0 8px;
5296     color: #333;
5297     opacity: 0.5;
5298     width: 14px;
5299     height: 14px;
5300     vertical-align: text-top;
5301 }
5302
5303 .ideditor .field-label button {
5304     flex: 0 0 auto;
5305     border-left: 1px solid var(--border-color);
5306     width: 32px;
5307     border-radius: 0;
5308 }
5309 .ideditor[dir='rtl'] .field-label button {
5310     border-left: none;
5311     border-right: 1px solid var(--border-color);
5312 }
5313 .ideditor .field-label button:not(:hover):not(:active):not(:focus) {
5314     background: none;
5315 }
5316 .ideditor .field-label .icon {
5317     opacity: .5;
5318     fill: var(--text-color);
5319 }
5320
5321 .ideditor .field-label .modified-icon,
5322 .ideditor .field-label .remove-icon,
5323 .ideditor .field-label .remove-icon-multilingual {
5324     display: none;
5325 }
5326 .ideditor .modified:not(.locked) .field-label .modified-icon,
5327 .ideditor .present:not(.locked) .field-label .remove-icon,
5328 .ideditor .present:not(.locked) .field-label .remove-icon-multilingual {
5329     display: inline-block;
5330 }
5331
5332 /* A `div` element that wraps the bottom section */
5333 .ideditor .form-field-input-wrap {
5334     display: flex;
5335     flex-flow: row nowrap;
5336     width: 100%;
5337     flex: 1 1 auto;
5338     border-top: 0;
5339     border-radius: 0 0 4px 4px;
5340 }
5341 .ideditor .nowrap .form-field-input-wrap {
5342     border-radius: 0;
5343 }
5344
5345
5346 .ideditor .form-field-input-wrap > input,
5347 .ideditor .form-field-input-wrap > label,
5348 .ideditor .form-field-input-wrap > textarea,
5349 .ideditor .form-field-input-wrap > ul.chiplist {
5350     flex: 1 1 auto;
5351     border: 1px solid var(--border-color);
5352     border-top: 0;
5353     border-radius: 0;
5354     position: relative;
5355 }
5356 .ideditor .form-field-input-wrap > textarea {
5357     height: 65px;
5358     border-radius: 0 0 4px 4px;
5359 }
5360
5361 /* Buttons inside fields */
5362 .ideditor .form-field-button {
5363     flex: 0 0 auto;
5364     width: 32px;
5365     position: relative;
5366     background-color: var(--bg-color);
5367     border: 1px solid var(--border-color);
5368     border-radius: 0;
5369     border-top-width: 0;
5370     border-left-width: 0;
5371     vertical-align: top;
5372 }
5373 .ideditor[dir='rtl'] .form-field-button {
5374     border-left-width: 1px;
5375     border-right-width: 0;
5376 }
5377 .ideditor .form-field-button:active,
5378 .ideditor .form-field-button:focus {
5379     background-color: var(--active-bg-color);
5380 }
5381 @media (hover: hover) {
5382     .ideditor .form-field-button:hover {
5383         background-color: var(--active-bg-color);
5384     }
5385 }
5386 .ideditor .form-field-button .icon {
5387     fill: var(--text-color);
5388     opacity: .5;
5389 }
5390 .ideditor .form-field-button.colour-preview {
5391     border-radius: 0 0 4px 0;
5392 }
5393 .ideditor .form-field-button.colour-preview > div.colour-box {
5394     border: 3px solid var(--bg-color);
5395     height: 100%;
5396     border-radius: 8px;
5397     cursor: pointer;
5398     text-align: center;
5399     line-height: 20px;
5400     padding: 1px 0 0 1px;
5401 }
5402 .ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box {
5403     border-color: var(--bg-color-3);
5404 }
5405 .ideditor .form-field-button.colour-preview:active > div.colour-box,
5406 .ideditor .form-field-button.colour-preview:focus > div.colour-box {
5407     border-color: var(--active-bg-color);
5408 }
5409 @media (hover: hover) {
5410     .ideditor .form-field-button.colour-preview:hover > div.colour-box {
5411         border-color: var(--active-bg-color);
5412     }
5413 }
5414 .ideditor input.colour-selector {
5415     visibility: hidden;
5416     position: absolute;
5417 }
5418 .ideditor input.date-selector {
5419     visibility: hidden;
5420     position: absolute;
5421 }
5422
5423
5424 /* round corners of first/last child elements */
5425 .ideditor .form-field-input-wrap > button:last-of-type {
5426     border-bottom-right-radius: 4px;
5427 }
5428 .ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {
5429     border-bottom-left-radius: 4px;
5430 }
5431
5432
5433 /* Field - Access, DirectionalCombo
5434 ------------------------------------------------------- */
5435 .ideditor .form-field-input-access,
5436 .ideditor .form-field-input-directionalcombo {
5437     flex: 1 1 auto;
5438     display: flex;
5439     flex-flow: row wrap;
5440 }
5441
5442 /* Field - lists with labeled input items
5443 ------------------------------------------------------- */
5444 .ideditor .form-field ul.rows {
5445     flex: 1 1 auto;
5446     border: 1px solid var(--border-color);
5447     border-top: 0;
5448     border-radius: 0 0 4px 4px;
5449     overflow: hidden;
5450     width: 100%;
5451 }
5452 .ideditor .form-field ul.rows li {
5453     border-top: 1px solid var(--border-color);
5454 }
5455 .ideditor .form-field ul.rows li:first-child {
5456     border-top: 0;
5457 }
5458 .ideditor .form-field ul.rows li {
5459     display: flex;
5460     flex-flow: row nowrap;
5461 }
5462 .ideditor .form-field ul.rows li.labeled-input > div {
5463     flex: 1 1 auto;
5464     width: 100%;
5465     border-radius: 0;
5466     line-height: 0.95rem;
5467 }
5468 .ideditor .form-field ul.rows li input {
5469     border-radius: 0;
5470     border-width: 0;
5471     width: 100%;
5472 }
5473 .ideditor .form-field ul.rows li button {
5474     border-width: 0;
5475 }
5476 .ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
5477 .ideditor[dir='ltr'] .form-field ul.rows li button {
5478     border-left-width: 1px;
5479 }
5480 .ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
5481 .ideditor[dir='rtl'] .form-field ul.rows li button {
5482     border-right-width: 1px;
5483 }
5484
5485 /* Field - lists with labeled input items as table
5486 ------------------------------------------------------- */
5487 .ideditor .form-field ul.rows.rows-table {
5488     display: table;
5489     width: 100%;
5490 }
5491 .ideditor .form-field ul.rows.rows-table li.labeled-input {
5492     display: table-row;
5493 }
5494 .ideditor .form-field ul.rows.rows-table li.labeled-input > div:first-child {
5495     display: table-cell;
5496     width: auto;
5497     max-width: 170px;
5498     white-space: nowrap;
5499     text-overflow: ellipsis;
5500     overflow: hidden;
5501 }
5502 .ideditor .form-field ul.rows.rows-table li.labeled-input > div:nth-child(2) {
5503     display: table-cell;
5504     width: auto;
5505 }
5506
5507
5508 /* Field - Structure
5509 ------------------------------------------------------- */
5510 .ideditor .structure-extras-wrap {
5511     width: 100%;
5512     padding: 10px 10px;
5513     background: var(--bg-color);
5514     border: 1px solid var(--border-color);
5515     border-top: 0px;
5516     border-radius: 0 0 4px 4px;
5517 }
5518 .ideditor .structure-extras-wrap > ul.rows {
5519     border: 1px solid var(--border-color);
5520     border-radius: 4px;
5521 }
5522
5523
5524 /* Field - Combo / Multicombo
5525 ------------------------------------------------------- */
5526 .ideditor .form-field-input-combo > input:only-of-type {
5527     border-radius: 0 0 4px 4px;
5528     width: 100%;
5529 }
5530 .ideditor .form-field-input-combo.empty-combobox input,
5531 .ideditor .form-field-input-multicombo .empty-combobox input {
5532     padding-right: 10px;
5533     padding-left: 10px;
5534 }
5535 .ideditor .form-field-input-combo.empty-combobox .combobox-caret,
5536 .ideditor .form-field-input-multicombo .empty-combobox .combobox-caret {
5537     display: none;
5538 }
5539
5540 .ideditor .form-field-input-combo input.raw-value,
5541 .ideditor .form-field-input-semicombo input.raw-value,
5542 .ideditor .form-field-input-multicombo input.raw-value {
5543     font-family: monospace;
5544 }
5545 .ideditor .form-field-input-combo input.known-value,
5546 .ideditor .form-field-input-semicombo input.known-value,
5547 .ideditor .form-field-input-multicombo input.known-value {
5548     color: var(--link-color);
5549 }
5550
5551 .ideditor .form-field-input-multicombo ul.chiplist {
5552     padding: 5px 8px 5px 8px;
5553     background: var(--bg-color);
5554     display: block;
5555     border-radius: 0 0 4px 4px;
5556     width: 100%;
5557 }
5558
5559 .ideditor .form-field-input-multicombo li {
5560     display: inline-flex;
5561     flex-flow: row nowrap;
5562     margin-bottom: 3px;
5563     margin-top: 3px;
5564     border-radius: 4px;
5565 }
5566 .ideditor[dir='ltr'] .form-field-input-multicombo li {
5567     margin-right: 6px;
5568 }
5569 .ideditor[dir='rtl'] .form-field-input-multicombo li {
5570     margin-left: 6px;
5571 }
5572
5573 .ideditor .form-field-input-multicombo li.chip {
5574     background-color: var(--nested-bg-color);
5575     border: 1px solid var(--nested-border-color);
5576     max-width: 100%;
5577     color: var(--link-color);
5578 }
5579 .ideditor .form-field-input-multicombo li.chip.negated span {
5580     text-decoration: line-through;
5581 }
5582 .ideditor .form-field-input-multicombo li.chip input {
5583     width: 1em;
5584     height: 11px;
5585     margin-top: 7px;
5586 }
5587 .ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
5588     padding: 2px 0px 2px 5px;
5589 }
5590 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
5591     padding: 2px 5px 2px 0px;
5592 }
5593 .ideditor .form-field-input-multicombo li.chip.draggable {
5594     cursor: grab;
5595 }
5596 .ideditor .form-field-input-multicombo li.chip.dragging {
5597     opacity: 0.75;
5598     z-index: 3000;
5599     cursor: grabbing;
5600 }
5601 .ideditor .form-field-input-multicombo li.chip.raw-value {
5602     font-family: monospace;
5603     color: var(--text-color);
5604 }
5605 .ideditor .form-field-input-multicombo li.mixed {
5606     border-color: var(--nested-bg-color);
5607     color: var(--passive-text-color);
5608     font-style: italic;
5609 }
5610
5611 .ideditor .form-field-input-multicombo li.chip > span {
5612     display: block;
5613     flex: 1 1 auto;
5614     overflow: hidden;
5615     word-wrap: break-word;
5616     margin-top: 4px;
5617 }
5618
5619 .ideditor .form-field-input-multicombo a,
5620 .ideditor .form-field-input-multicombo button {
5621     font-family: Arial, Helvetica, sans-serif !important;
5622     font-size: 16px !important;
5623     padding: 0px 5px 0px 5px;
5624     margin: 0;
5625     cursor: pointer;
5626     color: var(--muted-text-color);
5627     display: block;
5628     text-align: center;
5629     flex: 0 0 auto;
5630     background: transparent;
5631     border: 0;
5632 }
5633
5634 .ideditor .form-field-input-multicombo li.chip .field_buttons {
5635     display: inline-block;
5636     text-align: right;
5637     margin-right: 2px;
5638     margin-top: 2px;
5639     margin-bottom: 2px;
5640 }
5641
5642 .ideditor .form-field-input-multicombo li.chip .field_buttons a {
5643     display: block;
5644     float: right;
5645     margin-top: -2px;
5646     margin-bottom: -2px;
5647 }
5648
5649 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip .field_buttons a {
5650     float: left;
5651 }
5652
5653 .ideditor .form-field-input-multicombo li.chip .field_buttons button {
5654     display: inline-block;
5655     margin-right: -4px;
5656     margin-top: -4px;
5657     margin-bottom: -2px;
5658     margin-left: -2px;
5659 }
5660
5661 .ideditor .form-field-input-multicombo li.chip .field_buttons button:hover {
5662     background-color: transparent;
5663 }
5664
5665 .ideditor .form-field-input-multicombo .input-wrap {
5666     border: 1px solid var(--border-color-2);
5667     width: 180px;
5668 }
5669 .ideditor .form-field-input-multicombo input {
5670     border: none;
5671     width: 100%;
5672 }
5673
5674 .ideditor .form-field-input-multicombo input:focus {
5675     border-radius: 4px !important;
5676 }
5677
5678 .ideditor .form-field-input-multicombo .full-line-chips li.chip {
5679     width: 100%;
5680 }
5681 .ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
5682     width: auto;
5683 }
5684
5685 .ideditor .form-field-input-combo .tag-value-icon,
5686 .ideditor .form-field-input-semicombo .input-wrap .tag-value-icon,
5687 .ideditor .form-field-input-multicombo .input-wrap .tag-value-icon {
5688     display: inline-block;
5689     position: relative;
5690     height: 24px;
5691     width: 30px;
5692     margin-right: -30px;
5693     align-self: center;
5694     vertical-align: middle;
5695     z-index: 1;
5696     padding-left: 11px;
5697 }
5698 .ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon,
5699 .ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon,
5700 .ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon  {
5701     margin-right: 0;
5702     margin-left: -30px;
5703     padding-left: 0;
5704     padding-right: 11px;
5705 }
5706 .ideditor .tag-value-icon .icon {
5707     width: 21px;
5708     height: 21px;
5709     margin: auto;
5710 }
5711 .ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input,
5712 .ideditor[dir='ltr'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
5713 .ideditor[dir='ltr'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
5714     padding-left: 40px;
5715 }
5716 .ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input,
5717 .ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
5718 .ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
5719     padding-right: 40px;
5720 }
5721 .ideditor .combobox-option .tag-value-icon {
5722     display: inline-block;
5723     width: 28px;
5724 }
5725 .ideditor .form-field-input-multicombo li.chip .tag-value-icon .icon {
5726     margin: 0;
5727     margin-right: 6px;
5728     display: inline-block;
5729     vertical-align: center;
5730 }
5731 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip .tag-value-icon .icon {
5732     margin-right: 6px;
5733     margin-left: 0;
5734 }
5735
5736
5737 /* Field - Text / Numeric
5738 ------------------------------------------------------- */
5739 .ideditor .form-field-input-text > input:only-child,
5740 .ideditor .form-field-input-tel > input:only-of-type,
5741 .ideditor .form-field-input-email > input:only-of-type,
5742 .ideditor .form-field-input-url > input:only-child {
5743     border-radius: 0 0 4px 4px;
5744 }
5745 .ideditor .form-field-input-text > input:not(:only-child),
5746 .ideditor .form-field-input-url > input:not(:only-child) {
5747     border-radius: 0 0 0 4px;
5748 }
5749 .ideditor .form-field-input-number > input:only-of-type {
5750     border-radius: 0 0 0 4px;
5751 }
5752 .ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
5753     border-radius: 0 0 4px 0;
5754 }
5755 .ideditor .form-field-input-number > button:last-of-type {
5756     border-radius: 0 0 4px 0;
5757 }
5758 .ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
5759     border-radius: 0 0 0 4px;
5760 }
5761
5762 .ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
5763 .ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
5764 .ideditor[dir='ltr'] .form-field-input-identifier > button {
5765     border-bottom-right-radius: 4px;
5766 }
5767 .ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
5768 .ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
5769 .ideditor[dir='rtl'] .form-field-input-identifier > button {
5770     border-bottom-left-radius: 4px;
5771 }
5772
5773 /* draw the up/down on the buttons */
5774 .ideditor .form-field-input-number button.decrement::after,
5775 .ideditor .form-field-input-number button.increment::after {
5776     content: "";
5777     height: 0; width: 0;
5778     position: absolute;
5779     left: 0; right: 0; bottom: 0; top: 0;
5780     margin: auto;
5781 }
5782 .ideditor .form-field-input-number button.decrement::after {
5783     border-top: 5px solid var(--border-color);
5784     border-left: 5px solid transparent;
5785     border-right: 5px solid transparent;
5786 }
5787 .ideditor .form-field-input-number button.increment::after {
5788     border-bottom: 5px solid var(--border-color);
5789     border-left: 5px solid transparent;
5790     border-right: 5px solid transparent;
5791 }
5792
5793
5794 /* Field - Checkbox
5795 ------------------------------------------------------- */
5796 .ideditor .form-field-input-check {
5797     display: flex;
5798     align-items: center;
5799     background: var(--bg-color);
5800     padding: 5px 10px;
5801     color: var(--link-color);
5802     border: 1px solid var(--border-color);
5803     border-top: 0;
5804     cursor: pointer;
5805 }
5806 .ideditor .form-field-input-check > input[type="checkbox"] {
5807     flex: 0 1 auto;
5808     margin-top: 0;
5809 }
5810 .ideditor .form-field-input-check > span {
5811     flex: 1 1 auto;
5812 }
5813 .ideditor .form-field-input-check > span.mixed {
5814     font-style: italic;
5815 }
5816 .ideditor .form-field-input-check > .reverser {
5817     flex: 0 1 auto;
5818     background-color: var(--nested-bg-color);
5819     border: 1px solid var(--nested-border-color);
5820     border-radius: 2px;
5821     padding: 0px 8px;
5822     color: inherit;
5823 }
5824 .ideditor[dir='ltr'] .form-field-input-check > .reverser {
5825     padding-right: 2px;
5826 }
5827 .ideditor[dir='rtl'] .form-field-input-check > .reverser {
5828     padding-left: 2px;
5829 }
5830 .ideditor .form-field-input-check > .reverser:active,
5831 .ideditor .form-field-input-check > .reverser:focus {
5832     background: var(--nested-highlight-color);
5833 }
5834 @media (hover: hover) {
5835     .ideditor .form-field-input-check > .reverser:hover {
5836         background: var(--nested-highlight-color);
5837     }
5838 }
5839 .ideditor .form-field-input-check > .reverser.hide {
5840     display: none;
5841 }
5842 .ideditor .form-field-input-check:active,
5843 .ideditor .form-field-input-check:focus {
5844     background: var(--active-bg-color);
5845 }
5846 @media (hover: hover) {
5847     .ideditor .form-field-input-check:hover {
5848         background: var(--active-bg-color);
5849     }
5850 }
5851 .ideditor .form-field-input-check .set {
5852     color: inherit;
5853 }
5854 .ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
5855     opacity: .5;
5856 }
5857
5858
5859 /* Field - Radio button
5860 ------------------------------------------------------- */
5861 .ideditor .form-field-input-radio {
5862     flex: 1 1 auto;
5863     display: flex;
5864     flex-flow: row wrap;
5865 }
5866 .ideditor .form-field-input-radio > label {
5867     flex: 1 1 auto;
5868     display: flex;
5869     flex-flow: row nowrap;
5870     align-items: center;
5871     width: 100%;
5872     padding: 5px 10px;
5873     background-color: var(--bg-color);
5874     color: var(--link-color);
5875     cursor: pointer;
5876 }
5877 .ideditor .form-field-input-radio > label.mixed {
5878     font-style: italic;
5879 }
5880 .ideditor .form-field-input-radio > label:last-child {
5881     border-radius: 0 0 4px 4px;
5882 }
5883 .ideditor .form-field-input-radio > label:active,
5884 .ideditor .form-field-input-radio > label:focus {
5885     background-color: var(--bg-color-3);
5886 }
5887 @media (hover: hover) {
5888     .ideditor .form-field-input-radio > label:hover {
5889         background-color: var(--bg-color-3);
5890     }
5891 }
5892 .ideditor .form-field-input-radio > label.active {
5893     background-color: var(--selected-bg-color);
5894 }
5895 .ideditor .form-field-input-radio > label:not(:last-of-type) {
5896     border-bottom: 1px solid var(--border-color);
5897 }
5898 .ideditor .form-field-input-radio > label > input[type="radio"] {
5899     flex: 0 1 auto;
5900 }
5901 .ideditor .form-field-input-radio > label > span {
5902     flex: 1 1 auto;
5903     overflow: hidden;
5904     white-space: nowrap;
5905     text-overflow: ellipsis;
5906 }
5907
5908 /* Hide placeholder for radio buttons if another is active, or not in hover state */
5909 .ideditor .form-field-input-radio label.active ~ .placeholder,
5910 .ideditor .form-field-input-radio .placeholder {
5911     padding: 0;
5912     opacity: 0;
5913     width: 0;
5914     height: 0;
5915     display: block;
5916     overflow: hidden;
5917 }
5918
5919
5920 /* Field - roadheight and roadspeed
5921 ------------------------------------------------------- */
5922 .ideditor .form-field-input-roadheight input.roadheight-number,
5923 .ideditor .form-field-input-roadheight input.roadheight-secondary-number,
5924 .ideditor .form-field-input-roadspeed input.roadspeed-number {
5925     flex-basis: 0;
5926     width: 0;
5927 }
5928 .ideditor .form-field-input-roadheight input.roadheight-unit,
5929 .ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
5930     flex: 0 1 auto;
5931     width: 60px;
5932 }
5933 .ideditor .form-field-input-roadspeed input.roadspeed-unit {
5934     flex: 0 1 auto;
5935     width: 80px;
5936 }
5937 .ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
5938 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
5939     border-radius: 0 0 0 4px;
5940 }
5941 .ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
5942 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
5943     border-radius: 0 0 4px 0;
5944 }
5945 .ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
5946 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
5947     border-left: 0;
5948     border-radius: 0 0 4px 0;
5949 }
5950 .ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
5951 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
5952     border-right: 0;
5953     border-radius: 0 0 0 4px;
5954 }
5955
5956
5957 /* Field - Localized Name
5958 ------------------------------------------------------- */
5959 .ideditor .form-field-input-localized > input.localized-main {
5960     border-radius: 0 0 0 4px;
5961 }
5962 .ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
5963     border-radius: 0 0 4px 0;
5964 }
5965 .ideditor .form-field-input-localized > button.localized-add {
5966     border-radius: 0 0 4px 0;
5967 }
5968 .ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
5969     border-radius: 0 0 0 4px;
5970 }
5971
5972 .ideditor .form-field-input-localized button.localized-add.disabled,
5973 .ideditor .form-field-input-localized input.localized-main.disabled,
5974 .ideditor .form-field-input-localized input.localized-lang.disabled,
5975 .ideditor .form-field-input-localized input.localized-value.disabled {
5976     color: var(--passive-text-color);
5977     background-color: var(--bg-color-3);
5978     cursor: not-allowed;
5979 }
5980
5981 /* nested subfields for name in different languages */
5982 .ideditor .localized-multilingual {
5983     padding: 0 10px;
5984     flex-basis: 100%;
5985 }
5986 .ideditor .localized-multilingual .entry {
5987     position: relative;
5988     overflow: hidden;
5989 }
5990
5991 /* draws a little line connecting the multilingual field up to the name field */
5992 .ideditor .localized-multilingual .entry::before {
5993     content: "";
5994     display: block;
5995     position: absolute;
5996     background: var(--border-color);
5997     height: 11px;
5998     width: 1px;
5999     left: 0;
6000     right: 0;
6001     top: -11px;
6002     margin: auto;
6003 }
6004
6005 .ideditor .localized-multilingual .entry .localized-lang {
6006     border-radius: 0;
6007     border-top-width: 0;
6008     width: 100%;
6009 }
6010 .ideditor .localized-multilingual .entry .localized-value {
6011     border-top-width: 0;
6012     border-radius: 0 0 4px 4px;
6013     width: 100%;
6014 }
6015
6016
6017 /* Field - Address
6018 ------------------------------------------------------- */
6019 .ideditor .form-field-input-address {
6020     flex: 1 1 auto;
6021     display: flex;
6022     flex-flow: row wrap;
6023     border: 1px solid var(--border-color);
6024     border-top: 0px;
6025 }
6026
6027 .ideditor .addr-row {
6028     flex: 1 1 auto;
6029     display: flex;
6030     width: 100%;
6031 }
6032
6033 .ideditor .addr-row > input {
6034     flex: 1 1 auto;
6035     border-radius: 0;
6036     border-right: 0;
6037     border-bottom: 0;
6038 }
6039 .ideditor[dir='rtl'] .addr-row input {
6040     border-right: 1px solid var(--border-color);
6041     border-left: 0;
6042 }
6043
6044 .ideditor .addr-row:first-of-type input {
6045     border-top: 0;
6046 }
6047 .ideditor .addr-row input:first-of-type {
6048     border-left: 0;
6049 }
6050 .ideditor[dir='rtl'] .addr-row input:first-of-type {
6051     border-right: 0;
6052 }
6053 .ideditor .addr-row:last-of-type input:first-of-type {
6054     border-radius: 0 0 0 4px;
6055 }
6056 .ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
6057     border-radius: 0 0 4px 0;
6058 }
6059 .ideditor .addr-row:last-of-type input:last-of-type {
6060     border-radius: 0 0 4px 0;
6061 }
6062 .ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
6063     border-radius: 0 0 0 4px;
6064 }
6065 .ideditor .combobox-address-street-place .combobox-option.address-street,
6066 .ideditor .combobox-address-street-place .combobox-option.address-place {
6067     padding-right: 20px;
6068 }
6069 .ideditor .combobox-address-street-place .combobox-option.address-street::after,
6070 .ideditor .combobox-address-street-place .combobox-option.address-place::after {
6071     position: absolute;
6072     right: 2px;
6073     opacity: 0.4;
6074 }
6075 .ideditor .combobox-address-street-place .combobox-option.address-place::after {
6076     content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPg0KICAgIDxwYXRoIGQ9Ik0xMCwzIEM2LjY4NiwzIDQsNS42MTIgNCw4LjgzMyBDNCwxMi4wNTUgMTAsMTcgMTAsMTcgQzEwLDE3IDE2LDEyLjA1NSAxNiw4LjgzMyBDMTYsNS42MTIgMTMuMzE0LDMgMTAsMyB6IE0xMC4xODcsNi41IEMxMS41MTMsNi41IDEyLjU4Nyw3LjU0NSAxMi41ODcsOC44MzMgQzEyLjU4NywxMC4xMjIgMTEuNTEzLDExLjE2NyAxMC4xODcsMTEuMTY3IEM4Ljg2MiwxMS4xNjcgNy43ODcsMTAuMTIyIDcuNzg3LDguODMzIEM3Ljc4Nyw3LjU0NSA4Ljg2Miw2LjUgMTAuMTg3LDYuNSB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4NCjwvc3ZnPg==);
6077 }
6078
6079
6080 /* Field - Wikipedia
6081 ------------------------------------------------------- */
6082 .ideditor .form-field-input-wikipedia {
6083     display: flex;
6084     flex-flow: row wrap;
6085     flex: 1 1 auto;
6086 }
6087
6088 .ideditor .wiki-lang-container,
6089 .ideditor .wiki-title-container {
6090     display: flex;
6091     flex-flow: row nowrap;
6092     flex: 1 1 auto;
6093     width: 100%;
6094 }
6095
6096 .ideditor .wiki-lang-container > input.wiki-lang,
6097 .ideditor .wiki-title-container > input.wiki-title {
6098     flex: 1 1 auto;
6099     border-top: 0;
6100     border-radius: 0;
6101 }
6102 .ideditor .wiki-title-container > input.wiki-title {
6103     border-radius: 0 0 0 4px;
6104 }
6105 .ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
6106     border-radius: 0 0 4px 0;
6107 }
6108 .ideditor .wiki-title-container > button.wiki-link,
6109 .ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
6110     border-radius: 0 0 4px 0;
6111 }
6112 .ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
6113 .ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
6114     border-radius: 0 0 0 4px;
6115 }
6116
6117
6118 /* Field - Restriction Editor
6119 ------------------------------------------------------- */
6120 .ideditor .form-field-input-restrictions {
6121     display: block;
6122     border: 1px solid var(--passive-bg-color);
6123     border-top: 0;
6124     border-radius: 0 0 4px 4px;
6125 }
6126
6127 .ideditor .form-field-input-restrictions .restriction-controls-container {
6128     background-color: var(--bg-color);
6129     width: 100%;
6130     padding: 5px;
6131     border-top: 1px solid var(--border-color);
6132     border-radius: 0 0 4px 4px;
6133 }
6134
6135 .ideditor .restriction-controls-container .restriction-controls {
6136     display: table;
6137     -webkit-user-select: none;
6138        -moz-user-select: none;
6139             user-select: none;
6140 }
6141
6142 .ideditor .restriction-controls .restriction-control {
6143     display: table-row;
6144     padding: 5px 10px;
6145     height: 25px;
6146 }
6147
6148 .ideditor .restriction-control input,
6149 .ideditor .restriction-control > span {
6150     display: table-cell;
6151     text-align: start;
6152     padding: 0px 5px;
6153 }
6154
6155 .ideditor .restriction-control > span.restriction-control-label {
6156     text-align: end;
6157 }
6158
6159 .ideditor .restriction-control input {
6160     width: 60px;
6161     padding: 0;
6162     margin: 0px 5px;
6163     vertical-align: middle;
6164 }
6165
6166 .ideditor .form-field-input-restrictions .restriction-container {
6167     position: relative;
6168     color: #333;
6169     height: 370px;
6170 }
6171 /* zero width space, so container takes up space */
6172 .ideditor .form-field-input-restrictions .restriction-container:after {
6173     content: '\200b';
6174 }
6175
6176 .ideditor .form-field-input-restrictions svg.surface {
6177     width: 100%;
6178     height: 100%;
6179 }
6180
6181 .ideditor .restriction-container .restriction-help {
6182     z-index: 1;
6183     position: absolute;
6184     top: 0;
6185     left: 0;
6186     right: 0;
6187     padding: 2px 6px;
6188     background-color: var(--transparent-bg-color);
6189     color: var(--passive-text-color);
6190     text-align: center;
6191     pointer-events: none;
6192     -webkit-user-select: none;
6193        -moz-user-select: none;
6194             user-select: none;
6195 }
6196
6197 .ideditor .restriction-help span {
6198     margin: 2px;
6199 }
6200
6201 .ideditor .restriction-help .qualifier {
6202     color: #666;
6203     font-weight: bold;
6204 }
6205 .ideditor .restriction-help .qualifier.allow {
6206     color: #8b5;
6207 }
6208 .ideditor .restriction-help .qualifier.restrict {
6209     color: #d53;
6210 }
6211 .ideditor .restriction-help .qualifier.only {
6212     color: #78f;
6213 }
6214
6215
6216 /* Field - Changeset Comment
6217 ------------------------------------------------------- */
6218 .ideditor .form-field-comment:not(.present) textarea {
6219     border-color: rgb(160, 160, 160);
6220 }
6221 .ideditor .form-field-comment:not(.present) .field-label {
6222     border-color: rgb(160, 160, 160);
6223     background-color: rgba(160, 160, 160, 0.2);
6224 }
6225 .ideditor .form-field-comment:not(.present) button {
6226     border-color: rgb(160, 160, 160);
6227 }
6228
6229
6230 /* Field - Combobox
6231 ------------------------------------------------------- */
6232 .ideditor[dir='ltr'] textarea.combobox-input,
6233 .ideditor[dir='ltr'] input.combobox-input {
6234     /* leave room for the caret */
6235     padding-right: 20px;
6236 }
6237 .ideditor[dir='rtl'] textarea.combobox-input,
6238 .ideditor[dir='rtl'] input.combobox-input {
6239     padding-left: 20px;
6240 }
6241
6242 .ideditor div.combobox {
6243     z-index: 9999;
6244     display: none;
6245     box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
6246     margin-top: -1px;
6247     background: var(--bg-color);
6248     max-height: 245px;
6249     overflow-y: auto;
6250     overflow-x: hidden;
6251     border: 1px solid var(--border-color);
6252     border-radius: 0 0 4px 4px;
6253 }
6254
6255 .ideditor .combobox a {
6256     display: block;
6257     padding: 5px 10px;
6258     border-top: 1px solid var(--border-color);
6259     line-height: 0.95rem;
6260     break: all;
6261 }
6262
6263 .ideditor .combobox a.selected,
6264 .ideditor .combobox a:active,
6265 .ideditor .combobox a:focus {
6266     background: var(--bg-color-3);
6267 }
6268 @media (hover: hover) {
6269     .ideditor .combobox a:hover {
6270         background: var(--bg-color-3);
6271     }
6272 }
6273
6274 .ideditor .combobox a:first-child {
6275     border-top: 0;
6276     padding: 4px 10px;
6277 }
6278
6279 .ideditor .combobox-caret {
6280     display: inline-block;
6281     position: relative;
6282     height: 5px;
6283     width: 30px !important;
6284     margin-left: -30px;
6285     align-self: center;
6286     vertical-align: middle;
6287     cursor: pointer;
6288 }
6289 .ideditor[dir='rtl'] .combobox-caret {
6290   margin-left: 0;
6291   margin-right: -30px;
6292 }
6293
6294 .ideditor .combobox-caret::after {
6295     content: "";
6296     height: 0; width: 0;
6297     position: absolute;
6298     left: 0; right: 0; bottom: 0; top: 0;
6299     margin: auto;
6300     border-top: 5px solid var(--border-color);
6301     border-left: 5px solid transparent;
6302     border-right: 5px solid transparent;
6303 }
6304
6305 .ideditor .combobox .combobox-option.raw-option {
6306     font-family: monospace;
6307     color: var(--text-color);
6308 }
6309
6310 .ideditor .combobox .combobox-option.virtual-option {
6311     font-style: italic;
6312     color: var(--text-color);
6313 }
6314
6315 .ideditor .form-field-input-wrap {
6316     position: relative;
6317 }
6318
6319 .ideditor .form-field-input-wrap span.length-indicator-wrap {
6320     visibility: hidden;
6321     position: absolute;
6322     top: -5px;
6323     left: 0;
6324     right: 0;
6325 }
6326
6327 .ideditor .form-field-input-wrap input:focus + span.length-indicator-wrap,
6328 .ideditor .form-field-input-wrap textarea:focus + span.length-indicator-wrap,
6329 .ideditor .form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap,
6330 .ideditor .form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap {
6331     visibility: visible;
6332 }
6333
6334 .ideditor .form-field-input-wrap span.length-indicator {
6335     display: block;
6336     left: 0;
6337     right: 0;
6338     height: 4px;
6339     background-color: var(--link-color);
6340     border-right-style: solid;
6341     border-right-color: lightgray;
6342 }
6343
6344 .ideditor .form-field-input-wrap span.length-indicator.limit-reached {
6345     border-right-color: red;
6346 }
6347
6348 .ideditor .tooltip.max-length-warning {
6349     z-index: 10;
6350 }
6351
6352 /* Field Help
6353 ------------------------------------------------------- */
6354 .ideditor .field-help-body {
6355     display: block;
6356     position: absolute;
6357     top: 0;
6358     left: 20px;
6359     right: 20px;
6360     margin: 5px;
6361     padding: 8px;
6362     border: 1px solid var(--border-color);
6363     border-radius: 4px;
6364     z-index: 20;
6365     background: var(--transparent-bg-color);
6366     box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
6367 }
6368
6369 .ideditor .field-help-title h2 {
6370     padding: 10px;
6371     margin-bottom: 0px;
6372     font-size: 17px;
6373 }
6374 .ideditor .field-help-title button {
6375     width: 45px;
6376     height: 45px;
6377     border-radius: 0 5px 0 0;
6378 }
6379
6380 .ideditor .field-help-nav {
6381     font-size: 13px;
6382     font-weight: bold;
6383     margin-bottom: 10px;
6384 }
6385 .ideditor .field-help-nav-item {
6386     display: inline-block;
6387     padding: 5px 10px;
6388     cursor: pointer;
6389     color: var(--text-color);
6390 }
6391 .ideditor .field-help-nav-item.active {
6392     color: var(--link-color);
6393     border-bottom: 2px solid;
6394 }
6395 .ideditor .field-help-nav-item:active,
6396 .ideditor .field-help-nav-item:focus {
6397     color: var(--link-focus-color);
6398     background-color: var(--bg-color-3);
6399 }
6400 @media (hover: hover) {
6401     .ideditor .field-help-nav-item:hover {
6402         color: var(--link-focus-color);
6403         background-color: var(--bg-color-3);
6404     }
6405 }
6406
6407 .ideditor .field-help-content {
6408     padding: 10px;
6409     overflow-y: auto;
6410     overflow-x: hidden;
6411 }
6412 .ideditor .field-help-content h3 {
6413     font-size: 12px;
6414     margin-bottom: 5px;
6415 }
6416 .ideditor .field-help-content p {
6417     margin-bottom: 15px;
6418 }
6419 .ideditor .field-help-content ul li {
6420     list-style: inside;
6421     margin-bottom: 5px;
6422 }
6423
6424 .ideditor .field-help-content .field-help-image {
6425     width: 100%;
6426     margin-bottom: 15px;
6427 }
6428
6429 .ideditor .field-help-content svg.turn {
6430     width: 40px;
6431     height: 20px;
6432 }
6433 .ideditor .field-help-content svg.shadow {
6434     opacity: 0.7;
6435     width: 60px;
6436     height: 20px;
6437 }
6438 .ideditor .field-help-content svg.from {
6439     color: #777;
6440 }
6441 .ideditor .field-help-content svg.allow {
6442     color: #5b3;
6443 }
6444 .ideditor .field-help-content svg.restrict {
6445     color: #d53;
6446 }
6447 .ideditor .field-help-content svg.only {
6448     color: #68f;
6449 }
6450
6451 .ideditor .field-help-content p.from_shadow,
6452 .ideditor .field-help-content p.allow_shadow,
6453 .ideditor .field-help-content p.restrict_shadow,
6454 .ideditor .field-help-content p.allow_turn,
6455 .ideditor .field-help-content p.restrict_turn {
6456     margin-bottom: 5px;
6457 }
6458
6459
6460 /* More Fields dropdown
6461 ------------------------------------------------------- */
6462 .ideditor .more-fields {
6463     margin-top: 10px;
6464     font-weight: bold;
6465 }
6466
6467 .ideditor .more-fields label {
6468     display: flex;
6469     flex-flow: row nowrap;
6470     justify-content: space-between;
6471     align-items: center;
6472 }
6473
6474 .ideditor .more-fields input {
6475     margin-left: 10px;
6476     flex: 1 1 auto;
6477 }
6478 .ideditor[dir='rtl'] .more-fields input {
6479     margin-left: auto;
6480     margin-right: 10px;
6481 }
6482
6483 .ideditor .form-field-input-wrap .label {
6484     background: var(--bg-color-2);
6485     padding: 5px 10px;
6486 }
6487
6488
6489 /* Raw Tag Editor
6490 ------------------------------------------------------- */
6491 .ideditor .raw-tag-options {
6492     display: flex;
6493     flex-flow: row nowrap;
6494     justify-content: flex-end;
6495     margin-top: -28px;
6496 }
6497 .ideditor button.raw-tag-option {
6498     flex: 0 0 auto;
6499     padding: 3px;
6500     background: var(--muted-text-color);
6501     color: var(--bg-color-3);
6502     margin: 0 3px;
6503 }
6504 .ideditor button.raw-tag-option:focus,
6505 .ideditor button.raw-tag-option.active {
6506     color: var(--bg-color);
6507     background: var(--link-focus-color);
6508 }
6509 @media (hover: hover) {
6510     .ideditor button.raw-tag-option:hover {
6511         color: var(--bg-color);
6512         background: var(--link-focus-color);
6513     }
6514 }
6515 .ideditor button.raw-tag-option.selected {
6516     color: var(--bg-color);
6517     background: var(--link-color);
6518 }
6519 .ideditor button.raw-tag-option svg.icon {
6520     width: 14px;
6521     height: 14px;
6522     display: block;
6523 }
6524 .ideditor[dir='ltr'] button.raw-tag-option-list {
6525     transform: scaleX(-1);
6526     filter: FlipH;
6527     -ms-filter: "FlipH";
6528 }
6529
6530
6531 .ideditor .tag-text {
6532     width: 100%;
6533     height: 100%;
6534     min-height: 32px;
6535     font-family: monospace;
6536     white-space: pre;
6537 }
6538
6539 .ideditor .tag-text,
6540 .ideditor .tag-list {
6541     margin-top: 10px;
6542 }
6543 .ideditor .tag-row {
6544     width: 100%;
6545     position: relative;
6546 }
6547 .ideditor .tag-row .inner-wrap {
6548     display: flex;
6549     flex-flow: row nowrap;
6550     width: 100%;
6551     position: relative;
6552 }
6553 .ideditor .tag-row .key-wrap,
6554 .ideditor .tag-row .value-wrap {
6555     flex: 1 1 50%;
6556 }
6557
6558 .ideditor .tag-text.readonly,
6559 .ideditor .tag-row.readonly,
6560 .ideditor .tag-row.readonly input.key,
6561 .ideditor .tag-row.readonly input.value,
6562 .ideditor .tag-row.readonly button.remove {
6563     color: var(--passive-text-color);
6564     background-color: var(--bg-color-3);
6565     cursor: not-allowed;
6566 }
6567
6568 .ideditor .tag-row input {
6569     border: 0;
6570     border-radius: 0;
6571     border-bottom: 1px solid var(--border-color);
6572     border-left: 1px solid var(--border-color);
6573     width: 100%;
6574 }
6575 .ideditor[dir='rtl'] .tag-row input {
6576     border-left: none;
6577     border-right: 1px solid var(--border-color);
6578 }
6579
6580
6581 .ideditor .tag-row input.key {
6582     font-weight: bold;
6583     background-color: var(--bg-color-2);
6584 }
6585
6586 .ideditor .tag-row input.value {
6587     border-right: 1px solid var(--border-color);
6588 }
6589 .ideditor[dir='rtl'] .tag-row input.value {
6590     border-left: 1px solid var(--border-color);
6591 }
6592
6593 .ideditor .tag-row:first-child input.key {
6594     border-top: 1px solid var(--border-color);
6595     border-top-left-radius: 4px;
6596 }
6597 .ideditor[dir='rtl'] .tag-row:first-child input.key {
6598     border-top-left-radius: 0;
6599     border-top-right-radius: 4px;
6600 }
6601
6602 .ideditor .tag-row:first-child input.value {
6603     border-top: 1px solid var(--border-color);
6604 }
6605 .ideditor .tag-row button {
6606     flex: 0 0 auto;
6607     width: 32px;
6608     border: 1px solid var(--border-color);
6609     border-top-width: 0;
6610     border-left-width: 0;
6611 }
6612 .ideditor[dir='rtl'] .tag-row button {
6613     border-left-width: 1px;
6614     border-right-width: 0;
6615 }
6616
6617 .ideditor .tag-row button:active,
6618 .ideditor .tag-row button:focus {
6619     background: var(--active-bg-color);
6620 }
6621 @media (hover: hover) {
6622     .ideditor .tag-row button:hover {
6623         background: var(--active-bg-color);
6624     }
6625 }
6626 .ideditor .tag-row button .icon {
6627     opacity: .5;
6628 }
6629 .ideditor .tag-row:first-child button {
6630     border-top-width: 1px;
6631 }
6632
6633 .ideditor .tag-row:first-child .tag-reference-button {
6634     border-top-right-radius: 4px;
6635 }
6636 .ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
6637     border-top-left-radius: 4px;
6638     border-top-right-radius: 0;
6639 }
6640
6641 .ideditor .tag-row:last-child .tag-reference-button {
6642     border-bottom-right-radius: 4px;
6643 }
6644 .ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
6645     border-bottom-left-radius: 4px;
6646     border-bottom-right-radius: 0;
6647 }
6648
6649 .ideditor .tag-row .tag-reference-button {
6650     border-radius: 0;
6651 }
6652 .ideditor[dir='rtl'] .tag-row .tag-reference-button {
6653     border-left-width: 1px;
6654     border-right-width: 0;
6655 }
6656
6657 /* Tag reference */
6658 .ideditor .tag-reference-loading {
6659     background-color: var(--bg-color-2);
6660 }
6661 .ideditor .tag-reference-loading .icon {
6662     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
6663     background-position: 0 0;
6664 }
6665
6666 .ideditor .tag-reference-body {
6667     flex: 1 1 auto;
6668     width: 100%;
6669     overflow: hidden;
6670     display: none;
6671     padding-top: 10px;
6672 }
6673 .ideditor .tag-reference-body.expanded {
6674     padding-bottom: 10px;
6675     padding-left: 10px;
6676     display: block;
6677 }
6678 .ideditor[dir='rtl'] .tag-reference-body.expanded {
6679     padding-left: 0;
6680     padding-right: 10px;
6681 }
6682 .ideditor .tag-reference-link {
6683     display: block;
6684 }
6685 .ideditor .tag-reference-link .icon:first-child {
6686     margin-left: 0;
6687 }
6688
6689 .ideditor img.tag-reference-wiki-image {
6690     float: right;
6691     width: 33.3333%;
6692     border-radius: 4px;
6693     margin: 0 0 0 5px;
6694 }
6695 .ideditor[dir='rtl'] img.tag-reference-wiki-image {
6696     float: left;
6697     margin: 0 5px 0 0;
6698 }
6699
6700 .ideditor .preset-list .tag-reference-body {
6701     position: relative;
6702     width: 100%;
6703 }
6704 .ideditor .raw-tag-editor .tag-reference-body {
6705     width: 100%;
6706 }
6707 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
6708     background: var(--bg-color-2);
6709     color: var(--text-color);
6710 }
6711 .ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
6712     border-bottom: 1px solid var(--border-color);
6713 }
6714 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
6715     border-top: 1px solid var(--border-color);
6716 }
6717
6718
6719 /* Raw Member / Membership Editor
6720 ------------------------------------------------------- */
6721 .ideditor .section-raw-member-editor .member-list:empty,
6722 .ideditor .section-raw-membership-editor .member-list:empty {
6723     display: none;
6724 }
6725
6726 .ideditor .section-raw-member-editor .member-list,
6727 .ideditor .section-raw-membership-editor .member-list {
6728     position: relative; /* required for drag-and-drop */
6729     padding-top: 5px;
6730 }
6731 .ideditor .section-raw-member-editor .member-list li,
6732 .ideditor .section-raw-membership-editor .member-list li {
6733     position: relative;
6734     border-radius: 4px;
6735     margin: 0;
6736     padding-bottom: 10px;
6737 }
6738 /* only the raw-member-editor is reorederable, not the raw-membership-editor */
6739 .ideditor .section-raw-member-editor .member-row .label-text { cursor: grab; }
6740 .ideditor .section-raw-member-editor .member-row .label-text:active { cursor: grabbing; }
6741
6742 .ideditor .section-raw-member-editor .member-row .member-entity-name,
6743 .ideditor .section-raw-membership-editor .member-row .member-entity-name {
6744     font-weight: normal;
6745     padding-left: 10px;
6746 }
6747 .ideditor .section-raw-member-editor .member-row .member-entity-name.has-colour::before,
6748 .ideditor .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
6749 .ideditor .feature-list .entity-name.has-colour::before,
6750 .ideditor .combobox-parent-relation .has-colour::before {
6751     display: inline-block;
6752     content: '';
6753     margin-left: -5px;
6754     margin-right: 5px;
6755     border-style: solid;
6756     border-width: 4px;
6757     border-radius: 4px;
6758     border-color: inherit;
6759 }
6760 .ideditor .combobox-parent-relation .has-colour::before  {
6761     margin-left: 2px;
6762 }
6763
6764 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
6765 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
6766     padding-left:0;
6767     padding-right: 10px;
6768 }
6769 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name.has-colour::before,
6770 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
6771 .ideditor[dir='rtl'] .feature-list .entity-name.has-colour::before {
6772     margin-left: 5px;
6773     margin-right: -5px;
6774 }
6775 .ideditor[dir='rtl'] .combobox-parent-relation .has-colour::before  {
6776     margin-left: 5px;
6777     margin-right: 2px;
6778 }
6779
6780
6781 .ideditor .form-field-input-member > input.member-role {
6782     border-radius: 0 0 4px 4px;
6783 }
6784
6785 .ideditor .member-row-new .member-entity-input {
6786     flex: 1 1 100%;
6787     border-radius: 4px 4px 0 0;
6788     border: 0;
6789 }
6790
6791 .ideditor .section-raw-member-editor .member-row.dragging {
6792     opacity: 0.75;
6793     z-index: 3000;
6794     /*
6795     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
6796     */
6797 }
6798
6799 /* add tag, add relation buttons */
6800 .ideditor .add-row {
6801     display: flex;
6802     width: 100%;
6803     flex-flow: row nowrap;
6804 }
6805 .ideditor .add-row .add-tag,
6806 .ideditor .add-row .add-relation,
6807 .ideditor .add-row .space-value {
6808     flex: 1 1 50%;
6809 }
6810 .ideditor .add-row .space-buttons {
6811     flex: 0 0 62px;
6812 }
6813 .ideditor .add-row button {
6814     padding: 5px;
6815     background: rgba(0,0,0,.5);
6816 }
6817 .ideditor .add-row button:focus,
6818 .ideditor .add-row button:active {
6819     background: rgba(0,0,0,.8);
6820 }
6821 @media (hover: hover) {
6822     .ideditor .add-row button:hover {
6823         background: rgba(0,0,0,.8);
6824     }
6825 }
6826
6827 .ideditor .add-tag {
6828     border-radius: 0 0 4px 4px;
6829 }
6830 .ideditor .add-tag button {
6831     visibility: hidden;
6832 }
6833 .ideditor .add-tag input.key {
6834     border-bottom-left-radius: 4px;
6835 }
6836 .ideditor .add-tag input.key::-moz-placeholder {
6837     font-weight: normal;
6838 }
6839 .ideditor .add-tag input.key::placeholder {
6840     font-weight: normal;
6841 }
6842 .ideditor .add-tag input.value {
6843     border-bottom-right-radius: 4px;
6844 }
6845 .ideditor .tag-row:has(+ .add-tag) button:last-child {
6846     border-bottom-right-radius: 4px;
6847 }
6848
6849 .ideditor .add-relation {
6850     margin-top: 10px;
6851     border-radius: 4px;
6852 }
6853
6854
6855 /* OSM Note / QA Editors
6856 ------------------------------------------------------- */
6857 .ideditor .note-header,
6858 .ideditor .qa-header {
6859     background-color: var(--bg-color-2);
6860     border-radius: 5px;
6861     border: 1px solid var(--border-color);
6862     display: flex;
6863     flex-flow: row nowrap;
6864     align-items: center;
6865 }
6866
6867 .ideditor .note-header-icon,
6868 .ideditor .qa-header-icon {
6869     background-color: var(--bg-color);
6870     padding: 10px;
6871     flex: 0 0 auto;
6872     position: relative;
6873     width: 60px;
6874     height: 60px;
6875     border-right: 1px solid var(--border-color);
6876     border-radius: 5px 0 0 5px;
6877 }
6878 .ideditor[dir='rtl'] .note-header-icon,
6879 .ideditor[dir='rtl'] .qa-header-icon {
6880     border-right: unset;
6881     border-left: 1px solid var(--border-color);
6882     border-radius: 0 5px 5px 0;
6883 }
6884
6885 .ideditor .note-header-icon .icon-wrap,
6886 .ideditor .qa-header-icon .icon-wrap {
6887     position: absolute;
6888     top: 0px;
6889 }
6890 .ideditor .preset-icon-28 {
6891     position: absolute;
6892     top: 16px;
6893     left: 16px;
6894     margin: auto;
6895 }
6896 .ideditor .preset-icon-28 .icon {
6897     width: 28px;
6898     height: 28px;
6899 }
6900
6901 .ideditor .note-header-label,
6902 .ideditor .qa-header-label {
6903     background-color: var(--bg-color-2);
6904     padding: 0 15px;
6905     flex: 1 1 100%;
6906     font-size: 14px;
6907     font-weight: bold;
6908     border-radius: 0 5px 5px 0;
6909 }
6910 .ideditor[dir='rtl'] .note-header-label,
6911 .ideditor[dir='rtl'] .qa-header-label {
6912     border-radius: 5px 0 0 5px;
6913 }
6914
6915 .ideditor .note-category {
6916     margin: 20px 0px;
6917 }
6918
6919 .ideditor .comments-container {
6920     background: var(--bg-color-3);
6921     padding: 1px 10px;
6922     border-radius: 8px;
6923     margin-top: 20px;
6924 }
6925
6926 .ideditor .comment {
6927     background-color: var(--bg-color);
6928     border-radius: 5px;
6929     border: 1px solid var(--border-color);
6930     margin: 10px auto;
6931     display: flex;
6932     flex-flow: row nowrap;
6933 }
6934 .ideditor .comment-avatar {
6935     padding: 10px;
6936     flex: 0 0 auto;
6937 }
6938 .ideditor .comment-avatar .icon.comment-avatar-icon {
6939     width: 40px;
6940     height: 40px;
6941     -o-object-fit: cover;
6942        object-fit: cover;
6943     border: 1px solid var(--border-color);
6944     border-radius: 20px;
6945 }
6946 .ideditor .comment-main {
6947     padding: 10px 10px 10px 0;
6948     flex: 1 1 100%;
6949     flex-flow: column nowrap;
6950     overflow: hidden;
6951     overflow-wrap: break-word;
6952 }
6953 .ideditor[dir='rtl'] .comment-main {
6954     padding: 10px 0 10px 10px;
6955 }
6956
6957 .ideditor .comment-metadata {
6958     flex-flow: row nowrap;
6959     justify-content: space-between;
6960 }
6961 .ideditor .comment-author {
6962     font-weight: bold;
6963     color: var(--text-color);
6964 }
6965 .ideditor .comment-date {
6966     color: var(--muted-text-color);
6967 }
6968 .ideditor .inspector-hover .comment-text,
6969 .ideditor .comment-text {
6970     color: var(--text-color);
6971     margin-top: 10px;
6972     overflow-y: auto;
6973     max-height: 250px;
6974 }
6975 .ideditor .comment-text::-webkit-scrollbar {
6976     border-left: none;
6977 }
6978
6979 .ideditor .note-save,
6980 .ideditor .qa-save {
6981     padding-top: 20px;
6982 }
6983
6984 .ideditor .qa-details-container {
6985     background: var(--bg-color-3);
6986     padding: 10px;
6987     margin-top: 20px;
6988     border-radius: 4px;
6989     border: 1px solid var(--border-color);
6990     display: flex;
6991     flex-direction: column;
6992 }
6993 .ideditor .qa-details-description-text::first-letter {
6994     text-transform: capitalize;
6995 }
6996 .ideditor[dir='rtl'] .qa-details-description-text::first-letter {
6997     text-transform: none;  /* #5877 */
6998 }
6999 .ideditor .qa-details-subsection h4 {
7000     padding-bottom: 2px;
7001 }
7002 .ideditor .qa-details-subsection:not(:last-child) {
7003     margin-bottom: 10px;
7004 }
7005 .ideditor .qa-details-subsection:empty {
7006     display: none;
7007 }
7008
7009 .ideditor .note-save .new-comment-input,
7010 .ideditor .qa-save .new-comment-input {
7011     width: 100%;
7012     height: 100px;
7013     max-height: 300px;
7014     min-height: 100px;
7015 }
7016
7017 .ideditor .note-save .detail-section,
7018 .ideditor .qa-save .detail-section {
7019     margin: 10px 0;
7020 }
7021
7022 .ideditor .note-report {
7023     float: right;
7024 }
7025
7026
7027 /* Custom Data Editor
7028 ------------------------------------------------------- */
7029 .ideditor .data-header {
7030     background-color: var(--bg-color-2);
7031     border-radius: 5px;
7032     border: 1px solid var(--border-color);
7033     display: flex;
7034     flex-flow: row nowrap;
7035     align-items: center;
7036 }
7037
7038 .ideditor .data-header-icon {
7039     background-color: var(--bg-color);
7040     padding: 10px;
7041     flex: 0 0 auto;
7042     position: relative;
7043     width: 60px;
7044     height: 60px;
7045     border-right: 1px solid var(--border-color);
7046     border-radius: 5px 0 0 5px;
7047 }
7048 .ideditor[dir='rtl'] .data-header-icon {
7049     border-right: unset;
7050     border-left: 1px solid var(--border-color);
7051     border-radius: 0 5px 5px 0;
7052 }
7053
7054 .ideditor .data-header-icon .icon-wrap {
7055     position: absolute;
7056     top: 0px;
7057 }
7058
7059 .ideditor .data-header-label {
7060     background-color: var(--bg-color-2);
7061     padding: 0 15px;
7062     flex: 1 1 100%;
7063     font-size: 14px;
7064     font-weight: bold;
7065     border-radius: 0 5px 5px 0;
7066 }
7067 .ideditor[dir='rtl'] .data-header-label {
7068     border-radius: 5px 0 0 5px;
7069 }
7070
7071 /* custom data editor - no info/delete buttons */
7072 .ideditor .data-editor.raw-tag-editor .tag-row button {
7073     display: none;
7074 }
7075 .ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
7076 .ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
7077     width: 50%;
7078 }
7079
7080
7081 .ideditor .over-map {
7082     position: relative;
7083     height: 100%;
7084     pointer-events: none;
7085     display: flex;
7086     flex-direction: row-reverse;
7087     align-items: flex-end;
7088     overflow: hidden;
7089 }
7090 .ideditor .over-map > * {
7091     pointer-events: auto;
7092     z-index: 5;
7093 }
7094 /* offscreen this without hiding it */
7095 .ideditor .over-map .select-trap {
7096     position: absolute;
7097     right: -1000%;
7098     opacity: 0;
7099 }
7100
7101 /* Map Controls
7102 ------------------------------------------------------- */
7103 .ideditor .map-controls-wrap {
7104     position: absolute;
7105     left: 0;
7106     right: 0;
7107     height: 100%;
7108     z-index: 100;
7109     display: block;
7110     overflow-x: hidden;
7111     overflow-y: auto;
7112     pointer-events: none;
7113     -ms-overflow-style: none;
7114     scrollbar-width: none;
7115 }
7116 .ideditor .map-controls-wrap::-webkit-scrollbar {
7117     display: none;
7118 }
7119 .ideditor .map-controls {
7120     right: 0;
7121     top: 0;
7122     width: 40px;
7123     position: absolute;
7124     bottom: 0;
7125     display: flex;
7126     flex-direction: column;
7127     padding: 5px 0;
7128     pointer-events: none;
7129 }
7130 .ideditor .map-controls:before {
7131     content: '';
7132     display: inline-block;
7133     pointer-events: none;
7134     width: 40px;
7135     height: 100%;
7136     max-height: 70px;
7137     flex: 0 1 auto;
7138 }
7139 .ideditor[dir='rtl'] .map-controls {
7140     left: 0;
7141     right: auto;
7142 }
7143
7144 .ideditor .map-control {
7145     position: relative;
7146     display: flex;
7147     flex-direction: column;
7148 }
7149 .ideditor .map-control > button {
7150     position: relative;
7151     width: 40px;
7152     height: 40px;
7153     background: rgba(0,0,0,.5);
7154     border-radius: 0;
7155     pointer-events: auto;
7156 }
7157
7158 .ideditor .map-control > button:not(.disabled):focus,
7159 .ideditor .map-control > button:not(.disabled):active {
7160     background: rgba(0, 0, 0, .8);
7161 }
7162 .ideditor .map-control > button.active,
7163 .ideditor .map-control > button.active:active {
7164     background: var(--link-color);
7165 }
7166 @media (hover: hover) {
7167     .ideditor .map-control > button:not(.disabled):hover {
7168         background: rgba(0, 0, 0, .8);
7169     }
7170     .ideditor .map-control > button.active:hover {
7171         background: var(--link-color);
7172     }
7173 }
7174
7175 .ideditor .map-control > button.disabled .icon {
7176     color: rgba(255, 255, 255, 0.5);
7177 }
7178
7179
7180 /* Fullscreen Button (disabled)
7181 ------------------------------------------------------- */
7182 .ideditor div.full-screen {
7183     /*display: inline-block;*/
7184     width: 40px;
7185     margin-right: 10px;
7186     display: none;
7187 }
7188
7189 .ideditor div.full-screen .tooltip {
7190     min-width: 160px;
7191 }
7192
7193 .ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
7194     width: 40px;
7195     height: 40px;
7196     background: transparent;
7197 }
7198 .ideditor div.full-screen > button:active,
7199 .ideditor div.full-screen > button:focus {
7200     background-color: rgba(0, 0, 0, .8);
7201 }
7202 @media (hover: hover) {
7203     .ideditor div.full-screen > button:hover {
7204         background-color: rgba(0, 0, 0, .8);
7205     }
7206 }
7207
7208
7209 /* Map Controls
7210 ------------------------------------------------------- */
7211
7212 /* Zoom in/out buttons */
7213 .ideditor .zoombuttons > button.zoom-in {
7214     border-radius: 4px 0 0 0;
7215 }
7216 .ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
7217     border-radius: 0 4px 0 0;
7218 }
7219
7220 /* Geolocate button */
7221 .ideditor .geolocate-control {
7222     margin-bottom: 10px;
7223 }
7224 .ideditor .geolocate-control > button {
7225     border-radius: 0 0 0 4px;
7226 }
7227 .ideditor[dir='rtl'] .geolocate-control > button {
7228     border-radius: 0 0 4px 0;
7229 }
7230
7231 /* Zoom to selection button */
7232 .ideditor .zoom-to-selection-control .icon {
7233     width: 22px;
7234     height: 22px;
7235 }
7236
7237
7238 /* Background / Map Data / Help Pane buttons
7239 ------------------------------------------------------- */
7240 .ideditor .background-control > button {
7241     border-radius: 4px 0 0 0;
7242 }
7243 .ideditor[dir='rtl'] .background-control > button {
7244     border-radius: 0 4px 0 0;
7245 }
7246
7247 .ideditor .help-control > button {
7248     border-radius: 0 0 0 4px;
7249 }
7250 .ideditor[dir='rtl'] .help-control > button {
7251     border-radius: 0 0 4px 0;
7252 }
7253
7254
7255 /* Background / Map Data Settings
7256 ------------------------------------------------------- */
7257 .ideditor .imagery-faq {
7258     margin-bottom: 10px;
7259     white-space: nowrap;
7260 }
7261
7262 .ideditor .layer-list, .ideditor .controls-list {
7263     margin-bottom: 10px;
7264     border: 1px solid var(--border-color);
7265     border-radius: 4px;
7266 }
7267
7268 .ideditor .layer-list > li {
7269     background-color: var(--bg-color);
7270     color: var(--link-color);
7271     position: relative;
7272     display: flex;
7273 }
7274
7275 .ideditor .layer-list:empty {
7276     display: none;
7277 }
7278
7279 .ideditor .layer-list > li:first-child {
7280     border-radius: 3px 3px 0 0;
7281 }
7282 .ideditor .layer-list > li:last-child {
7283     border-radius: 0 0 3px 3px;
7284 }
7285 .ideditor .layer-list > li:only-child {
7286     border-radius: 3px;
7287 }
7288 .ideditor .layer-list li:not(:last-child) {
7289     border-bottom: 1px solid var(--border-color);
7290 }
7291 .ideditor .layer-list li:active {
7292     background-color: var(--bg-color-3);
7293 }
7294 @media (hover: hover) {
7295     .ideditor .layer-list li:hover {
7296         background-color: var(--bg-color-3);
7297     }
7298 }
7299
7300 .ideditor .layer-list li.active button,
7301 .ideditor .layer-list li.switch button,
7302 .ideditor .layer-list li.active,
7303 .ideditor .layer-list li.switch {
7304     background: var(--selected-bg-color);
7305 }
7306
7307 .ideditor .layer-list li.best > div.best {
7308     padding: 5px;
7309     flex: 0 0 auto;
7310     align-self: center;
7311 }
7312
7313 .ideditor[dir='rtl'] .list-item-data-browse svg {
7314     transform: rotateY(180deg);
7315 }
7316
7317 /* make sure tooltip fits in map-control panel */
7318 /* if too wide, placement will be wrong the first time it displays */
7319 .ideditor .layer-list li.best .popover-inner {
7320     max-width: 160px;
7321 }
7322
7323 .ideditor .layer-list label {
7324     padding: 5px 10px;
7325     cursor: pointer;
7326     flex: 1 1 auto;
7327     display: flex;
7328     align-items: center;
7329     overflow: hidden;
7330 }
7331
7332 .ideditor[dir='ltr'] .layer-list .indented label {
7333     padding-left: 24px;
7334 }
7335 .ideditor[dir='rtl'] .layer-list .indented label {
7336     padding-right: 24px;
7337 }
7338
7339 .ideditor .layer-list label > span {
7340     display: block;
7341     overflow: hidden;
7342     width: calc(100% - 20px); /* Ensures radio input width within flexbox */
7343 }
7344
7345 .ideditor .layer-list label span.localized-text {
7346     line-height: 0.95rem;
7347 }
7348
7349 .ideditor .layer-list input.list-item-input {
7350     height: 2.2em;
7351     padding: 0px 4px;
7352     width: 50%;
7353     min-width: 160px;
7354 }
7355
7356 .ideditor .map-data-pane .layer-list button,
7357 .ideditor .background-pane .layer-list button {
7358     border-left: 1px solid var(--border-color);
7359     border-radius: 0;
7360     padding-left: 4px;
7361     padding-right: 4px;
7362 }
7363 .ideditor[dir='rtl'] .map-data-pane .layer-list button,
7364 .ideditor[dir='rtl'] .background-pane .layer-list button {
7365     border-left: none;
7366     border-right: 1px solid var(--border-color);
7367 }
7368
7369 .ideditor .map-data-pane .layer-list button .icon,
7370 .ideditor .background-pane .layer-list button .icon {
7371     opacity: 0.5;
7372 }
7373
7374 .ideditor .map-data-pane .layer-list button:last-of-type,
7375 .ideditor .background-pane .layer-list button:last-of-type {
7376     border-radius: 0 3px 3px 0;
7377 }
7378 .ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
7379 .ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
7380     border-radius: 3px 0 0 3px;
7381 }
7382
7383 .ideditor .map-data-pane .vectortile-container .vectortile-header {
7384     padding-bottom: 5px;
7385 }
7386 .ideditor .map-data-pane .vectortile-container .vectortile-footer {
7387     padding-bottom: 10px;
7388 }
7389
7390
7391 /* Issues
7392 ------------------------------------------------------- */
7393 .ideditor .issue {
7394     overflow: hidden;
7395 }
7396 .ideditor .issue .issue-label,
7397 .ideditor .issue-label .issue-text {
7398     width: 100%;
7399     display: flex;
7400     flex-flow: row nowrap;
7401     cursor: pointer;
7402     text-align: initial;
7403     background: none;
7404 }
7405
7406 .ideditor .issue-text .issue-icon {
7407     flex: 0 0 auto;
7408     padding: 2px 3px;
7409 }
7410 .ideditor .issue-text .issue-message {
7411     flex: 1 1 auto;
7412     padding: 4px 5px;
7413 }
7414 .ideditor .issue-label .issue-info-button {
7415     height: unset;
7416     width: 32px;
7417     flex: 0 0 auto;
7418     border-left: 1px solid var(--border-color);
7419     background-color: rgba(0,0,0,0);
7420 }
7421 .ideditor[dir='rtl'] .issue-label .issue-info-button {
7422     border-left: 0;
7423     border-right: 1px solid var(--border-color);
7424 }
7425 .ideditor .issue-container .issue-label .issue-info-button .icon {
7426     opacity: 0.5;
7427 }
7428 .ideditor .issue-container.active .issue-label .issue-info-button .icon {
7429     opacity: 0.7;
7430 }
7431 .ideditor .issue-label .issue-info-button:last-child {
7432     border-radius: 0 4px 4px 0;
7433 }
7434 .ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
7435     border-radius: 4px 0 0 4px;
7436 }
7437
7438 /* suggestion styles */
7439 .ideditor .suggestions-list,
7440 .ideditor .suggestions-list *,
7441 .ideditor .issue-container.active .issue.severity-suggestion,
7442 .ideditor .issue-container.active .issue.severity-suggestion * {
7443     border-color: var(--suggestion-border-color);
7444 }
7445 .ideditor .suggestions-list .issue.severity-suggestion .issue-label,
7446 .ideditor .issue.severity-suggestion .issue-fix-list,
7447 .ideditor .suggestion-section {
7448     background: var(--suggestion-bg-color);
7449 }
7450
7451 .ideditor .issue-container.active .issue.severity-suggestion .issue-label {
7452     background: var(--suggestion-label-color);
7453 }
7454
7455 .ideditor .issue.severity-suggestion .issue-icon {
7456     color: var(--suggestion-icon-color);
7457 }
7458
7459 .ideditor .issue.severity-suggestion .issue-fix-item button.actionable,
7460 .ideditor .issue-container.active .issue.severity-suggestion .issue-info-button {
7461     color: var(--suggestion-text-color);
7462     fill: var(--suggestion-text-color);
7463 }
7464 .ideditor .suggestions-list .issue.severity-suggestion .issue-label:active,
7465 .ideditor .suggestions-list .issue.severity-suggestion .issue-label:focus,
7466 .ideditor .issue.severity-suggestion .issue-fix-item button.actionable:active,
7467 .ideditor .issue.severity-suggestion .issue-fix-item button.actionable:focus {
7468     background: var(--suggestion-highlight-color);
7469 }
7470 .ideditor .issue.severity-suggestion .issue-fix-item button.actionable:active,
7471 .ideditor .issue.severity-suggestion .issue-fix-item button.actionable:focus,
7472 .ideditor .issue-container.active .issue.severity-suggestion .issue-info-button:active,
7473 .ideditor .issue-container.active .issue.severity-suggestion .issue-info-button:focus {
7474     color: var(--suggestion-highlight-text-color);
7475     fill: var(--suggestion-highlight-text-color);
7476 }
7477 @media (hover: hover) {
7478     .ideditor .suggestions-list .issue.severity-suggestion .issue-label:hover,
7479     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
7480         background: var(--suggestion-highlight-color);
7481     }
7482     .ideditor .issue.severity-suggestion .issue-fix-item button.actionable:hover,
7483     .ideditor .issue-container.active .issue.severity-suggestion .issue-info-button:hover {
7484         color: var(--suggestion-highlight-text-color);
7485         fill: var(--suggestion-highlight-text-color);
7486     }
7487 }
7488
7489 /* warning styles */
7490 .ideditor .warnings-list,
7491 .ideditor .warnings-list *,
7492 .ideditor .issue-container.active .issue.severity-warning,
7493 .ideditor .issue-container.active .issue.severity-warning * {
7494     border-color: var(--warning-border-color);
7495 }
7496
7497 .ideditor .warnings-list .issue.severity-warning .issue-label,
7498 .ideditor .issue.severity-warning .issue-fix-list,
7499 .ideditor .warning-section {
7500     background: var(--warning-bg-color);
7501 }
7502
7503 .ideditor .issue-container.active .issue.severity-warning .issue-label {
7504     background: var(--warning-label-color);
7505 }
7506
7507 .ideditor .issue.severity-warning .issue-icon {
7508     color: var(--warning-icon-color);
7509 }
7510
7511 .ideditor .issue.severity-warning .issue-fix-item button.actionable,
7512 .ideditor .issue-container.active .issue.severity-warning .issue-info-button {
7513     color: var(--warning-text-color);
7514     fill: var(--warning-text-color);
7515 }
7516 .ideditor .warnings-list .issue.severity-warning .issue-label:active,
7517 .ideditor .warnings-list .issue.severity-warning .issue-label:focus,
7518 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7519 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
7520     background: var(--warning-highlight-color);
7521 }
7522 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7523 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
7524 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
7525 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
7526     color: var(--warning-highlight-text-color);
7527     fill: var(--warning-highlight-text-color);
7528 }
7529 @media (hover: hover) {
7530     .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
7531     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
7532         background: var(--warning-highlight-color);
7533     }
7534     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
7535     .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
7536         color: var(--warning-highlight-text-color);
7537         fill: var(--warning-highlight-text-color);
7538     }
7539 }
7540
7541
7542 /* error styles */
7543 .ideditor .errors-list,
7544 .ideditor .errors-list *,
7545 .ideditor .issue-container.active .issue.severity-error,
7546 .ideditor .issue-container.active .issue.severity-error * {
7547     border-color: var(--error-border-color);
7548 }
7549
7550 .ideditor .errors-list .issue.severity-error .issue-label,
7551 .ideditor .issue.severity-error .issue-fix-list,
7552 .ideditor .error-section {
7553     background: var(--error-bg-color);
7554 }
7555
7556 .ideditor .issue-container.active .issue.severity-error .issue-label {
7557     background: var(--error-label-color);
7558 }
7559
7560 .ideditor .issue.severity-error .issue-fix-item button.actionable,
7561 .ideditor .issue-container.active .issue.severity-error .issue-info-button {
7562     color: var(--error-text-color);
7563     fill: var(--error-icon-color);
7564 }
7565 .ideditor .issue.severity-error .issue-icon {
7566     color: var(--error-icon-color);
7567 }
7568 .ideditor .errors-list .issue.severity-error .issue-label:active,
7569 .ideditor .errors-list .issue.severity-error .issue-label:focus,
7570 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7571 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
7572     background: var(--error-highlight-color);
7573 }
7574 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7575 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
7576 .ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
7577 .ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
7578     color: var(--error-highlight-text-color);
7579     fill: var(--error-highlight-text-color);
7580 }
7581 @media (hover: hover) {
7582     .ideditor .errors-list .issue.severity-error .issue-label:hover,
7583     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
7584         background: var(--error-highlight-color);
7585     }
7586     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
7587     .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
7588         color: var(--error-highlight-text-color);
7589         fill: var(--error-highlight-text-color);
7590     }
7591 }
7592
7593
7594 /* Issues Pane */
7595 .ideditor .issues-options-container {
7596     display: table;
7597 }
7598 .ideditor .issues-option {
7599     display: table-row;
7600 }
7601 .ideditor .issues-option-title {
7602     display: table-cell;
7603     font-weight: bold;
7604     padding-right: 10px;
7605 }
7606 .ideditor[dir='rtl'] .issues-option-title {
7607     padding-right: 0;
7608     padding-left: 10px;
7609 }
7610 .ideditor .issues-option label {
7611     display: table-cell;
7612     padding: 0 10px;
7613     white-space: nowrap;
7614 }
7615
7616 .ideditor .layer-list.issues-list li.issue {
7617     border-color: inherit;    /* override .layer-list styles */
7618     color: inherit;
7619     height: unset;
7620 }
7621
7622 .ideditor .layer-list.issue-rules-list,
7623 .ideditor .layer-list.issues-list,
7624 .ideditor .layer-list.layer-feature-list {
7625     margin-bottom: 0;
7626 }
7627 .ideditor .section-footer {
7628     display: flex;
7629     flex-flow: row nowrap;
7630     justify-content: flex-end;
7631     height: 30px;
7632 }
7633 .ideditor .section-footer a {
7634     padding: 5px;
7635 }
7636
7637 .ideditor .section-issues-status .box {
7638     border-radius: 4px;
7639     border: 1px solid var(--valid-border-color);
7640     background: var(--valid-bg-color);
7641     padding: 5px !important;
7642     display: flex;
7643 }
7644 .ideditor .section-issues-status .icon {
7645     color: var(--valid-icon-color);
7646 }
7647
7648 .ideditor input.square-degrees-input {
7649     padding: 2px !important; /* important needed for rtl */
7650     width: 3em;
7651     height: 2em;
7652     text-align: center;
7653     background: rgba(0,0,0,0);
7654     color: currentColor;
7655 }
7656
7657
7658 /* Entity Issues List */
7659 .ideditor .section-entity-issues .issue-container .issue {
7660     border-radius: 4px;
7661     border: 1px solid var(--border-color);
7662     background: var(--bg-color-2);
7663 }
7664 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
7665 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
7666 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
7667 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
7668     background: var(--active-bg-color);
7669 }
7670 @media (hover: hover) {
7671     .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
7672     .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
7673         background: var(--active-bg-color);
7674     }
7675 }
7676 .ideditor .section-entity-issues .issue .issue-label .issue-text {
7677     padding-right: 10px;
7678 }
7679 .ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
7680     padding-right: unset;
7681     padding-left: 10px;
7682 }
7683
7684 .ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
7685     font-weight: bold;
7686 }
7687 .ideditor .section-entity-issues .issue-container:not(:last-of-type) {
7688     margin-bottom: 5px;
7689 }
7690 .ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
7691     margin-top: 10px;
7692 }
7693 .ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
7694     margin-bottom: 10px;
7695 }
7696
7697 /* fixes */
7698 .ideditor .section-entity-issues .issue-fix-list {
7699     border-top: 1px solid;
7700     border-color: inherit;
7701 }
7702 .ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
7703     display: none;
7704 }
7705
7706 .ideditor li.issue-fix-item button {
7707     padding: 2px 10px 2px 20px;
7708     background: transparent;
7709     width: 100%;
7710     text-align: initial;
7711 }
7712 .ideditor[dir='rtl'] li.issue-fix-item button {
7713     padding: 2px 20px 2px 10px;
7714 }
7715 .ideditor li.issue-fix-item:first-of-type button {
7716     padding-top: 5px;
7717 }
7718 .ideditor li.issue-fix-item:last-of-type button {
7719     padding-bottom: 5px;
7720 }
7721
7722 .ideditor li.issue-fix-item button .fix-message {
7723     padding: 0 10px;
7724     vertical-align: middle;
7725 }
7726
7727 .ideditor li.issue-fix-item button.actionable {
7728     cursor: pointer;
7729 }
7730 .ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
7731     color: #555;
7732     fill: #555;
7733 }
7734
7735 .ideditor .issue-container:not(.active) ul.issue-fix-list {
7736     display: none;
7737 }
7738 .ideditor .issue-container:not(.active) .issue-info {
7739     display: none;
7740 }
7741
7742 .ideditor .issue-info {
7743     flex: 1 1 auto;
7744     width: 100%;
7745     overflow: hidden;
7746     display: none;
7747     padding: 10px 0;
7748 }
7749 .ideditor .issue-info.expanded {
7750     display: inline-block;
7751 }
7752
7753 .ideditor .issue-info .issue-reference {
7754     margin-bottom: 10px;
7755 }
7756 .ideditor .issue-info .tagDiff-table {
7757     min-width: 60%;
7758     width: unset;
7759     border: 1px solid var(--border-color);
7760 }
7761 .ideditor .issue-info .tagDiff-row {
7762     border: 1px solid var(--border-color);
7763 }
7764 .ideditor .issue-info .tagDiff-cell {
7765     padding: 2px 10px;
7766     font-family: monospace;
7767     font-size: 10px;
7768     border: 1px solid var(--border-color);
7769 }
7770 .ideditor .issue-info .tagDiff-cell-add {
7771     background: var(--valid-bg-color);
7772 }
7773 .ideditor .issue-info .tagDiff-cell-remove {
7774     background: var(--error-bg-color);
7775 }
7776
7777
7778 /* Background - Display Options Sliders
7779 ------------------------------------------------------- */
7780 .ideditor .display-options-container {
7781     padding: 10px;
7782 }
7783
7784 .ideditor .display-options-container label {
7785     padding-bottom: 0;
7786     padding-top: 10px;
7787 }
7788
7789 .ideditor .display-options-container label span {
7790     font-weight: bold;
7791     margin: 5px;
7792 }
7793
7794 .ideditor .display-control .control-wrap {
7795     display: flex;
7796     align-items: center;
7797     width: 100%;
7798 }
7799 .ideditor .display-control .display-option-input {
7800     height: 20px;
7801     flex: 1 1 100%;
7802 }
7803
7804 .ideditor .display-control button {
7805     height: 30px;
7806     width: 30px;
7807     margin-left: 5px;
7808     margin-right: 0px;
7809     vertical-align: text-bottom;
7810     border-radius: 4px;
7811     flex: 0 0 auto;
7812 }
7813 .ideditor[dir='rtl'] .display-control button {
7814     margin-left: 0px;
7815     margin-right: 5px;
7816 }
7817
7818
7819 /* Background - Adjust Alignment
7820 ------------------------------------------------------- */
7821 .ideditor .background-pane .nudge-container {
7822     border: 1px solid var(--border-color);
7823     border-radius: 4px;
7824     padding: 10px;
7825     position: relative;
7826 }
7827
7828 .ideditor .nudge-container .nudge-controls-wrap {
7829     position: relative;
7830     width: 100%;
7831     overflow: hidden;
7832 }
7833
7834 .ideditor .nudge-container .nudge-outer-rect {
7835     background-color: var(--widget-bg-color);
7836     border: 1px solid var(--border-color);
7837     border-radius: 2px;
7838     padding: 20px 0;
7839     display: flex;
7840     justify-content: center;
7841     align-items: center;
7842     margin: 45px;
7843     cursor: move;
7844     /* prevent scrolling pane while dragging on touchscreen */
7845     touch-action: none;
7846     /* disable drag-to-select */
7847     -webkit-user-select: none;
7848        -moz-user-select: none;
7849             user-select: none;
7850     position: relative;
7851 }
7852
7853 .ideditor .nudge-container .nudge-inner-rect {
7854     background-color: var(--bg-color);
7855     border: 1px solid var(--border-color);
7856     border-radius: 2px;
7857     width: 65%;
7858     min-height: 20px;
7859 }
7860
7861 .ideditor .nudge-container .nudge::after {
7862     content: '';
7863     display: block;
7864     position: absolute;
7865     margin: auto;
7866     left: 0; right: 0; top: 0; bottom: 0;
7867     height: 0;
7868     width: 0;
7869 }
7870
7871 .ideditor .nudge-container input {
7872     width: 100%;
7873     padding: 2px;
7874     text-align: center;
7875     border: 0;
7876 }
7877
7878 .ideditor .nudge-container input.error {
7879     border: 1px solid var(--warning-border-color);
7880     border-radius: 2px;
7881     background: var(--warning-bg-color);
7882 }
7883
7884 .ideditor .nudge-container button {
7885     position: absolute;
7886     height: 40px;
7887     width: 40px;
7888 }
7889 .ideditor .nudge-container button.right,
7890 .ideditor .nudge-container button.left {
7891     top: 0;
7892     bottom: 0;
7893     margin-top: auto;
7894     margin-bottom: auto;
7895     vertical-align: middle;
7896 }
7897 .ideditor .nudge-container button.right {
7898     right: 0;
7899 }
7900 .ideditor .nudge-container button.left {
7901     left: 0;
7902 }
7903 .ideditor .nudge-container button.top,
7904 .ideditor .nudge-container button.bottom {
7905     left: 0;
7906     right: 0;
7907     margin-left: auto;
7908     margin-right: auto;
7909 }
7910 .ideditor .nudge-container button.top {
7911     top: 0;
7912 }
7913 .ideditor .nudge-container button.bottom {
7914     bottom: 0;
7915 }
7916
7917 .ideditor .nudge-container button.nudge-reset {
7918     right: 0;
7919     bottom: 0;
7920 }
7921
7922 .ideditor .nudge-surface {
7923    position: absolute;
7924    z-index: 5000;
7925    left: 0;
7926    top: 0;
7927    width: 100%;
7928    height: 100%;
7929    background-color: transparent;
7930    cursor: move;
7931 }
7932
7933 .ideditor .background-pane .nudge.right::after {
7934     border-top: 5px solid transparent;
7935     border-bottom: 5px solid transparent;
7936     border-left: 5px solid var(--widget-color);
7937 }
7938
7939 .ideditor .background-pane .nudge.left::after {
7940     border-top: 5px solid transparent;
7941     border-bottom: 5px solid transparent;
7942     border-right: 5px solid var(--widget-color);
7943 }
7944
7945 .ideditor .background-pane .nudge.top::after {
7946     border-right: 5px solid transparent;
7947     border-left: 5px solid transparent;
7948     border-bottom: 5px solid var(--widget-color);
7949 }
7950
7951 .ideditor .background-pane .nudge.bottom::after {
7952     border-right: 5px solid transparent;
7953     border-left: 5px solid transparent;
7954     border-top: 5px solid var(--widget-color);
7955 }
7956
7957
7958 /* Side Panes - Background / Map Data / Help
7959 ------------------------------------------------------- */
7960 .ideditor .map-panes {
7961     flex: 0 1 auto;
7962     position: relative;
7963     height: 100%;
7964     max-width: 100%;
7965 }
7966 .ideditor .map-pane {
7967     position: relative;
7968     top: 0;
7969     width: 400px;
7970     max-width: 100%;
7971     height: 100%;
7972     z-index: 10;
7973     display: flex;
7974     flex-direction: column;
7975 }
7976
7977 .ideditor .map-pane.help-pane {
7978     width: 600px;
7979 }
7980
7981 .ideditor .pane-heading {
7982     display: flex;
7983     flex-flow: row nowrap;
7984     justify-content: space-between;
7985     border-bottom: 1px solid var(--border-color);
7986     flex: 0 0 auto;
7987 }
7988
7989 .ideditor .pane-heading h2 {
7990     margin: 14px 20px;
7991 }
7992
7993 .ideditor .pane-heading button {
7994     width: 40px;
7995     border-radius: 0;
7996 }
7997
7998 .ideditor .pane-content {
7999     height: 100%;
8000     padding: 10px 50px 20px 20px;
8001     overflow-x: hidden;
8002     overflow-y: scroll;
8003     position: relative;
8004 }
8005 .ideditor[dir='rtl'] .pane-content {
8006     padding: 10px 20px 20px 50px;
8007 }
8008
8009 .ideditor .help-pane .pane-content > div {
8010     padding-bottom: 15px;
8011 }
8012
8013
8014 /* Help
8015 ------------------------------------------------------- */
8016 .ideditor .help-pane p {
8017     font-size: 15px;
8018     margin-bottom: 20px;
8019 }
8020
8021 .ideditor .help-pane .left-content .icon.inline,
8022 .ideditor .curtain-tooltip .icon.inline {
8023     margin-right: 0;
8024     margin-left: 0;
8025     height: 1.34em;
8026     width: 1.34em;
8027 }
8028
8029 .ideditor .help-pane .toc {
8030     width: 100%;
8031     max-width: 200px;
8032     float: right;
8033     margin-left: 20px;
8034     margin-bottom: 20px;
8035     padding-left: 5px;
8036 }
8037
8038 .ideditor .help-pane .toc li a,
8039 .ideditor .help-pane .nav a {
8040     display: block;
8041     border: 1px solid var(--border-color);
8042     padding: 5px 10px;
8043 }
8044
8045 .ideditor .help-pane .toc li a {
8046     border-bottom: 0;
8047 }
8048 .ideditor .help-pane .toc li a:focus,
8049 .ideditor .help-pane .nav a:focus,
8050 .ideditor .help-pane .toc li a:active,
8051 .ideditor .help-pane .nav a:active {
8052     background: var(--bg-color-3);
8053 }
8054 @media (hover: hover) {
8055     .ideditor .help-pane .toc li a:hover,
8056     .ideditor .help-pane .nav a:hover {
8057         background: var(--bg-color-3);
8058     }
8059 }
8060
8061 .ideditor .help-pane .toc li a.selected {
8062     background: var(--selected-bg-color);
8063 }
8064
8065 .ideditor .help-pane .toc li:first-child a {
8066     border-radius: 4px 4px 0 0;
8067 }
8068
8069 .ideditor .help-pane .toc li:nth-last-child(3) a {
8070     border-bottom: 1px solid var(--border-color);
8071     border-radius: 0 0 4px 4px
8072 }
8073
8074 .ideditor .help-pane .toc li.shortcuts a,
8075 .ideditor .help-pane .toc li.walkthrough a {
8076     overflow: hidden;
8077     margin-top: 10px;
8078     border-bottom: 1px solid var(--border-color);
8079     border-radius: 4px;
8080 }
8081
8082 .ideditor .help-pane .toc li.walkthrough a {
8083     text-align: center;
8084 }
8085
8086 .ideditor .help-pane .nav {
8087     position: relative;
8088     padding-bottom: 30px;
8089     display: flex;
8090     justify-content: space-between;
8091     width: 100%;
8092 }
8093
8094 .ideditor .help-pane .nav a {
8095     flex: 0 0 50%;
8096     text-align: center;
8097 }
8098
8099 .ideditor .help-pane .nav a:first-child {
8100     border-radius: 4px 0 0 4px;
8101 }
8102
8103 .ideditor .help-pane .nav a:last-child:not(:only-child) {
8104     border-radius: 0 4px 4px 0;
8105     border-left: 0;
8106 }
8107
8108 .ideditor .help-pane .nav a:only-child {
8109     flex: 0 0 100%;
8110     border-radius: 4px;
8111 }
8112
8113
8114 /* Inspector (hover styles)
8115 ------------------------------------------------------- */
8116 .ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
8117 .ideditor .inspector-hover .form-field-input-wrap .label,
8118 .ideditor .inspector-hover .form-field-input-multicombo .chiplist,
8119 .ideditor .inspector-hover .form-field-button,
8120 .ideditor .inspector-hover .structure-extras-wrap,
8121 .ideditor .inspector-hover .comments-container .comment,
8122 .ideditor .inspector-hover button,
8123 .ideditor .inspector-hover input,
8124 .ideditor .inspector-hover textarea,
8125 .ideditor .inspector-hover label {
8126     background: var(--bg-color-3);
8127 }
8128 .ideditor .inspector-hover .preset-list-button,
8129 .ideditor .inspector-hover .tag-row input {
8130     background: var(--bg-color-2);
8131 }
8132
8133 .ideditor .inspector-hover a,
8134 .ideditor .inspector-hover .form-field-input-multicombo .chip,
8135 .ideditor .inspector-hover .form-field-input-check span,
8136 .ideditor .inspector-hover .section-entity-issues .issue .icon {
8137     color: var(--passive-text-color);
8138 }
8139
8140 .ideditor .inspector-hover .form-field-input-multicombo .chip {
8141     background: var(--bg-color-3);
8142     border: 1px solid var(--border-color);
8143 }
8144
8145 /* no scrollbars */
8146 .ideditor .inspector-hover div {
8147     overflow-x: visible;
8148     overflow-y: visible;
8149 }
8150
8151 /* hide and remove from layout */
8152 .ideditor .inspector-hidden,
8153 .ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
8154 .ideditor .inspector-hover label input[type="checkbox"],
8155 .ideditor .inspector-hover label input[type="radio"],
8156 .ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
8157 .ideditor .inspector-hover .form-field-input-radio label,
8158 .ideditor .inspector-hover .form-field-input-radio label span,
8159 .ideditor .inspector-hover .form-field-input-radio label.remove .icon,
8160 .ideditor .inspector-hover .tag-row button,
8161 .ideditor .inspector-hover .tag-row.add-tag,
8162 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
8163 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
8164     display: none;
8165 }
8166
8167 /* hide but preserve in layout */
8168 .ideditor .inspector-hover .combobox-caret,
8169 .ideditor .inspector-hover .header button,
8170 .ideditor .inspector-hover .quick-links,
8171 .ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
8172 .ideditor .inspector-hover .hide-toggle:before,
8173 .ideditor .inspector-hover .more-fields,
8174 .ideditor .inspector-hover .field-label button,
8175 .ideditor .inspector-hover .footer * {
8176     visibility: hidden;
8177 }
8178
8179 /* Unstyle the active entity issue on hover */
8180 .ideditor .inspector-hover .section-entity-issues .issue-container.active {
8181     margin-top: 1px;
8182     margin-bottom: 1px;
8183 }
8184 .ideditor .inspector-hover .section-entity-issues .issue-container * {
8185     border-color: var(--border-color) !important;
8186 }
8187 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
8188     border-bottom: 0;
8189 }
8190 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
8191     font-weight: normal;
8192 }
8193
8194
8195 /* Styles for raw tag inspector on hover */
8196 .ideditor .inspector-hover .tag-row .key-wrap,
8197 .ideditor .inspector-hover .tag-row .value-wrap {
8198     height: 31px;
8199 }
8200
8201 .ideditor .inspector-hover .tag-row:first-child input.value {
8202     border-top-right-radius: 4px;
8203 }
8204 .ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
8205     border-top-right-radius: 0;
8206     border-top-left-radius: 4px;
8207 }
8208
8209 .ideditor .inspector-hover .tag-row:last-child input.value {
8210     border-bottom-right-radius: 4px;
8211 }
8212 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
8213     border-bottom-right-radius: 0;
8214     border-bottom-left-radius: 4px;
8215 }
8216
8217 .ideditor .inspector-hover .tag-row:last-child input.key {
8218     border-bottom-left-radius: 4px;
8219 }
8220 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
8221     border-bottom-left-radius: 0;
8222     border-bottom-right-radius: 4px;
8223 }
8224
8225 .ideditor .inspector-hover .more-fields {
8226     max-height: 0;
8227     margin-bottom: -10px;
8228 }
8229
8230 /* Unstyle button fields */
8231 .ideditor .inspector-hover .form-field-input-radio label.active,
8232 .ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
8233     opacity: 1;
8234     background-color: transparent;
8235     color: var(--passive-text-color);
8236     padding-left: 0;
8237     border-width: 0;
8238 }
8239 .ideditor .inspector-hover .form-field-input-radio button.active {
8240     padding-left: 10px;
8241 }
8242
8243 /* Show placeholder on hover for radio buttons */
8244 .ideditor .inspector-hover .form-field-input-radio {
8245     border: 1px solid var(--border-color);
8246     border-top: 0;
8247     border-radius: 0 0 4px 4px;
8248 }
8249 .ideditor .inspector-hover .form-field-input-radio .placeholder {
8250     opacity: 1;
8251     color: var(--passive-text-color);
8252     padding: 5px 10px;
8253     width: 100%;
8254     height: auto;
8255     border: 0;
8256 }
8257 .ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
8258     border: 0;
8259 }
8260
8261
8262 /* Raster Background Tiles
8263 ------------------------------------------------------- */
8264 .ideditor img.tile {
8265     position: absolute;
8266     transform-origin: 0 0;
8267
8268     -webkit-user-select: none;
8269
8270        -moz-user-select: none;
8271
8272             user-select: none;
8273
8274     pointer-events: none;
8275
8276     -webkit-user-drag: none;
8277
8278     opacity: 1;
8279     transition: opacity 250ms linear;
8280
8281     /* prevent brief flickering of "broken image" on tile loading errors, see https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
8282     text-indent: 100%;
8283     white-space: nowrap;
8284     overflow: hidden;
8285 }
8286
8287 .ideditor .layer-overlay .img.tile,
8288 .ideditor .map-in-map-overlay .img.tile {
8289     /* dummy transition such that the `ontransitionend` event can be triggered, see https://github.com/openstreetmap/iD/pull/10785 */
8290     transition: opacity 1ms linear;
8291 }
8292
8293 .ideditor .layer-background .layer,
8294 .ideditor .map-in-map-background {
8295     filter: url(#alpha-slope5);
8296 }
8297
8298 .ideditor .layer-background img.tile-removing,
8299 .ideditor .layer-overlay img.tile-removing,
8300 .ideditor .map-in-map-background img.tile-removing,
8301 .ideditor .map-in-map-overlay img.tile-removing {
8302     opacity: 0;
8303     z-index: 1;
8304 }
8305
8306 .ideditor .tile-label-debug {
8307     font-size: 10px;
8308     background: rgba(0, 0, 0, 0.7);
8309     color: #fff;
8310     position: absolute;
8311     text-align: center;
8312     padding: 5px;
8313     border-radius: 3px;
8314     z-index: 2;
8315     margin-left: -70px;
8316     margin-top: -20px;
8317
8318     transform-origin: 0 0;
8319
8320     -webkit-user-select: none;
8321
8322        -moz-user-select: none;
8323
8324             user-select: none;
8325 }
8326
8327 .ideditor img.tile-debug {
8328     outline: 1px solid red;
8329 }
8330
8331
8332 /* Map
8333 ------------------------------------------------------- */
8334 .ideditor .main-map {
8335     position: absolute;
8336     top: 0;
8337     left: 0;
8338     right: 0;
8339     bottom: 0;
8340     overflow: hidden;
8341     height: 100%;
8342     width: 100%;
8343     background: #000;
8344     color: #333;
8345     -webkit-user-select: none;
8346        -moz-user-select: none;
8347             user-select: none;
8348     touch-action: none;
8349     -webkit-touch-callout: none;
8350 }
8351 .ideditor .main-map * {
8352     touch-action: none;
8353 }
8354
8355 .ideditor .supersurface {
8356     transform-origin: 0 0;
8357 }
8358
8359 .ideditor .supersurface, .ideditor .layer {
8360     position: absolute;
8361     top: 0;
8362     left: 0;
8363     right: 0;
8364     bottom: 0;
8365 }
8366
8367 .ideditor .layer-background {
8368     z-index: 1;
8369 }
8370 .ideditor .layer-overlay {
8371     z-index: 2;
8372 }
8373 .ideditor .layer-data {
8374     z-index: 3;
8375 }
8376
8377 /* Map-In-Map
8378 ------------------------------------------------------- */
8379 .ideditor .map-in-map {
8380     position: absolute;
8381     overflow: hidden;
8382     top: 10px;
8383     width: 200px;
8384     height: 150px;
8385     z-index: 2;
8386     background: #000;
8387     border: #aaa 1px solid;
8388     border-radius: 4px;
8389     box-shadow: 0 0 2em black;
8390 }
8391 .ideditor[dir='ltr'] .map-in-map {
8392     left: 10px;
8393 }
8394 .ideditor[dir='rtl'] .map-in-map {
8395     right: 10px;
8396 }
8397
8398 .ideditor .map-in-map-tiles {
8399     transform-origin: 0 0;
8400     -webkit-user-select: none;
8401        -moz-user-select: none;
8402             user-select: none;
8403 }
8404
8405 .ideditor .map-in-map-viewport,
8406 .ideditor .map-in-map-data {
8407     top: 0;
8408     left: 0;
8409     overflow: hidden;
8410     height: 100%;
8411     width: 100%;
8412 }
8413
8414 .ideditor .map-in-map-viewport {
8415     position: absolute;
8416 }
8417
8418 .ideditor .map-in-map-data {
8419     position: relative;
8420     z-index: 10;
8421 }
8422
8423 .ideditor .map-in-map-bbox {
8424     fill: none;
8425     stroke: rgba(255, 255, 0, 0.75);
8426     stroke-width: 1;
8427     shape-rendering: crispEdges;
8428 }
8429
8430 .ideditor .map-in-map-bbox.thick {
8431     stroke-width: 5;
8432 }
8433
8434
8435 /* Debug Data
8436 ------------------------------------------------------- */
8437 .ideditor .debug {
8438     stroke: currentColor;
8439     fill: none;
8440     stroke-width: 2;
8441 }
8442 .ideditor .map-in-map-data .debug {
8443     stroke-width: 1;
8444 }
8445
8446 .ideditor .nocolor { color: rgba(0, 0, 0, 0); }
8447 .ideditor .red     { color: rgba(255, 0, 0, 0.75); }
8448 .ideditor .green   { color: rgba(0, 255, 0, 0.75); }
8449 .ideditor .blue    { color: rgba(176, 176, 255, 0.75); }
8450 .ideditor .yellow  { color: rgba(255, 255, 0, 0.75); }
8451 .ideditor .cyan    { color: rgba(0, 255, 255, 0.75); }
8452 .ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
8453 .ideditor .orange  { color: rgba(255, 153, 0, 0.75); }
8454 .ideditor .pink    { color: rgba(255, 0, 153, 0.75); }
8455 .ideditor .purple  { color: rgba(153, 0, 255, 0.75); }
8456
8457 .ideditor .debug-legend {
8458     position: absolute;
8459     top: 70px;
8460     right: 80px;
8461     padding: 5px;
8462     border-radius: 4px;
8463     pointer-events: none;
8464 }
8465
8466 .ideditor .debug-legend-item {
8467     padding-right: 5px;
8468 }
8469 .ideditor .debug-legend-item:before {
8470     content: "\25A0";
8471     padding: 0 5px;
8472 }
8473
8474
8475 /* Information Panels
8476 ------------------------------------------------------- */
8477 .ideditor .info-panels {
8478     display: flex;
8479     flex-flow: row wrap-reverse;
8480     justify-content: flex-end;
8481     width: 100%;
8482     z-index: 1;
8483     -ms-user-select: element;
8484     pointer-events: none;
8485     overflow: hidden;
8486 }
8487
8488 .ideditor .panel-container h1,
8489 .ideditor .panel-container h2,
8490 .ideditor .panel-container h3,
8491 .ideditor .panel-container h4,
8492 .ideditor .panel-container h5 {
8493     display: inline-block;
8494     margin-bottom: 0;
8495 }
8496
8497 .ideditor .panel-container h1,
8498 .ideditor .panel-container h2,
8499 .ideditor .panel-container h3 {
8500     color: #ff8;
8501 }
8502
8503 .ideditor .panel-container {
8504     flex: 0 0 auto;
8505     margin: 0 2px 2px 0;
8506     border-radius: 4px;
8507     border: 1px solid rgba(0, 0, 0, 0.75);
8508     padding-bottom: 10px;
8509     width: 250px;
8510     max-width: 100%;
8511     pointer-events: auto;
8512 }
8513
8514 .ideditor .panel-container .panel-title {
8515     border-radius: 4px 4px 0 0;
8516 }
8517
8518 .ideditor .panel-title {
8519     padding: 5px 10px;
8520     display: flex;
8521     justify-content: space-between;
8522 }
8523
8524 .ideditor .panel-title button.close {
8525     padding: 2px;
8526     background: none;
8527     color: #ddd;
8528 }
8529 .ideditor[dir='rtl'] .panel-title button.close {
8530     float: left;
8531 }
8532 .ideditor .panel-title button.close:focus,
8533 .ideditor .panel-title button.close:active {
8534     color: #fff;
8535 }
8536 @media (hover: hover) {
8537     .ideditor .panel-title button.close:hover {
8538         color: #fff;
8539     }
8540 }
8541 .ideditor .panel-title button.close .icon {
8542     height: 20px;
8543     width: 16px;
8544 }
8545
8546 .ideditor .panel-content {
8547     padding: 5px 10px;
8548     position: relative;
8549 }
8550
8551 .ideditor .panel-content ul:empty {
8552     display: none;
8553 }
8554
8555 .ideditor .panel-content li span:not(.localized-text) {
8556     display: inline-block;
8557     white-space: nowrap;
8558     margin: 0 8px;
8559 }
8560
8561 .ideditor .panel-content .button {
8562     display: inline-block;
8563     background: var(--link-color);
8564     border-radius: 2px;
8565     padding: 0 4px;
8566     margin-top: 10px;
8567     margin-right: 10px;
8568     color: #fff;
8569 }
8570 .ideditor[dir='rtl'] .panel-content .button {
8571     margin-right: auto;
8572     margin-left: 10px;
8573 }
8574
8575 .ideditor .panel-content-history .links a {
8576     margin-left: 8px;
8577 }
8578 .ideditor[dir='rtl'] .panel-content-history .links a {
8579     margin-left: auto;
8580     margin-right: 8px;
8581 }
8582 .ideditor .panel-content-history h4 {
8583     padding-bottom: 0;
8584 }
8585 .ideditor .panel-content-location .location-info {
8586     margin-top: 10px;
8587 }
8588
8589
8590 /* Map Footer
8591 ------------------------------------------------------- */
8592 .ideditor .map-footer {
8593     width: 100%;
8594     position: relative;
8595     border-radius: 0;
8596     pointer-events: none;
8597     display: flex;
8598     flex-direction: column;
8599     -ms-user-select: element;
8600     flex: 0 0 auto;
8601 }
8602
8603 .ideditor .map-footer-bar {
8604     pointer-events: all;
8605     display: block;
8606     height: 2.5em;
8607     position: relative;
8608 }
8609
8610 .ideditor .main-footer-wrap,
8611 .ideditor .flash-wrap {
8612     display: flex;
8613     flex: 0 0 100%;
8614     flex-flow: row nowrap;
8615     justify-content: space-between;
8616     height: 100%;
8617     position: absolute;
8618     right: 0;
8619     left: 0;
8620 }
8621
8622 .ideditor .footer-show {
8623     bottom: 0px;
8624     transition: bottom 75ms linear;
8625 }
8626
8627 .ideditor .footer-hide {
8628     bottom: -100%;
8629     transition: bottom 75ms linear;
8630 }
8631
8632
8633 /* Attribution
8634 ------------------------------------------------------- */
8635 .ideditor .attribution-wrap {
8636     position: absolute;
8637     bottom: 5px;
8638     left: 5px;
8639     right: 5px;
8640     display: flex;
8641     justify-content: space-between;
8642     align-items: flex-end;
8643     z-index: 0;
8644     pointer-events: none;
8645 }
8646
8647 .ideditor .attribution-wrap > * {
8648     pointer-events: auto;
8649 }
8650
8651 .ideditor .attribution-wrap .base-layer-attribution,
8652 .ideditor .attribution-wrap .overlay-layer-attribution {
8653     color: #ccc;
8654     font-size: 10px;
8655 }
8656 .ideditor .attribution-wrap .overlay-layer-attribution {
8657     text-align: right;
8658 }
8659
8660 .ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
8661     content: '; ';
8662 }
8663
8664 .ideditor .attribution-wrap .attribution a,
8665 .ideditor .attribution-wrap .attribution a:visited {
8666     color: #ccf;
8667 }
8668 .ideditor .attribution-wrap .attribution a:focus,
8669 .ideditor .attribution-wrap .attribution a:hover {
8670     color: #aaf;
8671 }
8672 @media (hover: hover) {
8673     .ideditor .attribution-wrap .attribution a:hover {
8674         color: #aaf;
8675     }
8676 }
8677
8678 .ideditor .attribution-wrap .attribution .source-image {
8679     height: 20px;
8680     vertical-align: middle;
8681     border-radius: 3px;
8682 }
8683
8684 .ideditor .attribution-wrap .attribution span {
8685     margin: 0 3px;
8686 }
8687
8688
8689 /* Footer - Flash messages
8690 ------------------------------------------------------- */
8691 .ideditor .flash-content {
8692     display: flex;
8693     flex: 1 0 auto;
8694     flex-flow: row nowrap;
8695     align-items: center;
8696     padding: 2px;
8697 }
8698
8699 .ideditor .flash-icon {
8700     flex: 0 0 auto;
8701     width: 20px;
8702     height: 20px;
8703     margin: 0 8px;
8704 }
8705
8706 .ideditor .flash-icon circle {
8707     fill: #eee;
8708 }
8709 .ideditor .flash-icon.disabled circle {
8710     cursor: auto;
8711     fill: rgba(255,255,255,0.7);
8712 }
8713
8714 .ideditor .flash-icon use {
8715     color: #222;
8716 }
8717 .ideditor .flash-icon.disabled use,
8718 .ideditor .flash-icon.operation.disabled use {
8719     fill: rgba(32,32,32,0.7);
8720     color: #282828b3;
8721 }
8722
8723 .ideditor .flash-text {
8724     flex: 1 1 auto;
8725 }
8726
8727 /* Scale bar
8728 ------------------------------------------------------- */
8729 .ideditor .map-footer-bar .scale-block {
8730     vertical-align: bottom;
8731     width: 250px;
8732     flex: 0 0 auto;
8733     -webkit-user-select: none;
8734        -moz-user-select: none;
8735             user-select: none;
8736     height: 30px;
8737     align-self: center;
8738 }
8739
8740 .ideditor .scale-block .scale {
8741     height: 100%;
8742     width: 100%;
8743     cursor: pointer;
8744     display: block;
8745 }
8746 .ideditor[dir='rtl'] .scale-block .scale {
8747     transform: scaleX(-1);
8748 }
8749
8750 .ideditor .scale-block .scale-text {
8751     display: inline-block;
8752     position: absolute;
8753     color: #ccc;
8754     top: 0.45em;
8755 }
8756
8757 .ideditor .scale-block .scale path {
8758     fill: none;
8759     stroke: #ccc;
8760     stroke-width: 1;
8761     shape-rendering: crispEdges;
8762 }
8763
8764 /* Footer - About, Source Switcher
8765 ------------------------------------------------------- */
8766 .ideditor .map-footer-bar .info-block {
8767     flex: 1 1 100%;
8768     overflow: hidden;
8769 }
8770
8771 .ideditor .map-footer-list {
8772     display: flex;
8773     flex-flow: row nowrap;
8774     height: 100%;
8775     justify-content: flex-end;
8776 }
8777
8778 .ideditor .map-footer-list li {
8779     height: 100%;
8780     display: flex;
8781     align-items: center;
8782     white-space: nowrap;
8783     padding: 5px;
8784 }
8785 .ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
8786     border-right: 1px solid rgba(255,255,255,.5);
8787 }
8788 .ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
8789     border-left: 1px solid rgba(255,255,255,.5);
8790 }
8791 .ideditor .map-footer-list li:empty {
8792     display: none;
8793 }
8794
8795 .ideditor .map-footer-list a.chip {
8796     padding: 1px 4px 1px 4px;
8797     border-radius: 2px;
8798     color: #eee;
8799 }
8800 .ideditor .map-footer-list a.chip .icon {
8801     width: 14px;
8802     height: 14px;
8803     margin-top: -2px;
8804 }
8805 .ideditor .map-footer-list a.chip span.count {
8806     margin: 0 3px;
8807 }
8808
8809 .ideditor .source-switch a.chip.live {
8810     background: #d32232;
8811     color: #fff;
8812 }
8813
8814 .ideditor .feature-warning a.chip {
8815     background: #1e90ff;
8816 }
8817
8818 .ideditor .issues-info a.chip.resolved-count {
8819     background: #15911E;
8820 }
8821 .ideditor .issues-info a.chip.warnings-count {
8822     background: #DF8500;
8823 }
8824 .ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
8825     margin-right: 5px;
8826 }
8827 .ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
8828     margin-left: 5px;
8829 }
8830
8831 .ideditor .user-list a:not(:last-child):after {
8832     content: ', ';
8833 }
8834
8835 .ideditor .api-status {
8836     text-align: right;
8837     padding: 1px 10px;
8838     color: #eee;
8839     flex: 1 1 auto;
8840 }
8841 .ideditor[dir='rtl'] .api-status {
8842     text-align: left;
8843 }
8844 .ideditor .api-status:empty {
8845     display: none;
8846 }
8847
8848 .ideditor .api-status.offline,
8849 .ideditor .api-status.readonly,
8850 .ideditor .api-status.error {
8851     background: #a22;
8852 }
8853
8854 .ideditor .api-status a {
8855     text-decoration: underline;
8856     color: #ccc;
8857     pointer-events: all;
8858 }
8859 .ideditor .api-status a:focus,
8860 .ideditor .api-status a:active {
8861     color: inherit;
8862 }
8863 @media (hover: hover) {
8864     .ideditor .api-status a:hover {
8865         color: inherit;
8866     }
8867 }
8868
8869 .ideditor .local-storage-full {
8870     display: block;
8871     width: 100%;
8872 }
8873
8874 /* Notification Badges
8875 ------------------------------------------------------- */
8876 /* For an icon (e.g. new version) */
8877 .ideditor .badge {
8878     display: inline-flex;
8879     background: #d32232;
8880     width: 21px;
8881     height: 21px;
8882     border-radius: 50%;
8883     align-items: center;
8884     justify-content: center;
8885 }
8886 .ideditor[dir='ltr'] .badge {
8887     margin-left: 6px;
8888 }
8889 .ideditor[dir='rtl'] .badge {
8890     margin-right: 6px;
8891 }
8892 .ideditor .badge .icon {
8893     vertical-align: baseline;
8894     width: 11px;
8895     height: 11px;
8896     color: #fff;
8897     flex: 0 0 auto;
8898 }
8899
8900 /* For text (e.g. upcoming events) */
8901 .ideditor .badge-text {
8902     display: inline-block;
8903     color: #fff;
8904     text-align: center;
8905     width: 16px;
8906     height: 16px;
8907     font-size: 10px;
8908     font-weight: bold;
8909     margin-left: 5px;
8910     background: #f00;
8911     border-radius: 9px;
8912 }
8913 .ideditor[dir='rtl'] .badge-text {
8914     margin-left: 0;
8915     margin-right: 5px;
8916 }
8917
8918
8919 /* Modals / Prompts
8920 ------------------------------------------------------- */
8921 .ideditor .modal {
8922     top: 5%;
8923     max-height: 90%;
8924     position: relative;
8925     border-radius: 3px;
8926     overflow: hidden;
8927     margin: auto;
8928     z-index: 50;
8929     width: 80%;
8930     min-width: 200px;
8931     max-width: 550px;
8932     display: flex;
8933     flex-direction: column;
8934 }
8935
8936 .ideditor .modal .content {
8937     overflow-x: hidden;
8938     overflow-y: auto;
8939 }
8940
8941 .ideditor .modal .loader {
8942     margin-bottom: 10px;
8943     filter: var(--bg-filter);
8944     mix-blend-mode: var(--mix-blend-mode);
8945 }
8946 .ideditor .modal .description {
8947     text-align: center;
8948 }
8949
8950 .ideditor .shaded {
8951     z-index: 5000;
8952     position: absolute;
8953     top: 0;
8954     bottom: 0;
8955     left: 0;
8956     right: 0;
8957     overflow: auto;
8958 }
8959 .ideditor .shaded:before {
8960     content:'';
8961     background: rgba(0,0,0,0.5);
8962     position: absolute;
8963     left: 0px; right: 0px; top: 0px; bottom: 0px;
8964 }
8965
8966 .ideditor .modal-section {
8967     padding: 20px;
8968     border-bottom: 1px solid var(--border-color);
8969 }
8970 .ideditor .modal-section p:not(:last-of-type) {
8971     padding-bottom: 20px;
8972 }
8973 .ideditor .modal-section h4 {
8974     padding-bottom: 0;
8975 }
8976 .ideditor .modal-section.buttons {
8977     text-align: center;
8978 }
8979
8980 .ideditor .modal-section.buttons button {
8981     min-width: 130px;
8982 }
8983
8984 .ideditor .modal-section.buttons .action {
8985     display: inline-block;
8986     margin: 0 10px;
8987 }
8988
8989 .ideditor .save-section .buttons {
8990     display: flex;
8991     flex-wrap: wrap;
8992     justify-content: space-around;
8993 }
8994
8995 .ideditor .save-section .buttons .action,
8996 .ideditor .save-section .buttons .secondary-action {
8997     width: 45%;
8998     margin: 10px auto;
8999     text-align: center;
9000     vertical-align: middle;
9001 }
9002
9003 .ideditor .loading-modal {
9004     text-align: center;
9005 }
9006 .ideditor .modal-actions {
9007     display: flex;
9008 }
9009 .ideditor .modal-actions button {
9010     color: var(--link-color);
9011     border-bottom: 1px solid var(--border-color);
9012     border-radius: 0;
9013     min-height: 160px;
9014     text-align: center;
9015     width: 100%;
9016 }
9017
9018 .ideditor .logo-small {
9019     height: 40px;
9020     width: 40px;
9021     margin: auto;
9022 }
9023
9024 .ideditor .logo {
9025     height: 100px;
9026     width: 100%;
9027     max-width: 100px;
9028     margin: auto;
9029 }
9030
9031 .ideditor .modal-actions > :first-child {
9032     border-right: 1px solid var(--border-color);
9033 }
9034
9035 .ideditor .modal-section:last-child {
9036     border-bottom: 0;
9037 }
9038
9039 /* Restore Modal
9040 ------------------------------------------------------- */
9041 .ideditor .modal-actions .logo-restore {
9042     color: var(--link-color);
9043 }
9044 .ideditor .modal-actions .logo-reset {
9045     color: #e06c5e;
9046 }
9047
9048 /* Success Screen / Community Index
9049 ------------------------------------------------------- */
9050 .ideditor .save-success.body {
9051     overflow-y: scroll;
9052     overflow-x: hidden;
9053 }
9054
9055 .ideditor .save-success .link-out {
9056     margin: 0px 5px;
9057     white-space: nowrap;
9058 }
9059
9060 .ideditor .save-summary,
9061 .ideditor .save-supporting,
9062 .ideditor .save-communityLinks {
9063     padding: 0px 20px 15px 20px;
9064 }
9065
9066 .ideditor .save-supporting,
9067 .ideditor .save-communityLinks {
9068     border-top: 1px solid var(--border-color);
9069 }
9070
9071 .ideditor .save-success table,
9072 .ideditor .save-success p {
9073     margin-top: 15px;
9074 }
9075 .ideditor .save-success h3 {
9076     font-size: 14px;
9077     margin-top: 15px;
9078     line-height: 1.5;
9079     padding-bottom: 0;
9080 }
9081 .ideditor .save-success td {
9082     vertical-align: top;
9083 }
9084 .ideditor .save-success td.cell-icon {
9085     width: 40px;
9086 }
9087 .ideditor .save-success td.cell-detail {
9088     padding: 0 10px;
9089 }
9090 .ideditor .save-success td.community-detail {
9091     padding-bottom: 15px;
9092 }
9093 .ideditor .save-success .community-table h3 {
9094     margin: 0;
9095 }
9096
9097 .ideditor .summary-view-on-osm,
9098 .ideditor .support-the-map,
9099 .ideditor .community-name {
9100     font-size: 14px;
9101     font-weight: bold;
9102 }
9103 .ideditor .community-languages {
9104     margin-top: 5px;
9105     font-style: italic;
9106 }
9107 .ideditor .community-languages:only-child {
9108     margin-top: 0;
9109 }
9110
9111 .ideditor .community-detail a.hide-toggle,
9112 .ideditor .community-detail a:visited.hide-toggle {
9113     font-size: 12px;
9114     font-weight: normal;
9115     padding-bottom: 0;
9116 }
9117 .ideditor .community-detail .hide-toggle svg.icon.pre-text {
9118     width: 12px;
9119     height: 15px;
9120 }
9121
9122 .ideditor .community-events {
9123     margin-top: 5px;
9124 }
9125
9126 .ideditor .community-event,
9127 .ideditor .community-more {
9128     background-color: var(--bg-color-2);
9129     padding: 8px;
9130     border-radius: 4px;
9131     margin-bottom: 5px;
9132 }
9133
9134 .ideditor .community-event-name {
9135     font-size: 14px;
9136     font-weight: bold;
9137 }
9138 .ideditor .community-event-when {
9139     font-weight: bold;
9140 }
9141
9142 .ideditor .community-missing {
9143     padding: 10px;
9144     text-align: center;
9145 }
9146
9147
9148 /* Splash Modal
9149 ------------------------------------------------------- */
9150 .ideditor .modal-actions .logo-walkthrough,
9151 .ideditor .modal-actions .logo-features {
9152     color: var(--link-color);
9153 }
9154
9155 .ideditor .modal-splash .section-preferences-third-party {
9156     margin-top: 20px;
9157 }
9158
9159 .ideditor .modal-splash .section-preferences-third-party .privacy-link {
9160     display: none;
9161 }
9162
9163
9164 /* Shortcuts Modal
9165 ------------------------------------------------------- */
9166 .ideditor .modal-shortcuts {
9167     width: 90%;
9168     max-width: 1050px;
9169 }
9170
9171 .ideditor .modal-shortcuts .modal-section:last-child {
9172     padding: 10px 15px 20px 15px;
9173     min-height: 275px;
9174 }
9175
9176 .ideditor .modal-shortcuts .tabs-bar {
9177     padding-bottom: 5px;
9178     text-align: center;
9179 }
9180
9181 .ideditor .modal-shortcuts a.tab {
9182     display: inline-block;
9183     padding: 5px 10px;
9184     margin: 0 5px;
9185     cursor: pointer;
9186     color: var(--text-color);
9187     font-size: 16px;
9188     font-weight: bold;
9189 }
9190 .ideditor .modal-shortcuts a.tab.active {
9191     color: var(--link-color);
9192     border-bottom: 2px solid;
9193 }
9194 .ideditor .modal-shortcuts a.tab:focus,
9195 .ideditor .modal-shortcuts a.tab:active {
9196     color: var(--link-focus-color);
9197     background-color: var(--bg-color-3);
9198 }
9199 @media (hover: hover) {
9200     .ideditor .modal-shortcuts a.tab:hover {
9201         color: var(--link-focus-color);
9202         background-color: var(--bg-color-3);
9203     }
9204 }
9205
9206 .ideditor .modal-shortcuts .shortcut-tab {
9207     display: flex;
9208     flex-flow: row wrap;
9209     justify-content: space-around;
9210 }
9211
9212 .ideditor .modal-shortcuts .shortcut-column {
9213     width: auto;
9214 }
9215
9216 .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
9217     flex: 1 1 100%;
9218     width: 100%;
9219 }
9220
9221 .ideditor .modal-shortcuts td {
9222     padding-bottom: 5px;
9223 }
9224
9225 .ideditor .modal-shortcuts .shortcut-section {
9226     padding: 20px 0 10px 0;
9227 }
9228
9229 .ideditor .modal-shortcuts .shortcut-keys {
9230     padding: 0 10px;
9231     text-align: right;
9232     white-space: nowrap;
9233 }
9234 .ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
9235     text-align: left;
9236 }
9237
9238 .ideditor .modal-shortcuts .shortcut-keys .gesture {
9239     padding: 3px;
9240 }
9241
9242
9243 /* Settings Modals
9244 ------------------------------------------------------- */
9245 .ideditor .settings-modal textarea {
9246     height: 70px;
9247     width: 100%;
9248 }
9249
9250 .ideditor .settings-custom-background .instructions-template {
9251     margin-bottom: 20px;
9252 }
9253 .ideditor .settings-custom-background .instructions-template p {
9254     margin-bottom: 0;
9255 }
9256 .ideditor .settings-custom-background .instructions-template ul {
9257     padding-bottom: 20px;
9258 }
9259 .ideditor .settings-custom-background .instructions-template ul li {
9260     list-style-type: disc;
9261     list-style-position: inside;
9262 }
9263
9264 .ideditor .settings-custom-data .instructions-url {
9265     margin-bottom: 10px;
9266 }
9267 .ideditor .settings-custom-data .field-file,
9268 .ideditor .settings-custom-data .instructions-template {
9269     margin-bottom: 20px;
9270 }
9271
9272
9273 /* Save Mode
9274 ------------------------------------------------------- */
9275 .ideditor a.user-info {
9276     display: inline-block;
9277 }
9278
9279 .ideditor .commit-form {
9280     margin-bottom: 0;
9281 }
9282
9283 .ideditor .user-info img {
9284     float: left;
9285 }
9286
9287 .ideditor .note-save .field-warning,
9288 .ideditor .field-warning {
9289     background: var(--warning-bg-color);
9290     border: 1px solid var(--border-color);
9291     border-radius: 4px;
9292     padding: 10px;
9293 }
9294
9295 .ideditor .note-save .field-warning:empty,
9296 .ideditor .field-warning:empty {
9297     display: none;
9298 }
9299
9300 .ideditor .changeset-info,
9301 .ideditor .request-review,
9302 .ideditor .commit-info {
9303     margin-bottom: 10px;
9304 }
9305
9306 .ideditor .field-warning {
9307     margin-top: 10px;
9308 }
9309
9310 .ideditor .request-review label {
9311     cursor: pointer;
9312 }
9313
9314 .ideditor .changeset-list {
9315     border: 1px solid var(--border-color);
9316     border-radius: 4px;
9317     background: var(--bg-color);
9318     margin-bottom: 10px;
9319     overflow: hidden;
9320 }
9321
9322 .ideditor .changeset-list li button {
9323     padding: 5px 10px;
9324     width: 100%;
9325     border-radius: 0;
9326     text-align: initial;
9327 }
9328 .ideditor .changeset-list li {
9329     border-top: 1px solid var(--border-color);
9330 }
9331 .ideditor .changeset-list li:first-child {
9332     border-top: 0;
9333 }
9334 .ideditor .changeset-list .alert {
9335     opacity: 0.5;
9336 }
9337
9338
9339 /* Conflict resolution
9340 ------------------------------------------------------- */
9341 .ideditor .conflicts-help {
9342     padding: 20px;
9343     background-color: var(--warning-bg-color);
9344     border-bottom: 1px solid var(--border-color);
9345 }
9346
9347 .ideditor .conflicts-buttons {
9348     padding: 20px;
9349 }
9350
9351 .ideditor button.conflicts-button {
9352     float: left;
9353 }
9354
9355 .ideditor .conflict-container {
9356     border-bottom: 1px solid var(--border-color);
9357 }
9358
9359 .ideditor .conflict-description {
9360     padding: 5px 20px;
9361     display: block;
9362 }
9363
9364 .ideditor .conflicts-done {
9365     padding: 20px 20px 0 20px;
9366 }
9367
9368 .ideditor .conflict-detail-container {
9369     padding: 10px 20px;
9370 }
9371
9372 .ideditor .conflict-count {
9373     padding: 10px 20px;
9374 }
9375
9376 .ideditor .conflict-choices {
9377     margin-top: 10px;
9378 }
9379
9380 .ideditor .conflict-nav-buttons {
9381     padding: 10px 0 20px 0;
9382 }
9383
9384 .ideditor .conflict-nav-button {
9385     height: 30px;
9386 }
9387
9388
9389 /* Notices (Zoom in to Edit)
9390 ------------------------------------------------------- */
9391 .ideditor .notice {
9392     position: absolute;
9393     top: 15px;
9394     left: 0;
9395     right: 0;
9396     text-align: center;
9397 }
9398
9399 .ideditor .notice .zoom-to {
9400     margin: auto;
9401     width: 300px;
9402     padding: 20px 5px;
9403     font-size: 150%;
9404     border-radius: 8px;
9405     font-weight: bold;
9406 }
9407
9408 .ideditor .notice .zoom-to:focus,
9409 .ideditor .notice .zoom-to:active {
9410     background: rgba(0,0,0,0.6);
9411 }
9412 @media (hover: hover) {
9413     .ideditor .notice .zoom-to:hover {
9414         background: rgba(0,0,0,0.6);
9415     }
9416 }
9417
9418 .ideditor .notice .zoom-to .icon {
9419     width: 30px;
9420     height: 30px;
9421     vertical-align: middle;
9422     margin-right: 10px;
9423 }
9424 .ideditor[dir='rtl'] .notice .zoom-to .icon {
9425     margin-left: 10px;
9426     margin-right: 0;
9427 }
9428
9429
9430 /* Tooltips
9431 ------------------------------------------------------- */
9432 .ideditor .popover {
9433     position: absolute;
9434     display: none;
9435 }
9436 .ideditor .tooltip {
9437     color: var(--text-color);
9438     font-size: 12px;
9439     white-space: initial;
9440 }
9441 .ideditor .tooltip:not(.curtain-tooltip) {
9442     pointer-events: none;
9443 }
9444 .ideditor .popover.in {
9445     z-index: 5000;
9446     height: auto;
9447     display: block;
9448 }
9449 .ideditor .tooltip.in {
9450     opacity: 0.95;
9451 }
9452 .ideditor .popover.top {
9453     margin-top: -4px;
9454 }
9455 .ideditor .popover.right {
9456     margin-left: 4px;
9457 }
9458 .ideditor .popover.bottom {
9459     margin-top: 4px;
9460 }
9461 .ideditor .popover.left {
9462     margin-left: -4px;
9463 }
9464 .ideditor .popover.arrowed.top {
9465     margin-top: -10px;
9466 }
9467 .ideditor .popover.arrowed.right {
9468     margin-left: 10px;
9469 }
9470 .ideditor .popover.arrowed.bottom {
9471     margin-top: 10px;
9472 }
9473 .ideditor .popover.arrowed.left {
9474     margin-left: -10px;
9475 }
9476 .ideditor .bar-button .tooltip.arrowed.bottom {
9477     margin-top: 20px;
9478 }
9479 .ideditor .tooltip.top {
9480     text-align: center;
9481 }
9482 .ideditor .tooltip.right {
9483     text-align: left;
9484 }
9485 .ideditor .tooltip.bottom {
9486     text-align: center;
9487 }
9488 .ideditor .tooltip.left {
9489     text-align: right;
9490 }
9491
9492 .ideditor .popover-inner {
9493     border-radius: inherit;
9494 }
9495
9496 .ideditor .tooltip .popover-inner {
9497     border-radius: 4px;
9498     max-width: 200px;
9499     min-width: 80px;
9500     padding: 10px;
9501     font-weight: normal;
9502     background-color: var(--bg-color);
9503 }
9504
9505 .ideditor .popover-arrow {
9506     position: absolute;
9507     width: 0;
9508     height: 0;
9509     border-color: transparent;
9510     border-style: solid;
9511 }
9512 .ideditor .popover.top .popover-arrow {
9513     bottom: -5px;
9514     left: 50%;
9515     margin-left: -5px;
9516     border-top-color: var(--bg-color);
9517     border-width: 5px 5px 0;
9518 }
9519 .ideditor .popover.right .popover-arrow {
9520     top: 50%;
9521     left: -5px;
9522     margin-top: -5px;
9523     border-right-color: var(--bg-color);
9524     border-width: 5px 5px 5px 0;
9525 }
9526 .ideditor .popover.left .popover-arrow {
9527     top: 50%;
9528     right: -5px;
9529     margin-top: -5px;
9530     border-left-color: var(--bg-color);
9531     border-width: 5px 0 5px 5px;
9532 }
9533 .ideditor .popover.bottom .popover-arrow {
9534     top: -5px;
9535     left: 50%;
9536     margin-left: -5px;
9537     border-bottom-color: var(--bg-color);
9538     border-width: 0 5px 5px;
9539 }
9540 .ideditor .popover:not(.arrowed) .popover-arrow {
9541     display: none;
9542 }
9543
9544 .ideditor .tooltip-heading {
9545     font-weight: bold;
9546     background: var(--bg-color-2);
9547     padding: 10px;
9548     margin: -10px -10px 10px -10px;
9549     border-radius: 3px 3px 0 0;
9550     font-size: 14px;
9551 }
9552
9553 .ideditor .keyhint-wrap {
9554     background: var(--bg-color-2);
9555     padding: 10px;
9556     margin: 10px -10px -10px -10px;
9557     border-radius: 0 0 3px 3px;
9558 }
9559 .ideditor .popover-inner .shortcut {
9560     font-weight: bold;
9561     margin-left: 5px;
9562 }
9563
9564 .ideditor[dir='rtl'] .popover-inner .shortcut {
9565     margin-left: 0;
9566     margin-right: 5px;
9567 }
9568
9569 /* dark tooltips for sidebar / panels */
9570 .ideditor .tooltip.dark.top .popover-arrow,
9571 .ideditor .map-pane .tooltip.top .popover-arrow,
9572 .ideditor .sidebar .tooltip.top .popover-arrow,
9573 .ideditor .modal .tooltip.top .popover-arrow {
9574     border-top-color: var(--dark-tooltip-bg-color);
9575 }
9576 .ideditor .tooltip.dark.bottom .popover-arrow,
9577 .ideditor .map-pane .tooltip.bottom .popover-arrow,
9578 .ideditor .sidebar .tooltip.bottom .popover-arrow,
9579 .ideditor .modal .tooltip.bottom .popover-arrow {
9580     border-bottom-color: var(--dark-tooltip-bg-color);
9581 }
9582 .ideditor .tooltip.dark.left .popover-arrow,
9583 .ideditor .map-pane .tooltip.left .popover-arrow,
9584 .ideditor .sidebar .tooltip.left .popover-arrow,
9585 .ideditor .modal .tooltip.left .popover-arrow {
9586     border-left-color: var(--dark-tooltip-bg-color);
9587 }
9588 .ideditor .tooltip.dark.right .popover-arrow,
9589 .ideditor .map-pane .tooltip.right .popover-arrow,
9590 .ideditor .sidebar .tooltip.right .popover-arrow,
9591 .ideditor .modal .tooltip.right .popover-arrow {
9592     border-right-color: var(--dark-tooltip-bg-color);
9593 }
9594 .ideditor .tooltip.dark .popover-inner,
9595 .ideditor .tooltip.dark .tooltip-heading,
9596 .ideditor .tooltip.dark .keyhint-wrap,
9597 .ideditor .map-pane .popover-inner,
9598 .ideditor .map-pane .tooltip-heading,
9599 .ideditor .map-pane .keyhint-wrap,
9600 .ideditor .sidebar .popover-inner,
9601 .ideditor .sidebar .tooltip-heading,
9602 .ideditor .sidebar .keyhint-wrap,
9603 .ideditor .modal .popover-inner {
9604     background: var(--dark-tooltip-bg-color);
9605     color: var(--dark-tooltip-text-color);
9606 }
9607 .ideditor .tooltip.dark kbd,
9608 .ideditor .map-pane .tooltip kbd,
9609 .ideditor .sidebar .tooltip kbd {
9610     background-color: #666;
9611     border: solid 1px #444;
9612     border-bottom-color: #333;
9613     box-shadow: inset 0 -1px 0 #333;
9614     color: #eee;
9615 }
9616
9617 /* Exceptions for tooltip layouts */
9618
9619 /* commit warning tooltips need to be closer */
9620 .ideditor .warning-section .tooltip.top {
9621     margin-top: -5px;
9622 }
9623
9624 .ideditor li:first-of-type .badge .tooltip,
9625 .ideditor li.hide + li.version .badge .tooltip {
9626     left: auto !important;
9627     right: 5px !important;
9628 }
9629 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
9630 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
9631     left: 5px !important;
9632     right: auto !important;
9633 }
9634 .ideditor li:first-of-type .badge .tooltip .popover-arrow,
9635 .ideditor li.hide + li.version .badge .tooltip .popover-arrow {
9636     right: 15px !important;
9637     left: auto !important;
9638 }
9639 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
9640 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
9641     left: 15px !important;
9642     right: auto !important;
9643 }
9644
9645
9646 /* Contextual Edit Menu
9647 ------------------------------------------------------- */
9648 .ideditor .edit-menu {
9649     position: absolute;
9650     display: flex;
9651     flex-direction: column;
9652     background: var(--bg-color);
9653     border-radius: 4px;
9654     /* padding is set in edit_menu.js */
9655 }
9656
9657 .ideditor .edit-menu .tooltip {
9658     width: 200px; /* see also edit_menu.js */
9659 }
9660
9661 .ideditor .edit-menu-item {
9662     display: flex;
9663     align-items: center;
9664     border-radius: 0;
9665     padding: 0 12px;
9666     /* height is set in edit_menu.js */
9667 }
9668 .ideditor .edit-menu-item .label {
9669     max-width: 120px;
9670     text-align: initial;
9671     line-height: 1.1em;
9672     font-weight: bold;
9673 }
9674 .ideditor[dir='ltr'] .edit-menu-item .label {
9675     margin-left: 8px;
9676 }
9677 .ideditor[dir='rtl'] .edit-menu-item .label {
9678     margin-right: 8px;
9679 }
9680
9681 .ideditor .edit-menu-item use {
9682     pointer-events: none;
9683 }
9684
9685 /* Lasso
9686 ------------------------------------------------------- */
9687 .ideditor .lasso-path {
9688     fill-opacity: 0.3;
9689     stroke: #fff;
9690     stroke-width: 1;
9691     stroke-opacity: 1;
9692     stroke-dasharray: 5, 5;
9693 }
9694
9695
9696 /* Scrollbars
9697  ----------------------------------------------------- */
9698 .ideditor ::-webkit-scrollbar {
9699     height: 10px;
9700     overflow: visible;
9701     width: 10px;
9702     border-left: 1px solid var(--border-color-2);
9703 }
9704
9705 .ideditor ::-webkit-scrollbar-track {
9706     background-clip: padding-box;
9707     border: solid transparent;
9708     border-width: 0;
9709 }
9710
9711 .ideditor ::-webkit-scrollbar-thumb {
9712     background-color: rgba(0,0,0,.2);
9713     background-clip: padding-box;
9714     border: solid transparent;
9715     border-width: 3px 3px 3px 4px;
9716     border-radius: 6px;
9717     cursor: auto;
9718 }
9719 .ideditor ::-webkit-scrollbar-track:active {
9720     background-color: rgba(0,0,0,.05);
9721 }
9722 @media (hover: hover) {
9723     .ideditor ::-webkit-scrollbar-track:hover {
9724         background-color: rgba(0,0,0,.05);
9725     }
9726 }
9727 /* Firefox */
9728 @-moz-document url-prefix() {
9729         .ideditor * {
9730             scrollbar-width: thin;
9731         }
9732 }
9733
9734
9735 /* Intro walkthrough
9736  ----------------------------------------------------- */
9737 .ideditor .curtain {
9738     z-index: 1000;
9739     pointer-events: none;
9740     position: absolute;
9741 }
9742
9743 .ideditor .curtain-darkness {
9744     pointer-events: all;
9745     fill-opacity: 0.7;
9746     fill: #222;
9747     fill-rule: evenodd;
9748 }
9749
9750 .ideditor .intro-nav-wrap {
9751     display: flex;
9752     flex-direction: row;
9753     position: absolute;
9754     left: 0;
9755     right: 0;
9756     bottom: 30px;
9757     padding: 10px;
9758     z-index: 1001;
9759 }
9760
9761 .ideditor .intro-nav-wrap .intro-nav-wrap-logo {
9762     flex: 0 0 auto;
9763     height: 40px;
9764     width: 40px;
9765     color: #fff;
9766     margin: 0px 20px;
9767     vertical-align: middle;
9768 }
9769
9770 .ideditor .intro-nav-wrap .joined {
9771     flex: 1 1 auto;
9772     display: flex;
9773     flex-direction: row;
9774 }
9775
9776 .ideditor .intro-nav-wrap button.chapter {
9777     flex: 1 1 100%;
9778     padding: 0px 5px;
9779     font-weight: bold;
9780 }
9781
9782 .ideditor .intro-nav-wrap button.chapter.next {
9783     animation-duration: 1s;
9784     animation-name: pulse;
9785     animation-iteration-count: infinite;
9786     animation-direction: alternate;
9787 }
9788 @keyframes pulse {
9789     from  { background: var(--link-color); }
9790     to    { background: var(--suggestion-label-color); }
9791 }
9792
9793 .ideditor .intro-nav-wrap button.chapter.finished {
9794     background: #8cd05f;
9795 }
9796
9797 .ideditor .intro-nav-wrap button.chapter .status {
9798     display: none;
9799 }
9800
9801 .ideditor .intro-nav-wrap button.chapter.finished .status {
9802     display: inline-block;
9803 }
9804
9805 .ideditor .curtain-tooltip {
9806     z-index: 1002;
9807 }
9808
9809 .ideditor .curtain-tooltip.tooltip.in {
9810     opacity: 1;
9811 }
9812 .ideditor .curtain-tooltip.tooltip {
9813     text-align: left;
9814 }
9815 .ideditor[dir='rtl'] .curtain-tooltip.tooltip {
9816     text-align: right;
9817 }
9818
9819 .ideditor .curtain-tooltip .popover-inner {
9820     font-size: 15px;
9821     position: relative;
9822     padding: 20px;
9823 }
9824
9825 .ideditor .curtain-tooltip .popover-inner .button-section,
9826 .ideditor .curtain-tooltip .popover-inner .instruction {
9827     font-weight: bold;
9828     display: block;
9829     border-top: 1px solid var(--border-color);
9830     margin-top: 10px;
9831     margin-left: -20px;
9832     margin-right: -20px;
9833     padding: 10px 20px 0 20px;
9834 }
9835
9836 .ideditor .curtain-tooltip .popover-inner .button-section button {
9837     width: 66.6666%;
9838 }
9839
9840 .ideditor .curtain-tooltip .popover-inner .instruction:only-child {
9841     border: 0;
9842     padding: 0;
9843     margin: 0;
9844 }
9845
9846 .ideditor .curtain-tooltip .popover-inner .icon.pre-text {
9847     vertical-align: text-top;
9848     margin-right: 0;
9849     margin-left: 0;
9850     display: inline-block;
9851 }
9852
9853 .ideditor .curtain-tooltip.intro-points-describe,
9854 .ideditor .curtain-tooltip.intro-lines-name_road {
9855     top: 133px !important;
9856 }
9857
9858 .ideditor .tooltip-illustration {
9859     height: 80px;
9860     width: 200px;
9861     margin-left: -20px;
9862     margin-top: -10px;
9863 }
9864 .ideditor[dir='rtl'] .tooltip-illustration {
9865     margin-left: auto;
9866     margin-right: -20px;
9867 }
9868
9869 .ideditor .curtain-tooltip.intro-mouse {
9870     -webkit-user-select: none;
9871        -moz-user-select: none;
9872             user-select: none;
9873 }
9874
9875 .ideditor .curtain-tooltip.intro-mouse .counter {
9876     position: absolute;
9877     display: block;
9878     top: 50px;
9879     width: 100%;
9880     text-align: center;
9881     font-weight: bold;
9882     font-size: 14px;
9883     z-index: 1003;
9884 }
9885
9886 .ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
9887     fill: rgba(112, 146, 255, 0);
9888     color: rgba(112, 146, 255, 0);
9889 }
9890 .ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
9891     fill: rgba(112, 146, 255, 1);
9892 }
9893 .ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
9894     color: rgba(112, 146, 255, 1);
9895 }
9896
9897 .ideditor .huge-modal-button {
9898     width: 100%;
9899     padding: 20px;
9900 }
9901
9902 .ideditor .huge-modal-button .illustration {
9903     height: 100px;
9904     width: 100px;
9905     color: var(--link-color);
9906 }