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 .mly-wrapper .mapillary-attribution-container .mapillary-attribution-username {
2865     display: none;
2866 }
2867
2868 .ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-date {
2869     margin-right: 6px;
2870 }
2871
2872 /* KartaView viewer */
2873 .ideditor .kartaview-wrapper {
2874     position: relative;
2875     background-color: #000;
2876     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
2877     background-position: center;
2878     background-repeat: no-repeat;
2879 }
2880
2881 .ideditor .kartaview-wrapper img {
2882     width: 100%;
2883     height: 100%;
2884     overflow: hidden;
2885     -o-object-fit: cover;
2886        object-fit: cover;
2887 }
2888
2889 .ideditor .kartaview-wrapper .photo-attribution a:active {
2890     color: #20c4ff;
2891 }
2892 @media (hover: hover) {
2893     .ideditor .kartaview-wrapper .photo-attribution a:hover {
2894         color: #20c4ff;
2895     }
2896 }
2897
2898 .ideditor .kartaview-image-wrap {
2899     width: 100%;
2900     height: 100%;
2901     transform-origin: 0 0;
2902 }
2903
2904 .ideditor .photo-wrapper {
2905     position: relative;
2906     background-color: #000;
2907 }
2908
2909 .ideditor .photoviewer .plane-frame {
2910     display: block;
2911     overflow: hidden;
2912     height: 100%;
2913     width: 100%;
2914     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
2915     background-position: center;
2916     background-repeat: no-repeat;
2917 }
2918
2919 .ideditor .photoviewer .plane-frame > img.plane-photo{
2920     width: auto;
2921     height: 100%;
2922     transform-origin: 0 0;
2923 }
2924
2925 /* photo-controls (step forward, back, rotate) */
2926 .ideditor .photo-controls-wrap {
2927     text-align: center;
2928     position: absolute;
2929     top: 10px;
2930     width: 100%;
2931     z-index: 10;
2932     pointer-events: none;
2933 }
2934
2935 .ideditor .photo-controls {
2936     display: inline-block;
2937     z-index: 10;
2938     pointer-events: initial;
2939 }
2940
2941 .ideditor .photo-controls button,
2942 .ideditor .photo-controls button:focus {
2943     height: 18px;
2944     width: 18px;
2945     line-height: 18px;
2946     background: rgba(0,0,0,0.65);
2947     color: #eee;
2948     border-radius: 0;
2949 }
2950 .ideditor .photo-controls button:first-of-type {
2951     border-radius: 3px 0 0 3px;
2952 }
2953 .ideditor .photo-controls button:last-of-type {
2954     border-radius: 0 3px 3px 0;
2955 }
2956 .ideditor .photo-controls button:active {
2957     background: rgba(0,0,0,0.85);
2958     color: #fff;
2959 }
2960 @media (hover: hover) {
2961     .ideditor .photo-controls button:hover {
2962         background: rgba(0,0,0,0.85);
2963         color: #fff;
2964     }
2965 }
2966
2967 /* local georeferenced photos */
2968 .ideditor .layer-local-photos {
2969     pointer-events: none;
2970 }
2971 .ideditor .layer-local-photos .viewfield-group * {
2972     fill: #ed00d9;
2973 }
2974 .ideditor .local-photos {
2975     display: flex;
2976 }
2977 .ideditor .local-photos > div {
2978     width: 50%;
2979 }
2980 .ideditor .local-photos > div:first-child {
2981     margin-right: 20px;
2982 }
2983
2984 .ideditor .list-local-photos {
2985     max-height: 40vh;
2986     overflow-y: scroll;
2987     overflow-x: auto;
2988     /* workaround for something like "overflow-x: visible"
2989        see https://stackoverflow.com/a/39554003 */
2990     margin-left: -100px;
2991     padding-left: 100px;
2992     margin-top: -20px;
2993     padding-top: 20px;
2994     min-height: 100px;
2995 }
2996 .ideditor .list-local-photos::-webkit-scrollbar {
2997     border-left: none;
2998 }
2999 .ideditor .list-local-photos li {
3000     list-style: none;
3001     display: flex;
3002     justify-content: space-between;
3003     height: 30px;
3004 }
3005 .ideditor .list-local-photos span.filename {
3006     display: block;
3007     width: 100%;
3008     white-space: nowrap;
3009     overflow: hidden;
3010     text-overflow: ellipsis;
3011     line-height: 30px;
3012     padding-left: 8px;
3013     border-bottom: 1px solid #ccc;
3014     border-left: 1px solid #ccc;
3015     border-right: 1px solid #ccc;
3016 }
3017 .ideditor .list-local-photos li:first-child span.filename {
3018     border-top: 1px solid #ccc;
3019     border-top-left-radius: 4px;
3020 }
3021 .ideditor .list-local-photos li:first-child button {
3022     border-top: 1px solid #ccc;
3023 }
3024 .ideditor .list-local-photos li:first-child button.remove {
3025     border-top-right-radius: 4px;
3026 }
3027 .ideditor .list-local-photos li:last-child span.filename {
3028     border-bottom-left-radius: 4px;
3029 }
3030 .ideditor .list-local-photos li:last-child button.remove {
3031     border-bottom-right-radius: 4px;
3032 }
3033 .ideditor .list-local-photos li.invalid button.zoom-to-data {
3034     display: none;
3035 }
3036 .ideditor .list-local-photos li button.no-geolocation {
3037     display: none;
3038 }
3039 .ideditor .list-local-photos li.invalid button.no-geolocation {
3040     display: block;
3041     color: red;
3042 }
3043 .ideditor .list-local-photos .placeholder div {
3044     display: block;
3045     height: 40px;
3046     width: 40px;
3047     background-position: center;
3048     background-size: cover;
3049     background-repeat: no-repeat;
3050     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
3051     filter: invert(1);
3052 }
3053 .ideditor .local-photos label.button {
3054     background: #7092ff;
3055     color: #fff;
3056     font-weight: bold;
3057     padding: 10px 25px;
3058     text-align: center;
3059     font-size: 12px;
3060     display: inline-block;
3061     border-radius: 4px;
3062     cursor: pointer;
3063 }
3064
3065 /* OSM Notes and QA Layers */
3066
3067 .ideditor .qa-header-icon .qaItem-fill,
3068 .ideditor .layer-keepRight .qaItem .qaItem-fill,
3069 .ideditor .layer-improveOSM .qaItem .qaItem-fill,
3070 .ideditor .layer-osmose .qaItem .qaItem-fill {
3071     stroke: #333;
3072     stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */
3073 }
3074
3075 .ideditor .note-header-icon .note-fill,
3076 .ideditor .layer-notes .note .note-fill {
3077     color: #f30;
3078     stroke: #333;
3079     stroke-width: 40px;
3080 }
3081 .ideditor .note-header-icon.new .note-fill,
3082 .ideditor .layer-notes .note.new .note-fill {
3083     color: #fe0;
3084     stroke: #333;
3085     stroke-width: 40px;
3086 }
3087 .ideditor .note-header-icon.closed .note-fill,
3088 .ideditor .layer-notes .note.closed .note-fill {
3089     color: #5d0;
3090     stroke: #333;
3091     stroke-width: 40px;
3092 }
3093
3094 /* slight adjustments to preset icon for note icons */
3095 .ideditor .note-header-icon .preset-icon-28 {
3096     top: 18px;
3097 }
3098 .ideditor .note-header-icon .note-icon-annotation {
3099     position: absolute;
3100     top: 22px;
3101     left: 22px;
3102     margin: auto;
3103 }
3104 .ideditor .note-header-icon .note-icon-annotation .icon {
3105     width: 15px;
3106     height: 15px;
3107 }
3108
3109 /* adjustment to center QA icons */
3110 .ideditor .qa-header-icon .preset-icon-28 {
3111     top: auto;
3112     left: auto;
3113 }
3114 .ideditor .qa-header-icon {
3115     display: flex;
3116     align-items: center;
3117     justify-content: center;
3118 }
3119
3120 /* Keep Right Issues
3121 ------------------------------------------------------- */
3122 .ideditor .keepRight.itemType-20,
3123 .ideditor .keepRight.itemType-40,
3124 .ideditor .keepRight.itemType-210,
3125 .ideditor .keepRight.itemType-270,
3126 .ideditor .keepRight.itemType-310,
3127 .ideditor .keepRight.itemType-320,
3128 .ideditor .keepRight.itemType-350 {   /* improper bridge tag */
3129     color: #ff9;
3130 }
3131
3132 .ideditor .keepRight.itemType-50 {    /* almost junctions */
3133     color: #88f;
3134 }
3135
3136 .ideditor .keepRight.itemType-60,
3137 .ideditor .keepRight.itemType-70,
3138 .ideditor .keepRight.itemType-90,
3139 .ideditor .keepRight.itemType-100,
3140 .ideditor .keepRight.itemType-110,
3141 .ideditor .keepRight.itemType-150,
3142 .ideditor .keepRight.itemType-220,
3143 .ideditor .keepRight.itemType-380 {   /* non-physical sport tag */
3144     color: #5d0;
3145 }
3146
3147 .ideditor .keepRight.itemType-130 {   /* disconnected ways */
3148     color: #fa3;
3149 }
3150
3151 .ideditor .keepRight.itemType-170 {   /* FIXME tag */
3152     color: #ff0;
3153 }
3154
3155 .ideditor .keepRight.itemType-190 {   /* intersection without junction */
3156     color: #f33;
3157 }
3158
3159 .ideditor .keepRight.itemType-200 {   /* overlapping ways */
3160     color: #fdbf6f;
3161 }
3162
3163 .ideditor .keepRight.itemType-160,
3164 .ideditor .keepRight.itemType-230 {   /* layer conflict */
3165     color: #b60;
3166 }
3167
3168 .ideditor .keepRight.itemType-280 {   /* boundary issues */
3169     color: #5f47a0;
3170 }
3171
3172 .ideditor .keepRight.itemType-180,
3173 .ideditor .keepRight.itemType-290 {   /* turn restriction issues */
3174     color: #ace;
3175 }
3176
3177 .ideditor .keepRight.itemType-300,
3178 .ideditor .keepRight.itemType-390 {   /* missing tracktype */
3179     color: #090;
3180 }
3181
3182 .ideditor .keepRight.itemType-360,
3183 .ideditor .keepRight.itemType-370,
3184 .ideditor .keepRight.itemType-410 {   /* website issues */
3185     color: #f9b;
3186 }
3187
3188 .ideditor .keepRight.itemType-120,
3189 .ideditor .keepRight.itemType-400 {   /* geometry / turn angles */
3190     color: #c35;
3191 }
3192
3193 /* ImproveOSM Issues
3194 ------------------------------------------------------- */
3195
3196 .ideditor .improveOSM.itemType-ow {   /* missing one way */
3197     color: #1E90FF;
3198 }
3199
3200 .ideditor .improveOSM.itemType-mr-road {   /* missing road */
3201     color: #B452CD;
3202 }
3203 .ideditor .improveOSM.itemType-mr-path {   /* missing path */
3204     color: #A0522D;
3205 }
3206 .ideditor .improveOSM.itemType-mr-parking {   /* missing parking */
3207     color: #EEEE00;
3208 }
3209 .ideditor .improveOSM.itemType-mr-both {   /* missing road+parking */
3210     color: #FFA500;
3211 }
3212
3213 .ideditor .improveOSM.itemType-tr {   /* missing turn restriction */
3214     color: #EC1C24;
3215 }
3216
3217 /* Custom Map Data (geojson, gpx, kml, vector tile) */
3218 .ideditor .layer-mapdata {
3219     pointer-events: none;
3220 }
3221
3222 .ideditor .layer-mapdata path.shadow {
3223     pointer-events: stroke;
3224     stroke: #f6634f;
3225     stroke-width: 16;
3226     stroke-opacity: 0;
3227     fill: none;
3228 }
3229 .ideditor .layer-mapdata path.MultiPoint.shadow,
3230 .ideditor .layer-mapdata path.Point.shadow {
3231     pointer-events: fill;
3232     fill: #f6634f;
3233     fill-opacity: 0;
3234 }
3235 .ideditor .layer-mapdata path.shadow.hover:not(.selected) {
3236     stroke-opacity: 0.4;
3237 }
3238 .ideditor .layer-mapdata path.shadow.selected {
3239     stroke-opacity: 0.7;
3240 }
3241
3242 .ideditor .layer-mapdata path.stroke {
3243     stroke: #ff26d4;
3244     stroke-width: 2;
3245     fill: none;
3246 }
3247
3248 .ideditor .layer-mapdata path.fill {
3249     stroke-width: 0;
3250     stroke-opacity: 0.3;
3251     stroke: #ff26d4;
3252     fill: #ff26d4;
3253     fill-opacity: 0.3;
3254     fill-rule: evenodd;
3255 }
3256
3257 .ideditor .layer-mapdata text.label-halo,
3258 .ideditor .layer-mapdata text.label {
3259     font-size: 10px;
3260     font-weight: bold;
3261     dominant-baseline: middle;
3262 }
3263 .ideditor .layer-mapdata text.label {
3264     fill: #ddd;
3265 }
3266 .ideditor .layer-mapdata text.label.hover,
3267 .ideditor .layer-mapdata text.label.selected {
3268     fill: #fff;
3269 }
3270 .ideditor .layer-mapdata text.label-halo {
3271     opacity: 0.7;
3272     stroke: #000;
3273     stroke-width: 5px;
3274     stroke-miterlimit: 1;
3275 }
3276 /* Fill Styles */
3277
3278 .ideditor .low-zoom.fill-wireframe path.stroke,
3279 .ideditor .fill-wireframe path.stroke {
3280     stroke-width: 1 !important;
3281     stroke-opacity: 0.5 !important;
3282     stroke-dasharray: none !important;
3283     fill: none !important;
3284 }
3285 .ideditor .low-zoom.fill-wireframe .layer-mapdata path.stroke,
3286 .ideditor .fill-wireframe .layer-mapdata path.stroke {
3287     stroke-width: 2 !important;
3288     stroke-opacity: 1 !important;
3289 }
3290
3291 .ideditor .low-zoom.fill-wireframe path.shadow,
3292 .ideditor .fill-wireframe path.shadow {
3293     stroke-width: 12;
3294 }
3295
3296 .ideditor .fill-wireframe path.shadow.related:not(.selected),
3297 .ideditor .fill-wireframe path.shadow.hover:not(.selected) {
3298     stroke-opacity: 0.4;
3299 }
3300 .ideditor .fill-wireframe path.shadow.selected {
3301     stroke-opacity: 0.6;
3302 }
3303
3304 .ideditor .fill-wireframe .point,
3305 .ideditor .fill-wireframe .areaicon,
3306 .ideditor .fill-wireframe .areaicon-halo,
3307 .ideditor .fill-wireframe path.casing,
3308 .ideditor .fill-wireframe path.fill,
3309 .ideditor .fill-wireframe path.oneway {
3310     display: none !important;
3311 }
3312
3313 .ideditor .fill-partial path.area.fill {
3314     fill-opacity: 0;
3315     stroke-width: 60px;
3316     pointer-events: none;
3317 }
3318 .ideditor .fill-partial path.area.fill.tag-building_part {
3319     stroke-width: 40px;
3320 }
3321 .ideditor .fill-partial path.area.fill.tag-indoor {
3322     stroke-width: 20px;
3323 }
3324 .ideditor.mode-browse .fill-partial path.area.fill,
3325 .ideditor.mode-select .fill-partial path.area.fill,
3326 .ideditor.mode-select-data .fill-partial path.area.fill,
3327 .ideditor.mode-select-error .fill-partial path.area.fill,
3328 .ideditor.mode-select-note .fill-partial path.area.fill {
3329     pointer-events: visibleStroke;
3330 }
3331 .ideditor svg.preset-icon-category-border path {
3332     stroke-width: 1;
3333     stroke: rgb(170, 170, 170);
3334     fill: rgba(170, 170, 170, 0.3);
3335 }
3336
3337 .ideditor .preset-category-barrier svg.preset-icon-category-border path {
3338     stroke: rgb(200, 144, 144);
3339     fill: rgba(200, 144, 144, 0.3);
3340 }
3341
3342 .ideditor .preset-category-building svg.preset-icon-category-border path {
3343     stroke: rgb(224, 110, 95);
3344     fill: rgba(224, 110, 95, 0.3);
3345 }
3346
3347 .ideditor .preset-category-landuse svg.preset-icon-category-border path {
3348     stroke: rgb(196, 189, 25);
3349     fill: rgba(196, 189, 25, 0.3);
3350 }
3351
3352 .ideditor .preset-category-natural svg.preset-icon-category-border path,
3353 .ideditor .preset-category-playground svg.preset-icon-category-border path,
3354 .ideditor .preset-category-golf svg.preset-icon-category-border path {
3355     stroke: rgb(140, 208, 95);
3356     fill: rgba(140, 208, 95, 0.3);
3357 }
3358
3359 .ideditor .preset-category-water svg.preset-icon-category-border path,
3360 .ideditor .preset-category-waterway svg.preset-icon-category-border path {
3361     stroke: rgb(119, 211, 222);
3362     fill: rgba(119, 211, 222, 0.3);
3363 }
3364
3365 .ideditor .preset-category-utility svg.preset-icon-category-border path {
3366     stroke: rgb(125, 125, 125);
3367     fill: rgba(219, 219, 125, 0.3);
3368 }
3369
3370 .ideditor .preset-category-path svg.preset-icon-category-border path {
3371     stroke: rgb(221, 221, 204);
3372     fill: rgba(221, 221, 204, 0.3);
3373 }
3374
3375 .ideditor .preset-category-road_service svg.preset-icon-category-border path,
3376 .ideditor .preset-category-road_minor svg.preset-icon-category-border path,
3377 .ideditor .preset-category-road_major svg.preset-icon-category-border path {
3378     stroke: #999;
3379 }
3380
3381 .ideditor .preset-category-rail svg.preset-icon-category-border path {
3382     stroke: #555;
3383 }
3384 /* Basics
3385 ------------------------------------------------------- */
3386 /* the root element of iD */
3387 .ideditor {
3388     height: 100%;
3389     width: 100%;
3390     margin: 0;
3391     padding: 0;
3392     border: 0;
3393     overflow: hidden;
3394
3395     /* Establish a local stacking context so all elements within iD are on the
3396        same layer relative to elements outside iD - #7457.
3397        https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
3398     */
3399     position: relative;
3400     z-index: 0;
3401
3402     font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont,
3403         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
3404         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
3405         sans-serif;
3406     color: #333;
3407
3408     touch-action: none;
3409     -ms-user-select: none;
3410     -ms-content-zooming: none;
3411 }
3412 .ideditor div {
3413     /* disable pinch-to-zoom of the UI on touch devices */
3414     touch-action: pan-x pan-y;
3415 }
3416
3417 .ideditor .main-content {
3418     position: relative;
3419     display: flex;
3420     flex-direction: column;
3421     overflow: hidden;
3422     height: 100%;
3423     touch-action: none;
3424 }
3425
3426 .ideditor .main-content.active {
3427     filter: none !important;
3428     transition-duration: 200ms;
3429 }
3430
3431 .ideditor .main-content.inactive {
3432     filter: grayscale(80%) brightness(80%);
3433     transition-duration: 200ms;
3434 }
3435
3436 .ideditor #ideditor-defs {
3437     /* Can't be display: none or the clippaths are ignored. */
3438     position: absolute;
3439     width: 0;
3440     height: 0;
3441 }
3442
3443 .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 {
3444     box-sizing: border-box;
3445 }
3446
3447 .ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
3448     -webkit-tap-highlight-color: rgba(0,0,0,0);
3449     -webkit-touch-callout: none;
3450 }
3451
3452 .ideditor ul li {
3453     list-style: none;
3454 }
3455
3456 .ideditor a,
3457 .ideditor button {
3458     cursor: pointer;
3459 }
3460
3461 .ideditor h2 {
3462     font-size: 25px;
3463     line-height: 1.25;
3464     font-weight: bold;
3465     margin-bottom: 20px;
3466 }
3467 .ideditor .header h2 {
3468     font-size: 20px;
3469     line-height: 1.25;
3470     font-weight: bold;
3471     margin-bottom: 0px;
3472 }
3473
3474 .ideditor h3:last-child,
3475 .ideditor h4:last-child { margin-bottom: 0;}
3476
3477 .ideditor h3 {
3478     font-size: 16px;
3479     line-height: 1.25;
3480     font-weight: bold;
3481     margin-bottom: 10px;
3482 }
3483 .ideditor h4, .ideditor h5 {
3484     font-size: 12px;
3485     font-weight: bold;
3486     padding-bottom: 10px;
3487 }
3488
3489 .ideditor button:focus,
3490 .ideditor textarea:focus,
3491 .ideditor input[type=text]:focus,
3492 .ideditor input[type=search]:focus,
3493 .ideditor input[type=number]:focus,
3494 .ideditor input[type=url]:focus,
3495 .ideditor input[type=tel]:focus,
3496 .ideditor input[type=email]:focus,
3497 .ideditor input[type=date]:focus {
3498     outline-color: transparent;
3499     outline-style: none;
3500 }
3501
3502 .ideditor ::-moz-placeholder {
3503     color: #aaa;
3504     opacity: 1; /* Firefox */
3505 }
3506
3507 .ideditor ::placeholder {
3508     color: #aaa;
3509     opacity: 1; /* Firefox */
3510 }
3511
3512 .ideditor p {
3513     font-size: 12px;
3514     margin: 0;
3515     padding: 0;
3516 }
3517 .ideditor p:last-child {
3518     padding-bottom: 0;
3519 }
3520 .ideditor em {
3521     font-style: italic;
3522 }
3523 .ideditor strong {
3524     font-weight: bold;
3525 }
3526 .ideditor a,
3527 .ideditor a:visited,
3528 .ideditor a:active {
3529     color: #7092ff;
3530 }
3531 .ideditor a:focus {
3532     color: #597be7;
3533 }
3534 @media (hover: hover) {
3535     .ideditor a:hover {
3536         color: #597be7;
3537     }
3538 }
3539 .ideditor kbd {
3540     display: inline-block;
3541     text-align: center;
3542     padding: 3px 5px;
3543     font-size: 11px;
3544     line-height: 1.3;
3545     min-width: 0.9em;
3546     vertical-align: baseline;
3547     background-color: #fcfcfc;
3548     border: solid 1px #ccc;
3549     margin: 0 2px;
3550     border-bottom-color: #bbb;
3551     border-radius: 3px;
3552     box-shadow: inset 0 -1px 0 #bbb;
3553 }
3554
3555 .ideditor code {
3556     font-family: ui-monospace, monospace, monospace;
3557     background: rgba(174, 174, 174, 0.25);
3558     padding: 1px 2px;
3559 }
3560
3561 /* Forms
3562 ------------------------------------------------------- */
3563 .ideditor textarea,
3564 .ideditor input[type=text],
3565 .ideditor input[type=search],
3566 .ideditor input[type=number],
3567 .ideditor input[type=url],
3568 .ideditor input[type=tel],
3569 .ideditor input[type=email],
3570 .ideditor input[type=date] {
3571     background-color: #fff;
3572     color: #333;
3573     border: 1px solid #ccc;
3574     padding: 0px 10px 0px 10px;
3575     border-radius: 4px;
3576     text-overflow: ellipsis;
3577     overflow: auto;
3578 }
3579 .ideditor input[type=text],
3580 .ideditor input[type=search],
3581 .ideditor input[type=number],
3582 .ideditor input[type=url],
3583 .ideditor input[type=tel],
3584 .ideditor input[type=email],
3585 .ideditor input[type=date],
3586 .ideditor input[type=color] {
3587     /* need this since line-height interpretation may vary by font or browser */
3588     height: 2.585em;
3589 }
3590 .ideditor textarea  {
3591     min-height: 2em;
3592     padding-top: 5px;
3593     padding-bottom: 5px;
3594     resize: vertical;
3595     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
3596         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
3597         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
3598         sans-serif;
3599 }
3600
3601 .ideditor textarea:active,
3602 .ideditor input:active,
3603 .ideditor textarea:focus,
3604 .ideditor input:focus {
3605     background-color: #f1f1f1;
3606 }
3607
3608 .ideditor textarea.disabled,
3609 .ideditor input.disabled {
3610     color: #777;
3611     background-color: #eee;
3612     cursor: not-allowed;
3613 }
3614
3615 .ideditor input[type="checkbox"],
3616 .ideditor input[type="radio"] {
3617     width: 14px;
3618     height: 14px;
3619     margin-right: 6px;
3620     cursor: pointer;
3621     vertical-align: middle;
3622 }
3623 .ideditor[dir='rtl'] input[type="checkbox"],
3624 .ideditor[dir='rtl'] input[type="radio"] {
3625     margin-left: 6px;
3626     margin-right: 0;
3627 }
3628
3629 .ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
3630     font-style: italic;
3631 }
3632
3633 .ideditor input.mixed::placeholder,
3634 .ideditor textarea.mixed::placeholder {
3635     font-style: italic;
3636 }
3637
3638 /* keytraps need to be invisible yet not be display:none or visibility:hidden */
3639 .ideditor .keytrap {
3640     width: 0;
3641     height: 0;
3642     padding: 0;
3643     margin: 0;
3644     border: 0;
3645 }
3646
3647 /* tables */
3648 .ideditor table {
3649     background-color: #fff;
3650     border-collapse: collapse;
3651     width: 100%;
3652     border-spacing: 0;
3653 }
3654 .ideditor table th {
3655     text-align: left;
3656 }
3657 .ideditor table.tags, .ideditor table.tags td, .ideditor table.tags th {
3658     border: 1px solid #ccc;
3659     padding: 4px;
3660 }
3661
3662 .ideditor ::-ms-clear {
3663    display: none;
3664 }
3665
3666 /* Grid
3667 ------------------------------------------------------- */
3668 .ideditor .col6  { float: left; width: 50.0000%; max-width: 600px; }
3669 .ideditor .col12 { float: left; width: 100.0000%; }
3670
3671
3672 /* Utility Classes
3673 ------------------------------------------------------- */
3674 .ideditor .fillL {
3675     background: #fff;
3676     color: #333;
3677 }
3678 .ideditor .fillL2 {
3679     background: #f6f6f6;
3680     color: #333;
3681 }
3682 .ideditor .fillL3 {
3683     background: #ececec;
3684     color: #333;
3685 }
3686 .ideditor .fillD {
3687     background: rgba(0,0,0,.5);
3688     color: #fff;
3689 }
3690 .ideditor .fillD2 {
3691     background: rgba(0,0,0,.75);
3692     color: #fff;
3693 }
3694
3695 .ideditor .fl { float: left;}
3696 .ideditor .fr { float: right;}
3697 .ideditor .al { left: 0; }
3698 .ideditor .ar { right: 0; }
3699
3700 .ideditor input.hide,
3701 .ideditor textarea.hide,
3702 .ideditor div.hide,
3703 .ideditor form.hide,
3704 .ideditor button.hide,
3705 .ideditor a.hide,
3706 .ideditor ul.hide,
3707 .ideditor li.hide {
3708     display: none;
3709 }
3710
3711 .ideditor .deemphasize {
3712     color: #a9a9a9;
3713 }
3714 .ideditor .content {
3715     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
3716 }
3717 .ideditor .loading {
3718     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
3719     background-size: 5px 5px;
3720 }
3721
3722
3723 /* Buttons
3724 ------------------------------------------------------- */
3725 .ideditor button {
3726     text-align: center;
3727     border: 0;
3728     background: #fff;
3729     color: #333;
3730     font-size: 12px;
3731     display: inline-block;
3732     border-radius: 4px;
3733 }
3734
3735 .ideditor button:focus,
3736 .ideditor button:active,
3737 .ideditor button.hover {
3738     background-color: #ececec;
3739 }
3740 @media (hover: hover) {
3741     .ideditor button:hover {
3742         background-color: #ececec;
3743     }
3744 }
3745 .ideditor button.active {
3746     background: #7092ff;
3747 }
3748 .ideditor button.disabled {
3749     background-color: rgba(255,255,255,.25);
3750     color: rgba(0,0,0,.4);
3751     cursor: not-allowed;
3752 }
3753
3754 .ideditor .joined > * {
3755     border-radius: 0;
3756     border-right: 1px solid rgba(0,0,0,.5);
3757 }
3758 .ideditor[dir='rtl'] .joined > * {
3759     border-left: 1px solid rgba(0,0,0,.5);
3760     border-right: none;
3761 }
3762
3763 .ideditor .fillL .joined > * {
3764     border-right: 1px solid #fff;
3765 }
3766 .ideditor .joined > *:first-child {
3767     border-radius: 4px 0 0 4px;
3768 }
3769 .ideditor[dir='rtl'] .joined > *:first-child {
3770     border-radius: 0 4px 4px 0;
3771 }
3772 .ideditor .joined > *:last-child {
3773     border-right-width: 0;
3774     border-radius: 0 4px 4px 0;
3775 }
3776 .ideditor[dir='rtl'] .joined > *.bar-button:last-child {
3777     border-radius: 4px 0 0 4px;
3778 }
3779
3780
3781 /* Action buttons */
3782 .ideditor button.action {
3783     background: #7092ff;
3784     color: #fff;
3785     font-weight: bold;
3786 }
3787 .ideditor button.action:focus,
3788 .ideditor button.action:active {
3789     background: #597be7;
3790 }
3791 .ideditor button.secondary-action {
3792     background: #ececec;
3793     font-weight: bold;
3794 }
3795 .ideditor button.secondary-action:focus,
3796 .ideditor button.secondary-action:active {
3797     background: #cccccc;
3798 }
3799
3800 .ideditor button.action.disabled,
3801 .ideditor button[disabled].action {
3802     background: #cccccc;
3803     color: #888;
3804     cursor: not-allowed;
3805 }
3806
3807 .ideditor button.action,
3808 .ideditor button.secondary-action {
3809     padding: 10px 5px;
3810 }
3811
3812 @media (hover: hover) {
3813     .ideditor button.action:hover {
3814         background: #597be7;
3815     }
3816     .ideditor button.secondary-action:hover {
3817         background: #cccccc;
3818     }
3819     .ideditor button.action.disabled:hover,
3820     .ideditor button[disabled].action:hover {
3821         background: #cccccc;
3822         color: #888;
3823         cursor: not-allowed;
3824     }
3825 }
3826
3827
3828 /* Icons
3829 ------------------------------------------------------- */
3830 .ideditor .icon {
3831     vertical-align: middle;
3832     width: 20px;
3833     height: 20px;
3834 }
3835
3836 .ideditor .icon.operation use {
3837     fill: #222;
3838     color: #79f;
3839 }
3840 .ideditor button.disabled .icon.operation use,
3841 .ideditor .icon.operation.disabled use {
3842     fill: rgba(32,32,32,.2);
3843     color: rgba(40,40,40,.2);
3844 }
3845
3846 .ideditor .icon.monochrome use {
3847     fill: currentColor;
3848 }
3849
3850 .ideditor .icon.inline {
3851     vertical-align: text-top;
3852     display: inline-block;
3853     width: 1.17em;
3854     height: 1.17em;
3855     margin: 0px 3px;
3856 }
3857
3858 .ideditor .icon.pre-text {
3859     margin-right: 5px;
3860 }
3861 .ideditor[dir='rtl'] .icon.pre-text {
3862     margin-left: 5px;
3863     margin-right: 0;
3864 }
3865
3866 .ideditor .icon.pre-text.user-icon {
3867     margin-left: 5px;
3868     margin-right: 5px;
3869 }
3870
3871 .ideditor .icon.light {
3872     color: #fff;
3873     fill: currentColor;
3874 }
3875 .ideditor .icon.created {
3876     color: #00ca07;
3877 }
3878 .ideditor .icon.modified {
3879     color: #666;
3880 }
3881 .ideditor .icon.deleted {
3882     color: #ea0000;
3883 }
3884
3885 .ideditor .user-icon {
3886     max-height: 20px;
3887     max-width: 20px;
3888     height: auto;
3889     width: auto;
3890     border-radius: 3px;
3891 }
3892
3893 .ideditor .icon-annotation {
3894     color: #333;
3895     vertical-align: baseline;
3896 }
3897
3898
3899 /* Toolbar / Persistent UI Elements
3900 ------------------------------------------------------- */
3901 .ideditor .top-toolbar-wrap {
3902     position: relative;
3903     z-index: 101;
3904 }
3905 .ideditor .top-toolbar {
3906     display: flex;
3907     flex-flow: row nowrap;
3908     justify-content: space-between;
3909     padding: 10px 0 0 0;
3910     overflow-x: auto;
3911     overflow-y: hidden;
3912     height: 100%;
3913     width: 100%;
3914
3915     /* hide scrollbar but allow scrolling */
3916     scrollbar-width: none; /* Firefox */
3917     -ms-overflow-style: none; /* IE, Edge */
3918 }
3919 .ideditor .top-toolbar::-webkit-scrollbar {
3920     display: none; /* Chrome, Safari, Opera */
3921 }
3922 .ideditor .top-toolbar .toolbar-item {
3923     display: flex;
3924     flex: 0 1 auto;
3925     flex-flow: column wrap;
3926     justify-content: center;
3927 }
3928 .ideditor .top-toolbar .toolbar-item .item-content {
3929     display: flex;
3930     flex: 0 1 auto;
3931     flex-flow: row nowrap;
3932     justify-content: center;
3933     height: 40px;
3934     width: auto;
3935     margin: 0 5px;
3936 }
3937 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
3938 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
3939     margin-right: 10px;
3940 }
3941 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
3942 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
3943     margin-left: 10px;
3944 }
3945 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
3946 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
3947     padding-right: 5px;
3948 }
3949 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
3950 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
3951     padding-left: 5px;
3952 }
3953 .ideditor .top-toolbar .toolbar-item .item-label {
3954     text-align: center;
3955     font-size: 11px;
3956     white-space: nowrap;
3957     margin: 1px 2px 2px 2px;
3958 }
3959 .ideditor .top-toolbar .toolbar-item.spacer {
3960     width: 100%;
3961     flex-grow: 2;
3962 }
3963 .ideditor .top-toolbar .toolbar-item:first-child {
3964     justify-content: flex-start;
3965 }
3966 .ideditor .top-toolbar .toolbar-item:last-child {
3967     justify-content: flex-end;
3968 }
3969 .ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
3970     display: none;
3971 }
3972 .ideditor button.bar-button {
3973     flex: 0 0 auto;
3974     flex-flow: row nowrap;
3975     align-items: center;
3976     padding: 0 10px;
3977     min-width: 30px;
3978     white-space: nowrap;
3979     display: flex;
3980     font-weight: bold;
3981 }
3982 .ideditor button.bar-button .icon {
3983     flex: 0 0 20px;
3984 }
3985 .ideditor button.bar-button .label {
3986     flex: 0 1 auto;
3987     padding: 0 5px;
3988 }
3989
3990 .ideditor button.bar-button.dragging {
3991     opacity: 0.75;
3992     z-index: 200;
3993 }
3994 .ideditor button.bar-button.dragging .tooltip {
3995     display: none;
3996 }
3997 .ideditor button.bar-button.dragging.removing {
3998     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer;
3999 }
4000
4001 .ideditor button.save .count {
4002     display: inline-block;
4003     min-width: 32px;
4004     text-align: center;
4005 }
4006
4007 .ideditor .help-pane svg.icon.inline.add-note,
4008 .ideditor button.add-note svg.icon {
4009     height: 15px;
4010     width: 15px;
4011     color: rgba(0,0,0,0.25);
4012     stroke: #333;
4013     stroke-width: 60px;
4014     margin-top: 3px;
4015 }
4016 .ideditor button.add-note svg.icon {
4017     margin-left: unset;
4018     margin-right: 4px;
4019 }
4020 .ideditor[dir='rtl'] button.add-note svg.icon {
4021     margin-left: 4px;
4022     margin-right: unset;
4023 }
4024 .ideditor .help-pane svg.icon.inline.add-note {
4025     margin-left: 3px;
4026     margin-right: 3px;
4027 }
4028
4029 .ideditor .spinner {
4030     opacity: .5;
4031     position: absolute;
4032     right: 4px;
4033     bottom: 4px;
4034     height: 20px;
4035     width: 20px;
4036 }
4037 .ideditor .spinner img {
4038     height: 100%;
4039     width: 100%;
4040     background: transparent;
4041     border-radius: 100%;
4042 }
4043 .ideditor[dir='rtl'] .spinner img {
4044     transform: scaleX(-1);
4045     filter: FlipH;
4046     -ms-filter: "FlipH";
4047 }
4048
4049
4050 .ideditor .top-toolbar.narrow .spinner,
4051 .ideditor .top-toolbar.narrow button.bar-button .label {
4052     display: none;
4053 }
4054 .ideditor .top-toolbar.narrow button .count {
4055     border-left-width: 0;
4056     border-right-width: 0;
4057 }
4058
4059 .ideditor[dir='ltr'] .undo-redo button:first-of-type {
4060     margin-right: 1px;
4061 }
4062 .ideditor[dir='rtl'] .undo-redo button:first-of-type {
4063     margin-left: 1px;
4064 }
4065
4066 /* Header for modals / panes
4067 ------------------------------------------------------- */
4068 .ideditor .header {
4069     border-bottom: 1px solid #ccc;
4070     padding: 20px 40px;
4071     position: relative;
4072     display: flex;
4073     align-items: center;
4074     justify-content: center;
4075     flex: 0 0 auto;
4076 }
4077
4078 .ideditor .header h3 {
4079     text-align: center;
4080     margin-bottom: 0;
4081     text-overflow: ellipsis;
4082     overflow: hidden;
4083     padding: 0;
4084 }
4085
4086 .ideditor .header button,
4087 .ideditor .modal > button {
4088     border-radius: 0;
4089     width: 40px;
4090     text-align: center;
4091     overflow: hidden;
4092 }
4093
4094 .ideditor .header button {
4095     position: relative;
4096     height: 100%;
4097 }
4098
4099 .ideditor .field-help-title button.close,
4100 .ideditor .sidebar .header button.close,
4101 .ideditor .preset-list-pane .header button.preset-choose {
4102     position: absolute;
4103     right: 0;
4104     top: 0;
4105 }
4106 .ideditor[dir='rtl'] .field-help-title button.close,
4107 .ideditor[dir='rtl'] .sidebar .header button.close,
4108 .ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
4109     left: 0;
4110     right: auto;
4111 }
4112
4113 .ideditor .entity-editor-pane .header button.preset-choose {
4114     position: absolute;
4115     left: 0;
4116     top: 0;
4117 }
4118 .ideditor[dir='rtl'] .entity-editor-pane .header button.preset-choose {
4119     left: auto;
4120     right: 0;
4121 }
4122
4123 .ideditor .preset-choose {
4124     font-size: 16px;
4125     line-height: 1.25;
4126     font-weight: bold;
4127 }
4128
4129 .ideditor .modal > button {
4130     position: absolute;
4131     right: 0;
4132     top: 0;
4133     height: 59px;
4134     z-index: 50;
4135 }
4136 .ideditor[dir='rtl'] .modal > button {
4137     left: 0;
4138     right: unset;
4139 }
4140
4141 .ideditor .footer {
4142     position: absolute;
4143     bottom: 0;
4144     margin: 0;
4145     padding: 0 15px;
4146     border-top: 1px solid #ccc;
4147     background-color: #f6f6f6;
4148     width: 100%;
4149     height: 2.5em;
4150     z-index: 1;
4151     flex-wrap: wrap;
4152     justify-content: space-between;
4153     align-items: center;
4154     list-style: none;
4155     display: flex;
4156 }
4157
4158 .ideditor .footer > a {
4159     justify-content: center;
4160 }
4161
4162 /* Hide/Toggle collapsible sections (aka Disclosure)
4163 ------------------------------------------------------- */
4164 .ideditor .hide-toggle .icon.pre-text {
4165     vertical-align: middle;
4166     width: 16px;
4167     height: 16px;
4168     margin-top: -3px;
4169 }
4170
4171 .ideditor a:visited.hide-toggle,
4172 .ideditor a.hide-toggle {
4173     display: inline-block;
4174     font-size: 14px;
4175     font-weight: bold;
4176     margin-bottom: 5px;
4177 }
4178
4179
4180 /* Sidebar / Inspector
4181 ------------------------------------------------------- */
4182 .ideditor .sidebar {
4183     position: relative;
4184     float: left;
4185     height: 100%;
4186     z-index: 10;
4187     background: #f6f6f6;
4188     -ms-user-select: element;
4189     border: 0px solid #ccc;
4190     border-right-width: 1px;
4191 }
4192 .ideditor[dir='rtl'] .sidebar {
4193     float: right;
4194     border-right-width: 0px;
4195     border-left-width: 1px;
4196 }
4197
4198 .ideditor .sidebar-resizer {
4199     position: absolute;
4200     top: 0;
4201     right: -10px;
4202     width: 10px;
4203     height: 100%;
4204     cursor: col-resize;
4205     /* disable drag-to-select */
4206     -webkit-user-select: none;
4207        -moz-user-select: none;
4208             user-select: none;
4209 }
4210 .ideditor[dir='rtl'] .sidebar-resizer {
4211     right: auto;
4212     left: -6px;
4213 }
4214
4215 .ideditor .sidebar.collapsed > *:not(.sidebar-resizer) {
4216     display: none;
4217 }
4218 .ideditor .sidebar.collapsed .sidebar-resizer {
4219     /* make target wider to avoid the user accidentally resizing window */
4220     width: 10px;
4221     right: -10px;
4222 }
4223 .ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
4224     left: -10px;
4225 }
4226
4227 .ideditor .sidebar-component {
4228     position: absolute;
4229     top: 0;
4230     left: 0;
4231     bottom: 0;
4232     right: 0;
4233     display: flex;
4234     flex-direction: column;
4235 }
4236
4237 .ideditor .sidebar-component .body {
4238     width: 100%;
4239     height: 100%;
4240     overflow-y: auto;
4241     overflow-x: hidden;
4242     position: relative;
4243 }
4244
4245 .ideditor .panewrap {
4246     position: absolute;
4247     width: 200%;
4248     height: 100%;
4249     right: -100%;
4250 }
4251
4252 .ideditor .pane {
4253     position: absolute;
4254     width: 50%;
4255     top: 0;
4256     bottom: 2.5em;
4257     display: flex;
4258     flex-direction: column;
4259 }
4260
4261 .ideditor .pane:first-child {
4262     left: 0;
4263 }
4264
4265 .ideditor .pane:last-child {
4266     right: 0;
4267 }
4268 .ideditor .feature-list-pane {
4269     display: flex;
4270     flex-direction: column;
4271     height: 100%;
4272 }
4273
4274 .ideditor .inspector-wrap {
4275     width: 100%;
4276     height: 100%;
4277     overflow: hidden;
4278     position: relative;
4279 }
4280
4281 .ideditor .inspector-hidden {
4282     display: none;
4283 }
4284
4285 .ideditor .inspector-body {
4286     overflow-y: scroll;
4287     overflow-x: hidden;
4288     position: relative;
4289     height: 100%;
4290     flex: 1 1 100%;
4291 }
4292 .ideditor .entity-editor {
4293     padding: 20px;
4294 }
4295 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
4296 .ideditor .entity-editor > div:last-child {
4297     margin-bottom: 150px;
4298 }
4299
4300 .ideditor .sidebar .search-header {
4301     position: relative;
4302     overflow: hidden;
4303     flex: 0 0 auto;
4304 }
4305 .ideditor .sidebar .search-header .icon {
4306     display: inline-block;
4307     position: absolute;
4308     left: 10px;
4309     height: 100%;
4310     pointer-events: none;
4311 }
4312 .ideditor[dir='rtl'] .sidebar .search-header .icon {
4313     left: auto;
4314     right: 10px;
4315 }
4316
4317 .ideditor .sidebar .search-header input {
4318     width: 100%;
4319     padding: 0 10px;
4320     height: 3em;
4321     border-radius: 0;
4322     border-width: 0;
4323     border-bottom-width: 1px;
4324     text-indent: 30px;
4325     font-size: 18px;
4326     font-weight: bold;
4327 }
4328
4329 .ideditor .section:not(:last-child),
4330 .ideditor .map-pane .section {
4331     margin-bottom: 30px;
4332 }
4333
4334
4335 /* Feature List / Search Results
4336 ------------------------------------------------------- */
4337 .ideditor .feature-list  {
4338     width: 100%;
4339 }
4340 .ideditor .no-results-item,
4341 .ideditor .feature-list-item {
4342     width: 100%;
4343     position: relative;
4344     border-bottom: 1px solid #ccc;
4345     border-radius: 0;
4346 }
4347 .ideditor .no-results-item {
4348     padding: 10px;
4349     font-weight: bold;
4350 }
4351
4352 .ideditor .geocode-item {
4353     width: 100%;
4354     max-width: 200px;
4355     margin: 30px auto;
4356     min-height: 40px;
4357 }
4358
4359 .ideditor .feature-list-item {
4360     display: flex;
4361 }
4362 .ideditor .feature-list-item .label {
4363     text-align: left;
4364     padding: 10px;
4365     white-space: nowrap;
4366     text-overflow: ellipsis;
4367     overflow: hidden;
4368     flex: 1 1 auto;
4369 }
4370 .ideditor[dir='rtl'] .feature-list-item .label {
4371     text-align: right;
4372 }
4373
4374 .ideditor .feature-list-item .label .icon {
4375     opacity: .5;
4376 }
4377 .ideditor .feature-list-item .close {
4378     padding: 10px;
4379
4380 }
4381 .ideditor .feature-list-item .close .icon {
4382     opacity: 0.5;
4383 }
4384 .ideditor .feature-list-item .entity-type {
4385     color: #7092ff;
4386     font-weight: bold;
4387 }
4388 .ideditor .feature-list-item:active .entity-type,
4389 .ideditor .feature-list-item:focus .entity-type {
4390     color: #597be7;
4391 }
4392 @media (hover: hover) {
4393     .ideditor .feature-list-item:hover .entity-type {
4394         color: #597be7;
4395     }
4396 }
4397 .ideditor .feature-list-item .entity-name {
4398     color: #666;
4399     padding-left: 10px;
4400 }
4401 .ideditor[dir='rtl'] .feature-list-item .entity-name {
4402     padding-left: 0;
4403     padding-right: 10px;
4404 }
4405 .ideditor .section-selected-features .feature-list {
4406     border: 1px solid #ccc;
4407     border-radius: 4px;
4408     overflow: hidden;
4409     margin-top: 5px;
4410 }
4411 .ideditor .section-selected-features .feature-list-item:last-child {
4412     border: none;
4413 }
4414 .ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:first-child) {
4415     border-top-left-radius: 0;
4416     border-bottom-left-radius: 0;
4417 }
4418 .ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
4419     border-top-right-radius: 0;
4420     border-bottom-right-radius: 0;
4421 }
4422 .ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:last-child) {
4423     border-top-right-radius: 0;
4424     border-bottom-right-radius: 0;
4425 }
4426 .ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
4427     border-top-left-radius: 0;
4428     border-bottom-left-radius: 0;
4429 }
4430
4431 /* Preset List and Icons
4432 ------------------------------------------------------- */
4433 .ideditor .preset-list  {
4434     width: 100%;
4435     padding: 20px 20px 10px 20px;
4436 }
4437
4438 .ideditor .preset-list-item {
4439     margin-bottom: 10px;
4440     position: static;
4441 }
4442
4443 .ideditor .preset-list-button-wrap {
4444     min-height: 62px;
4445     display: flex;
4446     border: 1px solid #ccc;
4447     border-radius: 4px;
4448 }
4449
4450 .ideditor .preset-list-button {
4451     width: 100%;
4452     height: 100%;
4453     position: relative;
4454     display: flex;
4455     align-items: center;
4456 }
4457
4458 .ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
4459     background: #ececec;
4460 }
4461
4462 .ideditor .preset-icon-container {
4463     position: relative;
4464     width: 60px;
4465     height: 60px;
4466     text-align: center;
4467     display: flex;
4468     align-items: center;
4469     justify-content: center;
4470     flex: 0 0 auto;
4471 }
4472 .ideditor .preset-icon-container.small {
4473     width: 40px;
4474     height: 40px;
4475     flex: 0 0 auto;
4476 }
4477 .ideditor .preset-icon-container img.image-icon {
4478     width: 50px;
4479     height: 50px;
4480     -o-object-fit: contain;
4481        object-fit: contain;
4482     border-radius: 2px;
4483     z-index: 2;
4484     visibility: hidden;
4485 }
4486 .ideditor .preset-icon-container.showing-img img.image-icon {
4487     visibility: visible;
4488 }
4489 .ideditor .preset-icon-container.showing-img *:not(.image-icon) {
4490     display: none;
4491 }
4492
4493 .ideditor .preset-icon-point-border path {
4494     stroke: #333;
4495     stroke-width: 1.2;
4496     fill: transparent;
4497 }
4498
4499 .ideditor .preset-icon-category-border path {
4500     stroke: #999;
4501     stroke-width: 1px;
4502     fill: transparent;
4503     -webkit-backface-visibility: hidden;
4504             backface-visibility: hidden;
4505     vector-effect: non-scaling-stroke;
4506 }
4507
4508 .ideditor .preset-icon-line {
4509     margin: auto;
4510     position: absolute;
4511     left: 0;
4512     right: 0;
4513     top: 0;
4514     width: 100%;
4515     height: 100%;
4516 }
4517 .ideditor .preset-icon-container path {
4518     cursor: inherit;
4519 }
4520 .ideditor .preset-icon-container circle.vertex {
4521     fill: #fff;
4522     stroke: rgba(0, 0, 0, 0.25);
4523 }
4524 .ideditor .preset-icon-fill circle.midpoint {
4525     fill: transparent;
4526     stroke: rgba(0, 0, 0, 0.25);
4527 }
4528 /* use a consistent stroke width */
4529 .ideditor .preset-icon-container path.line.stroke {
4530     stroke-width: 2 !important;
4531 }
4532 .ideditor .preset-icon-container path.line.casing {
4533     stroke-width: 4 !important;
4534 }
4535
4536 .ideditor .preset-icon-fill {
4537     margin: auto;
4538     position: absolute;
4539     width: 100%;
4540     height: 100%;
4541     left: 0;
4542     top: 0;
4543 }
4544 .ideditor .preset-icon-container svg,
4545 .ideditor .preset-icon-container svg > * {
4546     cursor: inherit !important;
4547 }
4548 .ideditor .preset-icon-fill path.area.stroke {
4549     fill: transparent;
4550 }
4551
4552 .ideditor .preset-icon-fill-vertex circle {
4553     stroke-width: 1.5px;
4554     stroke: #333;
4555     fill: #efefef;
4556     -webkit-backface-visibility: hidden;
4557             backface-visibility: hidden;
4558 }
4559
4560 .ideditor .preset-icon {
4561     width: 100%;
4562     height:100%;
4563     position: absolute;
4564     z-index: 1;
4565 }
4566 .ideditor .preset-icon .icon {
4567     position: absolute;
4568     margin: auto;
4569     left: 0;
4570     right: 0;
4571     width: 100%;
4572     height: 100%;
4573     transform: scale(0.48);
4574 }
4575 .ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
4576     transform: translateY(-7%) scale(0.27);
4577 }
4578 .ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
4579     transform: translateY(-9%) scale(0.5);
4580 }
4581 .ideditor .preset-icon.framed .icon {
4582     transform: scale(0.4);
4583 }
4584 .ideditor .preset-icon.framed.line-geom:not(.category) .icon,
4585 .ideditor .preset-icon.framed.route-geom .icon {
4586     top: 20%;
4587     transform: translateY(-30%) scale(0.4);
4588 }
4589 .ideditor .preset-icon-iD .icon {
4590     transform: scale(1);
4591 }
4592 .ideditor .preset-icon-iD.framed .icon {
4593     transform: scale(0.74);
4594 }
4595 .ideditor .preset-icon-iD.framed.line-geom:not(.category) .icon,
4596 .ideditor .preset-icon-iD.framed.route-geom .icon {
4597     transform: translateY(-30%) scale(0.74);
4598 }
4599 .ideditor .preset-icon-container.fallback .preset-icon .icon {
4600     transform: scale(0.5) !important;
4601 }
4602
4603 .ideditor .preset-list-button .label {
4604     display: flex;
4605     flex-flow: row wrap;
4606     align-items: center;
4607     background: #f6f6f6;
4608     text-align: left;
4609     padding: 5px 10px;
4610     border-left: 1px solid rgba(0, 0, 0, .1);
4611     flex: 1 1 100%;
4612     align-self: stretch;
4613 }
4614 .ideditor[dir='rtl'] .preset-list-button .label {
4615     text-align: right;
4616     border-left: none;
4617     border-right: 1px solid rgba(0, 0, 0, .1);
4618 }
4619 .ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
4620     border-top-right-radius: 4px;
4621     border-bottom-right-radius: 4px;
4622 }
4623 .ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
4624     border-top-left-radius: 4px;
4625     border-bottom-left-radius: 4px;
4626 }
4627 .ideditor[dir='ltr'] .category .preset-list-button .label {
4628     border-radius: 0px 4px 4px 0px;
4629 }
4630 .ideditor[dir='rtl'] .category .preset-list-button .label {
4631     border-radius: 4px 0px 0px 4px;
4632 }
4633
4634 .ideditor .preset-list-item.mixed-types .label {
4635     font-style: italic;
4636 }
4637
4638 .ideditor .preset-list-button .label-inner {
4639     width: 100%;
4640     line-height: 1.35em;
4641 }
4642 .ideditor .preset-list-button .label-inner .namepart {
4643     text-overflow: ellipsis;
4644 }
4645 .ideditor .preset-list-button .label-inner .namepart:nth-child(1) {
4646     font-weight: bold;
4647 }
4648
4649 .ideditor .preset-list-button:focus .label,
4650 .ideditor .preset-list-button:active .label,
4651 .ideditor .preset-list-button.disabled,
4652 .ideditor .preset-list-button.disabled .label {
4653     background-color: #ececec;
4654 }
4655 @media (hover: hover) {
4656     .ideditor .preset-list-button:hover .label {
4657         background-color: #ececec;
4658     }
4659 }
4660
4661 .ideditor .preset-list-button-wrap button.tag-reference-button {
4662     width: 32px;
4663     flex: 0 0 auto;
4664 }
4665 .ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
4666     background: #f6f6f6;
4667 }
4668 .ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
4669     border-left: 1px solid #ccc;
4670 }
4671 .ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
4672     border-right: 1px solid #ccc;
4673 }
4674 .ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
4675     border-radius: 0 4px 4px 0;
4676 }
4677 .ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
4678     border-radius: 4px 0 0 4px;
4679 }
4680 .ideditor .preset-list-button-wrap button.tag-reference-button .icon {
4681     opacity: .5;
4682 }
4683 .ideditor .preset-list-button-wrap .accessory-buttons {
4684     display: flex;
4685 }
4686
4687
4688 .ideditor .current .preset-list-button,
4689 .ideditor .current .preset-list-button .label {
4690     background-color: #e8ebff;
4691 }
4692
4693 .ideditor .category .preset-list-button:after,
4694 .ideditor .category .preset-list-button:before {
4695     content: "";
4696     position: absolute;
4697     top: -5px;
4698     left: -1px; right: -1px;
4699     border: 1px solid #ccc;
4700     border-bottom: none;
4701     border-radius: 6px 6px 0 0;
4702     height: 6px;
4703 }
4704
4705 .ideditor .category .preset-list-button:before {
4706     top: -3px;
4707 }
4708
4709 .ideditor .subgrid .preset-list {
4710     width: auto;
4711     padding: 10px;
4712     margin: 0 -10px;
4713     border: 0;
4714     border-radius: 8px;
4715 }
4716 .ideditor .subgrid .preset-list > *:last-child {
4717     margin-bottom: 0;
4718 }
4719
4720 .ideditor .subgrid .arrow {
4721     border: solid rgba(0, 0, 0, 0);
4722     border-width: 10px;
4723     border-bottom-color: #ececec;
4724     width: 0;
4725     height: 0;
4726     margin-left: 50%;
4727     margin-left: calc(50% - 10px);
4728 }
4729
4730
4731 /* Quick links
4732 ------------------------------------------------------- */
4733 .ideditor .quick-links {
4734     display: flex;
4735     flex-flow: row wrap;
4736     justify-content: flex-end;
4737     padding: 5px 0 0 0;
4738 }
4739 .ideditor .quick-link {
4740     margin: 0 5px;
4741 }
4742
4743
4744 /* Entity/Preset Editor
4745 ------------------------------------------------------- */
4746 .ideditor .section .grouped-items-area {
4747     padding: 10px;
4748     margin: 0 -10px 10px -10px;
4749     border-radius: 8px;
4750     background: #ececec;
4751 }
4752 .ideditor .section .grouped-items-area:empty {
4753     display: none;
4754 }
4755
4756 /*
4757     The parts of a field:
4758     - `.form-field` is a `div` wraps the entire thing
4759     - `.field-label` is a `label` that wraps the top part, it contains;
4760        - `span` classed `label-text`
4761        - 0..n buttons for "remove", "modified", "tag reference"
4762     - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
4763        - usually an `input`
4764        - sometimes some buttons (translate, increment, decrement)
4765        - or could just be a `div` with anything really
4766     - `.tag-reference-body` at the bottom (usually hidden)
4767
4768    .------------------.                             -
4769    |  Name        | i |  <- .field-label        |
4770    +------------------+                               |
4771    |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
4772    '------------------'                               |
4773      tag reference       <- .tag-reference-body      |
4774                                                     -
4775 */
4776
4777 .ideditor .form-field {
4778     display: flex;
4779     flex-flow: row wrap;
4780     margin-bottom: 10px;
4781     width: 100%;
4782     transition: margin-bottom 200ms;
4783 }
4784
4785 .ideditor .form-field.nowrap,
4786 .ideditor .wrap-form-field:last-child .form-field {
4787     margin-bottom: 0;
4788 }
4789
4790 /* A `label` element that wraps the top section */
4791 .ideditor .field-label {
4792     display: flex;
4793     flex-flow: row nowrap;
4794     flex: 1 1 100%;
4795     position: relative;
4796     font-weight: bold;
4797     color: #333;
4798     background: #f6f6f6;
4799     border: 1px solid #ccc;
4800     border-radius: 4px 4px 0 0;
4801     overflow: hidden;
4802 }
4803 .ideditor .field-label .label-text {
4804     overflow: hidden;
4805     text-overflow: ellipsis;
4806     flex: 1 1 auto;
4807     padding: 5px 0 4px 10px;
4808 }
4809 .ideditor[dir='rtl'] .field-label .label-text {
4810     padding: 5px 10px 4px 0;
4811 }
4812 .ideditor .field-label .label-text {
4813     white-space: nowrap;
4814 }
4815
4816 .ideditor .label-text .label-textannotation svg.icon {
4817     margin: 0 8px;
4818     color: #333;
4819     opacity: 0.5;
4820     width: 14px;
4821     height: 14px;
4822     vertical-align: text-top;
4823 }
4824
4825 .ideditor .field-label button {
4826     flex: 0 0 auto;
4827     border-left: 1px solid #ccc;
4828     width: 32px;
4829     border-radius: 0;
4830 }
4831 .ideditor[dir='rtl'] .field-label button {
4832     border-left: none;
4833     border-right: 1px solid #ccc;
4834 }
4835 .ideditor .field-label button:not(:hover):not(:active):not(:focus) {
4836     background: none;
4837 }
4838 .ideditor .field-label .icon {
4839     opacity: .5;
4840
4841 }
4842
4843 .ideditor .field-label .modified-icon,
4844 .ideditor .field-label .remove-icon,
4845 .ideditor .field-label .remove-icon-multilingual {
4846     display: none;
4847 }
4848 .ideditor .modified:not(.locked) .field-label .modified-icon,
4849 .ideditor .present:not(.locked) .field-label .remove-icon,
4850 .ideditor .present:not(.locked) .field-label .remove-icon-multilingual {
4851     display: inline-block;
4852 }
4853
4854 /* A `div` element that wraps the bottom section */
4855 .ideditor .form-field-input-wrap {
4856     display: flex;
4857     flex-flow: row nowrap;
4858     width: 100%;
4859     flex: 1 1 auto;
4860     border-top: 0;
4861     border-radius: 0 0 4px 4px;
4862 }
4863 .ideditor .nowrap .form-field-input-wrap {
4864     border-radius: 0;
4865 }
4866
4867
4868 .ideditor .form-field-input-wrap > input,
4869 .ideditor .form-field-input-wrap > label,
4870 .ideditor .form-field-input-wrap > textarea,
4871 .ideditor .form-field-input-wrap > ul.chiplist {
4872     flex: 1 1 auto;
4873     border: 1px solid #ccc;
4874     border-top: 0;
4875     border-radius: 0;
4876     position: relative;
4877 }
4878 .ideditor .form-field-input-wrap > textarea {
4879     height: 65px;
4880     border-radius: 0 0 4px 4px;
4881 }
4882
4883 /* Buttons inside fields */
4884 .ideditor .form-field-button {
4885     flex: 0 0 auto;
4886     width: 32px;
4887     position: relative;
4888     background-color: #fff;
4889     border: 1px solid #ccc;
4890     border-radius: 0;
4891     border-top-width: 0;
4892     border-left-width: 0;
4893     vertical-align: top;
4894 }
4895 .ideditor[dir='rtl'] .form-field-button {
4896     border-left-width: 1px;
4897     border-right-width: 0;
4898 }
4899 .ideditor .form-field-button:active,
4900 .ideditor .form-field-button:focus {
4901     background-color: #f1f1f1;
4902 }
4903 @media (hover: hover) {
4904     .ideditor .form-field-button:hover {
4905         background-color: #f1f1f1;
4906     }
4907 }
4908 .ideditor .form-field-button .icon {
4909     fill: #333;
4910     opacity: .5;
4911 }
4912 .ideditor .form-field-button.colour-preview {
4913     border-radius: 0 0 4px 0;
4914 }
4915 .ideditor .form-field-button.colour-preview > div.colour-box {
4916     border: 3px solid #fff;
4917     height: 100%;
4918     border-radius: 8px;
4919     cursor: pointer;
4920     text-align: center;
4921     line-height: 20px;
4922     padding: 1px 0 0 1px;
4923 }
4924 .ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box {
4925     border-color: #ececec;
4926 }
4927 .ideditor .form-field-button.colour-preview:active > div.colour-box,
4928 .ideditor .form-field-button.colour-preview:focus > div.colour-box {
4929     border-color: #f1f1f1;
4930 }
4931 @media (hover: hover) {
4932     .ideditor .form-field-button.colour-preview:hover > div.colour-box {
4933         border-color: #f1f1f1;
4934     }
4935 }
4936 .ideditor input.colour-selector {
4937     visibility: hidden;
4938     position: absolute;
4939 }
4940 .ideditor input.date-selector {
4941     visibility: hidden;
4942     position: absolute;
4943 }
4944
4945
4946 /* round corners of first/last child elements */
4947 .ideditor .form-field-input-wrap > button:last-of-type {
4948     border-bottom-right-radius: 4px;
4949 }
4950 .ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {
4951     border-bottom-left-radius: 4px;
4952 }
4953
4954
4955 /* Field - Access, DirectionalCombo
4956 ------------------------------------------------------- */
4957 .ideditor .form-field-input-access,
4958 .ideditor .form-field-input-directionalcombo {
4959     flex: 1 1 auto;
4960     display: flex;
4961     flex-flow: row wrap;
4962 }
4963
4964 /* Field - lists with labeled input items
4965 ------------------------------------------------------- */
4966 .ideditor .form-field ul.rows {
4967     flex: 1 1 auto;
4968     border: 1px solid #ccc;
4969     border-top: 0;
4970     border-radius: 0 0 4px 4px;
4971     overflow: hidden;
4972     width: 100%;
4973 }
4974 .ideditor .form-field ul.rows li {
4975     border-top: 1px solid #ccc;
4976 }
4977 .ideditor .form-field ul.rows li:first-child {
4978     border-top: 0;
4979 }
4980 .ideditor .form-field ul.rows li {
4981     display: flex;
4982     flex-flow: row nowrap;
4983 }
4984 .ideditor .form-field ul.rows li.labeled-input > div {
4985     flex: 1 1 auto;
4986     width: 100%;
4987     border-radius: 0;
4988     line-height: 0.95rem;
4989 }
4990 .ideditor .form-field ul.rows li input {
4991     border-radius: 0;
4992     border-width: 0;
4993     width: 100%;
4994 }
4995 .ideditor .form-field ul.rows li button {
4996     border-width: 0;
4997 }
4998 .ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
4999 .ideditor[dir='ltr'] .form-field ul.rows li button {
5000     border-left-width: 1px;
5001 }
5002 .ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
5003 .ideditor[dir='rtl'] .form-field ul.rows li button {
5004     border-right-width: 1px;
5005 }
5006
5007 /* Field - lists with labeled input items as table
5008 ------------------------------------------------------- */
5009 .ideditor .form-field ul.rows.rows-table {
5010     display: table;
5011     width: 100%;
5012 }
5013 .ideditor .form-field ul.rows.rows-table li.labeled-input {
5014     display: table-row;
5015 }
5016 .ideditor .form-field ul.rows.rows-table li.labeled-input > div:first-child {
5017     display: table-cell;
5018     width: auto;
5019     max-width: 170px;
5020     white-space: nowrap;
5021     text-overflow: ellipsis;
5022     overflow: hidden;
5023 }
5024 .ideditor .form-field ul.rows.rows-table li.labeled-input > div:nth-child(2) {
5025     display: table-cell;
5026     width: auto;
5027 }
5028
5029
5030 /* Field - Structure
5031 ------------------------------------------------------- */
5032 .ideditor .structure-extras-wrap {
5033     width: 100%;
5034     padding: 10px 10px;
5035     background: #fff;
5036     border: 1px solid #ccc;
5037     border-top: 0px;
5038     border-radius: 0 0 4px 4px;
5039 }
5040 .ideditor .structure-extras-wrap > ul.rows {
5041     border: 1px solid #ccc;
5042     border-radius: 4px;
5043 }
5044
5045
5046 /* Field - Combo / Multicombo
5047 ------------------------------------------------------- */
5048 .ideditor .form-field-input-combo > input:only-of-type {
5049     border-radius: 0 0 4px 4px;
5050     width: 100%;
5051 }
5052 .ideditor .form-field-input-combo.empty-combobox input,
5053 .ideditor .form-field-input-multicombo .empty-combobox input {
5054     padding-right: 10px;
5055     padding-left: 10px;
5056 }
5057 .ideditor .form-field-input-combo.empty-combobox .combobox-caret,
5058 .ideditor .form-field-input-multicombo .empty-combobox .combobox-caret {
5059     display: none;
5060 }
5061
5062 .ideditor .form-field-input-combo input.raw-value,
5063 .ideditor .form-field-input-semicombo input.raw-value,
5064 .ideditor .form-field-input-multicombo input.raw-value {
5065     font-family: monospace;
5066 }
5067 .ideditor .form-field-input-combo input.known-value,
5068 .ideditor .form-field-input-semicombo input.known-value,
5069 .ideditor .form-field-input-multicombo input.known-value {
5070     color: #7092ff;
5071 }
5072
5073 .ideditor .form-field-input-multicombo ul.chiplist {
5074     padding: 5px 8px 5px 8px;
5075     background: #fff;
5076     display: block;
5077     border-radius: 0 0 4px 4px;
5078     width: 100%;
5079 }
5080
5081 .ideditor .form-field-input-multicombo li {
5082     display: inline-flex;
5083     flex-flow: row nowrap;
5084     margin-bottom: 3px;
5085     margin-top: 3px;
5086     border-radius: 4px;
5087 }
5088 .ideditor[dir='ltr'] .form-field-input-multicombo li {
5089     margin-right: 6px;
5090 }
5091 .ideditor[dir='rtl'] .form-field-input-multicombo li {
5092     margin-left: 6px;
5093 }
5094
5095 .ideditor .form-field-input-multicombo li.chip {
5096     background-color: #eff2f7;
5097     border: 1px solid #ccd5e3;
5098     max-width: 100%;
5099     color: #7092ff;
5100 }
5101 .ideditor .form-field-input-multicombo li.chip.negated span {
5102     text-decoration: line-through;
5103 }
5104 .ideditor .form-field-input-multicombo li.chip input {
5105     width: 1em;
5106     height: 11px;
5107     margin-top: 7px;
5108 }
5109 .ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
5110     padding: 2px 0px 2px 5px;
5111 }
5112 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
5113     padding: 2px 5px 2px 0px;
5114 }
5115 .ideditor .form-field-input-multicombo li.chip.draggable {
5116     cursor: grab;
5117 }
5118 .ideditor .form-field-input-multicombo li.chip.dragging {
5119     opacity: 0.75;
5120     z-index: 3000;
5121     cursor: grabbing;
5122 }
5123 .ideditor .form-field-input-multicombo li.chip.raw-value {
5124     font-family: monospace;
5125     color: #333;
5126 }
5127 .ideditor .form-field-input-multicombo li.mixed {
5128     border-color: #eff2f7;
5129     color: #888;
5130     font-style: italic;
5131 }
5132
5133 .ideditor .form-field-input-multicombo li.chip > span {
5134     display: block;
5135     flex: 1 1 auto;
5136     overflow: hidden;
5137     word-wrap: break-word;
5138     margin-top: 4px;
5139 }
5140
5141 .ideditor .form-field-input-multicombo a,
5142 .ideditor .form-field-input-multicombo button {
5143     font-family: Arial, Helvetica, sans-serif !important;
5144     font-size: 16px !important;
5145     padding: 0px 5px 0px 5px;
5146     margin: 0;
5147     cursor: pointer;
5148     color: #a6b4ce;
5149     display: block;
5150     text-align: center;
5151     flex: 0 0 auto;
5152     background: transparent;
5153     border: 0;
5154 }
5155
5156 .ideditor .form-field-input-multicombo li.chip .field_buttons {
5157     display: inline-block;
5158     text-align: right;
5159     margin-right: 2px;
5160     margin-top: 2px;
5161     margin-bottom: 2px;
5162 }
5163
5164 .ideditor .form-field-input-multicombo li.chip .field_buttons a {
5165     display: block;
5166     float: right;
5167     margin-top: -2px;
5168     margin-bottom: -2px;
5169 }
5170
5171 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip .field_buttons a {
5172     float: left;
5173 }
5174
5175 .ideditor .form-field-input-multicombo li.chip .field_buttons button {
5176     display: inline-block;
5177     margin-right: -4px;
5178     margin-top: -4px;
5179     margin-bottom: -2px;
5180     margin-left: -2px;
5181 }
5182
5183 .ideditor .form-field-input-multicombo li.chip .field_buttons button:hover {
5184     background-color: transparent;
5185 }
5186
5187 .ideditor .form-field-input-multicombo .input-wrap {
5188     border: 1px solid #ddd;
5189     width: 180px;
5190 }
5191 .ideditor .form-field-input-multicombo input {
5192     border: none;
5193     width: 100%;
5194 }
5195
5196 .ideditor .form-field-input-multicombo input:focus {
5197     border-radius: 4px !important;
5198 }
5199
5200 .ideditor .form-field-input-multicombo .full-line-chips li.chip {
5201     width: 100%;
5202 }
5203 .ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
5204     width: auto;
5205 }
5206
5207 .ideditor .form-field-input-combo .tag-value-icon,
5208 .ideditor .form-field-input-semicombo .input-wrap .tag-value-icon,
5209 .ideditor .form-field-input-multicombo .input-wrap .tag-value-icon {
5210     display: inline-block;
5211     position: relative;
5212     height: 24px;
5213     width: 30px;
5214     margin-right: -30px;
5215     align-self: center;
5216     vertical-align: middle;
5217     z-index: 1;
5218     padding-left: 11px;
5219 }
5220 .ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon,
5221 .ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon,
5222 .ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon  {
5223     margin-right: 0;
5224     margin-left: -30px;
5225     padding-left: 0;
5226     padding-right: 11px;
5227 }
5228 .ideditor .tag-value-icon .icon {
5229     width: 21px;
5230     height: 21px;
5231     margin: auto;
5232 }
5233 .ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input,
5234 .ideditor[dir='ltr'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
5235 .ideditor[dir='ltr'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
5236     padding-left: 40px;
5237 }
5238 .ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input,
5239 .ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
5240 .ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
5241     padding-right: 40px;
5242 }
5243 .ideditor .combobox-option .tag-value-icon {
5244     display: inline-block;
5245     width: 28px;
5246 }
5247 .ideditor .form-field-input-multicombo li.chip .tag-value-icon .icon {
5248     margin: 0;
5249     margin-right: 6px;
5250     display: inline-block;
5251     vertical-align: center;
5252 }
5253 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip .tag-value-icon .icon {
5254     margin-right: 6px;
5255     margin-left: 0;
5256 }
5257
5258
5259 /* Field - Text / Numeric
5260 ------------------------------------------------------- */
5261 .ideditor .form-field-input-text > input:only-child,
5262 .ideditor .form-field-input-tel > input:only-of-type,
5263 .ideditor .form-field-input-email > input:only-of-type,
5264 .ideditor .form-field-input-url > input:only-child {
5265     border-radius: 0 0 4px 4px;
5266 }
5267 .ideditor .form-field-input-text > input:not(:only-child),
5268 .ideditor .form-field-input-url > input:not(:only-child) {
5269     border-radius: 0 0 0 4px;
5270 }
5271 .ideditor .form-field-input-number > input:only-of-type {
5272     border-radius: 0 0 0 4px;
5273 }
5274 .ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
5275     border-radius: 0 0 4px 0;
5276 }
5277 .ideditor .form-field-input-number > button:last-of-type {
5278     border-radius: 0 0 4px 0;
5279 }
5280 .ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
5281     border-radius: 0 0 0 4px;
5282 }
5283
5284 .ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
5285 .ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
5286 .ideditor[dir='ltr'] .form-field-input-identifier > button {
5287     border-bottom-right-radius: 4px;
5288 }
5289 .ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
5290 .ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
5291 .ideditor[dir='rtl'] .form-field-input-identifier > button {
5292     border-bottom-left-radius: 4px;
5293 }
5294
5295 /* draw the up/down on the buttons */
5296 .ideditor .form-field-input-number button.decrement::after,
5297 .ideditor .form-field-input-number button.increment::after {
5298     content: "";
5299     height: 0; width: 0;
5300     position: absolute;
5301     left: 0; right: 0; bottom: 0; top: 0;
5302     margin: auto;
5303 }
5304 .ideditor .form-field-input-number button.decrement::after {
5305     border-top: 5px solid #ccc;
5306     border-left: 5px solid transparent;
5307     border-right: 5px solid transparent;
5308 }
5309 .ideditor .form-field-input-number button.increment::after {
5310     border-bottom: 5px solid #ccc;
5311     border-left: 5px solid transparent;
5312     border-right: 5px solid transparent;
5313 }
5314
5315
5316 /* Field - Checkbox
5317 ------------------------------------------------------- */
5318 .ideditor .form-field-input-check {
5319     display: flex;
5320     align-items: center;
5321     background: #fff;
5322     padding: 5px 10px;
5323     color: #7092ff;
5324     border: 1px solid #ccc;
5325     border-top: 0;
5326     cursor: pointer;
5327 }
5328 .ideditor .form-field-input-check > input[type="checkbox"] {
5329     flex: 0 1 auto;
5330     margin-top: 0;
5331 }
5332 .ideditor .form-field-input-check > span {
5333     flex: 1 1 auto;
5334 }
5335 .ideditor .form-field-input-check > span.mixed {
5336     font-style: italic;
5337 }
5338 .ideditor .form-field-input-check > .reverser {
5339     flex: 0 1 auto;
5340     background-color: #eff2f7;
5341     border: 1px solid #ccd5e3;
5342     border-radius: 2px;
5343     padding: 0px 8px;
5344     color: inherit;
5345 }
5346 .ideditor[dir='ltr'] .form-field-input-check > .reverser {
5347     padding-right: 2px;
5348 }
5349 .ideditor[dir='rtl'] .form-field-input-check > .reverser {
5350     padding-left: 2px;
5351 }
5352 .ideditor .form-field-input-check > .reverser:active,
5353 .ideditor .form-field-input-check > .reverser:focus {
5354     background: #e3e8ef;
5355 }
5356 @media (hover: hover) {
5357     .ideditor .form-field-input-check > .reverser:hover {
5358         background: #e3e8ef;
5359     }
5360 }
5361 .ideditor .form-field-input-check > .reverser.hide {
5362     display: none;
5363 }
5364 .ideditor .form-field-input-check:active,
5365 .ideditor .form-field-input-check:focus {
5366     background: #f1f1f1;
5367 }
5368 @media (hover: hover) {
5369     .ideditor .form-field-input-check:hover {
5370         background: #f1f1f1;
5371     }
5372 }
5373 .ideditor .form-field-input-check .set {
5374     color: inherit;
5375 }
5376 .ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
5377     opacity: .5;
5378 }
5379
5380
5381 /* Field - Radio button
5382 ------------------------------------------------------- */
5383 .ideditor .form-field-input-radio {
5384     flex: 1 1 auto;
5385     display: flex;
5386     flex-flow: row wrap;
5387 }
5388 .ideditor .form-field-input-radio > label {
5389     flex: 1 1 auto;
5390     display: flex;
5391     flex-flow: row nowrap;
5392     align-items: center;
5393     width: 100%;
5394     padding: 5px 10px;
5395     background-color: #fff;
5396     color: #7092ff;
5397     cursor: pointer;
5398 }
5399 .ideditor .form-field-input-radio > label.mixed {
5400     font-style: italic;
5401 }
5402 .ideditor .form-field-input-radio > label:last-child {
5403     border-radius: 0 0 4px 4px;
5404 }
5405 .ideditor .form-field-input-radio > label:active,
5406 .ideditor .form-field-input-radio > label:focus {
5407     background-color: #ececec;
5408 }
5409 @media (hover: hover) {
5410     .ideditor .form-field-input-radio > label:hover {
5411         background-color: #ececec;
5412     }
5413 }
5414 .ideditor .form-field-input-radio > label.active {
5415     background-color: #e8ebff;
5416 }
5417 .ideditor .form-field-input-radio > label:not(:last-of-type) {
5418     border-bottom: 1px solid #ccc;
5419 }
5420 .ideditor .form-field-input-radio > label > input[type="radio"] {
5421     flex: 0 1 auto;
5422 }
5423 .ideditor .form-field-input-radio > label > span {
5424     flex: 1 1 auto;
5425     overflow: hidden;
5426     white-space: nowrap;
5427     text-overflow: ellipsis;
5428 }
5429
5430 /* Hide placeholder for radio buttons if another is active, or not in hover state */
5431 .ideditor .form-field-input-radio label.active ~ .placeholder,
5432 .ideditor .form-field-input-radio .placeholder {
5433     padding: 0;
5434     opacity: 0;
5435     width: 0;
5436     height: 0;
5437     display: block;
5438     overflow: hidden;
5439 }
5440
5441
5442 /* Field - roadheight and roadspeed
5443 ------------------------------------------------------- */
5444 .ideditor .form-field-input-roadheight input.roadheight-number,
5445 .ideditor .form-field-input-roadheight input.roadheight-secondary-number,
5446 .ideditor .form-field-input-roadspeed input.roadspeed-number {
5447     flex-basis: 0;
5448 }
5449 .ideditor .form-field-input-roadheight input.roadheight-unit,
5450 .ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
5451     flex: 0 1 auto;
5452     width: 60px;
5453 }
5454 .ideditor .form-field-input-roadspeed input.roadspeed-unit {
5455     flex: 0 1 auto;
5456     width: 80px;
5457 }
5458 .ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
5459 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
5460     border-radius: 0 0 0 4px;
5461 }
5462 .ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
5463 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
5464     border-radius: 0 0 4px 0;
5465 }
5466 .ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
5467 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
5468     border-left: 0;
5469     border-radius: 0 0 4px 0;
5470 }
5471 .ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
5472 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
5473     border-right: 0;
5474     border-radius: 0 0 0 4px;
5475 }
5476
5477
5478 /* Field - Localized Name
5479 ------------------------------------------------------- */
5480 .ideditor .form-field-input-localized > input.localized-main {
5481     border-radius: 0 0 0 4px;
5482 }
5483 .ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
5484     border-radius: 0 0 4px 0;
5485 }
5486 .ideditor .form-field-input-localized > button.localized-add {
5487     border-radius: 0 0 4px 0;
5488 }
5489 .ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
5490     border-radius: 0 0 0 4px;
5491 }
5492
5493 .ideditor .form-field-input-localized button.localized-add.disabled,
5494 .ideditor .form-field-input-localized input.localized-main.disabled,
5495 .ideditor .form-field-input-localized input.localized-lang.disabled,
5496 .ideditor .form-field-input-localized input.localized-value.disabled {
5497     color: #777;
5498     background-color: #eee;
5499     cursor: not-allowed;
5500 }
5501
5502 /* nested subfields for name in different languages */
5503 .ideditor .localized-multilingual {
5504     padding: 0 10px;
5505     flex-basis: 100%;
5506 }
5507 .ideditor .localized-multilingual .entry {
5508     position: relative;
5509     overflow: hidden;
5510 }
5511
5512 /* draws a little line connecting the multilingual field up to the name field */
5513 .ideditor .localized-multilingual .entry::before {
5514     content: "";
5515     display: block;
5516     position: absolute;
5517     background: #ccc;
5518     height: 11px;
5519     width: 1px;
5520     left: 0;
5521     right: 0;
5522     top: -11px;
5523     margin: auto;
5524 }
5525
5526 .ideditor .localized-multilingual .entry .localized-lang {
5527     border-radius: 0;
5528     border-top-width: 0;
5529     width: 100%;
5530 }
5531 .ideditor .localized-multilingual .entry .localized-value {
5532     border-top-width: 0;
5533     border-radius: 0 0 4px 4px;
5534     width: 100%;
5535 }
5536
5537
5538 /* Field - Address
5539 ------------------------------------------------------- */
5540 .ideditor .form-field-input-address {
5541     flex: 1 1 auto;
5542     display: flex;
5543     flex-flow: row wrap;
5544     border: 1px solid #ccc;
5545     border-top: 0px;
5546 }
5547
5548 .ideditor .addr-row {
5549     flex: 1 1 auto;
5550     display: flex;
5551     width: 100%;
5552 }
5553
5554 .ideditor .addr-row > input {
5555     flex: 1 1 auto;
5556     border-radius: 0;
5557     border-right: 0;
5558     border-bottom: 0;
5559 }
5560 .ideditor[dir='rtl'] .addr-row input {
5561     border-right: 1px solid #ccc;
5562     border-left: 0;
5563 }
5564
5565 .ideditor .addr-row:first-of-type input {
5566     border-top: 0;
5567 }
5568 .ideditor .addr-row input:first-of-type {
5569     border-left: 0;
5570 }
5571 .ideditor[dir='rtl'] .addr-row input:first-of-type {
5572     border-right: 0;
5573 }
5574 .ideditor .addr-row:last-of-type input:first-of-type {
5575     border-radius: 0 0 0 4px;
5576 }
5577 .ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
5578     border-radius: 0 0 4px 0;
5579 }
5580 .ideditor .addr-row:last-of-type input:last-of-type {
5581     border-radius: 0 0 4px 0;
5582 }
5583 .ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
5584     border-radius: 0 0 0 4px;
5585 }
5586 .ideditor .combobox-address-street-place .combobox-option.address-street,
5587 .ideditor .combobox-address-street-place .combobox-option.address-place {
5588     padding-right: 20px;
5589 }
5590 .ideditor .combobox-address-street-place .combobox-option.address-street::after,
5591 .ideditor .combobox-address-street-place .combobox-option.address-place::after {
5592     position: absolute;
5593     right: 2px;
5594     opacity: 0.4;
5595 }
5596 .ideditor .combobox-address-street-place .combobox-option.address-place::after {
5597     content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPg0KICAgIDxwYXRoIGQ9Ik0xMCwzIEM2LjY4NiwzIDQsNS42MTIgNCw4LjgzMyBDNCwxMi4wNTUgMTAsMTcgMTAsMTcgQzEwLDE3IDE2LDEyLjA1NSAxNiw4LjgzMyBDMTYsNS42MTIgMTMuMzE0LDMgMTAsMyB6IE0xMC4xODcsNi41IEMxMS41MTMsNi41IDEyLjU4Nyw3LjU0NSAxMi41ODcsOC44MzMgQzEyLjU4NywxMC4xMjIgMTEuNTEzLDExLjE2NyAxMC4xODcsMTEuMTY3IEM4Ljg2MiwxMS4xNjcgNy43ODcsMTAuMTIyIDcuNzg3LDguODMzIEM3Ljc4Nyw3LjU0NSA4Ljg2Miw2LjUgMTAuMTg3LDYuNSB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4NCjwvc3ZnPg==);
5598 }
5599
5600
5601 /* Field - Wikipedia
5602 ------------------------------------------------------- */
5603 .ideditor .form-field-input-wikipedia {
5604     display: flex;
5605     flex-flow: row wrap;
5606     flex: 1 1 auto;
5607 }
5608
5609 .ideditor .wiki-lang-container,
5610 .ideditor .wiki-title-container {
5611     display: flex;
5612     flex-flow: row nowrap;
5613     flex: 1 1 auto;
5614     width: 100%;
5615 }
5616
5617 .ideditor .wiki-lang-container > input.wiki-lang,
5618 .ideditor .wiki-title-container > input.wiki-title {
5619     flex: 1 1 auto;
5620     border-top: 0;
5621     border-radius: 0;
5622 }
5623 .ideditor .wiki-title-container > input.wiki-title {
5624     border-radius: 0 0 0 4px;
5625 }
5626 .ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
5627     border-radius: 0 0 4px 0;
5628 }
5629 .ideditor .wiki-title-container > button.wiki-link,
5630 .ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5631     border-radius: 0 0 4px 0;
5632 }
5633 .ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
5634 .ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5635     border-radius: 0 0 0 4px;
5636 }
5637
5638
5639 /* Field - Restriction Editor
5640 ------------------------------------------------------- */
5641 .ideditor .form-field-input-restrictions {
5642     display: block;
5643     border: 1px solid #ccc;
5644     border-top: 0;
5645     border-radius: 0 0 4px 4px;
5646 }
5647
5648 .ideditor .form-field-input-restrictions .restriction-controls-container {
5649     background-color: #fff;
5650     width: 100%;
5651     padding: 5px;
5652     border-top: 1px solid #ccc;
5653     border-radius: 0 0 4px 4px;
5654 }
5655
5656 .ideditor .restriction-controls-container .restriction-controls {
5657     display: table;
5658     -webkit-user-select: none;
5659        -moz-user-select: none;
5660             user-select: none;
5661 }
5662
5663 .ideditor .restriction-controls .restriction-control {
5664     display: table-row;
5665     padding: 5px 10px;
5666     height: 25px;
5667 }
5668
5669 .ideditor .restriction-control input,
5670 .ideditor .restriction-control > span {
5671     display: table-cell;
5672     text-align: start;
5673     padding: 0px 5px;
5674 }
5675
5676 .ideditor .restriction-control > span.restriction-control-label {
5677     text-align: end;
5678 }
5679
5680 .ideditor .restriction-control input {
5681     width: 60px;
5682     padding: 0;
5683     margin: 0px 5px;
5684     vertical-align: middle;
5685 }
5686
5687 .ideditor .form-field-input-restrictions .restriction-container {
5688     position: relative;
5689     height: 370px;
5690 }
5691 /* zero width space, so container takes up space */
5692 .ideditor .form-field-input-restrictions .restriction-container:after {
5693     content: '\200b';
5694 }
5695
5696 .ideditor .form-field-input-restrictions svg.surface {
5697     width: 100%;
5698     height: 100%;
5699 }
5700
5701 .ideditor .restriction-container .restriction-help {
5702     z-index: 1;
5703     position: absolute;
5704     top: 0;
5705     left: 0;
5706     right: 0;
5707     padding: 2px 6px;
5708     background-color: rgba(255, 255, 255, .8);
5709     color: #888;
5710     text-align: center;
5711     pointer-events: none;
5712     -webkit-user-select: none;
5713        -moz-user-select: none;
5714             user-select: none;
5715 }
5716
5717 .ideditor .restriction-help span {
5718     margin: 2px;
5719 }
5720
5721 .ideditor .restriction-help .qualifier {
5722     color: #666;
5723     font-weight: bold;
5724 }
5725 .ideditor .restriction-help .qualifier.allow {
5726     color: #8b5;
5727 }
5728 .ideditor .restriction-help .qualifier.restrict {
5729     color: #d53;
5730 }
5731 .ideditor .restriction-help .qualifier.only {
5732     color: #78f;
5733 }
5734
5735
5736 /* Field - Changeset Comment
5737 ------------------------------------------------------- */
5738 .ideditor .form-field-comment:not(.present) #preset-input-comment {
5739     border-color: rgb(230, 100, 100);
5740 }
5741 .ideditor .form-field-comment:not(.present) .field-label {
5742     border-color: rgb(230, 100, 100);
5743     background: rgba(230, 100, 100, 0.2);
5744 }
5745 .ideditor .form-field-comment:not(.present) button {
5746     border-color: rgb(230, 100, 100);
5747 }
5748
5749
5750 /* Field - Combobox
5751 ------------------------------------------------------- */
5752 .ideditor[dir='ltr'] textarea.combobox-input,
5753 .ideditor[dir='ltr'] input.combobox-input {
5754     /* leave room for the caret */
5755     padding-right: 20px;
5756 }
5757 .ideditor[dir='rtl'] textarea.combobox-input,
5758 .ideditor[dir='rtl'] input.combobox-input {
5759     padding-left: 20px;
5760 }
5761
5762 .ideditor div.combobox {
5763     z-index: 9999;
5764     display: none;
5765     box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
5766     margin-top: -1px;
5767     background: #fff;
5768     max-height: 245px;
5769     overflow-y: auto;
5770     overflow-x: hidden;
5771     border: 1px solid #ccc;
5772     border-radius: 0 0 4px 4px;
5773 }
5774
5775 .ideditor .combobox a {
5776     display: block;
5777     padding: 5px 10px;
5778     border-top: 1px solid #ccc;
5779     line-height: 0.95rem;
5780     break: all;
5781 }
5782
5783 .ideditor .combobox a.selected,
5784 .ideditor .combobox a:active,
5785 .ideditor .combobox a:focus {
5786     background: #ececec;
5787 }
5788 @media (hover: hover) {
5789     .ideditor .combobox a:hover {
5790         background: #ececec;
5791     }
5792 }
5793
5794 .ideditor .combobox a:first-child {
5795     border-top: 0;
5796     padding: 4px 10px;
5797 }
5798
5799 .ideditor .combobox-caret {
5800     display: inline-block;
5801     position: relative;
5802     height: 5px;
5803     width: 30px !important;
5804     margin-left: -30px;
5805     align-self: center;
5806     vertical-align: middle;
5807     cursor: pointer;
5808 }
5809 .ideditor[dir='rtl'] .combobox-caret {
5810   margin-left: 0;
5811   margin-right: -30px;
5812 }
5813
5814 .ideditor .combobox-caret::after {
5815     content: "";
5816     height: 0; width: 0;
5817     position: absolute;
5818     left: 0; right: 0; bottom: 0; top: 0;
5819     margin: auto;
5820     border-top: 5px solid #ccc;
5821     border-left: 5px solid transparent;
5822     border-right: 5px solid transparent;
5823 }
5824
5825 .ideditor .combobox .combobox-option.raw-option {
5826     font-family: monospace;
5827     color: #333;
5828 }
5829
5830 .ideditor .combobox .combobox-option.virtual-option {
5831     font-style: italic;
5832     color: #333;
5833 }
5834
5835 .ideditor .form-field-input-wrap {
5836     position: relative;
5837 }
5838
5839 .ideditor .form-field-input-wrap span.length-indicator-wrap {
5840     visibility: hidden;
5841     position: absolute;
5842     top: -5px;
5843     left: 0;
5844     right: 0;
5845 }
5846
5847 .ideditor .form-field-input-wrap input:focus + span.length-indicator-wrap,
5848 .ideditor .form-field-input-wrap textarea:focus + span.length-indicator-wrap,
5849 .ideditor .form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap,
5850 .ideditor .form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap {
5851     visibility: visible;
5852 }
5853
5854 .ideditor .form-field-input-wrap span.length-indicator {
5855     display: block;
5856     left: 0;
5857     right: 0;
5858     height: 4px;
5859     background-color: #7092ff;
5860     border-right-style: solid;
5861     border-right-color: lightgray;
5862 }
5863
5864 .ideditor .form-field-input-wrap span.length-indicator.limit-reached {
5865     border-right-color: red;
5866 }
5867
5868 .ideditor .tooltip.max-length-warning {
5869     z-index: 10;
5870 }
5871
5872 /* Field Help
5873 ------------------------------------------------------- */
5874 .ideditor .field-help-body {
5875     display: block;
5876     position: absolute;
5877     top: 0;
5878     left: 20px;
5879     right: 20px;
5880     margin: 5px;
5881     padding: 8px;
5882     border: 1px solid #ccc;
5883     border-top: 0;
5884     border-radius: 0 0 4px 4px;
5885     z-index: 20;
5886     background: rgba(255,255,255,0.95);
5887     box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5888 }
5889
5890 .ideditor .field-help-title h2 {
5891     padding: 10px;
5892     margin-bottom: 0px;
5893     font-size: 17px;
5894 }
5895 .ideditor .field-help-title button {
5896     width: 45px;
5897     height: 55px;
5898     border-radius: 0;
5899 }
5900
5901 .ideditor .field-help-nav {
5902     font-size: 13px;
5903     font-weight: bold;
5904     margin-bottom: 10px;
5905 }
5906 .ideditor .field-help-nav-item {
5907     display: inline-block;
5908     padding: 5px 10px;
5909     cursor: pointer;
5910     color: #666;
5911 }
5912 .ideditor .field-help-nav-item.active {
5913     color: #7092ff;
5914     border-bottom: 2px solid;
5915 }
5916 .ideditor .field-help-nav-item:active,
5917 .ideditor .field-help-nav-item:focus {
5918     color: #597be7;
5919     background-color: #efefef;
5920 }
5921 @media (hover: hover) {
5922     .ideditor .field-help-nav-item:hover {
5923         color: #597be7;
5924         background-color: #efefef;
5925     }
5926 }
5927
5928 .ideditor .field-help-content {
5929     padding: 10px;
5930     overflow-y: auto;
5931     overflow-x: hidden;
5932 }
5933 .ideditor .field-help-content h3 {
5934     font-size: 12px;
5935     margin-bottom: 5px;
5936 }
5937 .ideditor .field-help-content p {
5938     margin-bottom: 15px;
5939 }
5940 .ideditor .field-help-content ul li {
5941     list-style: inside;
5942     margin-bottom: 5px;
5943 }
5944
5945 .ideditor .field-help-content .field-help-image {
5946     width: 100%;
5947     margin-bottom: 15px;
5948 }
5949
5950 .ideditor .field-help-content svg.turn {
5951     width: 40px;
5952     height: 20px;
5953 }
5954 .ideditor .field-help-content svg.shadow {
5955     opacity: 0.7;
5956     width: 60px;
5957     height: 20px;
5958 }
5959 .ideditor .field-help-content svg.from {
5960     color: #777;
5961 }
5962 .ideditor .field-help-content svg.allow {
5963     color: #5b3;
5964 }
5965 .ideditor .field-help-content svg.restrict {
5966     color: #d53;
5967 }
5968 .ideditor .field-help-content svg.only {
5969     color: #68f;
5970 }
5971
5972 .ideditor .field-help-content p.from_shadow,
5973 .ideditor .field-help-content p.allow_shadow,
5974 .ideditor .field-help-content p.restrict_shadow,
5975 .ideditor .field-help-content p.allow_turn,
5976 .ideditor .field-help-content p.restrict_turn {
5977     margin-bottom: 5px;
5978 }
5979
5980
5981 /* More Fields dropdown
5982 ------------------------------------------------------- */
5983 .ideditor .more-fields {
5984     margin-top: 10px;
5985     font-weight: bold;
5986 }
5987
5988 .ideditor .more-fields label {
5989     display: flex;
5990     flex-flow: row nowrap;
5991     justify-content: space-between;
5992     align-items: center;
5993 }
5994
5995 .ideditor .more-fields input {
5996     margin-left: 10px;
5997     flex: 1 1 auto;
5998 }
5999 .ideditor[dir='rtl'] .more-fields input {
6000     margin-left: auto;
6001     margin-right: 10px;
6002 }
6003
6004 .ideditor .form-field-input-wrap .label {
6005     background: #f6f6f6;
6006     padding: 5px 10px;
6007 }
6008
6009
6010 /* Raw Tag Editor
6011 ------------------------------------------------------- */
6012 .ideditor .raw-tag-options {
6013     display: flex;
6014     flex-flow: row nowrap;
6015     justify-content: flex-end;
6016     margin-top: -28px;
6017 }
6018 .ideditor button.raw-tag-option {
6019     flex: 0 0 auto;
6020     padding: 3px;
6021     background: #aaa;
6022     color: #eee;
6023     margin: 0 3px;
6024 }
6025 .ideditor button.raw-tag-option:focus,
6026 .ideditor button.raw-tag-option.active {
6027     color: #fff;
6028     background: #597be7;
6029 }
6030 @media (hover: hover) {
6031     .ideditor button.raw-tag-option:hover {
6032         color: #fff;
6033         background: #597be7;
6034     }
6035 }
6036 .ideditor button.raw-tag-option.selected {
6037     color: #fff;
6038     background: #7092ff;
6039 }
6040 .ideditor button.raw-tag-option svg.icon {
6041     width: 14px;
6042     height: 14px;
6043     display: block;
6044 }
6045 .ideditor[dir='ltr'] button.raw-tag-option-list {
6046     transform: scaleX(-1);
6047     filter: FlipH;
6048     -ms-filter: "FlipH";
6049 }
6050
6051
6052 .ideditor .tag-text {
6053     width: 100%;
6054     height: 100%;
6055     min-height: 32px;
6056     font-family: monospace;
6057     white-space: pre;
6058 }
6059
6060 .ideditor .tag-text,
6061 .ideditor .tag-list {
6062     margin-top: 10px;
6063 }
6064 .ideditor .tag-row {
6065     width: 100%;
6066     position: relative;
6067 }
6068 .ideditor .tag-row .inner-wrap {
6069     display: flex;
6070     flex-flow: row nowrap;
6071     width: 100%;
6072     position: relative;
6073 }
6074 .ideditor .tag-row .key-wrap,
6075 .ideditor .tag-row .value-wrap {
6076     flex: 1 1 50%;
6077 }
6078
6079 .ideditor .tag-text.readonly,
6080 .ideditor .tag-row.readonly,
6081 .ideditor .tag-row.readonly input.key,
6082 .ideditor .tag-row.readonly input.value,
6083 .ideditor .tag-row.readonly button.remove {
6084     color: #777;
6085     background-color: #eee;
6086     cursor: not-allowed;
6087 }
6088
6089 .ideditor .tag-row input {
6090     border: 0;
6091     border-radius: 0;
6092     border-bottom: 1px solid #ccc;
6093     border-left: 1px solid #ccc;
6094     width: 100%;
6095 }
6096 .ideditor[dir='rtl'] .tag-row input {
6097     border-left: none;
6098     border-right: 1px solid #ccc;
6099 }
6100
6101
6102 .ideditor .tag-row input.key {
6103     font-weight: bold;
6104     background-color: #f6f6f6;
6105 }
6106
6107 .ideditor .tag-row input.value {
6108     border-right: 1px solid #ccc;
6109 }
6110 .ideditor[dir='rtl'] .tag-row input.value {
6111     border-left: 1px solid #ccc;
6112 }
6113
6114 .ideditor .tag-row:first-child input.key {
6115     border-top: 1px solid #ccc;
6116     border-top-left-radius: 4px;
6117 }
6118 .ideditor[dir='rtl'] .tag-row:first-child input.key {
6119     border-top-left-radius: 0;
6120     border-top-right-radius: 4px;
6121 }
6122
6123 .ideditor .tag-row:first-child input.value {
6124     border-top: 1px solid #ccc;
6125 }
6126 .ideditor .tag-row button {
6127     flex: 0 0 auto;
6128     width: 32px;
6129     border: 1px solid #ccc;
6130     border-top-width: 0;
6131     border-left-width: 0;
6132 }
6133 .ideditor[dir='rtl'] .tag-row button {
6134     border-left-width: 1px;
6135     border-right-width: 0;
6136 }
6137
6138 .ideditor .tag-row button:active,
6139 .ideditor .tag-row button:focus {
6140     background: #f1f1f1;
6141 }
6142 @media (hover: hover) {
6143     .ideditor .tag-row button:hover {
6144         background: #f1f1f1;
6145     }
6146 }
6147 .ideditor .tag-row button .icon {
6148     opacity: .5;
6149 }
6150 .ideditor .tag-row:first-child button {
6151     border-top-width: 1px;
6152 }
6153
6154 .ideditor .tag-row:first-child .tag-reference-button {
6155     border-top-right-radius: 4px;
6156 }
6157 .ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
6158     border-top-left-radius: 4px;
6159     border-top-right-radius: 0;
6160 }
6161
6162 .ideditor .tag-row:last-child .tag-reference-button {
6163     border-bottom-right-radius: 4px;
6164 }
6165 .ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
6166     border-bottom-left-radius: 4px;
6167     border-bottom-right-radius: 0;
6168 }
6169
6170 .ideditor .tag-row .tag-reference-button {
6171     border-radius: 0;
6172 }
6173 .ideditor[dir='rtl'] .tag-row .tag-reference-button {
6174     border-left-width: 1px;
6175     border-right-width: 0;
6176 }
6177
6178 /* Tag reference */
6179 .ideditor .tag-reference-loading {
6180     background-color: #f5f5f5;
6181 }
6182 .ideditor .tag-reference-loading .icon {
6183     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
6184     background-position: 0 0;
6185 }
6186
6187 .ideditor .tag-reference-body {
6188     flex: 1 1 auto;
6189     width: 100%;
6190     overflow: hidden;
6191     display: none;
6192     padding-top: 10px;
6193 }
6194 .ideditor .tag-reference-body.expanded {
6195     padding-bottom: 10px;
6196     padding-left: 10px;
6197     display: block;
6198 }
6199 .ideditor[dir='rtl'] .tag-reference-body.expanded {
6200     padding-left: 0;
6201     padding-right: 10px;
6202 }
6203 .ideditor .tag-reference-link {
6204     display: block;
6205 }
6206 .ideditor .tag-reference-link .icon:first-child {
6207     margin-left: 0;
6208 }
6209
6210 .ideditor img.tag-reference-wiki-image {
6211     float: right;
6212     width: 33.3333%;
6213     border-radius: 4px;
6214     margin: 0 0 0 5px;
6215 }
6216 .ideditor[dir='rtl'] img.tag-reference-wiki-image {
6217     float: left;
6218     margin: 0 5px 0 0;
6219 }
6220
6221 .ideditor .preset-list .tag-reference-body {
6222     position: relative;
6223     width: 100%;
6224 }
6225 .ideditor .raw-tag-editor .tag-reference-body {
6226     width: 100%;
6227 }
6228 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
6229     background: #f6f6f6;
6230     color: #333;
6231 }
6232 .ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
6233     border-bottom: 1px solid #ccc;
6234 }
6235 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
6236     border-top: 1px solid #ccc;
6237 }
6238
6239
6240 /* Raw Member / Membership Editor
6241 ------------------------------------------------------- */
6242 .ideditor .section-raw-member-editor .member-list:empty,
6243 .ideditor .section-raw-membership-editor .member-list:empty {
6244     display: none;
6245 }
6246
6247 .ideditor .section-raw-member-editor .member-list,
6248 .ideditor .section-raw-membership-editor .member-list {
6249     position: relative; /* required for drag-and-drop */
6250     padding-top: 5px;
6251 }
6252 .ideditor .section-raw-member-editor .member-list li,
6253 .ideditor .section-raw-membership-editor .member-list li {
6254     position: relative;
6255     border-radius: 4px;
6256     margin: 0;
6257     padding-bottom: 10px;
6258 }
6259 .ideditor .section-raw-member-editor .member-row .member-entity-name,
6260 .ideditor .section-raw-membership-editor .member-row .member-entity-name {
6261     font-weight: normal;
6262     padding-left: 10px;
6263 }
6264 .ideditor .section-raw-member-editor .member-row .member-entity-name.has-colour::before,
6265 .ideditor .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
6266 .ideditor .feature-list .entity-name.has-colour::before,
6267 .ideditor .combobox-parent-relation .has-colour::before {
6268     display: inline-block;
6269     content: '';
6270     margin-left: -5px;
6271     margin-right: 5px;
6272     border-style: solid;
6273     border-width: 4px;
6274     border-radius: 4px;
6275     border-color: inherit;
6276 }
6277 .ideditor .combobox-parent-relation .has-colour::before  {
6278     margin-left: 2px;
6279 }
6280
6281 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
6282 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
6283     padding-left:0;
6284     padding-right: 10px;
6285 }
6286 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name.has-colour::before,
6287 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
6288 .ideditor[dir='rtl'] .feature-list .entity-name.has-colour::before {
6289     margin-left: 5px;
6290     margin-right: -5px;
6291 }
6292 .ideditor[dir='rtl'] .combobox-parent-relation .has-colour::before  {
6293     margin-left: 5px;
6294     margin-right: 2px;
6295 }
6296
6297
6298 .ideditor .form-field-input-member > input.member-role {
6299     border-radius: 0 0 4px 4px;
6300 }
6301
6302 .ideditor .member-row-new .member-entity-input {
6303     flex: 1 1 100%;
6304     border-radius: 4px 4px 0 0;
6305     border: 0;
6306 }
6307
6308 .ideditor .section-raw-member-editor .member-row.dragging {
6309     opacity: 0.75;
6310     z-index: 3000;
6311     /*
6312     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
6313     */
6314 }
6315
6316 /* add tag, add relation buttons */
6317 .ideditor .add-row {
6318     display: flex;
6319     width: 100%;
6320     flex-flow: row nowrap;
6321 }
6322 .ideditor .add-row .add-tag,
6323 .ideditor .add-row .add-relation,
6324 .ideditor .add-row .space-value {
6325     flex: 1 1 50%;
6326 }
6327 .ideditor .add-row .space-buttons {
6328     flex: 0 0 62px;
6329 }
6330 .ideditor .add-row button {
6331     padding: 5px;
6332     background: rgba(0,0,0,.5);
6333 }
6334 .ideditor .add-row button:focus,
6335 .ideditor .add-row button:active {
6336     background: rgba(0,0,0,.8);
6337 }
6338 @media (hover: hover) {
6339     .ideditor .add-row button:hover {
6340         background: rgba(0,0,0,.8);
6341     }
6342 }
6343
6344 .ideditor .add-tag {
6345     border-radius: 0 0 4px 4px;
6346 }
6347 .ideditor .add-relation {
6348     margin-top: 10px;
6349     border-radius: 4px;
6350 }
6351
6352
6353 /* OSM Note / QA Editors
6354 ------------------------------------------------------- */
6355 .ideditor .note-header,
6356 .ideditor .qa-header {
6357     background-color: #f6f6f6;
6358     border-radius: 5px;
6359     border: 1px solid #ccc;
6360     display: flex;
6361     flex-flow: row nowrap;
6362     align-items: center;
6363 }
6364
6365 .ideditor .note-header-icon,
6366 .ideditor .qa-header-icon {
6367     background-color: #fff;
6368     padding: 10px;
6369     flex: 0 0 auto;
6370     position: relative;
6371     width: 60px;
6372     height: 60px;
6373     border-right: 1px solid #ccc;
6374     border-radius: 5px 0 0 5px;
6375 }
6376 .ideditor[dir='rtl'] .note-header-icon,
6377 .ideditor[dir='rtl'] .qa-header-icon {
6378     border-right: unset;
6379     border-left: 1px solid #ccc;
6380     border-radius: 0 5px 5px 0;
6381 }
6382
6383 .ideditor .note-header-icon .icon-wrap,
6384 .ideditor .qa-header-icon .icon-wrap {
6385     position: absolute;
6386     top: 0px;
6387 }
6388 .ideditor .preset-icon-28 {
6389     position: absolute;
6390     top: 16px;
6391     left: 16px;
6392     margin: auto;
6393 }
6394 .ideditor .preset-icon-28 .icon {
6395     width: 28px;
6396     height: 28px;
6397 }
6398
6399 .ideditor .note-header-label,
6400 .ideditor .qa-header-label {
6401     background-color: #f6f6f6;
6402     padding: 0 15px;
6403     flex: 1 1 100%;
6404     font-size: 14px;
6405     font-weight: bold;
6406     border-radius: 0 5px 5px 0;
6407 }
6408 .ideditor[dir='rtl'] .note-header-label,
6409 .ideditor[dir='rtl'] .qa-header-label {
6410     border-radius: 5px 0 0 5px;
6411 }
6412
6413 .ideditor .note-category {
6414     margin: 20px 0px;
6415 }
6416
6417 .ideditor .comments-container {
6418     background: #ececec;
6419     padding: 1px 10px;
6420     border-radius: 8px;
6421     margin-top: 20px;
6422 }
6423
6424 .ideditor .comment {
6425     background-color: #fff;
6426     border-radius: 5px;
6427     border: 1px solid #ccc;
6428     margin: 10px auto;
6429     display: flex;
6430     flex-flow: row nowrap;
6431 }
6432 .ideditor .comment-avatar {
6433     padding: 10px;
6434     flex: 0 0 auto;
6435 }
6436 .ideditor .comment-avatar .icon.comment-avatar-icon {
6437     width: 40px;
6438     height: 40px;
6439     -o-object-fit: cover;
6440        object-fit: cover;
6441     border: 1px solid #ccc;
6442     border-radius: 20px;
6443 }
6444 .ideditor .comment-main {
6445     padding: 10px 10px 10px 0;
6446     flex: 1 1 100%;
6447     flex-flow: column nowrap;
6448     overflow: hidden;
6449     overflow-wrap: break-word;
6450 }
6451 .ideditor[dir='rtl'] .comment-main {
6452     padding: 10px 0 10px 10px;
6453 }
6454
6455 .ideditor .comment-metadata {
6456     flex-flow: row nowrap;
6457     justify-content: space-between;
6458 }
6459 .ideditor .comment-author {
6460     font-weight: bold;
6461     color: #333;
6462 }
6463 .ideditor .comment-date {
6464     color: #aaa;
6465 }
6466 .ideditor .comment-text {
6467     color: #333;
6468     margin-top: 10px;
6469     overflow-y: auto;
6470     max-height: 250px;
6471 }
6472 .ideditor .comment-text::-webkit-scrollbar {
6473     border-left: none;
6474 }
6475
6476 .ideditor .note-save,
6477 .ideditor .qa-save {
6478     padding-top: 20px;
6479 }
6480
6481 .ideditor .qa-details-container {
6482     background: #ececec;
6483     padding: 10px;
6484     margin-top: 20px;
6485     border-radius: 4px;
6486     border: 1px solid #ccc;
6487     display: flex;
6488     flex-direction: column;
6489 }
6490 .ideditor .qa-details-description-text::first-letter {
6491     text-transform: capitalize;
6492 }
6493 .ideditor[dir='rtl'] .qa-details-description-text::first-letter {
6494     text-transform: none;  /* #5877 */
6495 }
6496 .ideditor .qa-details-subsection h4 {
6497     padding-bottom: 2px;
6498 }
6499 .ideditor .qa-details-subsection:not(:last-child) {
6500     margin-bottom: 10px;
6501 }
6502 .ideditor .qa-details-subsection:empty {
6503     display: none;
6504 }
6505
6506 .ideditor .note-save .new-comment-input,
6507 .ideditor .qa-save .new-comment-input {
6508     width: 100%;
6509     height: 100px;
6510     max-height: 300px;
6511     min-height: 100px;
6512 }
6513
6514 .ideditor .note-save .detail-section,
6515 .ideditor .qa-save .detail-section {
6516     margin: 10px 0;
6517 }
6518
6519 .ideditor .note-report {
6520     float: right;
6521 }
6522
6523
6524 /* Custom Data Editor
6525 ------------------------------------------------------- */
6526 .ideditor .data-header {
6527     background-color: #f6f6f6;
6528     border-radius: 5px;
6529     border: 1px solid #ccc;
6530     display: flex;
6531     flex-flow: row nowrap;
6532     align-items: center;
6533 }
6534
6535 .ideditor .data-header-icon {
6536     background-color: #fff;
6537     padding: 10px;
6538     flex: 0 0 auto;
6539     position: relative;
6540     width: 60px;
6541     height: 60px;
6542     border-right: 1px solid #ccc;
6543     border-radius: 5px 0 0 5px;
6544 }
6545 .ideditor[dir='rtl'] .data-header-icon {
6546     border-right: unset;
6547     border-left: 1px solid #ccc;
6548     border-radius: 0 5px 5px 0;
6549 }
6550
6551 .ideditor .data-header-icon .icon-wrap {
6552     position: absolute;
6553     top: 0px;
6554 }
6555
6556 .ideditor .data-header-label {
6557     background-color: #f6f6f6;
6558     padding: 0 15px;
6559     flex: 1 1 100%;
6560     font-size: 14px;
6561     font-weight: bold;
6562     border-radius: 0 5px 5px 0;
6563 }
6564 .ideditor[dir='rtl'] .data-header-label {
6565     border-radius: 5px 0 0 5px;
6566 }
6567
6568 /* custom data editor - no info/delete buttons */
6569 .ideditor .data-editor.raw-tag-editor .tag-row button {
6570     display: none;
6571 }
6572 .ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
6573 .ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
6574     width: 50%;
6575 }
6576
6577
6578 .ideditor .over-map {
6579     position: relative;
6580     height: 100%;
6581     pointer-events: none;
6582     display: flex;
6583     flex-direction: row-reverse;
6584     align-items: flex-end;
6585     overflow: hidden;
6586 }
6587 .ideditor .over-map > * {
6588     pointer-events: auto;
6589     z-index: 5;
6590 }
6591 /* offscreen this without hiding it */
6592 .ideditor .over-map .select-trap {
6593     position: absolute;
6594     right: -1000%;
6595     opacity: 0;
6596 }
6597
6598 /* Map Controls
6599 ------------------------------------------------------- */
6600 .ideditor .map-controls-wrap {
6601     position: absolute;
6602     left: 0;
6603     right: 0;
6604     height: 100%;
6605     z-index: 100;
6606     display: block;
6607     overflow-x: hidden;
6608     overflow-y: auto;
6609     pointer-events: none;
6610     -ms-overflow-style: none;
6611     scrollbar-width: none;
6612 }
6613 .ideditor .map-controls-wrap::-webkit-scrollbar {
6614     display: none;
6615 }
6616 .ideditor .map-controls {
6617     right: 0;
6618     top: 0;
6619     width: 40px;
6620     position: absolute;
6621     bottom: 0;
6622     display: flex;
6623     flex-direction: column;
6624     padding: 5px 0;
6625     pointer-events: none;
6626 }
6627 .ideditor .map-controls:before {
6628     content: '';
6629     display: inline-block;
6630     pointer-events: none;
6631     width: 40px;
6632     height: 100%;
6633     max-height: 70px;
6634     flex: 0 1 auto;
6635 }
6636 .ideditor[dir='rtl'] .map-controls {
6637     left: 0;
6638     right: auto;
6639 }
6640
6641 .ideditor .map-control {
6642     position: relative;
6643     display: flex;
6644     flex-direction: column;
6645 }
6646 .ideditor .map-control > button {
6647     position: relative;
6648     width: 40px;
6649     height: 40px;
6650     background: rgba(0,0,0,.5);
6651     border-radius: 0;
6652     pointer-events: auto;
6653 }
6654
6655 .ideditor .map-control > button:not(.disabled):focus,
6656 .ideditor .map-control > button:not(.disabled):active {
6657     background: rgba(0, 0, 0, .8);
6658 }
6659 .ideditor .map-control > button.active,
6660 .ideditor .map-control > button.active:active {
6661     background: #7092ff;
6662 }
6663 @media (hover: hover) {
6664     .ideditor .map-control > button:not(.disabled):hover {
6665         background: rgba(0, 0, 0, .8);
6666     }
6667     .ideditor .map-control > button.active:hover {
6668         background: #7092ff;
6669     }
6670 }
6671
6672 .ideditor .map-control > button.disabled .icon {
6673     color: rgba(255, 255, 255, 0.5);
6674 }
6675
6676
6677 /* Fullscreen Button (disabled)
6678 ------------------------------------------------------- */
6679 .ideditor div.full-screen {
6680     /*display: inline-block;*/
6681     width: 40px;
6682     margin-right: 10px;
6683     display: none;
6684 }
6685
6686 .ideditor div.full-screen .tooltip {
6687     min-width: 160px;
6688 }
6689
6690 .ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
6691     width: 40px;
6692     height: 40px;
6693     background: transparent;
6694 }
6695 .ideditor div.full-screen > button:active,
6696 .ideditor div.full-screen > button:focus {
6697     background-color: rgba(0, 0, 0, .8);
6698 }
6699 @media (hover: hover) {
6700     .ideditor div.full-screen > button:hover {
6701         background-color: rgba(0, 0, 0, .8);
6702     }
6703 }
6704
6705
6706 /* Map Controls
6707 ------------------------------------------------------- */
6708
6709 /* Zoom in/out buttons */
6710 .ideditor .zoombuttons > button.zoom-in {
6711     border-radius: 4px 0 0 0;
6712 }
6713 .ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
6714     border-radius: 0 4px 0 0;
6715 }
6716
6717 /* Geolocate button */
6718 .ideditor .geolocate-control {
6719     margin-bottom: 10px;
6720 }
6721 .ideditor .geolocate-control > button {
6722     border-radius: 0 0 0 4px;
6723 }
6724 .ideditor[dir='rtl'] .geolocate-control > button {
6725     border-radius: 0 0 4px 0;
6726 }
6727
6728 /* Zoom to selection button */
6729 .ideditor .zoom-to-selection-control .icon {
6730     width: 22px;
6731     height: 22px;
6732 }
6733
6734
6735 /* Background / Map Data / Help Pane buttons
6736 ------------------------------------------------------- */
6737 .ideditor .background-control > button {
6738     border-radius: 4px 0 0 0;
6739 }
6740 .ideditor[dir='rtl'] .background-control > button {
6741     border-radius: 0 4px 0 0;
6742 }
6743
6744 .ideditor .help-control > button {
6745     border-radius: 0 0 0 4px;
6746 }
6747 .ideditor[dir='rtl'] .help-control > button {
6748     border-radius: 0 0 4px 0;
6749 }
6750
6751
6752 /* Background / Map Data Settings
6753 ------------------------------------------------------- */
6754 .ideditor .imagery-faq {
6755     margin-bottom: 10px;
6756     white-space: nowrap;
6757 }
6758
6759 .ideditor .layer-list, .ideditor .controls-list {
6760     margin-bottom: 10px;
6761     border: 1px solid #ccc;
6762     border-radius: 4px;
6763 }
6764
6765 .ideditor .layer-list > li {
6766     background-color: #fff;
6767     color: #7092ff;
6768     position: relative;
6769     display: flex;
6770 }
6771
6772 .ideditor .layer-list:empty {
6773     display: none;
6774 }
6775
6776 .ideditor .layer-list > li:first-child {
6777     border-radius: 3px 3px 0 0;
6778 }
6779 .ideditor .layer-list > li:last-child {
6780     border-radius: 0 0 3px 3px;
6781 }
6782 .ideditor .layer-list > li:only-child {
6783     border-radius: 3px;
6784 }
6785 .ideditor .layer-list li:not(:last-child) {
6786     border-bottom: 1px solid #ccc;
6787 }
6788 .ideditor .layer-list li:active {
6789     background-color: #ececec;
6790 }
6791 @media (hover: hover) {
6792     .ideditor .layer-list li:hover {
6793         background-color: #ececec;
6794     }
6795 }
6796
6797 .ideditor .layer-list li.active button,
6798 .ideditor .layer-list li.switch button,
6799 .ideditor .layer-list li.active,
6800 .ideditor .layer-list li.switch {
6801     background: #e8ebff;
6802 }
6803
6804 .ideditor .layer-list li.best > div.best {
6805     padding: 5px;
6806     flex: 0 0 auto;
6807     align-self: center;
6808 }
6809
6810 .ideditor[dir='rtl'] .list-item-data-browse svg {
6811     transform: rotateY(180deg);
6812 }
6813
6814 /* make sure tooltip fits in map-control panel */
6815 /* if too wide, placement will be wrong the first time it displays */
6816 .ideditor .layer-list li.best .popover-inner {
6817     max-width: 160px;
6818 }
6819
6820 .ideditor .layer-list label {
6821     padding: 5px 10px;
6822     cursor: pointer;
6823     flex: 1 1 auto;
6824     display: flex;
6825     align-items: center;
6826     overflow: hidden;
6827 }
6828
6829 .ideditor[dir='ltr'] .layer-list .indented label {
6830     padding-left: 24px;
6831 }
6832 .ideditor[dir='rtl'] .layer-list .indented label {
6833     padding-right: 24px;
6834 }
6835
6836 .ideditor .layer-list label > span {
6837     display: block;
6838     overflow: hidden;
6839     width: calc(100% - 20px); /* Ensures radio input width within flexbox */
6840 }
6841
6842 .ideditor .layer-list label span.localized-text {
6843     line-height: 0.95rem;
6844 }
6845
6846 .ideditor .layer-list input.list-item-input {
6847     height: 2.2em;
6848     padding: 0px 4px;
6849     width: 50%;
6850     min-width: 160px;
6851 }
6852
6853 .ideditor .map-data-pane .layer-list button,
6854 .ideditor .background-pane .layer-list button {
6855     border-left: 1px solid #ccc;
6856     border-radius: 0;
6857     padding-left: 4px;
6858     padding-right: 4px;
6859 }
6860 .ideditor[dir='rtl'] .map-data-pane .layer-list button,
6861 .ideditor[dir='rtl'] .background-pane .layer-list button {
6862     border-left: none;
6863     border-right: 1px solid #ccc;
6864 }
6865
6866 .ideditor .map-data-pane .layer-list button .icon,
6867 .ideditor .background-pane .layer-list button .icon {
6868     opacity: 0.5;
6869 }
6870
6871 .ideditor .map-data-pane .layer-list button:last-of-type,
6872 .ideditor .background-pane .layer-list button:last-of-type {
6873     border-radius: 0 3px 3px 0;
6874 }
6875 .ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
6876 .ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
6877     border-radius: 3px 0 0 3px;
6878 }
6879
6880 .ideditor .map-data-pane .vectortile-container .vectortile-header {
6881     padding-bottom: 5px;
6882 }
6883 .ideditor .map-data-pane .vectortile-container .vectortile-footer {
6884     padding-bottom: 10px;
6885 }
6886
6887
6888 /* Issues
6889 ------------------------------------------------------- */
6890 .ideditor .issue {
6891     overflow: hidden;
6892 }
6893 .ideditor .issue .issue-label,
6894 .ideditor .issue-label .issue-text {
6895     width: 100%;
6896     display: flex;
6897     flex-flow: row nowrap;
6898     cursor: pointer;
6899     text-align: initial;
6900     background: none;
6901 }
6902
6903 .ideditor .issue-text .issue-icon {
6904     flex: 0 0 auto;
6905     padding: 2px 3px;
6906 }
6907 .ideditor .issue-text .issue-message {
6908     flex: 1 1 auto;
6909     padding: 4px 5px;
6910 }
6911 .ideditor .issue-label .issue-autofix {
6912     flex: 0 0 auto;
6913     padding: 5px 8px;
6914 }
6915 .ideditor .issue-label .issue-info-button {
6916     height: unset;
6917     width: 32px;
6918     flex: 0 0 auto;
6919     border-left: 1px solid #ccc;
6920     background-color: rgba(0,0,0,0);
6921 }
6922 .ideditor[dir='rtl'] .issue-label .issue-info-button {
6923     border-left: 0;
6924     border-right: 1px solid #ccc;
6925 }
6926 .ideditor .issue-container .issue-label .issue-info-button .icon {
6927     opacity: 0.5;
6928 }
6929 .ideditor .issue-container.active .issue-label .issue-info-button .icon {
6930     opacity: 0.7;
6931 }
6932 .ideditor .issue-label .issue-info-button:last-child {
6933     border-radius: 0 4px 4px 0;
6934 }
6935 .ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
6936     border-radius: 4px 0 0 4px;
6937 }
6938
6939 .ideditor button.autofix.action {
6940     flex: 0 0 20px;
6941     height: 20px;
6942     width: 20px;
6943     background: #7092ff;
6944     color: #fff;
6945 }
6946 .ideditor button.autofix.action:focus,
6947 .ideditor button.autofix.action:active,
6948 .ideditor button.autofix.action.active {
6949     background: #597be7;
6950 }
6951 @media (hover: hover) {
6952     .ideditor button.autofix.action:hover {
6953         background: #597be7;
6954     }
6955 }
6956
6957 /* fix all */
6958 .ideditor .autofix-all {
6959     display: flex;
6960     flex-flow: row nowrap;
6961     justify-content: flex-end;
6962     margin-top: -25px;
6963     padding-bottom: 5px;
6964 }
6965 .ideditor .autofix-all-link-text {
6966     padding: 0;
6967 }
6968 .ideditor .autofix-all-link-icon svg {
6969     margin: 0 9px;
6970     background: currentColor;
6971     border-radius: 4px;
6972 }
6973 .ideditor .autofix-all-link-icon svg use {
6974     color: #fff;
6975 }
6976
6977 /* warning styles */
6978 .ideditor .warnings-list,
6979 .ideditor .warnings-list *,
6980 .ideditor .issue-container.active .issue.severity-warning,
6981 .ideditor .issue-container.active .issue.severity-warning * {
6982     border-color: #fb2;
6983 }
6984
6985 .ideditor .warnings-list .issue.severity-warning .issue-label,
6986 .ideditor .issue.severity-warning .issue-fix-list,
6987 .ideditor .warning-section {
6988     background: #ffc;
6989 }
6990
6991 .ideditor .issue-container.active .issue.severity-warning .issue-label {
6992     background: #ffa;
6993 }
6994
6995 .ideditor .issue.severity-warning .issue-icon {
6996     color: #f90;
6997 }
6998
6999 .ideditor .issue.severity-warning .issue-fix-item button.actionable,
7000 .ideditor .issue-container.active .issue.severity-warning .issue-info-button {
7001     color: #b15500;
7002     fill: #b15500;
7003 }
7004 .ideditor .warnings-list .issue.severity-warning .issue-label:active,
7005 .ideditor .warnings-list .issue.severity-warning .issue-label:focus,
7006 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7007 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
7008     background: #ff8;
7009 }
7010 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7011 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
7012 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
7013 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
7014     color: #7f3d00;
7015     fill: #7f3d00;
7016 }
7017 @media (hover: hover) {
7018     .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
7019     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
7020         background: #ff8;
7021     }
7022     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
7023     .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
7024         color: #7f3d00;
7025         fill: #7f3d00;
7026     }
7027 }
7028
7029
7030 /* error styles */
7031 .ideditor .errors-list,
7032 .ideditor .errors-list *,
7033 .ideditor .issue-container.active .issue.severity-error,
7034 .ideditor .issue-container.active .issue.severity-error * {
7035     border-color: #f77;
7036 }
7037
7038 .ideditor .errors-list .issue.severity-error .issue-label,
7039 .ideditor .issue.severity-error .issue-fix-list,
7040 .ideditor .error-section {
7041     background: #ffd6d6;
7042 }
7043
7044 .ideditor .issue-container.active .issue.severity-error .issue-label {
7045     background: #ffc6c6;
7046 }
7047
7048 .ideditor .issue.severity-error .issue-fix-item button.actionable,
7049 .ideditor .issue-container.active .issue.severity-error .issue-info-button {
7050     color: #b91201;
7051     fill: #b91201;
7052 }
7053 .ideditor .issue.severity-error .issue-icon {
7054     color: #dd1400;
7055 }
7056 .ideditor .errors-list .issue.severity-error .issue-label:active,
7057 .ideditor .errors-list .issue.severity-error .issue-label:focus,
7058 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7059 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
7060     background: #ffb6b6;
7061 }
7062 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7063 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
7064 .ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
7065 .ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
7066     color: #840c00;
7067     fill: #840c00;
7068 }
7069 @media (hover: hover) {
7070     .ideditor .errors-list .issue.severity-error .issue-label:hover,
7071     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
7072         background: #ffb6b6;
7073     }
7074     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
7075     .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
7076         color: #840c00;
7077         fill: #840c00;
7078     }
7079 }
7080
7081
7082 /* Issues Pane */
7083 .ideditor .issues-options-container {
7084     display: table;
7085 }
7086 .ideditor .issues-option {
7087     display: table-row;
7088 }
7089 .ideditor .issues-option-title {
7090     display: table-cell;
7091     font-weight: bold;
7092     padding-right: 10px;
7093 }
7094 .ideditor[dir='rtl'] .issues-option-title {
7095     padding-right: 0;
7096     padding-left: 10px;
7097 }
7098 .ideditor .issues-option label {
7099     display: table-cell;
7100     padding: 0 10px;
7101     white-space: nowrap;
7102 }
7103
7104 .ideditor .layer-list.issues-list li.issue {
7105     border-color: inherit;    /* override .layer-list styles */
7106     color: inherit;
7107     height: unset;
7108 }
7109
7110 .ideditor .layer-list.issue-rules-list,
7111 .ideditor .layer-list.issues-list,
7112 .ideditor .layer-list.layer-feature-list {
7113     margin-bottom: 0;
7114 }
7115 .ideditor .section-footer {
7116     display: flex;
7117     flex-flow: row nowrap;
7118     justify-content: flex-end;
7119     height: 30px;
7120 }
7121 .ideditor .section-footer a {
7122     padding: 5px;
7123 }
7124
7125 .ideditor .section-issues-status .box {
7126     border-radius: 4px;
7127     border: 1px solid #72d979;
7128     background: #c6ffca;
7129     padding: 5px !important;
7130     display: flex;
7131 }
7132 .ideditor .section-issues-status .icon {
7133     color: #05ac10;
7134 }
7135
7136 .ideditor input.square-degrees-input {
7137     padding: 2px !important; /* important needed for rtl */
7138     width: 3em;
7139     height: 2em;
7140     text-align: center;
7141     background: rgba(0,0,0,0);
7142     color: currentColor;
7143 }
7144
7145
7146 /* Entity Issues List */
7147 .ideditor .section-entity-issues .issue-container .issue {
7148     border-radius: 4px;
7149     border: 1px solid #ccc;
7150     background: #f6f6f6;
7151 }
7152 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
7153 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
7154 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
7155 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
7156     background: #f1f1f1;
7157 }
7158 @media (hover: hover) {
7159     .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
7160     .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
7161         background: #f1f1f1;
7162     }
7163 }
7164 .ideditor .section-entity-issues .issue .issue-label .issue-text {
7165     padding-right: 10px;
7166 }
7167 .ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
7168     padding-right: unset;
7169     padding-left: 10px;
7170 }
7171
7172 .ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
7173     font-weight: bold;
7174 }
7175 .ideditor .section-entity-issues .issue-container:not(:last-of-type) {
7176     margin-bottom: 5px;
7177 }
7178 .ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
7179     margin-top: 10px;
7180 }
7181 .ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
7182     margin-bottom: 10px;
7183 }
7184
7185 /* fixes */
7186 .ideditor .section-entity-issues .issue-fix-list {
7187     border-top: 1px solid;
7188     border-color: inherit;
7189 }
7190 .ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
7191     display: none;
7192 }
7193
7194 .ideditor li.issue-fix-item button {
7195     padding: 2px 10px 2px 20px;
7196     background: transparent;
7197     width: 100%;
7198     text-align: initial;
7199 }
7200 .ideditor[dir='rtl'] li.issue-fix-item button {
7201     padding: 2px 20px 2px 10px;
7202 }
7203 .ideditor li.issue-fix-item:first-of-type button {
7204     padding-top: 5px;
7205 }
7206 .ideditor li.issue-fix-item:last-of-type button {
7207     padding-bottom: 5px;
7208 }
7209
7210 .ideditor li.issue-fix-item button .fix-message {
7211     padding: 0 10px;
7212     vertical-align: middle;
7213 }
7214
7215 .ideditor li.issue-fix-item button.actionable {
7216     cursor: pointer;
7217 }
7218 .ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
7219     color: #555;
7220     fill: #555;
7221 }
7222
7223 .ideditor .issue-container:not(.active) ul.issue-fix-list {
7224     display: none;
7225 }
7226 .ideditor .issue-container:not(.active) .issue-info {
7227     display: none;
7228 }
7229
7230 .ideditor .issue-info {
7231     flex: 1 1 auto;
7232     width: 100%;
7233     overflow: hidden;
7234     display: none;
7235     padding: 10px 0;
7236 }
7237 .ideditor .issue-info.expanded {
7238     display: inline-block;
7239 }
7240
7241 .ideditor .issue-info .issue-reference {
7242     margin-bottom: 10px;
7243 }
7244 .ideditor .issue-info .tagDiff-table {
7245     min-width: 60%;
7246     width: unset;
7247     border: 1px solid #ccc;
7248 }
7249 .ideditor .issue-info .tagDiff-row {
7250     border: 1px solid #ccc;
7251 }
7252 .ideditor .issue-info .tagDiff-cell {
7253     padding: 2px 10px;
7254     font-family: monospace;
7255     font-size: 10px;
7256     border: 1px solid #ccc;
7257 }
7258 .ideditor .issue-info .tagDiff-cell-add {
7259     background: #dfd;
7260 }
7261 .ideditor .issue-info .tagDiff-cell-remove {
7262     background: #fdd;
7263 }
7264
7265
7266 /* Background - Display Options Sliders
7267 ------------------------------------------------------- */
7268 .ideditor .display-options-container {
7269     padding: 10px;
7270 }
7271
7272 .ideditor .display-options-container label {
7273     padding-bottom: 0;
7274     padding-top: 10px;
7275 }
7276
7277 .ideditor .display-options-container label span {
7278     font-weight: bold;
7279     margin: 5px;
7280 }
7281
7282 .ideditor .display-control .control-wrap {
7283     display: flex;
7284     align-items: center;
7285     width: 100%;
7286 }
7287 .ideditor .display-control .display-option-input {
7288     height: 20px;
7289     flex: 1 1 100%;
7290 }
7291
7292 .ideditor .display-control button {
7293     height: 30px;
7294     width: 30px;
7295     margin-left: 5px;
7296     margin-right: 0px;
7297     vertical-align: text-bottom;
7298     border-radius: 4px;
7299     flex: 0 0 auto;
7300 }
7301 .ideditor[dir='rtl'] .display-control button {
7302     margin-left: 0px;
7303     margin-right: 5px;
7304 }
7305
7306
7307 /* Background - Adjust Alignment
7308 ------------------------------------------------------- */
7309 .ideditor .background-pane .nudge-container {
7310     border: 1px solid #ccc;
7311     border-radius: 4px;
7312     padding: 10px;
7313     position: relative;
7314 }
7315
7316 .ideditor .nudge-container .nudge-controls-wrap {
7317     position: relative;
7318     width: 100%;
7319     overflow: hidden;
7320 }
7321
7322 .ideditor .nudge-container .nudge-outer-rect {
7323     background-color: #eee;
7324     border: 1px solid #ccc;
7325     border-radius: 2px;
7326     padding: 20px 0;
7327     display: flex;
7328     justify-content: center;
7329     align-items: center;
7330     margin: 45px;
7331     cursor: move;
7332     /* prevent scrolling pane while dragging on touchscreen */
7333     touch-action: none;
7334     /* disable drag-to-select */
7335     -webkit-user-select: none;
7336        -moz-user-select: none;
7337             user-select: none;
7338     position: relative;
7339 }
7340
7341 .ideditor .nudge-container .nudge-inner-rect {
7342     background-color: #fff;
7343     border: 1px solid #ccc;
7344     border-radius: 2px;
7345     width: 65%;
7346     min-height: 20px;
7347 }
7348
7349 .ideditor .nudge-container .nudge::after {
7350     content: '';
7351     display: block;
7352     position: absolute;
7353     margin: auto;
7354     left: 0; right: 0; top: 0; bottom: 0;
7355     height: 0;
7356     width: 0;
7357 }
7358
7359 .ideditor .nudge-container input {
7360     width: 100%;
7361     padding: 2px;
7362     text-align: center;
7363     border: 0;
7364 }
7365
7366 .ideditor .nudge-container input.error {
7367     border: 1px solid #ff7878;
7368     border-radius: 2px;
7369     background: #ffb;
7370 }
7371
7372 .ideditor .nudge-container button {
7373     position: absolute;
7374     height: 40px;
7375     width: 40px;
7376 }
7377 .ideditor .nudge-container button.right,
7378 .ideditor .nudge-container button.left {
7379     top: 0;
7380     bottom: 0;
7381     margin-top: auto;
7382     margin-bottom: auto;
7383     vertical-align: middle;
7384 }
7385 .ideditor .nudge-container button.right {
7386     right: 0;
7387 }
7388 .ideditor .nudge-container button.left {
7389     left: 0;
7390 }
7391 .ideditor .nudge-container button.top,
7392 .ideditor .nudge-container button.bottom {
7393     left: 0;
7394     right: 0;
7395     margin-left: auto;
7396     margin-right: auto;
7397 }
7398 .ideditor .nudge-container button.top {
7399     top: 0;
7400 }
7401 .ideditor .nudge-container button.bottom {
7402     bottom: 0;
7403 }
7404
7405 .ideditor .nudge-container button.nudge-reset {
7406     right: 0;
7407     bottom: 0;
7408 }
7409
7410 .ideditor .nudge-surface {
7411    position: absolute;
7412    z-index: 5000;
7413    left: 0;
7414    top: 0;
7415    width: 100%;
7416    height: 100%;
7417    background-color: transparent;
7418    cursor: move;
7419 }
7420
7421 .ideditor .background-pane .nudge.right::after {
7422     border-top: 5px solid transparent;
7423     border-bottom: 5px solid transparent;
7424     border-left: 5px solid #222;
7425 }
7426
7427 .ideditor .background-pane .nudge.left::after {
7428     border-top: 5px solid transparent;
7429     border-bottom: 5px solid transparent;
7430     border-right: 5px solid #222;
7431 }
7432
7433 .ideditor .background-pane .nudge.top::after {
7434     border-right: 5px solid transparent;
7435     border-left: 5px solid transparent;
7436     border-bottom: 5px solid #222;
7437 }
7438
7439 .ideditor .background-pane .nudge.bottom::after {
7440     border-right: 5px solid transparent;
7441     border-left: 5px solid transparent;
7442     border-top: 5px solid #222;
7443 }
7444
7445
7446 /* Side Panes - Background / Map Data / Help
7447 ------------------------------------------------------- */
7448 .ideditor .map-panes {
7449     flex: 0 1 auto;
7450     position: relative;
7451     height: 100%;
7452     max-width: 100%;
7453 }
7454 .ideditor .map-pane {
7455     position: relative;
7456     top: 0;
7457     width: 400px;
7458     max-width: 100%;
7459     height: 100%;
7460     z-index: 10;
7461     display: flex;
7462     flex-direction: column;
7463 }
7464
7465 .ideditor .map-pane.help-pane {
7466     width: 600px;
7467 }
7468
7469 .ideditor .pane-heading {
7470     display: flex;
7471     flex-flow: row nowrap;
7472     justify-content: space-between;
7473     border-bottom: 1px solid #ccc;
7474     flex: 0 0 auto;
7475 }
7476
7477 .ideditor .pane-heading h2 {
7478     margin: 14px 20px;
7479 }
7480
7481 .ideditor .pane-heading button {
7482     width: 40px;
7483     border-radius: 0;
7484 }
7485
7486 .ideditor .pane-content {
7487     height: 100%;
7488     padding: 10px 50px 20px 20px;
7489     overflow-x: hidden;
7490     overflow-y: scroll;
7491     position: relative;
7492 }
7493 .ideditor[dir='rtl'] .pane-content {
7494     padding: 10px 20px 20px 50px;
7495 }
7496
7497 .ideditor .help-pane .pane-content > div {
7498     padding-bottom: 15px;
7499 }
7500
7501
7502 /* Help
7503 ------------------------------------------------------- */
7504 .ideditor .help-pane p {
7505     font-size: 15px;
7506     margin-bottom: 20px;
7507 }
7508
7509 .ideditor .help-pane .left-content .icon.inline,
7510 .ideditor .curtain-tooltip .icon.inline {
7511     margin-right: 0;
7512     margin-left: 0;
7513     height: 1.34em;
7514     width: 1.34em;
7515 }
7516
7517 .ideditor .help-pane .toc {
7518     width: 100%;
7519     max-width: 200px;
7520     float: right;
7521     margin-left: 20px;
7522     margin-bottom: 20px;
7523     padding-left: 5px;
7524 }
7525
7526 .ideditor .help-pane .toc li a,
7527 .ideditor .help-pane .nav a {
7528     display: block;
7529     border: 1px solid #ccc;
7530     padding: 5px 10px;
7531 }
7532
7533 .ideditor .help-pane .toc li a {
7534     border-bottom: 0;
7535 }
7536 .ideditor .help-pane .toc li a:focus,
7537 .ideditor .help-pane .nav a:focus,
7538 .ideditor .help-pane .toc li a:active,
7539 .ideditor .help-pane .nav a:active {
7540     background: #ececec;
7541 }
7542 @media (hover: hover) {
7543     .ideditor .help-pane .toc li a:hover,
7544     .ideditor .help-pane .nav a:hover {
7545         background: #ececec;
7546     }
7547 }
7548
7549 .ideditor .help-pane .toc li a.selected {
7550     background: #e8ebff;
7551 }
7552
7553 .ideditor .help-pane .toc li:first-child a {
7554     border-radius: 4px 4px 0 0;
7555 }
7556
7557 .ideditor .help-pane .toc li:nth-last-child(3) a {
7558     border-bottom: 1px solid #ccc;
7559     border-radius: 0 0 4px 4px
7560 }
7561
7562 .ideditor .help-pane .toc li.shortcuts a,
7563 .ideditor .help-pane .toc li.walkthrough a {
7564     overflow: hidden;
7565     margin-top: 10px;
7566     border-bottom: 1px solid #ccc;
7567     border-radius: 4px;
7568 }
7569
7570 .ideditor .help-pane .toc li.walkthrough a {
7571     text-align: center;
7572 }
7573
7574 .ideditor .help-pane .nav {
7575     position: relative;
7576     padding-bottom: 30px;
7577 }
7578
7579 .ideditor .help-pane .nav a {
7580     float: left;
7581     width: 50%;
7582     text-align: center;
7583 }
7584
7585 .ideditor .help-pane .nav a:first-child {
7586     border-radius: 4px 0 0 4px;
7587 }
7588
7589 .ideditor .help-pane .nav a:last-child:not(:only-child) {
7590     border-radius: 0 4px 4px 0;
7591     border-left: 0;
7592 }
7593
7594 .ideditor .help-pane .nav a:only-child {
7595     width: 100%;
7596     border-radius: 4px;
7597 }
7598
7599
7600 /* Inspector (hover styles)
7601 ------------------------------------------------------- */
7602 .ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
7603 .ideditor .inspector-hover .form-field-input-wrap .label,
7604 .ideditor .inspector-hover .form-field-input-multicombo .chiplist,
7605 .ideditor .inspector-hover .form-field-button,
7606 .ideditor .inspector-hover .structure-extras-wrap,
7607 .ideditor .inspector-hover .comments-container .comment,
7608 .ideditor .inspector-hover button,
7609 .ideditor .inspector-hover input,
7610 .ideditor .inspector-hover textarea,
7611 .ideditor .inspector-hover label {
7612     background: #ececec;
7613 }
7614 .ideditor .inspector-hover .preset-list-button,
7615 .ideditor .inspector-hover .tag-row input {
7616     background: #f6f6f6;
7617 }
7618
7619 .ideditor .inspector-hover a,
7620 .ideditor .inspector-hover .form-field-input-multicombo .chip,
7621 .ideditor .inspector-hover .form-field-input-check span,
7622 .ideditor .inspector-hover .section-entity-issues .issue .icon {
7623     color: #666;
7624 }
7625
7626 .ideditor .inspector-hover .form-field-input-multicombo .chip {
7627     background: #eee;
7628     border: 1px solid #ccc;
7629 }
7630
7631 /* scrollbars only when necessary*/
7632 .ideditor .inspector-hover div {
7633     overflow-x: visible;
7634     overflow-y: auto;
7635 }
7636
7637 /* hide and remove from layout */
7638 .ideditor .inspector-hidden,
7639 .ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
7640 .ideditor .inspector-hover label input[type="checkbox"],
7641 .ideditor .inspector-hover label input[type="radio"],
7642 .ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
7643 .ideditor .inspector-hover .form-field-input-radio label,
7644 .ideditor .inspector-hover .form-field-input-radio label span,
7645 .ideditor .inspector-hover .form-field-input-radio label.remove .icon,
7646 .ideditor .inspector-hover .add-row,
7647 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
7648 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
7649     display: none;
7650 }
7651
7652 /* hide but preserve in layout */
7653 .ideditor .inspector-hover .combobox-caret,
7654 .ideditor .inspector-hover .header button,
7655 .ideditor .inspector-hover .quick-links,
7656 .ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
7657 .ideditor .inspector-hover .hide-toggle:before,
7658 .ideditor .inspector-hover .more-fields,
7659 .ideditor .inspector-hover .field-label button,
7660 .ideditor .inspector-hover .tag-row button,
7661 .ideditor .inspector-hover .footer * {
7662     opacity: 0;
7663 }
7664
7665 /* Unstyle the active entity issue on hover */
7666 .ideditor .inspector-hover .section-entity-issues .issue-container.active {
7667     margin-top: 1px;
7668     margin-bottom: 1px;
7669 }
7670 .ideditor .inspector-hover .section-entity-issues .issue-container * {
7671     border-color: #ccc !important;
7672 }
7673 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
7674     border-bottom: 0;
7675 }
7676 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
7677     font-weight: normal;
7678 }
7679
7680
7681 /* Styles for raw tag inspector on hover */
7682 .ideditor .inspector-hover .tag-row .key-wrap,
7683 .ideditor .inspector-hover .tag-row .value-wrap {
7684     height: 31px;
7685 }
7686
7687 .ideditor .inspector-hover .tag-row:first-child input.value {
7688     border-top-right-radius: 4px;
7689 }
7690 .ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
7691     border-top-right-radius: 0;
7692     border-top-left-radius: 4px;
7693 }
7694
7695 .ideditor .inspector-hover .tag-row:last-child input.value {
7696     border-bottom-right-radius: 4px;
7697 }
7698 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
7699     border-bottom-right-radius: 0;
7700     border-bottom-left-radius: 4px;
7701 }
7702
7703 .ideditor .inspector-hover .tag-row:last-child input.key {
7704     border-bottom-left-radius: 4px;
7705 }
7706 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
7707     border-bottom-left-radius: 0;
7708     border-bottom-right-radius: 4px;
7709 }
7710
7711 .ideditor .inspector-hover .more-fields {
7712     max-height: 0;
7713     margin-bottom: -10px;
7714 }
7715
7716 /* Unstyle button fields */
7717 .ideditor .inspector-hover .form-field-input-radio label.active,
7718 .ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
7719     opacity: 1;
7720     background-color: transparent;
7721     color: #666;
7722     padding-left: 0;
7723     border-width: 0;
7724 }
7725 .ideditor .inspector-hover .form-field-input-radio button.active {
7726     padding-left: 10px;
7727 }
7728
7729 /* Show placeholder on hover for radio buttons */
7730 .ideditor .inspector-hover .form-field-input-radio {
7731     border: 1px solid #ccc;
7732     border-top: 0;
7733     border-radius: 0 0 4px 4px;
7734 }
7735 .ideditor .inspector-hover .form-field-input-radio .placeholder {
7736     opacity: 1;
7737     color: #666;
7738     padding: 5px 10px;
7739     width: 100%;
7740     height: auto;
7741     border: 0;
7742 }
7743 .ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
7744     border: 0;
7745 }
7746
7747
7748 /* Raster Background Tiles
7749 ------------------------------------------------------- */
7750 .ideditor img.tile {
7751     position: absolute;
7752     transform-origin: 0 0;
7753
7754     -webkit-user-select: none;
7755
7756        -moz-user-select: none;
7757
7758             user-select: none;
7759
7760     pointer-events: none;
7761
7762     -webkit-user-drag: none;
7763
7764     opacity: 0;
7765
7766     transition: opacity 200ms linear;
7767 }
7768
7769 .ideditor img.tile-loaded {
7770     opacity: 1;
7771 }
7772
7773 .ideditor img.tile-removing {
7774     opacity: 0;
7775 }
7776
7777 .ideditor .tile-label-debug {
7778     font-size: 10px;
7779     background: rgba(0, 0, 0, 0.7);
7780     color: #fff;
7781     position: absolute;
7782     text-align: center;
7783     padding: 5px;
7784     border-radius: 3px;
7785     z-index: 2;
7786     margin-left: -70px;
7787     margin-top: -20px;
7788
7789     transform-origin: 0 0;
7790
7791     -webkit-user-select: none;
7792
7793        -moz-user-select: none;
7794
7795             user-select: none;
7796 }
7797
7798 .ideditor img.tile-debug {
7799     outline: 1px solid red;
7800 }
7801
7802
7803 /* Map
7804 ------------------------------------------------------- */
7805 .ideditor .main-map {
7806     position: absolute;
7807     top: 0;
7808     left: 0;
7809     right: 0;
7810     bottom: 0;
7811     overflow: hidden;
7812     height: 100%;
7813     width: 100%;
7814     background: #000;
7815     -webkit-user-select: none;
7816        -moz-user-select: none;
7817             user-select: none;
7818     touch-action: none;
7819     -webkit-touch-callout: none;
7820 }
7821 .ideditor .main-map * {
7822     touch-action: none;
7823 }
7824
7825 .ideditor .supersurface {
7826     transform-origin: 0 0;
7827 }
7828
7829 .ideditor .supersurface, .ideditor .layer {
7830     position: absolute;
7831     top: 0;
7832     left: 0;
7833     right: 0;
7834     bottom: 0;
7835 }
7836
7837
7838 /* Map-In-Map
7839 ------------------------------------------------------- */
7840 .ideditor .map-in-map {
7841     position: absolute;
7842     overflow: hidden;
7843     top: 10px;
7844     width: 200px;
7845     height: 150px;
7846     z-index: 2;
7847     background: #000;
7848     border: #aaa 1px solid;
7849     box-shadow: 0 0 2em black;
7850 }
7851 .ideditor[dir='ltr'] .map-in-map {
7852     left: 10px;
7853 }
7854 .ideditor[dir='rtl'] .map-in-map {
7855     right: 10px;
7856 }
7857
7858 .ideditor .map-in-map-tiles {
7859     transform-origin: 0 0;
7860     -webkit-user-select: none;
7861        -moz-user-select: none;
7862             user-select: none;
7863 }
7864
7865 .ideditor .map-in-map-viewport,
7866 .ideditor .map-in-map-data {
7867     top: 0;
7868     left: 0;
7869     overflow: hidden;
7870     height: 100%;
7871     width: 100%;
7872 }
7873
7874 .ideditor .map-in-map-viewport {
7875     position: absolute;
7876 }
7877
7878 .ideditor .map-in-map-data {
7879     position: relative;
7880     z-index: 10;
7881 }
7882
7883 .ideditor .map-in-map-bbox {
7884     fill: none;
7885     stroke: rgba(255, 255, 0, 0.75);
7886     stroke-width: 1;
7887     shape-rendering: crispEdges;
7888 }
7889
7890 .ideditor .map-in-map-bbox.thick {
7891     stroke-width: 5;
7892 }
7893
7894
7895 /* Debug Data
7896 ------------------------------------------------------- */
7897 .ideditor .debug {
7898     stroke: currentColor;
7899     fill: none;
7900     stroke-width: 2;
7901 }
7902 .ideditor .map-in-map-data .debug {
7903     stroke-width: 1;
7904 }
7905
7906 .ideditor .nocolor { color: rgba(0, 0, 0, 0); }
7907 .ideditor .red     { color: rgba(255, 0, 0, 0.75); }
7908 .ideditor .green   { color: rgba(0, 255, 0, 0.75); }
7909 .ideditor .blue    { color: rgba(176, 176, 255, 0.75); }
7910 .ideditor .yellow  { color: rgba(255, 255, 0, 0.75); }
7911 .ideditor .cyan    { color: rgba(0, 255, 255, 0.75); }
7912 .ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
7913 .ideditor .orange  { color: rgba(255, 153, 0, 0.75); }
7914 .ideditor .pink    { color: rgba(255, 0, 153, 0.75); }
7915 .ideditor .purple  { color: rgba(153, 0, 255, 0.75); }
7916
7917 .ideditor .debug-legend {
7918     position: absolute;
7919     top: 70px;
7920     right: 80px;
7921     padding: 5px;
7922     border-radius: 4px;
7923     pointer-events: none;
7924 }
7925
7926 .ideditor .debug-legend-item {
7927     padding-right: 5px;
7928 }
7929 .ideditor .debug-legend-item:before {
7930     content: "\25A0";
7931     padding: 0 5px;
7932 }
7933
7934
7935 /* Information Panels
7936 ------------------------------------------------------- */
7937 .ideditor .info-panels {
7938     display: flex;
7939     flex-flow: row wrap-reverse;
7940     justify-content: flex-end;
7941     width: 100%;
7942     z-index: 1;
7943     -ms-user-select: element;
7944     pointer-events: none;
7945     overflow: hidden;
7946 }
7947
7948 .ideditor .panel-container h1,
7949 .ideditor .panel-container h2,
7950 .ideditor .panel-container h3,
7951 .ideditor .panel-container h4,
7952 .ideditor .panel-container h5 {
7953     display: inline-block;
7954     margin-bottom: 0;
7955 }
7956
7957 .ideditor .panel-container h1,
7958 .ideditor .panel-container h2,
7959 .ideditor .panel-container h3 {
7960     color: #ff8;
7961 }
7962
7963 .ideditor .panel-container {
7964     flex: 0 0 auto;
7965     margin: 0 2px 2px 0;
7966     border-radius: 4px;
7967     border: 1px solid rgba(0, 0, 0, 0.75);
7968     padding-bottom: 10px;
7969     width: 250px;
7970     max-width: 100%;
7971     pointer-events: auto;
7972 }
7973
7974 .ideditor .panel-container .panel-title {
7975     border-radius: 4px 4px 0 0;
7976 }
7977
7978 .ideditor .panel-title {
7979     padding: 5px 10px;
7980     display: flex;
7981     justify-content: space-between;
7982 }
7983
7984 .ideditor .panel-title button.close {
7985     padding: 2px;
7986     background: none;
7987     color: #ddd;
7988 }
7989 .ideditor[dir='rtl'] .panel-title button.close {
7990     float: left;
7991 }
7992 .ideditor .panel-title button.close:focus,
7993 .ideditor .panel-title button.close:active {
7994     color: #fff;
7995 }
7996 @media (hover: hover) {
7997     .ideditor .panel-title button.close:hover {
7998         color: #fff;
7999     }
8000 }
8001 .ideditor .panel-title button.close .icon {
8002     height: 20px;
8003     width: 16px;
8004 }
8005
8006 .ideditor .panel-content {
8007     padding: 5px 10px;
8008     position: relative;
8009 }
8010
8011 .ideditor .panel-content ul:empty {
8012     display: none;
8013 }
8014
8015 .ideditor .panel-content li span:not(.localized-text) {
8016     display: inline-block;
8017     white-space: nowrap;
8018     margin: 0 8px;
8019 }
8020
8021 .ideditor .panel-content .button {
8022     display: inline-block;
8023     background: #7092ff;
8024     border-radius: 2px;
8025     padding: 0 4px;
8026     margin-top: 10px;
8027     margin-right: 10px;
8028     color: #fff;
8029 }
8030 .ideditor[dir='rtl'] .panel-content .button {
8031     margin-right: auto;
8032     margin-left: 10px;
8033 }
8034
8035 .ideditor .panel-content-history .links a {
8036     margin-left: 8px;
8037 }
8038 .ideditor[dir='rtl'] .panel-content-history .links a {
8039     margin-left: auto;
8040     margin-right: 8px;
8041 }
8042 .ideditor .panel-content-history h4 {
8043     padding-bottom: 0;
8044 }
8045 .ideditor .panel-content-location .location-info {
8046     margin-top: 10px;
8047 }
8048
8049
8050 /* Map Footer
8051 ------------------------------------------------------- */
8052 .ideditor .map-footer {
8053     width: 100%;
8054     position: relative;
8055     border-radius: 0;
8056     pointer-events: none;
8057     display: flex;
8058     flex-direction: column;
8059     -ms-user-select: element;
8060     flex: 0 0 auto;
8061 }
8062
8063 .ideditor .map-footer-bar {
8064     pointer-events: all;
8065     display: block;
8066     height: 2.5em;
8067     position: relative;
8068 }
8069
8070 .ideditor .main-footer-wrap,
8071 .ideditor .flash-wrap {
8072     display: flex;
8073     flex: 0 0 100%;
8074     flex-flow: row nowrap;
8075     justify-content: space-between;
8076     height: 100%;
8077     position: absolute;
8078     right: 0;
8079     left: 0;
8080 }
8081
8082 .ideditor .footer-show {
8083     bottom: 0px;
8084     transition: bottom 75ms linear;
8085 }
8086
8087 .ideditor .footer-hide {
8088     bottom: -100%;
8089     transition: bottom 75ms linear;
8090 }
8091
8092
8093 /* Attribution
8094 ------------------------------------------------------- */
8095 .ideditor .attribution-wrap {
8096     position: absolute;
8097     bottom: 5px;
8098     left: 5px;
8099     right: 5px;
8100     display: flex;
8101     justify-content: space-between;
8102     align-items: flex-end;
8103     z-index: 0;
8104     pointer-events: none;
8105 }
8106
8107 .ideditor .attribution-wrap > * {
8108     pointer-events: auto;
8109 }
8110
8111 .ideditor .attribution-wrap .base-layer-attribution,
8112 .ideditor .attribution-wrap .overlay-layer-attribution {
8113     color: #ccc;
8114     font-size: 10px;
8115 }
8116 .ideditor .attribution-wrap .overlay-layer-attribution {
8117     text-align: right;
8118 }
8119
8120 .ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
8121     content: '; ';
8122 }
8123
8124 .ideditor .attribution-wrap .attribution a,
8125 .ideditor .attribution-wrap .attribution a:visited {
8126     color: #ccf;
8127 }
8128 .ideditor .attribution-wrap .attribution a:focus,
8129 .ideditor .attribution-wrap .attribution a:hover {
8130     color: #aaf;
8131 }
8132 @media (hover: hover) {
8133     .ideditor .attribution-wrap .attribution a:hover {
8134         color: #aaf;
8135     }
8136 }
8137
8138 .ideditor .attribution-wrap .attribution .source-image {
8139     height: 20px;
8140     vertical-align: middle;
8141     border-radius: 3px;
8142 }
8143
8144 .ideditor .attribution-wrap .attribution span {
8145     margin: 0 3px;
8146 }
8147
8148
8149 /* Footer - Flash messages
8150 ------------------------------------------------------- */
8151 .ideditor .flash-content {
8152     display: flex;
8153     flex: 1 0 auto;
8154     flex-flow: row nowrap;
8155     align-items: center;
8156     padding: 2px;
8157 }
8158
8159 .ideditor .flash-icon {
8160     flex: 0 0 auto;
8161     width: 20px;
8162     height: 20px;
8163     margin: 0 8px;
8164 }
8165
8166 .ideditor .flash-icon circle {
8167     fill: #eee;
8168 }
8169 .ideditor .flash-icon.disabled circle {
8170     cursor: auto;
8171     fill: rgba(255,255,255,0.7);
8172 }
8173
8174 .ideditor .flash-icon use {
8175     color: #222;
8176 }
8177 .ideditor .flash-icon.disabled use,
8178 .ideditor .flash-icon.operation.disabled use {
8179     fill: rgba(32,32,32,0.7);
8180     color: rgba(40,40,40,0.7);
8181 }
8182
8183 .ideditor .flash-text {
8184     flex: 1 1 auto;
8185 }
8186
8187 /* Scale bar
8188 ------------------------------------------------------- */
8189 .ideditor .map-footer-bar .scale-block {
8190     vertical-align: bottom;
8191     width: 250px;
8192     flex: 0 0 auto;
8193     -webkit-user-select: none;
8194        -moz-user-select: none;
8195             user-select: none;
8196     height: 30px;
8197     align-self: center;
8198 }
8199
8200 .ideditor .scale-block .scale {
8201     height: 100%;
8202     width: 100%;
8203     cursor: pointer;
8204     display: block;
8205 }
8206 .ideditor[dir='rtl'] .scale-block .scale {
8207     transform: scaleX(-1);
8208 }
8209
8210 .ideditor .scale-block .scale-text {
8211     display: inline-block;
8212     position: absolute;
8213     color: #ccc;
8214     top: 0.45em;
8215 }
8216
8217 .ideditor .scale-block .scale path {
8218     fill: none;
8219     stroke: #ccc;
8220     stroke-width: 1;
8221     shape-rendering: crispEdges;
8222 }
8223
8224 /* Footer - About, Source Switcher
8225 ------------------------------------------------------- */
8226 .ideditor .map-footer-bar .info-block {
8227     flex: 1 1 100%;
8228     overflow: hidden;
8229 }
8230
8231 .ideditor .map-footer-list {
8232     display: flex;
8233     flex-flow: row nowrap;
8234     height: 100%;
8235     justify-content: flex-end;
8236 }
8237
8238 .ideditor .map-footer-list li {
8239     height: 100%;
8240     display: flex;
8241     align-items: center;
8242     white-space: nowrap;
8243     padding: 5px;
8244 }
8245 .ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
8246     border-right: 1px solid rgba(255,255,255,.5);
8247 }
8248 .ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
8249     border-left: 1px solid rgba(255,255,255,.5);
8250 }
8251 .ideditor .map-footer-list li:empty {
8252     display: none;
8253 }
8254
8255 .ideditor .map-footer-list a.chip {
8256     padding: 1px 4px 1px 4px;
8257     border-radius: 2px;
8258     color: #eee;
8259 }
8260 .ideditor .map-footer-list a.chip .icon {
8261     width: 14px;
8262     height: 14px;
8263     margin-top: -2px;
8264 }
8265 .ideditor .map-footer-list a.chip span.count {
8266     margin: 0 3px;
8267 }
8268
8269 .ideditor .source-switch a.chip.live {
8270     background: #d32232;
8271     color: #fff;
8272 }
8273
8274 .ideditor .feature-warning a.chip {
8275     background: #1e90ff;
8276 }
8277
8278 .ideditor .issues-info a.chip.resolved-count {
8279     background: #15911E;
8280 }
8281 .ideditor .issues-info a.chip.warnings-count {
8282     background: #DF8500;
8283 }
8284 .ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
8285     margin-right: 5px;
8286 }
8287 .ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
8288     margin-left: 5px;
8289 }
8290
8291 .ideditor .user-list a:not(:last-child):after {
8292     content: ', ';
8293 }
8294
8295 .ideditor .api-status {
8296     text-align: right;
8297     padding: 1px 10px;
8298     color: #eee;
8299     flex: 1 1 auto;
8300 }
8301 .ideditor[dir='rtl'] .api-status {
8302     text-align: left;
8303 }
8304 .ideditor .api-status:empty {
8305     display: none;
8306 }
8307
8308 .ideditor .api-status.offline,
8309 .ideditor .api-status.readonly,
8310 .ideditor .api-status.error {
8311     background: #a22;
8312 }
8313
8314 .ideditor .api-status a {
8315     text-decoration: underline;
8316     color: #ccc;
8317     pointer-events: all;
8318 }
8319 .ideditor .api-status a:focus,
8320 .ideditor .api-status a:active {
8321     color: inherit;
8322 }
8323 @media (hover: hover) {
8324     .ideditor .api-status a:hover {
8325         color: inherit;
8326     }
8327 }
8328
8329 .ideditor .local-storage-full {
8330     display: block;
8331     width: 100%;
8332 }
8333
8334 /* Notification Badges
8335 ------------------------------------------------------- */
8336 /* For an icon (e.g. new version) */
8337 .ideditor .badge {
8338     display: inline-flex;
8339     background: #d32232;
8340     width: 21px;
8341     height: 21px;
8342     border-radius: 50%;
8343     align-items: center;
8344     justify-content: center;
8345 }
8346 .ideditor[dir='ltr'] .badge {
8347     margin-left: 6px;
8348 }
8349 .ideditor[dir='rtl'] .badge {
8350     margin-right: 6px;
8351 }
8352 .ideditor .badge .icon {
8353     vertical-align: baseline;
8354     width: 11px;
8355     height: 11px;
8356     color: #fff;
8357     flex: 0 0 auto;
8358 }
8359
8360 /* For text (e.g. upcoming events) */
8361 .ideditor .badge-text {
8362     display: inline-block;
8363     color: #fff;
8364     text-align: center;
8365     width: 16px;
8366     height: 16px;
8367     font-size: 10px;
8368     font-weight: bold;
8369     margin-left: 5px;
8370     background: #f00;
8371     border-radius: 9px;
8372 }
8373 .ideditor[dir='rtl'] .badge-text {
8374     margin-left: 0;
8375     margin-right: 5px;
8376 }
8377
8378
8379 /* Modals / Prompts
8380 ------------------------------------------------------- */
8381 .ideditor .modal {
8382     top: 5%;
8383     max-height: 90%;
8384     position: relative;
8385     border-radius: 3px;
8386     overflow: hidden;
8387     margin: auto;
8388     z-index: 50;
8389     width: 80%;
8390     min-width: 200px;
8391     max-width: 550px;
8392     display: flex;
8393     flex-direction: column;
8394 }
8395
8396 .ideditor .modal .content {
8397     overflow-x: hidden;
8398     overflow-y: auto;
8399 }
8400
8401 .ideditor .modal .loader {
8402     margin-bottom: 10px;
8403 }
8404 .ideditor .modal .description {
8405     text-align: center;
8406 }
8407
8408 .ideditor .shaded {
8409     z-index: 5000;
8410     position: absolute;
8411     top: 0;
8412     bottom: 0;
8413     left: 0;
8414     right: 0;
8415     overflow: auto;
8416 }
8417 .ideditor .shaded:before {
8418     content:'';
8419     background: rgba(0,0,0,0.5);
8420     position: absolute;
8421     left: 0px; right: 0px; top: 0px; bottom: 0px;
8422 }
8423
8424 .ideditor .modal-section {
8425     padding: 20px;
8426     border-bottom: 1px solid #ccc;
8427 }
8428 .ideditor .modal-section p:not(:last-of-type) {
8429     padding-bottom: 20px;
8430 }
8431 .ideditor .modal-section h4 {
8432     padding-bottom: 0;
8433 }
8434 .ideditor .modal-section.buttons {
8435     text-align: center;
8436 }
8437
8438 .ideditor .modal-section.buttons button {
8439     min-width: 130px;
8440 }
8441
8442 .ideditor .modal-section.buttons .action {
8443     display: inline-block;
8444     margin: 0 10px;
8445 }
8446
8447 .ideditor .save-section .buttons {
8448     display: flex;
8449     flex-wrap: wrap;
8450     justify-content: space-around;
8451 }
8452
8453 .ideditor .save-section .buttons .action,
8454 .ideditor .save-section .buttons .secondary-action {
8455     width: 45%;
8456     margin: 10px auto;
8457     text-align: center;
8458     vertical-align: middle;
8459 }
8460
8461 .ideditor .loading-modal {
8462     text-align: center;
8463 }
8464 .ideditor .modal-actions {
8465     display: flex;
8466 }
8467 .ideditor .modal-actions button {
8468     color: #7092ff;
8469     border-bottom: 1px solid #ccc;
8470     border-radius: 0;
8471     min-height: 160px;
8472     text-align: center;
8473     width: 100%;
8474 }
8475
8476 .ideditor .logo-small {
8477     height: 40px;
8478     width: 40px;
8479     margin: auto;
8480 }
8481
8482 .ideditor .logo {
8483     height: 100px;
8484     width: 100%;
8485     max-width: 100px;
8486     margin: auto;
8487 }
8488
8489 .ideditor .modal-actions > :first-child {
8490     border-right: 1px solid #ccc;
8491 }
8492
8493 .ideditor .modal-section:last-child {
8494     border-bottom: 0;
8495 }
8496
8497 /* Restore Modal
8498 ------------------------------------------------------- */
8499 .ideditor .modal-actions .logo-restore {
8500     color: #7092ff;
8501 }
8502 .ideditor .modal-actions .logo-reset {
8503     color: #e06c5e;
8504 }
8505
8506 /* Success Screen / Community Index
8507 ------------------------------------------------------- */
8508 .ideditor .save-success.body {
8509     overflow-y: scroll;
8510     overflow-x: hidden;
8511 }
8512
8513 .ideditor .save-success .link-out {
8514     margin: 0px 5px;
8515     white-space: nowrap;
8516 }
8517
8518 .ideditor .save-summary,
8519 .ideditor .save-supporting,
8520 .ideditor .save-communityLinks {
8521     padding: 0px 20px 15px 20px;
8522 }
8523
8524 .ideditor .save-supporting,
8525 .ideditor .save-communityLinks {
8526     border-top: 1px solid #ccc;
8527 }
8528
8529 .ideditor .save-success table,
8530 .ideditor .save-success p {
8531     margin-top: 15px;
8532 }
8533 .ideditor .save-success h3 {
8534     font-size: 14px;
8535     margin-top: 15px;
8536     line-height: 1.5;
8537     padding-bottom: 0;
8538 }
8539 .ideditor .save-success td {
8540     vertical-align: top;
8541 }
8542 .ideditor .save-success td.cell-icon {
8543     width: 40px;
8544 }
8545 .ideditor .save-success td.cell-detail {
8546     padding: 0 10px;
8547 }
8548 .ideditor .save-success td.community-detail {
8549     padding-bottom: 15px;
8550 }
8551 .ideditor .save-success .community-table h3 {
8552     margin: 0;
8553 }
8554
8555 .ideditor .summary-view-on-osm,
8556 .ideditor .support-the-map,
8557 .ideditor .community-name {
8558     font-size: 14px;
8559     font-weight: bold;
8560 }
8561 .ideditor .community-languages {
8562     margin-top: 5px;
8563     font-style: italic;
8564 }
8565 .ideditor .community-languages:only-child {
8566     margin-top: 0;
8567 }
8568
8569 .ideditor .community-detail a.hide-toggle,
8570 .ideditor .community-detail a:visited.hide-toggle {
8571     font-size: 12px;
8572     font-weight: normal;
8573     padding-bottom: 0;
8574 }
8575 .ideditor .community-detail .hide-toggle svg.icon.pre-text {
8576     width: 12px;
8577     height: 15px;
8578 }
8579
8580 .ideditor .community-events {
8581     margin-top: 5px;
8582 }
8583
8584 .ideditor .community-event,
8585 .ideditor .community-more {
8586     background-color: #efefef;
8587     padding: 8px;
8588     border-radius: 4px;
8589     margin-bottom: 5px;
8590 }
8591
8592 .ideditor .community-event-name {
8593     font-size: 14px;
8594     font-weight: bold;
8595 }
8596 .ideditor .community-event-when {
8597     font-weight: bold;
8598 }
8599
8600 .ideditor .community-missing {
8601     padding: 10px;
8602     text-align: center;
8603 }
8604
8605
8606 /* Splash Modal
8607 ------------------------------------------------------- */
8608 .ideditor .modal-actions .logo-walkthrough,
8609 .ideditor .modal-actions .logo-features {
8610     color: #7092ff;
8611 }
8612
8613 .ideditor .modal-splash .section-preferences-third-party {
8614     margin-top: 20px;
8615 }
8616
8617 .ideditor .modal-splash .section-preferences-third-party .privacy-link {
8618     display: none;
8619 }
8620
8621
8622 /* Shortcuts Modal
8623 ------------------------------------------------------- */
8624 .ideditor .modal-shortcuts {
8625     width: 90%;
8626     max-width: 1050px;
8627 }
8628
8629 .ideditor .modal-shortcuts .modal-section:last-child {
8630     padding: 10px 15px 20px 15px;
8631     min-height: 275px;
8632 }
8633
8634 .ideditor .modal-shortcuts .tabs-bar {
8635     padding-bottom: 5px;
8636     text-align: center;
8637 }
8638
8639 .ideditor .modal-shortcuts a.tab {
8640     display: inline-block;
8641     padding: 5px 10px;
8642     margin: 0 5px;
8643     cursor: pointer;
8644     color: #666;
8645     font-size: 16px;
8646     font-weight: bold;
8647 }
8648 .ideditor .modal-shortcuts a.tab.active {
8649     color: #7092ff;
8650     border-bottom: 2px solid;
8651 }
8652 .ideditor .modal-shortcuts a.tab:focus,
8653 .ideditor .modal-shortcuts a.tab:active {
8654     color: #597be7;
8655     background-color: #efefef;
8656 }
8657 @media (hover: hover) {
8658     .ideditor .modal-shortcuts a.tab:hover {
8659         color: #597be7;
8660         background-color: #efefef;
8661     }
8662 }
8663
8664 .ideditor .modal-shortcuts .shortcut-tab {
8665     display: flex;
8666     flex-flow: row wrap;
8667     justify-content: space-around;
8668 }
8669
8670 .ideditor .modal-shortcuts .shortcut-column {
8671     width: auto;
8672 }
8673
8674 .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
8675     flex: 1 1 100%;
8676     width: 100%;
8677 }
8678
8679 .ideditor .modal-shortcuts td {
8680     padding-bottom: 5px;
8681 }
8682
8683 .ideditor .modal-shortcuts .shortcut-section {
8684     padding: 20px 0 10px 0;
8685 }
8686
8687 .ideditor .modal-shortcuts .shortcut-keys {
8688     padding: 0 10px;
8689     color: #767676;
8690     text-align: right;
8691     white-space: nowrap;
8692 }
8693 .ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
8694     text-align: left;
8695 }
8696
8697 .ideditor .modal-shortcuts .shortcut-keys kbd {
8698     color: #555;
8699 }
8700
8701 .ideditor .modal-shortcuts .shortcut-keys .gesture {
8702     color: #333;
8703     padding: 3px;
8704 }
8705
8706
8707 /* Settings Modals
8708 ------------------------------------------------------- */
8709 .ideditor .settings-modal textarea {
8710     height: 70px;
8711     width: 100%;
8712 }
8713
8714 .ideditor .settings-custom-background .instructions-template {
8715     margin-bottom: 20px;
8716 }
8717 .ideditor .settings-custom-background .instructions-template p {
8718     margin-bottom: 0;
8719 }
8720 .ideditor .settings-custom-background .instructions-template ul {
8721     padding-bottom: 20px;
8722 }
8723 .ideditor .settings-custom-background .instructions-template ul li {
8724     list-style-type: disc;
8725     list-style-position: inside;
8726 }
8727
8728 .ideditor .settings-custom-data .instructions-url {
8729     margin-bottom: 10px;
8730 }
8731 .ideditor .settings-custom-data .field-file,
8732 .ideditor .settings-custom-data .instructions-template {
8733     margin-bottom: 20px;
8734 }
8735
8736
8737 /* Save Mode
8738 ------------------------------------------------------- */
8739 .ideditor a.user-info {
8740     display: inline-block;
8741 }
8742
8743 .ideditor .commit-form {
8744     margin-bottom: 0;
8745 }
8746
8747 .ideditor .user-info img {
8748     float: left;
8749 }
8750
8751 .ideditor .note-save .field-warning,
8752 .ideditor .field-warning {
8753     background: #ffb;
8754     border: 1px solid #ccc;
8755     border-radius: 4px;
8756     padding: 10px;
8757 }
8758
8759 .ideditor .note-save .field-warning:empty,
8760 .ideditor .field-warning:empty {
8761     display: none;
8762 }
8763
8764 .ideditor .changeset-info,
8765 .ideditor .request-review,
8766 .ideditor .commit-info {
8767     margin-bottom: 10px;
8768 }
8769
8770 .ideditor .field-warning {
8771     margin-top: 10px;
8772 }
8773
8774 .ideditor .request-review label {
8775     cursor: pointer;
8776 }
8777
8778 .ideditor .changeset-list {
8779     border: 1px solid #ccc;
8780     border-radius: 4px;
8781     background: #fff;
8782     margin-bottom: 10px;
8783     overflow: hidden;
8784 }
8785
8786 .ideditor .changeset-list li button {
8787     padding: 5px 10px;
8788     width: 100%;
8789     border-radius: 0;
8790     text-align: initial;
8791 }
8792 .ideditor .changeset-list li {
8793     border-top: 1px solid #ccc;
8794 }
8795 .ideditor .changeset-list li:first-child {
8796     border-top: 0;
8797 }
8798 .ideditor .changeset-list .alert {
8799     opacity: 0.5;
8800 }
8801
8802
8803 /* Conflict resolution
8804 ------------------------------------------------------- */
8805 .ideditor .conflicts-help {
8806     padding: 20px;
8807     background-color: #ffffbb;
8808     border-bottom: 1px solid #ccc;
8809 }
8810
8811 .ideditor .conflicts-buttons {
8812     padding: 20px;
8813 }
8814
8815 .ideditor button.conflicts-button {
8816     float: left;
8817 }
8818
8819 .ideditor .conflict-container {
8820     border-bottom: 1px solid #ccc;
8821 }
8822
8823 .ideditor .conflict-description {
8824     padding: 5px 20px;
8825     display: block;
8826 }
8827
8828 .ideditor .conflicts-done {
8829     padding: 20px 20px 0 20px;
8830 }
8831
8832 .ideditor .conflict-detail-container {
8833     padding: 10px 20px;
8834 }
8835
8836 .ideditor .conflict-count {
8837     padding: 10px 20px;
8838 }
8839
8840 .ideditor .conflict-choices {
8841     margin-top: 10px;
8842 }
8843
8844 .ideditor .conflict-nav-buttons {
8845     padding: 10px 0 20px 0;
8846 }
8847
8848 .ideditor .conflict-nav-button {
8849     height: 30px;
8850 }
8851
8852
8853 /* Notices (Zoom in to Edit)
8854 ------------------------------------------------------- */
8855 .ideditor .notice {
8856     position: absolute;
8857     top: 15px;
8858     left: 0;
8859     right: 0;
8860     text-align: center;
8861 }
8862
8863 .ideditor .notice .zoom-to {
8864     margin: auto;
8865     width: 300px;
8866     padding: 20px 5px;
8867     font-size: 150%;
8868     border-radius: 8px;
8869     font-weight: bold;
8870 }
8871
8872 .ideditor .notice .zoom-to:focus,
8873 .ideditor .notice .zoom-to:active {
8874     background: rgba(0,0,0,0.6);
8875 }
8876 @media (hover: hover) {
8877     .ideditor .notice .zoom-to:hover {
8878         background: rgba(0,0,0,0.6);
8879     }
8880 }
8881
8882 .ideditor .notice .zoom-to .icon {
8883     width: 30px;
8884     height: 30px;
8885     vertical-align: middle;
8886     margin-right: 10px;
8887 }
8888 .ideditor[dir='rtl'] .notice .zoom-to .icon {
8889     margin-left: 10px;
8890     margin-right: 0;
8891 }
8892
8893
8894 /* Tooltips
8895 ------------------------------------------------------- */
8896 .ideditor .popover {
8897     position: absolute;
8898     display: none;
8899 }
8900 .ideditor .tooltip {
8901     color: #333;
8902     font-size: 12px;
8903     white-space: initial;
8904 }
8905 .ideditor .tooltip:not(.curtain-tooltip) {
8906     pointer-events: none;
8907 }
8908 .ideditor .popover.in {
8909     z-index: 5000;
8910     height: auto;
8911     display: block;
8912 }
8913 .ideditor .tooltip.in {
8914     opacity: 0.95;
8915 }
8916 .ideditor .popover.top {
8917     margin-top: -4px;
8918 }
8919 .ideditor .popover.right {
8920     margin-left: 4px;
8921 }
8922 .ideditor .popover.bottom {
8923     margin-top: 4px;
8924 }
8925 .ideditor .popover.left {
8926     margin-left: -4px;
8927 }
8928 .ideditor .popover.arrowed.top {
8929     margin-top: -10px;
8930 }
8931 .ideditor .popover.arrowed.right {
8932     margin-left: 10px;
8933 }
8934 .ideditor .popover.arrowed.bottom {
8935     margin-top: 10px;
8936 }
8937 .ideditor .popover.arrowed.left {
8938     margin-left: -10px;
8939 }
8940 .ideditor .bar-button .tooltip.arrowed.bottom {
8941     margin-top: 20px;
8942 }
8943 .ideditor .tooltip.top {
8944     text-align: center;
8945 }
8946 .ideditor .tooltip.right {
8947     text-align: left;
8948 }
8949 .ideditor .tooltip.bottom {
8950     text-align: center;
8951 }
8952 .ideditor .tooltip.left {
8953     text-align: right;
8954 }
8955
8956 .ideditor .popover-inner {
8957     border-radius: inherit;
8958 }
8959
8960 .ideditor .tooltip .popover-inner {
8961     border-radius: 4px;
8962     max-width: 200px;
8963     min-width: 80px;
8964     padding: 10px;
8965     font-weight: normal;
8966     background-color: #fff;
8967 }
8968
8969 .ideditor .popover-arrow {
8970     position: absolute;
8971     width: 0;
8972     height: 0;
8973     border-color: transparent;
8974     border-style: solid;
8975 }
8976 .ideditor .popover.top .popover-arrow {
8977     bottom: -5px;
8978     left: 50%;
8979     margin-left: -5px;
8980     border-top-color: #fff;
8981     border-width: 5px 5px 0;
8982 }
8983 .ideditor .popover.right .popover-arrow {
8984     top: 50%;
8985     left: -5px;
8986     margin-top: -5px;
8987     border-right-color: #fff;
8988     border-width: 5px 5px 5px 0;
8989 }
8990 .ideditor .popover.left .popover-arrow {
8991     top: 50%;
8992     right: -5px;
8993     margin-top: -5px;
8994     border-left-color: #fff;
8995     border-width: 5px 0 5px 5px;
8996 }
8997 .ideditor .popover.bottom .popover-arrow {
8998     top: -5px;
8999     left: 50%;
9000     margin-left: -5px;
9001     border-bottom-color: #fff;
9002     border-width: 0 5px 5px;
9003 }
9004 .ideditor .popover:not(.arrowed) .popover-arrow {
9005     display: none;
9006 }
9007
9008 .ideditor .tooltip-heading {
9009     font-weight: bold;
9010     background: #f6f6f6;
9011     padding: 10px;
9012     margin: -10px -10px 10px -10px;
9013     border-radius: 3px 3px 0 0;
9014     font-size: 14px;
9015 }
9016
9017 .ideditor .keyhint-wrap {
9018     background: #f6f6f6;
9019     padding: 10px;
9020     margin: 10px -10px -10px -10px;
9021     border-radius: 0 0 3px 3px;
9022 }
9023 .ideditor .popover-inner .shortcut {
9024     font-weight: bold;
9025     margin-left: 5px;
9026 }
9027
9028 .ideditor[dir='rtl'] .popover-inner .shortcut {
9029     margin-left: 0;
9030     margin-right: 5px;
9031 }
9032
9033 /* dark tooltips for sidebar / panels */
9034 .ideditor .tooltip.dark.top .popover-arrow,
9035 .ideditor .map-pane .tooltip.top .popover-arrow,
9036 .ideditor .sidebar .tooltip.top .popover-arrow,
9037 .ideditor .modal .tooltip.top .popover-arrow {
9038     border-top-color: #000;
9039 }
9040 .ideditor .tooltip.dark.bottom .popover-arrow,
9041 .ideditor .map-pane .tooltip.bottom .popover-arrow,
9042 .ideditor .sidebar .tooltip.bottom .popover-arrow,
9043 .ideditor .modal .tooltip.bottom .popover-arrow {
9044     border-bottom-color: #000;
9045 }
9046 .ideditor .tooltip.dark.left .popover-arrow,
9047 .ideditor .map-pane .tooltip.left .popover-arrow,
9048 .ideditor .sidebar .tooltip.left .popover-arrow,
9049 .ideditor .modal .tooltip.left .popover-arrow {
9050     border-left-color: #000;
9051 }
9052 .ideditor .tooltip.dark.right .popover-arrow,
9053 .ideditor .map-pane .tooltip.right .popover-arrow,
9054 .ideditor .sidebar .tooltip.right .popover-arrow,
9055 .ideditor .modal .tooltip.right .popover-arrow {
9056     border-right-color: #000;
9057 }
9058 .ideditor .tooltip.dark .popover-inner,
9059 .ideditor .tooltip.dark .tooltip-heading,
9060 .ideditor .tooltip.dark .keyhint-wrap,
9061 .ideditor .map-pane .popover-inner,
9062 .ideditor .map-pane .tooltip-heading,
9063 .ideditor .map-pane .keyhint-wrap,
9064 .ideditor .sidebar .popover-inner,
9065 .ideditor .sidebar .tooltip-heading,
9066 .ideditor .sidebar .keyhint-wrap,
9067 .ideditor .modal .popover-inner {
9068     background: #000;
9069     color: #ccc;
9070 }
9071 .ideditor .tooltip.dark kbd,
9072 .ideditor .map-pane .tooltip kbd,
9073 .ideditor .sidebar .tooltip kbd {
9074     background-color: #666;
9075     border: solid 1px #444;
9076     border-bottom-color: #333;
9077     box-shadow: inset 0 -1px 0 #333;
9078     color: #eee;
9079 }
9080
9081 /* Exceptions for tooltip layouts */
9082
9083 /* commit warning tooltips need to be closer */
9084 .ideditor .warning-section .tooltip.top {
9085     margin-top: -5px;
9086 }
9087
9088 .ideditor li:first-of-type .badge .tooltip,
9089 .ideditor li.hide + li.version .badge .tooltip {
9090     left: auto !important;
9091     right: 5px !important;
9092 }
9093 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
9094 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
9095     left: 5px !important;
9096     right: auto !important;
9097 }
9098 .ideditor li:first-of-type .badge .tooltip .popover-arrow,
9099 .ideditor li.hide + li.version .badge .tooltip .popover-arrow {
9100     right: 15px !important;
9101     left: auto !important;
9102 }
9103 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
9104 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
9105     left: 15px !important;
9106     right: auto !important;
9107 }
9108
9109
9110 /* Contextual Edit Menu
9111 ------------------------------------------------------- */
9112 .ideditor .edit-menu {
9113     position: absolute;
9114     display: flex;
9115     flex-direction: column;
9116     background: #fff;
9117     border-radius: 4px;
9118     /* padding is set in edit_menu.js */
9119 }
9120
9121 .ideditor .edit-menu .tooltip {
9122     width: 200px; /* see also edit_menu.js */
9123 }
9124
9125 .ideditor .edit-menu-item {
9126     display: flex;
9127     align-items: center;
9128     border-radius: 0;
9129     padding: 0 12px;
9130     /* height is set in edit_menu.js */
9131 }
9132 .ideditor .edit-menu-item .label {
9133     max-width: 120px;
9134     text-align: initial;
9135     line-height: 1.1em;
9136     font-weight: bold;
9137 }
9138 .ideditor[dir='ltr'] .edit-menu-item .label {
9139     margin-left: 8px;
9140 }
9141 .ideditor[dir='rtl'] .edit-menu-item .label {
9142     margin-right: 8px;
9143 }
9144
9145 .ideditor .edit-menu-item use {
9146     pointer-events: none;
9147 }
9148
9149 /* Lasso
9150 ------------------------------------------------------- */
9151 .ideditor .lasso-path {
9152     fill-opacity: 0.3;
9153     stroke: #fff;
9154     stroke-width: 1;
9155     stroke-opacity: 1;
9156     stroke-dasharray: 5, 5;
9157 }
9158
9159
9160 /* Scrollbars
9161  ----------------------------------------------------- */
9162 .ideditor ::-webkit-scrollbar {
9163     height: 10px;
9164     overflow: visible;
9165     width: 10px;
9166     border-left: 1px solid #DDD;
9167 }
9168
9169 .ideditor ::-webkit-scrollbar-track {
9170     background-clip: padding-box;
9171     border: solid transparent;
9172     border-width: 0;
9173 }
9174
9175 .ideditor ::-webkit-scrollbar-thumb {
9176     background-color: rgba(0,0,0,.2);
9177     background-clip: padding-box;
9178     border: solid transparent;
9179     border-width: 3px 3px 3px 4px;
9180     border-radius: 6px;
9181 }
9182 .ideditor ::-webkit-scrollbar-track:active {
9183     background-color: rgba(0,0,0,.05);
9184 }
9185 @media (hover: hover) {
9186     .ideditor ::-webkit-scrollbar-track:hover {
9187         background-color: rgba(0,0,0,.05);
9188     }
9189 }
9190 body {
9191     scrollbar-width: 10px;
9192 }
9193
9194
9195 /* Intro walkthrough
9196  ----------------------------------------------------- */
9197 .ideditor .curtain {
9198     z-index: 1000;
9199     pointer-events: none;
9200     position: absolute;
9201 }
9202
9203 .ideditor .curtain-darkness {
9204     pointer-events: all;
9205     fill-opacity: 0.7;
9206     fill: #222;
9207     fill-rule: evenodd;
9208 }
9209
9210 .ideditor .intro-nav-wrap {
9211     display: flex;
9212     flex-direction: row;
9213     position: absolute;
9214     left: 0;
9215     right: 0;
9216     bottom: 30px;
9217     padding: 10px;
9218     z-index: 1001;
9219 }
9220
9221 .ideditor .intro-nav-wrap .intro-nav-wrap-logo {
9222     flex: 0 0 auto;
9223     height: 40px;
9224     width: 40px;
9225     color: #fff;
9226     margin: 0px 20px;
9227     vertical-align: middle;
9228 }
9229
9230 .ideditor .intro-nav-wrap .joined {
9231     flex: 1 1 auto;
9232     display: flex;
9233     flex-direction: row;
9234 }
9235
9236 .ideditor .intro-nav-wrap button.chapter {
9237     flex: 1 1 100%;
9238     padding: 0px 5px;
9239     font-weight: bold;
9240 }
9241
9242 .ideditor .intro-nav-wrap button.chapter.next {
9243     animation-duration: 1s;
9244     animation-name: pulse;
9245     animation-iteration-count: infinite;
9246     animation-direction: alternate;
9247 }
9248 @keyframes pulse {
9249     from  { background: #7092ff; }
9250     to    { background: #c6d4ff; }
9251 }
9252
9253 .ideditor .intro-nav-wrap button.chapter.finished {
9254     background: #8cd05f;
9255 }
9256
9257 .ideditor .intro-nav-wrap button.chapter .status {
9258     display: none;
9259 }
9260
9261 .ideditor .intro-nav-wrap button.chapter.finished .status {
9262     display: inline-block;
9263 }
9264
9265 .ideditor .curtain-tooltip {
9266     z-index: 1002;
9267 }
9268
9269 .ideditor .curtain-tooltip.tooltip.in {
9270     opacity: 1;
9271 }
9272 .ideditor .curtain-tooltip.tooltip {
9273     text-align: left;
9274 }
9275 .ideditor[dir='rtl'] .curtain-tooltip.tooltip {
9276     text-align: right;
9277 }
9278
9279 .ideditor .curtain-tooltip .popover-inner {
9280     font-size: 15px;
9281     position: relative;
9282     padding: 20px;
9283 }
9284
9285 .ideditor .curtain-tooltip .popover-inner .button-section,
9286 .ideditor .curtain-tooltip .popover-inner .instruction {
9287     font-weight: bold;
9288     display: block;
9289     border-top: 1px solid #ccc;
9290     margin-top: 10px;
9291     margin-left: -20px;
9292     margin-right: -20px;
9293     padding: 10px 20px 0 20px;
9294 }
9295
9296 .ideditor .curtain-tooltip .popover-inner .button-section button {
9297     width: 66.6666%;
9298 }
9299
9300 .ideditor .curtain-tooltip .popover-inner .instruction:only-child {
9301     border: 0;
9302     padding: 0;
9303     margin: 0;
9304 }
9305
9306 .ideditor .curtain-tooltip .popover-inner .icon.pre-text {
9307     vertical-align: text-top;
9308     margin-right: 0;
9309     margin-left: 0;
9310     display: inline-block;
9311 }
9312
9313 .ideditor .curtain-tooltip.intro-points-describe,
9314 .ideditor .curtain-tooltip.intro-lines-name_road {
9315     top: 133px !important;
9316 }
9317
9318 .ideditor .tooltip-illustration {
9319     height: 80px;
9320     width: 200px;
9321     margin-left: -20px;
9322     margin-top: -10px;
9323 }
9324 .ideditor[dir='rtl'] .tooltip-illustration {
9325     margin-left: auto;
9326     margin-right: -20px;
9327 }
9328
9329 .ideditor .curtain-tooltip.intro-mouse {
9330     -webkit-user-select: none;
9331        -moz-user-select: none;
9332             user-select: none;
9333 }
9334
9335 .ideditor .curtain-tooltip.intro-mouse .counter {
9336     position: absolute;
9337     display: block;
9338     top: 50px;
9339     width: 100%;
9340     text-align: center;
9341     font-weight: bold;
9342     font-size: 14px;
9343     z-index: 1003;
9344 }
9345
9346 .ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
9347     fill: rgba(112, 146, 255, 0);
9348     color: rgba(112, 146, 255, 0);
9349 }
9350 .ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
9351     fill: rgba(112, 146, 255, 1);
9352 }
9353 .ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
9354     color: rgba(112, 146, 255, 1);
9355 }
9356
9357 .ideditor .huge-modal-button {
9358     width: 100%;
9359     padding: 20px;
9360 }
9361
9362 .ideditor .huge-modal-button .illustration {
9363     height: 100px;
9364     width: 100px;
9365     color: #7092ff;
9366 }