vendor/assets/iD/iD.css.erb

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