vendor/assets/iD/iD.css.erb

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