vendor/assets/iD/iD.css.erb

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