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