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