vendor/assets/iD/iD.css.erb

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