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