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