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