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