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, Cycleway
4984 ------------------------------------------------------- */
4985 .ideditor .form-field-input-access,
4986 .ideditor .form-field-input-cycleway {
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: 100px;
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
5862 /* Field Help
5863 ------------------------------------------------------- */
5864 .ideditor .field-help-body {
5865     display: block;
5866     position: absolute;
5867     top: 0;
5868     left: 20px;
5869     right: 20px;
5870     margin: 5px;
5871     padding: 8px;
5872     border: 1px solid #ccc;
5873     border-top: 0;
5874     border-radius: 0 0 4px 4px;
5875     z-index: 20;
5876     background: rgba(255,255,255,0.95);
5877     -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5878             box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5879 }
5880
5881 .ideditor .field-help-title h2 {
5882     padding: 10px;
5883     margin-bottom: 0px;
5884     font-size: 17px;
5885 }
5886 .ideditor .field-help-title button {
5887     width: 45px;
5888     height: 55px;
5889     border-radius: 0;
5890 }
5891
5892 .ideditor .field-help-nav {
5893     font-size: 13px;
5894     font-weight: bold;
5895     margin-bottom: 10px;
5896 }
5897 .ideditor .field-help-nav-item {
5898     display: inline-block;
5899     padding: 5px 10px;
5900     cursor: pointer;
5901     color: #666;
5902 }
5903 .ideditor .field-help-nav-item.active {
5904     color: #7092ff;
5905     border-bottom: 2px solid;
5906 }
5907 .ideditor .field-help-nav-item:active,
5908 .ideditor .field-help-nav-item:focus {
5909     color: #597be7;
5910     background-color: #efefef;
5911 }
5912 @media (hover: hover) {
5913     .ideditor .field-help-nav-item:hover {
5914         color: #597be7;
5915         background-color: #efefef;
5916     }
5917 }
5918
5919 .ideditor .field-help-content {
5920     padding: 10px;
5921     overflow-y: auto;
5922     overflow-x: hidden;
5923 }
5924 .ideditor .field-help-content h3 {
5925     font-size: 12px;
5926     margin-bottom: 5px;
5927 }
5928 .ideditor .field-help-content p {
5929     margin-bottom: 15px;
5930 }
5931 .ideditor .field-help-content ul li {
5932     list-style: inside;
5933     margin-bottom: 5px;
5934 }
5935
5936 .ideditor .field-help-content .field-help-image {
5937     width: 100%;
5938     margin-bottom: 15px;
5939 }
5940
5941 .ideditor .field-help-content svg.turn {
5942     width: 40px;
5943     height: 20px;
5944 }
5945 .ideditor .field-help-content svg.shadow {
5946     opacity: 0.7;
5947     width: 60px;
5948     height: 20px;
5949 }
5950 .ideditor .field-help-content svg.from {
5951     color: #777;
5952 }
5953 .ideditor .field-help-content svg.allow {
5954     color: #5b3;
5955 }
5956 .ideditor .field-help-content svg.restrict {
5957     color: #d53;
5958 }
5959 .ideditor .field-help-content svg.only {
5960     color: #68f;
5961 }
5962
5963 .ideditor .field-help-content p.from_shadow,
5964 .ideditor .field-help-content p.allow_shadow,
5965 .ideditor .field-help-content p.restrict_shadow,
5966 .ideditor .field-help-content p.allow_turn,
5967 .ideditor .field-help-content p.restrict_turn {
5968     margin-bottom: 5px;
5969 }
5970
5971
5972 /* More Fields dropdown
5973 ------------------------------------------------------- */
5974 .ideditor .more-fields {
5975     margin-top: 10px;
5976     font-weight: bold;
5977 }
5978
5979 .ideditor .more-fields label {
5980     display: -webkit-box;
5981     display: -ms-flexbox;
5982     display: flex;
5983     -webkit-box-orient: horizontal;
5984     -webkit-box-direction: normal;
5985         -ms-flex-flow: row nowrap;
5986             flex-flow: row nowrap;
5987     -webkit-box-pack: justify;
5988         -ms-flex-pack: justify;
5989             justify-content: space-between;
5990     -webkit-box-align: center;
5991         -ms-flex-align: center;
5992             align-items: center;
5993 }
5994
5995 .ideditor .more-fields input {
5996     margin-left: 10px;
5997     -webkit-box-flex: 1;
5998         -ms-flex: 1 1 auto;
5999             flex: 1 1 auto;
6000 }
6001 .ideditor[dir='rtl'] .more-fields input {
6002     margin-left: auto;
6003     margin-right: 10px;
6004 }
6005
6006 .ideditor .form-field-input-wrap .label {
6007     background: #f6f6f6;
6008     padding: 5px 10px;
6009 }
6010
6011
6012 /* Raw Tag Editor
6013 ------------------------------------------------------- */
6014 .ideditor .raw-tag-options {
6015     display: -webkit-box;
6016     display: -ms-flexbox;
6017     display: flex;
6018     -webkit-box-orient: horizontal;
6019     -webkit-box-direction: normal;
6020         -ms-flex-flow: row nowrap;
6021             flex-flow: row nowrap;
6022     -webkit-box-pack: end;
6023         -ms-flex-pack: end;
6024             justify-content: flex-end;
6025     margin-top: -28px;
6026 }
6027 .ideditor button.raw-tag-option {
6028     -webkit-box-flex: 0;
6029         -ms-flex: 0 0 auto;
6030             flex: 0 0 auto;
6031     padding: 3px;
6032     background: #aaa;
6033     color: #eee;
6034     margin: 0 3px;
6035 }
6036 .ideditor button.raw-tag-option:focus,
6037 .ideditor button.raw-tag-option.active {
6038     color: #fff;
6039     background: #597be7;
6040 }
6041 @media (hover: hover) {
6042     .ideditor button.raw-tag-option:hover {
6043         color: #fff;
6044         background: #597be7;
6045     }
6046 }
6047 .ideditor button.raw-tag-option.selected {
6048     color: #fff;
6049     background: #7092ff;
6050 }
6051 .ideditor button.raw-tag-option svg.icon {
6052     width: 14px;
6053     height: 14px;
6054     display: block;
6055 }
6056 .ideditor[dir='ltr'] button.raw-tag-option-list {
6057     -webkit-transform: scaleX(-1);
6058         -ms-transform: scaleX(-1);
6059             transform: scaleX(-1);
6060     -webkit-filter: FlipH;
6061             filter: FlipH;
6062     -ms-filter: "FlipH";
6063 }
6064
6065
6066 .ideditor .tag-text {
6067     width: 100%;
6068     height: 100%;
6069     min-height: 32px;
6070     font-family: monospace;
6071     white-space: pre;
6072 }
6073
6074 .ideditor .tag-text,
6075 .ideditor .tag-list {
6076     margin-top: 10px;
6077 }
6078 .ideditor .tag-row {
6079     width: 100%;
6080     position: relative;
6081 }
6082 .ideditor .tag-row .inner-wrap {
6083     display: -webkit-box;
6084     display: -ms-flexbox;
6085     display: flex;
6086     -webkit-box-orient: horizontal;
6087     -webkit-box-direction: normal;
6088         -ms-flex-flow: row nowrap;
6089             flex-flow: row nowrap;
6090     width: 100%;
6091     position: relative;
6092 }
6093 .ideditor .tag-row .key-wrap,
6094 .ideditor .tag-row .value-wrap {
6095     -webkit-box-flex: 1;
6096         -ms-flex: 1 1 50%;
6097             flex: 1 1 50%;
6098 }
6099
6100 .ideditor .tag-text.readonly,
6101 .ideditor .tag-row.readonly,
6102 .ideditor .tag-row.readonly input.key,
6103 .ideditor .tag-row.readonly input.value,
6104 .ideditor .tag-row.readonly button.remove {
6105     color: #777;
6106     background-color: #eee;
6107     cursor: not-allowed;
6108 }
6109
6110 .ideditor .tag-row input {
6111     border: 0;
6112     border-radius: 0;
6113     border-bottom: 1px solid #ccc;
6114     border-left: 1px solid #ccc;
6115     width: 100%;
6116 }
6117 .ideditor[dir='rtl'] .tag-row input {
6118     border-left: none;
6119     border-right: 1px solid #ccc;
6120 }
6121
6122
6123 .ideditor .tag-row input.key {
6124     font-weight: bold;
6125     background-color: #f6f6f6;
6126 }
6127
6128 .ideditor .tag-row input.value {
6129     border-right: 1px solid #ccc;
6130 }
6131 .ideditor[dir='rtl'] .tag-row input.value {
6132     border-left: 1px solid #ccc;
6133 }
6134
6135 .ideditor .tag-row:first-child input.key {
6136     border-top: 1px solid #ccc;
6137     border-top-left-radius: 4px;
6138 }
6139 .ideditor[dir='rtl'] .tag-row:first-child input.key {
6140     border-top-left-radius: 0;
6141     border-top-right-radius: 4px;
6142 }
6143
6144 .ideditor .tag-row:first-child input.value {
6145     border-top: 1px solid #ccc;
6146 }
6147 .ideditor .tag-row button {
6148     -webkit-box-flex: 0;
6149         -ms-flex: 0 0 auto;
6150             flex: 0 0 auto;
6151     width: 32px;
6152     border: 1px solid #ccc;
6153     border-top-width: 0;
6154     border-left-width: 0;
6155 }
6156 .ideditor[dir='rtl'] .tag-row button {
6157     border-left-width: 1px;
6158     border-right-width: 0;
6159 }
6160
6161 .ideditor .tag-row button:active,
6162 .ideditor .tag-row button:focus {
6163     background: #f1f1f1;
6164 }
6165 @media (hover: hover) {
6166     .ideditor .tag-row button:hover {
6167         background: #f1f1f1;
6168     }
6169 }
6170 .ideditor .tag-row button .icon {
6171     opacity: .5;
6172 }
6173 .ideditor .tag-row:first-child button {
6174     border-top-width: 1px;
6175 }
6176
6177 .ideditor .tag-row:first-child .tag-reference-button {
6178     border-top-right-radius: 4px;
6179 }
6180 .ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
6181     border-top-left-radius: 4px;
6182     border-top-right-radius: 0;
6183 }
6184
6185 .ideditor .tag-row:last-child .tag-reference-button {
6186     border-bottom-right-radius: 4px;
6187 }
6188 .ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
6189     border-bottom-left-radius: 4px;
6190     border-bottom-right-radius: 0;
6191 }
6192
6193 .ideditor .tag-row .tag-reference-button {
6194     border-radius: 0;
6195 }
6196 .ideditor[dir='rtl'] .tag-row .tag-reference-button {
6197     border-left-width: 1px;
6198     border-right-width: 0;
6199 }
6200
6201 /* Tag reference */
6202 .ideditor .tag-reference-loading {
6203     background-color: #f5f5f5;
6204 }
6205 .ideditor .tag-reference-loading .icon {
6206     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
6207     background-position: 0 0;
6208 }
6209
6210 .ideditor .tag-reference-body {
6211     -webkit-box-flex: 1;
6212         -ms-flex: 1 1 auto;
6213             flex: 1 1 auto;
6214     width: 100%;
6215     overflow: hidden;
6216     display: none;
6217     padding-top: 10px;
6218 }
6219 .ideditor .tag-reference-body.expanded {
6220     padding-bottom: 10px;
6221     display: inline-block;
6222 }
6223 .ideditor .tag-reference-description {
6224
6225 }
6226 .ideditor .tag-reference-link {
6227     display: block;
6228 }
6229
6230 .ideditor img.tag-reference-wiki-image {
6231     float: right;
6232     width: 33.3333%;
6233     border-radius: 4px;
6234     margin: 0 0 0 5px;
6235 }
6236 .ideditor[dir='rtl'] img.tag-reference-wiki-image {
6237     float: left;
6238     margin: 0 5px 0 0;
6239 }
6240
6241 .ideditor .preset-list .tag-reference-body {
6242     position: relative;
6243     width: 100%;
6244 }
6245 .ideditor .raw-tag-editor .tag-reference-body {
6246     width: 100%;
6247 }
6248 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
6249     background: #f6f6f6;
6250     color: #333;
6251 }
6252 .ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
6253     border-bottom: 1px solid #ccc;
6254 }
6255 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
6256     border-top: 1px solid #ccc;
6257 }
6258
6259
6260 /* Raw Member / Membership Editor
6261 ------------------------------------------------------- */
6262 .ideditor .section-raw-member-editor .member-list:empty,
6263 .ideditor .section-raw-membership-editor .member-list:empty {
6264     display: none;
6265 }
6266
6267 .ideditor .section-raw-member-editor .member-list,
6268 .ideditor .section-raw-membership-editor .member-list {
6269     position: relative; /* required for drag-and-drop */
6270     padding-top: 5px;
6271 }
6272 .ideditor .section-raw-member-editor .member-list li,
6273 .ideditor .section-raw-membership-editor .member-list li {
6274     position: relative;
6275     border-radius: 4px;
6276     margin: 0;
6277     padding-bottom: 10px;
6278 }
6279 .ideditor .section-raw-member-editor .member-row .member-entity-name,
6280 .ideditor .section-raw-membership-editor .member-row .member-entity-name {
6281     font-weight: normal;
6282     padding-left: 10px;
6283 }
6284
6285 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
6286 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
6287     padding-left:0;
6288     padding-right: 10px;
6289 }
6290
6291 .ideditor .form-field-input-member > input.member-role {
6292     border-radius: 0 0 4px 4px;
6293 }
6294
6295 .ideditor .member-row-new .member-entity-input {
6296     -webkit-box-flex: 1;
6297         -ms-flex: 1 1 100%;
6298             flex: 1 1 100%;
6299     border-radius: 4px 4px 0 0;
6300     border: 0;
6301 }
6302
6303 .ideditor .section-raw-member-editor .member-row.dragging {
6304     opacity: 0.75;
6305     z-index: 3000;
6306     /*
6307     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
6308     */
6309 }
6310
6311 /* add tag, add relation buttons */
6312 .ideditor .add-row {
6313     display: -webkit-box;
6314     display: -ms-flexbox;
6315     display: flex;
6316     width: 100%;
6317     -webkit-box-orient: horizontal;
6318     -webkit-box-direction: normal;
6319         -ms-flex-flow: row nowrap;
6320             flex-flow: row nowrap;
6321 }
6322 .ideditor .add-row .add-tag,
6323 .ideditor .add-row .add-relation,
6324 .ideditor .add-row .space-value {
6325     -webkit-box-flex: 1;
6326         -ms-flex: 1 1 50%;
6327             flex: 1 1 50%;
6328 }
6329 .ideditor .add-row .space-buttons {
6330     -webkit-box-flex: 0;
6331         -ms-flex: 0 0 62px;
6332             flex: 0 0 62px;
6333 }
6334 .ideditor .add-row button {
6335     padding: 5px;
6336     background: rgba(0,0,0,.5);
6337 }
6338 .ideditor .add-row button:focus,
6339 .ideditor .add-row button:active {
6340     background: rgba(0,0,0,.8);
6341 }
6342 @media (hover: hover) {
6343     .ideditor .add-row button:hover {
6344         background: rgba(0,0,0,.8);
6345     }
6346 }
6347
6348 .ideditor .add-tag {
6349     border-radius: 0 0 4px 4px;
6350 }
6351 .ideditor .add-relation {
6352     margin-top: 10px;
6353     border-radius: 4px;
6354 }
6355
6356
6357 /* OSM Note / QA Editors
6358 ------------------------------------------------------- */
6359 .ideditor .note-header,
6360 .ideditor .qa-header {
6361     background-color: #f6f6f6;
6362     border-radius: 5px;
6363     border: 1px solid #ccc;
6364     display: -webkit-box;
6365     display: -ms-flexbox;
6366     display: flex;
6367     -webkit-box-orient: horizontal;
6368     -webkit-box-direction: normal;
6369         -ms-flex-flow: row nowrap;
6370             flex-flow: row nowrap;
6371     -webkit-box-align: center;
6372         -ms-flex-align: center;
6373             align-items: center;
6374 }
6375
6376 .ideditor .note-header-icon,
6377 .ideditor .qa-header-icon {
6378     background-color: #fff;
6379     padding: 10px;
6380     -webkit-box-flex: 0;
6381         -ms-flex: 0 0 auto;
6382             flex: 0 0 auto;
6383     position: relative;
6384     width: 60px;
6385     height: 60px;
6386     border-right: 1px solid #ccc;
6387     border-radius: 5px 0 0 5px;
6388 }
6389 .ideditor[dir='rtl'] .note-header-icon,
6390 .ideditor[dir='rtl'] .qa-header-icon {
6391     border-right: unset;
6392     border-left: 1px solid #ccc;
6393     border-radius: 0 5px 5px 0;
6394 }
6395
6396 .ideditor .note-header-icon .icon-wrap,
6397 .ideditor .qa-header-icon .icon-wrap {
6398     position: absolute;
6399     top: 0px;
6400 }
6401 .ideditor .preset-icon-28 {
6402     position: absolute;
6403     top: 16px;
6404     left: 16px;
6405     margin: auto;
6406 }
6407 .ideditor .preset-icon-28 .icon {
6408     width: 28px;
6409     height: 28px;
6410 }
6411
6412 .ideditor .note-header-label,
6413 .ideditor .qa-header-label {
6414     background-color: #f6f6f6;
6415     padding: 0 15px;
6416     -webkit-box-flex: 1;
6417         -ms-flex: 1 1 100%;
6418             flex: 1 1 100%;
6419     font-size: 14px;
6420     font-weight: bold;
6421     border-radius: 0 5px 5px 0;
6422 }
6423 .ideditor[dir='rtl'] .note-header-label,
6424 .ideditor[dir='rtl'] .qa-header-label {
6425     border-radius: 5px 0 0 5px;
6426 }
6427
6428 .ideditor .note-category {
6429     margin: 20px 0px;
6430 }
6431
6432 .ideditor .comments-container {
6433     background: #ececec;
6434     padding: 1px 10px;
6435     border-radius: 8px;
6436     margin-top: 20px;
6437 }
6438
6439 .ideditor .comment {
6440     background-color: #fff;
6441     border-radius: 5px;
6442     border: 1px solid #ccc;
6443     margin: 10px auto;
6444     display: -webkit-box;
6445     display: -ms-flexbox;
6446     display: flex;
6447     -webkit-box-orient: horizontal;
6448     -webkit-box-direction: normal;
6449         -ms-flex-flow: row nowrap;
6450             flex-flow: row nowrap;
6451 }
6452 .ideditor .comment-avatar {
6453     padding: 10px;
6454     -webkit-box-flex: 0;
6455         -ms-flex: 0 0 auto;
6456             flex: 0 0 auto;
6457 }
6458 .ideditor .comment-avatar .icon.comment-avatar-icon {
6459     width: 40px;
6460     height: 40px;
6461     -o-object-fit: cover;
6462        object-fit: cover;
6463     border: 1px solid #ccc;
6464     border-radius: 20px;
6465 }
6466 .ideditor .comment-main {
6467     padding: 10px 10px 10px 0;
6468     -webkit-box-flex: 1;
6469         -ms-flex: 1 1 100%;
6470             flex: 1 1 100%;
6471     -webkit-box-orient: vertical;
6472     -webkit-box-direction: normal;
6473         -ms-flex-flow: column nowrap;
6474             flex-flow: column nowrap;
6475     overflow: hidden;
6476     overflow-wrap: break-word;
6477 }
6478 .ideditor[dir='rtl'] .comment-main {
6479     padding: 10px 0 10px 10px;
6480 }
6481
6482 .ideditor .comment-metadata {
6483     -webkit-box-orient: horizontal;
6484     -webkit-box-direction: normal;
6485         -ms-flex-flow: row nowrap;
6486             flex-flow: row nowrap;
6487     -webkit-box-pack: justify;
6488         -ms-flex-pack: justify;
6489             justify-content: space-between;
6490 }
6491 .ideditor .comment-author {
6492     font-weight: bold;
6493     color: #333;
6494 }
6495 .ideditor .comment-date {
6496     color: #aaa;
6497 }
6498 .ideditor .comment-text {
6499     color: #333;
6500     margin-top: 10px;
6501     overflow-y: auto;
6502     max-height: 250px;
6503 }
6504 .ideditor .comment-text::-webkit-scrollbar {
6505     border-left: none;
6506 }
6507
6508 .ideditor .note-save,
6509 .ideditor .qa-save {
6510     padding-top: 20px;
6511 }
6512
6513 .ideditor .qa-details-container {
6514     background: #ececec;
6515     padding: 10px;
6516     margin-top: 20px;
6517     border-radius: 4px;
6518     border: 1px solid #ccc;
6519     display: -webkit-box;
6520     display: -ms-flexbox;
6521     display: flex;
6522     -webkit-box-orient: vertical;
6523     -webkit-box-direction: normal;
6524         -ms-flex-direction: column;
6525             flex-direction: column;
6526 }
6527 .ideditor .qa-details-description-text::first-letter {
6528     text-transform: capitalize;
6529 }
6530 .ideditor[dir='rtl'] .qa-details-description-text::first-letter {
6531     text-transform: none;  /* #5877 */
6532 }
6533 .ideditor .qa-details-subsection h4 {
6534     padding-bottom: 2px;
6535 }
6536 .ideditor .qa-details-subsection:not(:last-child) {
6537     margin-bottom: 10px;
6538 }
6539 .ideditor .qa-details-subsection:empty {
6540     display: none;
6541 }
6542
6543 .ideditor .note-save .new-comment-input,
6544 .ideditor .qa-save .new-comment-input {
6545     width: 100%;
6546     height: 100px;
6547     max-height: 300px;
6548     min-height: 100px;
6549 }
6550
6551 .ideditor .note-save .detail-section,
6552 .ideditor .qa-save .detail-section {
6553     margin: 10px 0;
6554 }
6555
6556 .ideditor .note-report {
6557     float: right;
6558 }
6559
6560
6561 /* Custom Data Editor
6562 ------------------------------------------------------- */
6563 .ideditor .data-header {
6564     background-color: #f6f6f6;
6565     border-radius: 5px;
6566     border: 1px solid #ccc;
6567     display: -webkit-box;
6568     display: -ms-flexbox;
6569     display: flex;
6570     -webkit-box-orient: horizontal;
6571     -webkit-box-direction: normal;
6572         -ms-flex-flow: row nowrap;
6573             flex-flow: row nowrap;
6574     -webkit-box-align: center;
6575         -ms-flex-align: center;
6576             align-items: center;
6577 }
6578
6579 .ideditor .data-header-icon {
6580     background-color: #fff;
6581     padding: 10px;
6582     -webkit-box-flex: 0;
6583         -ms-flex: 0 0 auto;
6584             flex: 0 0 auto;
6585     position: relative;
6586     width: 60px;
6587     height: 60px;
6588     border-right: 1px solid #ccc;
6589     border-radius: 5px 0 0 5px;
6590 }
6591 .ideditor[dir='rtl'] .data-header-icon {
6592     border-right: unset;
6593     border-left: 1px solid #ccc;
6594     border-radius: 0 5px 5px 0;
6595 }
6596
6597 .ideditor .data-header-icon .icon-wrap {
6598     position: absolute;
6599     top: 0px;
6600 }
6601
6602 .ideditor .data-header-label {
6603     background-color: #f6f6f6;
6604     padding: 0 15px;
6605     -webkit-box-flex: 1;
6606         -ms-flex: 1 1 100%;
6607             flex: 1 1 100%;
6608     font-size: 14px;
6609     font-weight: bold;
6610     border-radius: 0 5px 5px 0;
6611 }
6612 .ideditor[dir='rtl'] .data-header-label {
6613     border-radius: 5px 0 0 5px;
6614 }
6615
6616 /* custom data editor - no info/delete buttons */
6617 .ideditor .data-editor.raw-tag-editor .tag-row button {
6618     display: none;
6619 }
6620 .ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
6621 .ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
6622     width: 50%;
6623 }
6624
6625
6626 .ideditor .over-map {
6627     position: relative;
6628     height: 100%;
6629     pointer-events: none;
6630     display: -webkit-box;
6631     display: -ms-flexbox;
6632     display: flex;
6633     -webkit-box-orient: horizontal;
6634     -webkit-box-direction: reverse;
6635         -ms-flex-direction: row-reverse;
6636             flex-direction: row-reverse;
6637     -webkit-box-align: end;
6638         -ms-flex-align: end;
6639             align-items: flex-end;
6640     overflow: hidden;
6641 }
6642 .ideditor .over-map > * {
6643     pointer-events: auto;
6644     z-index: 5;
6645 }
6646 /* offscreen this without hiding it */
6647 .ideditor .over-map .select-trap {
6648     position: absolute;
6649     right: -1000%;
6650     opacity: 0;
6651 }
6652
6653 /* Map Controls
6654 ------------------------------------------------------- */
6655 .ideditor .map-controls-wrap {
6656     position: absolute;
6657     left: 0;
6658     right: 0;
6659     height: 100%;
6660     z-index: 100;
6661     display: block;
6662     overflow-x: hidden;
6663     overflow-y: auto;
6664     pointer-events: none;
6665     -ms-overflow-style: none;
6666     scrollbar-width: none;
6667 }
6668 .ideditor .map-controls-wrap::-webkit-scrollbar {
6669     display: none;
6670 }
6671 .ideditor .map-controls {
6672     right: 0;
6673     top: 0;
6674     width: 40px;
6675     position: absolute;
6676     bottom: 0;
6677     display: -webkit-box;
6678     display: -ms-flexbox;
6679     display: flex;
6680     -webkit-box-orient: vertical;
6681     -webkit-box-direction: normal;
6682         -ms-flex-direction: column;
6683             flex-direction: column;
6684     padding: 5px 0;
6685     pointer-events: none;
6686 }
6687 .ideditor .map-controls:before {
6688     content: '';
6689     display: inline-block;
6690     pointer-events: none;
6691     width: 40px;
6692     height: 100%;
6693     max-height: 70px;
6694     -webkit-box-flex: 0;
6695         -ms-flex: 0 1 auto;
6696             flex: 0 1 auto;
6697 }
6698 .ideditor[dir='rtl'] .map-controls {
6699     left: 0;
6700     right: auto;
6701 }
6702
6703 .ideditor .map-control {
6704     position: relative;
6705     display: -webkit-box;
6706     display: -ms-flexbox;
6707     display: flex;
6708     -webkit-box-orient: vertical;
6709     -webkit-box-direction: normal;
6710         -ms-flex-direction: column;
6711             flex-direction: column;
6712 }
6713 .ideditor .map-control > button {
6714     position: relative;
6715     width: 40px;
6716     height: 40px;
6717     background: rgba(0,0,0,.5);
6718     border-radius: 0;
6719     pointer-events: auto;
6720 }
6721
6722 .ideditor .map-control > button:not(.disabled):focus,
6723 .ideditor .map-control > button:not(.disabled):active {
6724     background: rgba(0, 0, 0, .8);
6725 }
6726 .ideditor .map-control > button.active,
6727 .ideditor .map-control > button.active:active {
6728     background: #7092ff;
6729 }
6730 @media (hover: hover) {
6731     .ideditor .map-control > button:not(.disabled):hover {
6732         background: rgba(0, 0, 0, .8);
6733     }
6734     .ideditor .map-control > button.active:hover {
6735         background: #7092ff;
6736     }
6737 }
6738
6739 .ideditor .map-control > button.disabled .icon {
6740     color: rgba(255, 255, 255, 0.5);
6741 }
6742
6743
6744 /* Fullscreen Button (disabled)
6745 ------------------------------------------------------- */
6746 .ideditor div.full-screen {
6747     /*display: inline-block;*/
6748     width: 40px;
6749     margin-right: 10px;
6750     display: none;
6751 }
6752
6753 .ideditor div.full-screen .tooltip {
6754     min-width: 160px;
6755 }
6756
6757 .ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
6758     width: 40px;
6759     height: 40px;
6760     background: transparent;
6761 }
6762 .ideditor div.full-screen > button:active,
6763 .ideditor div.full-screen > button:focus {
6764     background-color: rgba(0, 0, 0, .8);
6765 }
6766 @media (hover: hover) {
6767     .ideditor div.full-screen > button:hover {
6768         background-color: rgba(0, 0, 0, .8);
6769     }
6770 }
6771
6772
6773 /* Map Controls
6774 ------------------------------------------------------- */
6775
6776 /* Zoom in/out buttons */
6777 .ideditor .zoombuttons > button.zoom-in {
6778     border-radius: 4px 0 0 0;
6779 }
6780 .ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
6781     border-radius: 0 4px 0 0;
6782 }
6783
6784 /* Geolocate button */
6785 .ideditor .geolocate-control {
6786     margin-bottom: 10px;
6787 }
6788 .ideditor .geolocate-control > button {
6789     border-radius: 0 0 0 4px;
6790 }
6791 .ideditor[dir='rtl'] .geolocate-control > button {
6792     border-radius: 0 0 4px 0;
6793 }
6794
6795 /* Zoom to selection button */
6796 .ideditor .zoom-to-selection-control .icon {
6797     width: 22px;
6798     height: 22px;
6799 }
6800
6801
6802 /* Background / Map Data / Help Pane buttons
6803 ------------------------------------------------------- */
6804 .ideditor .background-control > button {
6805     border-radius: 4px 0 0 0;
6806 }
6807 .ideditor[dir='rtl'] .background-control > button {
6808     border-radius: 0 4px 0 0;
6809 }
6810
6811 .ideditor .help-control > button {
6812     border-radius: 0 0 0 4px;
6813 }
6814 .ideditor[dir='rtl'] .help-control > button {
6815     border-radius: 0 0 4px 0;
6816 }
6817
6818
6819 /* Background / Map Data Settings
6820 ------------------------------------------------------- */
6821 .ideditor .imagery-faq {
6822     margin-bottom: 10px;
6823     white-space: nowrap;
6824 }
6825
6826 .ideditor .layer-list, .ideditor .controls-list {
6827     margin-bottom: 10px;
6828     border: 1px solid #ccc;
6829     border-radius: 4px;
6830 }
6831
6832 .ideditor .layer-list > li {
6833     background-color: #fff;
6834     color: #7092ff;
6835     position: relative;
6836     display: -webkit-box;
6837     display: -ms-flexbox;
6838     display: flex;
6839 }
6840
6841 .ideditor .layer-list:empty {
6842     display: none;
6843 }
6844
6845 .ideditor .layer-list > li:first-child {
6846     border-radius: 3px 3px 0 0;
6847 }
6848 .ideditor .layer-list > li:last-child {
6849     border-radius: 0 0 3px 3px;
6850 }
6851 .ideditor .layer-list > li:only-child {
6852     border-radius: 3px;
6853 }
6854 .ideditor .layer-list li:not(:last-child) {
6855     border-bottom: 1px solid #ccc;
6856 }
6857 .ideditor .layer-list li:active {
6858     background-color: #ececec;
6859 }
6860 @media (hover: hover) {
6861     .ideditor .layer-list li:hover {
6862         background-color: #ececec;
6863     }
6864 }
6865
6866 .ideditor .layer-list li.active button,
6867 .ideditor .layer-list li.switch button,
6868 .ideditor .layer-list li.active,
6869 .ideditor .layer-list li.switch {
6870     background: #e8ebff;
6871 }
6872
6873 .ideditor .layer-list li.best > div.best {
6874     padding: 5px;
6875     -webkit-box-flex: 0;
6876         -ms-flex: 0 0 auto;
6877             flex: 0 0 auto;
6878     -ms-flex-item-align: center;
6879         align-self: center;
6880 }
6881
6882 .ideditor[dir='rtl'] .list-item-data-browse svg {
6883     -webkit-transform: rotateY(180deg);
6884             transform: rotateY(180deg);
6885 }
6886
6887 /* make sure tooltip fits in map-control panel */
6888 /* if too wide, placement will be wrong the first time it displays */
6889 .ideditor .layer-list li.best .popover-inner {
6890     max-width: 160px;
6891 }
6892
6893 .ideditor .layer-list label {
6894     padding: 5px 10px;
6895     cursor: pointer;
6896     -webkit-box-flex: 1;
6897         -ms-flex: 1 1 auto;
6898             flex: 1 1 auto;
6899     display: -webkit-box;
6900     display: -ms-flexbox;
6901     display: flex;
6902     -webkit-box-align: center;
6903         -ms-flex-align: center;
6904             align-items: center;
6905     overflow: hidden;
6906 }
6907
6908 .ideditor[dir='ltr'] .layer-list .indented label {
6909     padding-left: 24px;
6910 }
6911 .ideditor[dir='rtl'] .layer-list .indented label {
6912     padding-right: 24px;
6913 }
6914
6915 .ideditor .layer-list label > span {
6916     display: block;
6917     overflow: hidden;
6918     width: calc(100% - 20px); /* Ensures radio input width within flexbox */
6919 }
6920
6921 .ideditor .layer-list label span.localized-text {
6922     line-height: 0.95rem;
6923 }
6924
6925 .ideditor .layer-list input.list-item-input {
6926     height: 2.2em;
6927     padding: 0px 4px;
6928     width: 50%;
6929     min-width: 160px;
6930 }
6931
6932 .ideditor .map-data-pane .layer-list button,
6933 .ideditor .background-pane .layer-list button {
6934     border-left: 1px solid #ccc;
6935     border-radius: 0;
6936     padding-left: 4px;
6937     padding-right: 4px;
6938 }
6939 .ideditor[dir='rtl'] .map-data-pane .layer-list button,
6940 .ideditor[dir='rtl'] .background-pane .layer-list button {
6941     border-left: none;
6942     border-right: 1px solid #ccc;
6943 }
6944
6945 .ideditor .map-data-pane .layer-list button .icon,
6946 .ideditor .background-pane .layer-list button .icon {
6947     opacity: 0.5;
6948 }
6949
6950 .ideditor .map-data-pane .layer-list button:last-of-type,
6951 .ideditor .background-pane .layer-list button:last-of-type {
6952     border-radius: 0 3px 3px 0;
6953 }
6954 .ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
6955 .ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
6956     border-radius: 3px 0 0 3px;
6957 }
6958
6959 .ideditor .map-data-pane .vectortile-container .vectortile-header {
6960     padding-bottom: 5px;
6961 }
6962 .ideditor .map-data-pane .vectortile-container .vectortile-footer {
6963     padding-bottom: 10px;
6964 }
6965
6966
6967 /* Issues
6968 ------------------------------------------------------- */
6969 .ideditor .issue {
6970     overflow: hidden;
6971 }
6972 .ideditor .issue .issue-label,
6973 .ideditor .issue-label .issue-text {
6974     width: 100%;
6975     display: -webkit-box;
6976     display: -ms-flexbox;
6977     display: flex;
6978     -webkit-box-orient: horizontal;
6979     -webkit-box-direction: normal;
6980         -ms-flex-flow: row nowrap;
6981             flex-flow: row nowrap;
6982     cursor: pointer;
6983     text-align: initial;
6984     background: none;
6985 }
6986
6987 .ideditor .issue-text .issue-icon {
6988     -webkit-box-flex: 0;
6989         -ms-flex: 0 0 auto;
6990             flex: 0 0 auto;
6991     padding: 2px 3px;
6992 }
6993 .ideditor .issue-text .issue-message {
6994     -webkit-box-flex: 1;
6995         -ms-flex: 1 1 auto;
6996             flex: 1 1 auto;
6997     padding: 4px 5px;
6998 }
6999 .ideditor .issue-label .issue-autofix {
7000     -webkit-box-flex: 0;
7001         -ms-flex: 0 0 auto;
7002             flex: 0 0 auto;
7003     padding: 5px 8px;
7004 }
7005 .ideditor .issue-label .issue-info-button {
7006     height: unset;
7007     width: 32px;
7008     -webkit-box-flex: 0;
7009         -ms-flex: 0 0 auto;
7010             flex: 0 0 auto;
7011     border-left: 1px solid #ccc;
7012     background-color: rgba(0,0,0,0);
7013 }
7014 .ideditor[dir='rtl'] .issue-label .issue-info-button {
7015     border-left: 0;
7016     border-right: 1px solid #ccc;
7017 }
7018 .ideditor .issue-container .issue-label .issue-info-button .icon {
7019     opacity: 0.5;
7020 }
7021 .ideditor .issue-container.active .issue-label .issue-info-button .icon {
7022     opacity: 0.7;
7023 }
7024 .ideditor .issue-label .issue-info-button:last-child {
7025     border-radius: 0 4px 4px 0;
7026 }
7027 .ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
7028     border-radius: 4px 0 0 4px;
7029 }
7030
7031 .ideditor button.autofix.action {
7032     -webkit-box-flex: 0;
7033         -ms-flex: 0 0 20px;
7034             flex: 0 0 20px;
7035     height: 20px;
7036     width: 20px;
7037     background: #7092ff;
7038     color: #fff;
7039 }
7040 .ideditor button.autofix.action:focus,
7041 .ideditor button.autofix.action:active,
7042 .ideditor button.autofix.action.active {
7043     background: #597be7;
7044 }
7045 @media (hover: hover) {
7046     .ideditor button.autofix.action:hover {
7047         background: #597be7;
7048     }
7049 }
7050
7051 /* fix all */
7052 .ideditor .autofix-all {
7053     display: -webkit-box;
7054     display: -ms-flexbox;
7055     display: flex;
7056     -webkit-box-orient: horizontal;
7057     -webkit-box-direction: normal;
7058         -ms-flex-flow: row nowrap;
7059             flex-flow: row nowrap;
7060     -webkit-box-pack: end;
7061         -ms-flex-pack: end;
7062             justify-content: flex-end;
7063     margin-top: -25px;
7064     padding-bottom: 5px;
7065 }
7066 .ideditor .autofix-all-link-text {
7067     padding: 0;
7068 }
7069 .ideditor .autofix-all-link-icon svg {
7070     margin: 0 9px;
7071     background: currentColor;
7072     border-radius: 4px;
7073 }
7074 .ideditor .autofix-all-link-icon svg use {
7075     color: #fff;
7076 }
7077
7078 /* warning styles */
7079 .ideditor .warnings-list,
7080 .ideditor .warnings-list *,
7081 .ideditor .issue-container.active .issue.severity-warning,
7082 .ideditor .issue-container.active .issue.severity-warning * {
7083     border-color: #fb2;
7084 }
7085
7086 .ideditor .warnings-list .issue.severity-warning .issue-label,
7087 .ideditor .issue.severity-warning .issue-fix-list,
7088 .ideditor .warning-section {
7089     background: #ffc;
7090 }
7091
7092 .ideditor .issue-container.active .issue.severity-warning .issue-label {
7093     background: #ffa;
7094 }
7095
7096 .ideditor .issue.severity-warning .issue-icon {
7097     color: #f90;
7098 }
7099
7100 .ideditor .issue.severity-warning .issue-fix-item button.actionable,
7101 .ideditor .issue-container.active .issue.severity-warning .issue-info-button {
7102     color: #b15500;
7103     fill: #b15500;
7104 }
7105 .ideditor .warnings-list .issue.severity-warning .issue-label:active,
7106 .ideditor .warnings-list .issue.severity-warning .issue-label:focus,
7107 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7108 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
7109     background: #ff8;
7110 }
7111 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7112 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
7113 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
7114 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
7115     color: #7f3d00;
7116     fill: #7f3d00;
7117 }
7118 @media (hover: hover) {
7119     .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
7120     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
7121         background: #ff8;
7122     }
7123     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
7124     .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
7125         color: #7f3d00;
7126         fill: #7f3d00;
7127     }
7128 }
7129
7130
7131 /* error styles */
7132 .ideditor .errors-list,
7133 .ideditor .errors-list *,
7134 .ideditor .issue-container.active .issue.severity-error,
7135 .ideditor .issue-container.active .issue.severity-error * {
7136     border-color: #f77;
7137 }
7138
7139 .ideditor .errors-list .issue.severity-error .issue-label,
7140 .ideditor .issue.severity-error .issue-fix-list,
7141 .ideditor .error-section {
7142     background: #ffd6d6;
7143 }
7144
7145 .ideditor .issue-container.active .issue.severity-error .issue-label {
7146     background: #ffc6c6;
7147 }
7148
7149 .ideditor .issue.severity-error .issue-fix-item button.actionable,
7150 .ideditor .issue-container.active .issue.severity-error .issue-info-button {
7151     color: #b91201;
7152     fill: #b91201;
7153 }
7154 .ideditor .issue.severity-error .issue-icon {
7155     color: #dd1400;
7156 }
7157 .ideditor .errors-list .issue.severity-error .issue-label:active,
7158 .ideditor .errors-list .issue.severity-error .issue-label:focus,
7159 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7160 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
7161     background: #ffb6b6;
7162 }
7163 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7164 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
7165 .ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
7166 .ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
7167     color: #840c00;
7168     fill: #840c00;
7169 }
7170 @media (hover: hover) {
7171     .ideditor .errors-list .issue.severity-error .issue-label:hover,
7172     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
7173         background: #ffb6b6;
7174     }
7175     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
7176     .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
7177         color: #840c00;
7178         fill: #840c00;
7179     }
7180 }
7181
7182
7183 /* Issues Pane */
7184 .ideditor .issues-options-container {
7185     display: table;
7186 }
7187 .ideditor .issues-option {
7188     display: table-row;
7189 }
7190 .ideditor .issues-option-title {
7191     display: table-cell;
7192     font-weight: bold;
7193     padding-right: 10px;
7194 }
7195 .ideditor[dir='rtl'] .issues-option-title {
7196     padding-right: 0;
7197     padding-left: 10px;
7198 }
7199 .ideditor .issues-option label {
7200     display: table-cell;
7201     padding: 0 10px;
7202     white-space: nowrap;
7203 }
7204
7205 .ideditor .layer-list.issues-list li.issue {
7206     border-color: inherit;    /* override .layer-list styles */
7207     color: inherit;
7208     height: unset;
7209 }
7210
7211 .ideditor .layer-list.issue-rules-list,
7212 .ideditor .layer-list.issues-list,
7213 .ideditor .layer-list.layer-feature-list {
7214     margin-bottom: 0;
7215 }
7216 .ideditor .section-footer {
7217     display: -webkit-box;
7218     display: -ms-flexbox;
7219     display: flex;
7220     -webkit-box-orient: horizontal;
7221     -webkit-box-direction: normal;
7222         -ms-flex-flow: row nowrap;
7223             flex-flow: row nowrap;
7224     -webkit-box-pack: end;
7225         -ms-flex-pack: end;
7226             justify-content: flex-end;
7227     height: 30px;
7228 }
7229 .ideditor .section-footer a {
7230     padding: 5px;
7231 }
7232
7233 .ideditor .section-issues-status .box {
7234     border-radius: 4px;
7235     border: 1px solid #72d979;
7236     background: #c6ffca;
7237     padding: 5px !important;
7238     display: -webkit-box;
7239     display: -ms-flexbox;
7240     display: flex;
7241 }
7242 .ideditor .section-issues-status .icon {
7243     color: #05ac10;
7244 }
7245
7246 .ideditor input.square-degrees-input {
7247     padding: 2px !important; /* important needed for rtl */
7248     width: 3em;
7249     height: 2em;
7250     text-align: center;
7251     background: rgba(0,0,0,0);
7252     color: currentColor;
7253 }
7254
7255
7256 /* Entity Issues List */
7257 .ideditor .section-entity-issues .issue-container .issue {
7258     border-radius: 4px;
7259     border: 1px solid #ccc;
7260     background: #f6f6f6;
7261 }
7262 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
7263 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
7264 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
7265 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
7266     background: #f1f1f1;
7267 }
7268 @media (hover: hover) {
7269     .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
7270     .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
7271         background: #f1f1f1;
7272     }
7273 }
7274 .ideditor .section-entity-issues .issue .issue-label .issue-text {
7275     padding-right: 10px;
7276 }
7277 .ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
7278     padding-right: unset;
7279     padding-left: 10px;
7280 }
7281
7282 .ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
7283     font-weight: bold;
7284 }
7285 .ideditor .section-entity-issues .issue-container:not(:last-of-type) {
7286     margin-bottom: 5px;
7287 }
7288 .ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
7289     margin-top: 10px;
7290 }
7291 .ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
7292     margin-bottom: 10px;
7293 }
7294
7295 /* fixes */
7296 .ideditor .section-entity-issues .issue-fix-list {
7297     border-top: 1px solid;
7298     border-color: inherit;
7299 }
7300 .ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
7301     display: none;
7302 }
7303
7304 .ideditor li.issue-fix-item button {
7305     padding: 2px 10px 2px 20px;
7306     background: transparent;
7307     width: 100%;
7308     text-align: initial;
7309 }
7310 .ideditor[dir='rtl'] li.issue-fix-item button {
7311     padding: 2px 20px 2px 10px;
7312 }
7313 .ideditor li.issue-fix-item:first-of-type button {
7314     padding-top: 5px;
7315 }
7316 .ideditor li.issue-fix-item:last-of-type button {
7317     padding-bottom: 5px;
7318 }
7319
7320 .ideditor li.issue-fix-item button .fix-message {
7321     padding: 0 10px;
7322     vertical-align: middle;
7323 }
7324
7325 .ideditor li.issue-fix-item button.actionable {
7326     cursor: pointer;
7327 }
7328 .ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
7329     color: #555;
7330     fill: #555;
7331 }
7332
7333 .ideditor .issue-container:not(.active) ul.issue-fix-list {
7334     display: none;
7335 }
7336 .ideditor .issue-container:not(.active) .issue-info {
7337     display: none;
7338 }
7339
7340 .ideditor .issue-info {
7341     -webkit-box-flex: 1;
7342         -ms-flex: 1 1 auto;
7343             flex: 1 1 auto;
7344     width: 100%;
7345     overflow: hidden;
7346     display: none;
7347     padding: 10px 0;
7348 }
7349 .ideditor .issue-info.expanded {
7350     display: inline-block;
7351 }
7352
7353 .ideditor .issue-info .issue-reference {
7354     margin-bottom: 10px;
7355 }
7356 .ideditor .issue-info .tagDiff-table {
7357     min-width: 60%;
7358     width: unset;
7359     border: 1px solid #ccc;
7360 }
7361 .ideditor .issue-info .tagDiff-row {
7362     border: 1px solid #ccc;
7363 }
7364 .ideditor .issue-info .tagDiff-cell {
7365     padding: 2px 10px;
7366     font-family: monospace;
7367     font-size: 10px;
7368     border: 1px solid #ccc;
7369 }
7370 .ideditor .issue-info .tagDiff-cell-add {
7371     background: #dfd;
7372 }
7373 .ideditor .issue-info .tagDiff-cell-remove {
7374     background: #fdd;
7375 }
7376
7377
7378 /* Background - Display Options Sliders
7379 ------------------------------------------------------- */
7380 .ideditor .display-options-container {
7381     padding: 10px;
7382 }
7383
7384 .ideditor .display-options-container label {
7385     padding-bottom: 0;
7386     padding-top: 10px;
7387 }
7388
7389 .ideditor .display-options-container label span {
7390     font-weight: bold;
7391     margin: 5px;
7392 }
7393
7394 .ideditor .display-control .control-wrap {
7395     display: -webkit-box;
7396     display: -ms-flexbox;
7397     display: flex;
7398     -webkit-box-align: center;
7399         -ms-flex-align: center;
7400             align-items: center;
7401     width: 100%;
7402 }
7403 .ideditor .display-control .display-option-input {
7404     height: 20px;
7405     -webkit-box-flex: 1;
7406         -ms-flex: 1 1 100%;
7407             flex: 1 1 100%;
7408 }
7409
7410 .ideditor .display-control button {
7411     height: 30px;
7412     width: 30px;
7413     margin-left: 5px;
7414     margin-right: 0px;
7415     vertical-align: text-bottom;
7416     border-radius: 4px;
7417     -webkit-box-flex: 0;
7418         -ms-flex: 0 0 auto;
7419             flex: 0 0 auto;
7420 }
7421 .ideditor[dir='rtl'] .display-control button {
7422     margin-left: 0px;
7423     margin-right: 5px;
7424 }
7425
7426
7427 /* Background - Adjust Alignment
7428 ------------------------------------------------------- */
7429 .ideditor .background-pane .nudge-container {
7430     border: 1px solid #ccc;
7431     border-radius: 4px;
7432     padding: 10px;
7433     position: relative;
7434 }
7435
7436 .ideditor .nudge-container .nudge-controls-wrap {
7437     position: relative;
7438     width: 100%;
7439     overflow: hidden;
7440 }
7441
7442 .ideditor .nudge-container .nudge-outer-rect {
7443     background-color: #eee;
7444     border: 1px solid #ccc;
7445     border-radius: 2px;
7446     padding: 20px 0;
7447     display: -webkit-box;
7448     display: -ms-flexbox;
7449     display: flex;
7450     -webkit-box-pack: center;
7451         -ms-flex-pack: center;
7452             justify-content: center;
7453     -webkit-box-align: center;
7454         -ms-flex-align: center;
7455             align-items: center;
7456     margin: 45px;
7457     cursor: move;
7458     /* prevent scrolling pane while dragging on touchscreen */
7459     -ms-touch-action: none;
7460         touch-action: none;
7461     /* disable drag-to-select */
7462     -webkit-user-select: none;
7463        -moz-user-select: none;
7464         -ms-user-select: none;
7465             user-select: none;
7466     position: relative;
7467 }
7468
7469 .ideditor .nudge-container .nudge-inner-rect {
7470     background-color: #fff;
7471     border: 1px solid #ccc;
7472     border-radius: 2px;
7473     width: 65%;
7474     min-height: 20px;
7475 }
7476
7477 .ideditor .nudge-container .nudge::after {
7478     content: '';
7479     display: block;
7480     position: absolute;
7481     margin: auto;
7482     left: 0; right: 0; top: 0; bottom: 0;
7483     height: 0;
7484     width: 0;
7485 }
7486
7487 .ideditor .nudge-container input {
7488     width: 100%;
7489     padding: 2px;
7490     text-align: center;
7491     border: 0;
7492 }
7493
7494 .ideditor .nudge-container input.error {
7495     border: 1px solid #ff7878;
7496     border-radius: 2px;
7497     background: #ffb;
7498 }
7499
7500 .ideditor .nudge-container button {
7501     position: absolute;
7502     height: 40px;
7503     width: 40px;
7504 }
7505 .ideditor .nudge-container button.right,
7506 .ideditor .nudge-container button.left {
7507     top: 0;
7508     bottom: 0;
7509     margin-top: auto;
7510     margin-bottom: auto;
7511     vertical-align: middle;
7512 }
7513 .ideditor .nudge-container button.right {
7514     right: 0;
7515 }
7516 .ideditor .nudge-container button.left {
7517     left: 0;
7518 }
7519 .ideditor .nudge-container button.top,
7520 .ideditor .nudge-container button.bottom {
7521     left: 0;
7522     right: 0;
7523     margin-left: auto;
7524     margin-right: auto;
7525 }
7526 .ideditor .nudge-container button.top {
7527     top: 0;
7528 }
7529 .ideditor .nudge-container button.bottom {
7530     bottom: 0;
7531 }
7532
7533 .ideditor .nudge-container button.nudge-reset {
7534     right: 0;
7535     bottom: 0;
7536 }
7537
7538 .ideditor .nudge-surface {
7539    position: absolute;
7540    z-index: 5000;
7541    left: 0;
7542    top: 0;
7543    width: 100%;
7544    height: 100%;
7545    background-color: transparent;
7546    cursor: move;
7547 }
7548
7549 .ideditor .background-pane .nudge.right::after {
7550     border-top: 5px solid transparent;
7551     border-bottom: 5px solid transparent;
7552     border-left: 5px solid #222;
7553 }
7554
7555 .ideditor .background-pane .nudge.left::after {
7556     border-top: 5px solid transparent;
7557     border-bottom: 5px solid transparent;
7558     border-right: 5px solid #222;
7559 }
7560
7561 .ideditor .background-pane .nudge.top::after {
7562     border-right: 5px solid transparent;
7563     border-left: 5px solid transparent;
7564     border-bottom: 5px solid #222;
7565 }
7566
7567 .ideditor .background-pane .nudge.bottom::after {
7568     border-right: 5px solid transparent;
7569     border-left: 5px solid transparent;
7570     border-top: 5px solid #222;
7571 }
7572
7573
7574 /* Side Panes - Background / Map Data / Help
7575 ------------------------------------------------------- */
7576 .ideditor .map-panes {
7577     -webkit-box-flex: 0;
7578         -ms-flex: 0 1 auto;
7579             flex: 0 1 auto;
7580     position: relative;
7581     height: 100%;
7582     max-width: 100%;
7583 }
7584 .ideditor .map-pane {
7585     position: relative;
7586     top: 0;
7587     width: 400px;
7588     max-width: 100%;
7589     height: 100%;
7590     z-index: 10;
7591     display: -webkit-box;
7592     display: -ms-flexbox;
7593     display: flex;
7594     -webkit-box-orient: vertical;
7595     -webkit-box-direction: normal;
7596         -ms-flex-direction: column;
7597             flex-direction: column;
7598 }
7599
7600 .ideditor .map-pane.help-pane {
7601     width: 600px;
7602 }
7603
7604 .ideditor .pane-heading {
7605     display: -webkit-box;
7606     display: -ms-flexbox;
7607     display: flex;
7608     -webkit-box-orient: horizontal;
7609     -webkit-box-direction: normal;
7610         -ms-flex-flow: row nowrap;
7611             flex-flow: row nowrap;
7612     -webkit-box-pack: justify;
7613         -ms-flex-pack: justify;
7614             justify-content: space-between;
7615     border-bottom: 1px solid #ccc;
7616     -webkit-box-flex: 0;
7617         -ms-flex: 0 0 auto;
7618             flex: 0 0 auto;
7619 }
7620
7621 .ideditor .pane-heading h2 {
7622     margin: 14px 20px;
7623 }
7624
7625 .ideditor .pane-heading button {
7626     width: 40px;
7627     border-radius: 0;
7628 }
7629
7630 .ideditor .pane-content {
7631     height: 100%;
7632     padding: 10px 50px 20px 20px;
7633     overflow-x: hidden;
7634     overflow-y: scroll;
7635     position: relative;
7636 }
7637 .ideditor[dir='rtl'] .pane-content {
7638     padding: 10px 20px 20px 50px;
7639 }
7640
7641 .ideditor .help-pane .pane-content > div {
7642     padding-bottom: 15px;
7643 }
7644
7645
7646 /* Help
7647 ------------------------------------------------------- */
7648 .ideditor .help-pane p {
7649     font-size: 15px;
7650     margin-bottom: 20px;
7651 }
7652
7653 .ideditor .help-pane .left-content .icon.inline,
7654 .ideditor .curtain-tooltip .icon.inline {
7655     margin-right: 0;
7656     margin-left: 0;
7657     height: 1.34em;
7658     width: 1.34em;
7659 }
7660
7661 .ideditor .help-pane .toc {
7662     width: 100%;
7663     max-width: 200px;
7664     float: right;
7665     margin-left: 20px;
7666     margin-bottom: 20px;
7667     padding-left: 5px;
7668 }
7669
7670 .ideditor .help-pane .toc li a,
7671 .ideditor .help-pane .nav a {
7672     display: block;
7673     border: 1px solid #ccc;
7674     padding: 5px 10px;
7675 }
7676
7677 .ideditor .help-pane .toc li a {
7678     border-bottom: 0;
7679 }
7680 .ideditor .help-pane .toc li a:focus,
7681 .ideditor .help-pane .nav a:focus,
7682 .ideditor .help-pane .toc li a:active,
7683 .ideditor .help-pane .nav a:active {
7684     background: #ececec;
7685 }
7686 @media (hover: hover) {
7687     .ideditor .help-pane .toc li a:hover,
7688     .ideditor .help-pane .nav a:hover {
7689         background: #ececec;
7690     }
7691 }
7692
7693 .ideditor .help-pane .toc li a.selected {
7694     background: #e8ebff;
7695 }
7696
7697 .ideditor .help-pane .toc li:first-child a {
7698     border-radius: 4px 4px 0 0;
7699 }
7700
7701 .ideditor .help-pane .toc li:nth-last-child(3) a {
7702     border-bottom: 1px solid #ccc;
7703     border-radius: 0 0 4px 4px
7704 }
7705
7706 .ideditor .help-pane .toc li.shortcuts a,
7707 .ideditor .help-pane .toc li.walkthrough a {
7708     overflow: hidden;
7709     margin-top: 10px;
7710     border-bottom: 1px solid #ccc;
7711     border-radius: 4px;
7712 }
7713
7714 .ideditor .help-pane .toc li.walkthrough a {
7715     text-align: center;
7716 }
7717
7718 .ideditor .help-pane .nav {
7719     position: relative;
7720     padding-bottom: 30px;
7721 }
7722
7723 .ideditor .help-pane .nav a {
7724     float: left;
7725     width: 50%;
7726     text-align: center;
7727 }
7728
7729 .ideditor .help-pane .nav a:first-child {
7730     border-radius: 4px 0 0 4px;
7731 }
7732
7733 .ideditor .help-pane .nav a:last-child:not(:only-child) {
7734     border-radius: 0 4px 4px 0;
7735     border-left: 0;
7736 }
7737
7738 .ideditor .help-pane .nav a:only-child {
7739     width: 100%;
7740     border-radius: 4px;
7741 }
7742
7743
7744 /* Inspector (hover styles)
7745 ------------------------------------------------------- */
7746 .ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
7747 .ideditor .inspector-hover .form-field-input-wrap .label,
7748 .ideditor .inspector-hover .form-field-input-multicombo .chiplist,
7749 .ideditor .inspector-hover .form-field-button,
7750 .ideditor .inspector-hover .structure-extras-wrap,
7751 .ideditor .inspector-hover .comments-container .comment,
7752 .ideditor .inspector-hover button,
7753 .ideditor .inspector-hover input,
7754 .ideditor .inspector-hover textarea,
7755 .ideditor .inspector-hover label {
7756     background: #ececec;
7757 }
7758 .ideditor .inspector-hover .preset-list-button,
7759 .ideditor .inspector-hover .tag-row input {
7760     background: #f6f6f6;
7761 }
7762
7763 .ideditor .inspector-hover a,
7764 .ideditor .inspector-hover .form-field-input-multicombo .chip,
7765 .ideditor .inspector-hover .form-field-input-check span,
7766 .ideditor .inspector-hover .section-entity-issues .issue .icon {
7767     color: #666;
7768 }
7769
7770 .ideditor .inspector-hover .form-field-input-multicombo .chip {
7771     background: #eee;
7772     border: 1px solid #ccc;
7773 }
7774
7775 /* scrollbars only when necessary*/
7776 .ideditor .inspector-hover div {
7777     overflow-x: visible;
7778     overflow-y: auto;
7779 }
7780
7781 /* hide and remove from layout */
7782 .ideditor .inspector-hidden,
7783 .ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
7784 .ideditor .inspector-hover label input[type="checkbox"],
7785 .ideditor .inspector-hover label input[type="radio"],
7786 .ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
7787 .ideditor .inspector-hover .form-field-input-radio label,
7788 .ideditor .inspector-hover .form-field-input-radio label span,
7789 .ideditor .inspector-hover .form-field-input-radio label.remove .icon,
7790 .ideditor .inspector-hover .add-row,
7791 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
7792 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
7793     display: none;
7794 }
7795
7796 /* hide but preserve in layout */
7797 .ideditor .inspector-hover .combobox-caret,
7798 .ideditor .inspector-hover .header button,
7799 .ideditor .inspector-hover .quick-links,
7800 .ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
7801 .ideditor .inspector-hover .hide-toggle:before,
7802 .ideditor .inspector-hover .more-fields,
7803 .ideditor .inspector-hover .field-label button,
7804 .ideditor .inspector-hover .tag-row button,
7805 .ideditor .inspector-hover .footer * {
7806     opacity: 0;
7807 }
7808
7809 /* Unstyle the active entity issue on hover */
7810 .ideditor .inspector-hover .section-entity-issues .issue-container.active {
7811     margin-top: 1px;
7812     margin-bottom: 1px;
7813 }
7814 .ideditor .inspector-hover .section-entity-issues .issue-container * {
7815     border-color: #ccc !important;
7816 }
7817 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
7818     border-bottom: 0;
7819 }
7820 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
7821     font-weight: normal;
7822 }
7823
7824
7825 /* Styles for raw tag inspector on hover */
7826 .ideditor .inspector-hover .tag-row .key-wrap,
7827 .ideditor .inspector-hover .tag-row .value-wrap {
7828     height: 31px;
7829 }
7830
7831 .ideditor .inspector-hover .tag-row:first-child input.value {
7832     border-top-right-radius: 4px;
7833 }
7834 .ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
7835     border-top-right-radius: 0;
7836     border-top-left-radius: 4px;
7837 }
7838
7839 .ideditor .inspector-hover .tag-row:last-child input.value {
7840     border-bottom-right-radius: 4px;
7841 }
7842 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
7843     border-bottom-right-radius: 0;
7844     border-bottom-left-radius: 4px;
7845 }
7846
7847 .ideditor .inspector-hover .tag-row:last-child input.key {
7848     border-bottom-left-radius: 4px;
7849 }
7850 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
7851     border-bottom-left-radius: 0;
7852     border-bottom-right-radius: 4px;
7853 }
7854
7855 .ideditor .inspector-hover .more-fields {
7856     max-height: 0;
7857     margin-bottom: -10px;
7858 }
7859
7860 /* Unstyle button fields */
7861 .ideditor .inspector-hover .form-field-input-radio label.active,
7862 .ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
7863     opacity: 1;
7864     background-color: transparent;
7865     color: #666;
7866     padding-left: 0;
7867     border-width: 0;
7868 }
7869 .ideditor .inspector-hover .form-field-input-radio button.active {
7870     padding-left: 10px;
7871 }
7872
7873 /* Show placeholder on hover for radio buttons */
7874 .ideditor .inspector-hover .form-field-input-radio {
7875     border: 1px solid #ccc;
7876     border-top: 0;
7877     border-radius: 0 0 4px 4px;
7878 }
7879 .ideditor .inspector-hover .form-field-input-radio .placeholder {
7880     opacity: 1;
7881     color: #666;
7882     padding: 5px 10px;
7883     width: 100%;
7884     height: auto;
7885     border: 0;
7886 }
7887 .ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
7888     border: 0;
7889 }
7890
7891
7892 /* Raster Background Tiles
7893 ------------------------------------------------------- */
7894 .ideditor img.tile {
7895     position: absolute;
7896     -webkit-transform-origin: 0 0;
7897         -ms-transform-origin: 0 0;
7898             transform-origin: 0 0;
7899
7900     -webkit-user-select: none;
7901
7902        -moz-user-select: none;
7903
7904         -ms-user-select: none;
7905
7906             user-select: none;
7907
7908     pointer-events: none;
7909
7910     -webkit-user-drag: none;
7911
7912     opacity: 0;
7913
7914     -webkit-transition: opacity 200ms linear;
7915
7916     -o-transition: opacity 200ms linear;
7917
7918     transition: opacity 200ms linear;
7919 }
7920
7921 .ideditor img.tile-loaded {
7922     opacity: 1;
7923 }
7924
7925 .ideditor img.tile-removing {
7926     opacity: 0;
7927 }
7928
7929 .ideditor .tile-label-debug {
7930     font-size: 10px;
7931     background: rgba(0, 0, 0, 0.7);
7932     color: #fff;
7933     position: absolute;
7934     text-align: center;
7935     padding: 5px;
7936     border-radius: 3px;
7937     z-index: 2;
7938     margin-left: -70px;
7939     margin-top: -20px;
7940
7941     -webkit-transform-origin: 0 0;
7942
7943         -ms-transform-origin: 0 0;
7944
7945             transform-origin: 0 0;
7946
7947     -webkit-user-select: none;
7948
7949        -moz-user-select: none;
7950
7951         -ms-user-select: none;
7952
7953             user-select: none;
7954 }
7955
7956 .ideditor img.tile-debug {
7957     outline: 1px solid red;
7958 }
7959
7960
7961 /* Map
7962 ------------------------------------------------------- */
7963 .ideditor .main-map {
7964     position: absolute;
7965     top: 0;
7966     left: 0;
7967     right: 0;
7968     bottom: 0;
7969     overflow: hidden;
7970     height: 100%;
7971     width: 100%;
7972     background: #000;
7973     -webkit-user-select: none;
7974        -moz-user-select: none;
7975         -ms-user-select: none;
7976             user-select: none;
7977     -ms-touch-action: none;
7978         touch-action: none;
7979     -webkit-touch-callout: none;
7980 }
7981 .ideditor .main-map * {
7982     -ms-touch-action: none;
7983         touch-action: none;
7984 }
7985
7986 .ideditor .supersurface {
7987     -webkit-transform-origin: 0 0;
7988         -ms-transform-origin: 0 0;
7989             transform-origin: 0 0;
7990 }
7991
7992 .ideditor .supersurface, .ideditor .layer {
7993     position: absolute;
7994     top: 0;
7995     left: 0;
7996     right: 0;
7997     bottom: 0;
7998 }
7999
8000
8001 /* Map-In-Map
8002 ------------------------------------------------------- */
8003 .ideditor .map-in-map {
8004     position: absolute;
8005     overflow: hidden;
8006     top: 10px;
8007     width: 200px;
8008     height: 150px;
8009     z-index: 2;
8010     background: #000;
8011     border: #aaa 1px solid;
8012     -webkit-box-shadow: 0 0 2em black;
8013             box-shadow: 0 0 2em black;
8014 }
8015 .ideditor[dir='ltr'] .map-in-map {
8016     left: 10px;
8017 }
8018 .ideditor[dir='rtl'] .map-in-map {
8019     right: 10px;
8020 }
8021
8022 .ideditor .map-in-map-tiles {
8023     -webkit-transform-origin: 0 0;
8024         -ms-transform-origin: 0 0;
8025             transform-origin: 0 0;
8026     -webkit-user-select: none;
8027        -moz-user-select: none;
8028         -ms-user-select: none;
8029             user-select: none;
8030 }
8031
8032 .ideditor .map-in-map-viewport,
8033 .ideditor .map-in-map-data {
8034     top: 0;
8035     left: 0;
8036     overflow: hidden;
8037     height: 100%;
8038     width: 100%;
8039 }
8040
8041 .ideditor .map-in-map-viewport {
8042     position: absolute;
8043 }
8044
8045 .ideditor .map-in-map-data {
8046     position: relative;
8047     z-index: 10;
8048 }
8049
8050 .ideditor .map-in-map-bbox {
8051     fill: none;
8052     stroke: rgba(255, 255, 0, 0.75);
8053     stroke-width: 1;
8054     shape-rendering: crispEdges;
8055 }
8056
8057 .ideditor .map-in-map-bbox.thick {
8058     stroke-width: 5;
8059 }
8060
8061
8062 /* Debug Data
8063 ------------------------------------------------------- */
8064 .ideditor .debug {
8065     stroke: currentColor;
8066     fill: none;
8067     stroke-width: 2;
8068 }
8069 .ideditor .map-in-map-data .debug {
8070     stroke-width: 1;
8071 }
8072
8073 .ideditor .nocolor { color: rgba(0, 0, 0, 0); }
8074 .ideditor .red     { color: rgba(255, 0, 0, 0.75); }
8075 .ideditor .green   { color: rgba(0, 255, 0, 0.75); }
8076 .ideditor .blue    { color: rgba(176, 176, 255, 0.75); }
8077 .ideditor .yellow  { color: rgba(255, 255, 0, 0.75); }
8078 .ideditor .cyan    { color: rgba(0, 255, 255, 0.75); }
8079 .ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
8080 .ideditor .orange  { color: rgba(255, 153, 0, 0.75); }
8081 .ideditor .pink    { color: rgba(255, 0, 153, 0.75); }
8082 .ideditor .purple  { color: rgba(153, 0, 255, 0.75); }
8083
8084 .ideditor .debug-legend {
8085     position: absolute;
8086     top: 70px;
8087     right: 80px;
8088     padding: 5px;
8089     border-radius: 4px;
8090     pointer-events: none;
8091 }
8092
8093 .ideditor .debug-legend-item {
8094     padding-right: 5px;
8095 }
8096 .ideditor .debug-legend-item:before {
8097     content: "\25A0";
8098     padding: 0 5px;
8099 }
8100
8101
8102 /* Information Panels
8103 ------------------------------------------------------- */
8104 .ideditor .info-panels {
8105     display: -webkit-box;
8106     display: -ms-flexbox;
8107     display: flex;
8108     -webkit-box-orient: horizontal;
8109     -webkit-box-direction: normal;
8110         -ms-flex-flow: row wrap-reverse;
8111             flex-flow: row wrap-reverse;
8112     -webkit-box-pack: end;
8113         -ms-flex-pack: end;
8114             justify-content: flex-end;
8115     width: 100%;
8116     z-index: 1;
8117     -ms-user-select: element;
8118     pointer-events: none;
8119     overflow: hidden;
8120 }
8121
8122 .ideditor .panel-container h1,
8123 .ideditor .panel-container h2,
8124 .ideditor .panel-container h3,
8125 .ideditor .panel-container h4,
8126 .ideditor .panel-container h5 {
8127     display: inline-block;
8128     margin-bottom: 0;
8129 }
8130
8131 .ideditor .panel-container h1,
8132 .ideditor .panel-container h2,
8133 .ideditor .panel-container h3 {
8134     color: #ff8;
8135 }
8136
8137 .ideditor .panel-container {
8138     -webkit-box-flex: 0;
8139         -ms-flex: 0 0 auto;
8140             flex: 0 0 auto;
8141     margin: 0 2px 2px 0;
8142     border-radius: 4px;
8143     border: 1px solid rgba(0, 0, 0, 0.75);
8144     padding-bottom: 10px;
8145     width: 250px;
8146     max-width: 100%;
8147     pointer-events: auto;
8148 }
8149
8150 .ideditor .panel-container .panel-title {
8151     border-radius: 4px 4px 0 0;
8152 }
8153
8154 .ideditor .panel-title {
8155     padding: 5px 10px;
8156     display: -webkit-box;
8157     display: -ms-flexbox;
8158     display: flex;
8159     -webkit-box-pack: justify;
8160         -ms-flex-pack: justify;
8161             justify-content: space-between;
8162 }
8163
8164 .ideditor .panel-title button.close {
8165     padding: 2px;
8166     background: none;
8167     color: #ddd;
8168 }
8169 .ideditor[dir='rtl'] .panel-title button.close {
8170     float: left;
8171 }
8172 .ideditor .panel-title button.close:focus,
8173 .ideditor .panel-title button.close:active {
8174     color: #fff;
8175 }
8176 @media (hover: hover) {
8177     .ideditor .panel-title button.close:hover {
8178         color: #fff;
8179     }
8180 }
8181 .ideditor .panel-title button.close .icon {
8182     height: 20px;
8183     width: 16px;
8184 }
8185
8186 .ideditor .panel-content {
8187     padding: 5px 10px;
8188     position: relative;
8189 }
8190
8191 .ideditor .panel-content ul:empty {
8192     display: none;
8193 }
8194
8195 .ideditor .panel-content li span:not(.localized-text) {
8196     display: inline-block;
8197     white-space: nowrap;
8198     margin: 0 8px;
8199 }
8200
8201 .ideditor .panel-content .button {
8202     display: inline-block;
8203     background: #7092ff;
8204     border-radius: 2px;
8205     padding: 0 4px;
8206     margin-top: 10px;
8207     margin-right: 10px;
8208     color: #fff;
8209 }
8210 .ideditor[dir='rtl'] .panel-content .button {
8211     margin-right: auto;
8212     margin-left: 10px;
8213 }
8214
8215 .ideditor .panel-content-history .links a {
8216     margin-left: 8px;
8217 }
8218 .ideditor[dir='rtl'] .panel-content-history .links a {
8219     margin-left: auto;
8220     margin-right: 8px;
8221 }
8222 .ideditor .panel-content-history h4 {
8223     padding-bottom: 0;
8224 }
8225 .ideditor .panel-content-location .location-info {
8226     margin-top: 10px;
8227 }
8228
8229
8230 /* Map Footer
8231 ------------------------------------------------------- */
8232 .ideditor .map-footer {
8233     width: 100%;
8234     position: relative;
8235     border-radius: 0;
8236     pointer-events: none;
8237     display: -webkit-box;
8238     display: -ms-flexbox;
8239     display: flex;
8240     -webkit-box-orient: vertical;
8241     -webkit-box-direction: normal;
8242         -ms-flex-direction: column;
8243             flex-direction: column;
8244     -ms-user-select: element;
8245     -webkit-box-flex: 0;
8246         -ms-flex: 0 0 auto;
8247             flex: 0 0 auto;
8248 }
8249
8250 .ideditor .map-footer-bar {
8251     pointer-events: all;
8252     display: block;
8253     height: 2.5em;
8254     position: relative;
8255 }
8256
8257 .ideditor .main-footer-wrap,
8258 .ideditor .flash-wrap {
8259     display: -webkit-box;
8260     display: -ms-flexbox;
8261     display: flex;
8262     -webkit-box-flex: 0;
8263         -ms-flex: 0 0 100%;
8264             flex: 0 0 100%;
8265     -webkit-box-orient: horizontal;
8266     -webkit-box-direction: normal;
8267         -ms-flex-flow: row nowrap;
8268             flex-flow: row nowrap;
8269     -webkit-box-pack: justify;
8270         -ms-flex-pack: justify;
8271             justify-content: space-between;
8272     height: 100%;
8273     position: absolute;
8274     right: 0;
8275     left: 0;
8276 }
8277
8278 .ideditor .footer-show {
8279     bottom: 0px;
8280     -webkit-transition: bottom 75ms linear;
8281     -o-transition: bottom 75ms linear;
8282     transition: bottom 75ms linear;
8283 }
8284
8285 .ideditor .footer-hide {
8286     bottom: -100%;
8287     -webkit-transition: bottom 75ms linear;
8288     -o-transition: bottom 75ms linear;
8289     transition: bottom 75ms linear;
8290 }
8291
8292
8293 /* Attribution
8294 ------------------------------------------------------- */
8295 .ideditor .attribution-wrap {
8296     position: absolute;
8297     bottom: 5px;
8298     left: 5px;
8299     right: 5px;
8300     display: -webkit-box;
8301     display: -ms-flexbox;
8302     display: flex;
8303     -webkit-box-pack: justify;
8304         -ms-flex-pack: justify;
8305             justify-content: space-between;
8306     -webkit-box-align: end;
8307         -ms-flex-align: end;
8308             align-items: flex-end;
8309     z-index: 0;
8310     pointer-events: none;
8311 }
8312
8313 .ideditor .attribution-wrap > * {
8314     pointer-events: auto;
8315 }
8316
8317 .ideditor .attribution-wrap .base-layer-attribution,
8318 .ideditor .attribution-wrap .overlay-layer-attribution {
8319     color: #ccc;
8320     font-size: 10px;
8321 }
8322 .ideditor .attribution-wrap .overlay-layer-attribution {
8323     text-align: right;
8324 }
8325
8326 .ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
8327     content: '; ';
8328 }
8329
8330 .ideditor .attribution-wrap .attribution a,
8331 .ideditor .attribution-wrap .attribution a:visited {
8332     color: #ccf;
8333 }
8334 .ideditor .attribution-wrap .attribution a:focus,
8335 .ideditor .attribution-wrap .attribution a:hover {
8336     color: #aaf;
8337 }
8338 @media (hover: hover) {
8339     .ideditor .attribution-wrap .attribution a:hover {
8340         color: #aaf;
8341     }
8342 }
8343
8344 .ideditor .attribution-wrap .attribution .source-image {
8345     height: 20px;
8346     vertical-align: middle;
8347     border-radius: 3px;
8348 }
8349
8350 .ideditor .attribution-wrap .attribution span {
8351     margin: 0 3px;
8352 }
8353
8354
8355 /* Footer - Flash messages
8356 ------------------------------------------------------- */
8357 .ideditor .flash-content {
8358     display: -webkit-box;
8359     display: -ms-flexbox;
8360     display: flex;
8361     -webkit-box-flex: 1;
8362         -ms-flex: 1 0 auto;
8363             flex: 1 0 auto;
8364     -webkit-box-orient: horizontal;
8365     -webkit-box-direction: normal;
8366         -ms-flex-flow: row nowrap;
8367             flex-flow: row nowrap;
8368     -webkit-box-align: center;
8369         -ms-flex-align: center;
8370             align-items: center;
8371     padding: 2px;
8372 }
8373
8374 .ideditor .flash-icon {
8375     -webkit-box-flex: 0;
8376         -ms-flex: 0 0 auto;
8377             flex: 0 0 auto;
8378     width: 20px;
8379     height: 20px;
8380     margin: 0 8px;
8381 }
8382
8383 .ideditor .flash-icon circle {
8384     fill: #eee;
8385 }
8386 .ideditor .flash-icon.disabled circle {
8387     cursor: auto;
8388     fill: rgba(255,255,255,0.7);
8389 }
8390
8391 .ideditor .flash-icon use {
8392     color: #222;
8393 }
8394 .ideditor .flash-icon.disabled use,
8395 .ideditor .flash-icon.operation.disabled use {
8396     fill: rgba(32,32,32,0.7);
8397     color: rgba(40,40,40,0.7);
8398 }
8399
8400 .ideditor .flash-text {
8401     -webkit-box-flex: 1;
8402         -ms-flex: 1 1 auto;
8403             flex: 1 1 auto;
8404 }
8405
8406 /* Scale bar
8407 ------------------------------------------------------- */
8408 .ideditor .map-footer-bar .scale-block {
8409     vertical-align: bottom;
8410     width: 250px;
8411     -webkit-box-flex: 0;
8412         -ms-flex: 0 0 auto;
8413             flex: 0 0 auto;
8414     -webkit-user-select: none;
8415        -moz-user-select: none;
8416         -ms-user-select: none;
8417             user-select: none;
8418     height: 30px;
8419     -ms-flex-item-align: center;
8420         align-self: center;
8421 }
8422
8423 .ideditor .scale-block .scale {
8424     height: 100%;
8425     width: 100%;
8426     cursor: pointer;
8427     display: block;
8428 }
8429 .ideditor[dir='rtl'] .scale-block .scale {
8430     -webkit-transform: scaleX(-1);
8431         -ms-transform: scaleX(-1);
8432             transform: scaleX(-1);
8433 }
8434
8435 .ideditor .scale-block .scale-text {
8436     display: inline-block;
8437     position: absolute;
8438     color: #ccc;
8439     top: 0.45em;
8440 }
8441
8442 .ideditor .scale-block .scale path {
8443     fill: none;
8444     stroke: #ccc;
8445     stroke-width: 1;
8446     shape-rendering: crispEdges;
8447 }
8448
8449 /* Footer - About, Source Switcher
8450 ------------------------------------------------------- */
8451 .ideditor .map-footer-bar .info-block {
8452     -webkit-box-flex: 1;
8453         -ms-flex: 1 1 100%;
8454             flex: 1 1 100%;
8455     overflow: hidden;
8456 }
8457
8458 .ideditor .map-footer-list {
8459     display: -webkit-box;
8460     display: -ms-flexbox;
8461     display: flex;
8462     -webkit-box-orient: horizontal;
8463     -webkit-box-direction: normal;
8464         -ms-flex-flow: row nowrap;
8465             flex-flow: row nowrap;
8466     height: 100%;
8467     -webkit-box-pack: end;
8468         -ms-flex-pack: end;
8469             justify-content: flex-end;
8470 }
8471
8472 .ideditor .map-footer-list li {
8473     height: 100%;
8474     display: -webkit-box;
8475     display: -ms-flexbox;
8476     display: flex;
8477     -webkit-box-align: center;
8478         -ms-flex-align: center;
8479             align-items: center;
8480     white-space: nowrap;
8481     padding: 5px;
8482 }
8483 .ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
8484     border-right: 1px solid rgba(255,255,255,.5);
8485 }
8486 .ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
8487     border-left: 1px solid rgba(255,255,255,.5);
8488 }
8489 .ideditor .map-footer-list li:empty {
8490     display: none;
8491 }
8492
8493 .ideditor .map-footer-list a.chip {
8494     padding: 1px 4px 1px 4px;
8495     border-radius: 2px;
8496     color: #eee;
8497 }
8498 .ideditor .map-footer-list a.chip .icon {
8499     width: 14px;
8500     height: 14px;
8501     margin-top: -2px;
8502 }
8503 .ideditor .map-footer-list a.chip span.count {
8504     margin: 0 3px;
8505 }
8506
8507 .ideditor .source-switch a.chip.live {
8508     background: #d32232;
8509     color: #fff;
8510 }
8511
8512 .ideditor .feature-warning a.chip {
8513     background: #1e90ff;
8514 }
8515
8516 .ideditor .issues-info a.chip.resolved-count {
8517     background: #15911E;
8518 }
8519 .ideditor .issues-info a.chip.warnings-count {
8520     background: #DF8500;
8521 }
8522 .ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
8523     margin-right: 5px;
8524 }
8525 .ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
8526     margin-left: 5px;
8527 }
8528
8529 .ideditor .user-list a:not(:last-child):after {
8530     content: ', ';
8531 }
8532
8533 .ideditor .api-status {
8534     text-align: right;
8535     padding: 1px 10px;
8536     color: #eee;
8537     -webkit-box-flex: 1;
8538         -ms-flex: 1 1 auto;
8539             flex: 1 1 auto;
8540 }
8541 .ideditor[dir='rtl'] .api-status {
8542     text-align: left;
8543 }
8544 .ideditor .api-status:empty {
8545     display: none;
8546 }
8547
8548 .ideditor .api-status.offline,
8549 .ideditor .api-status.readonly,
8550 .ideditor .api-status.error {
8551     background: #a22;
8552 }
8553
8554 .ideditor .api-status a {
8555     text-decoration: underline;
8556     color: #ccc;
8557     pointer-events: all;
8558 }
8559 .ideditor .api-status a:focus,
8560 .ideditor .api-status a:active {
8561     color: inherit;
8562 }
8563 @media (hover: hover) {
8564     .ideditor .api-status a:hover {
8565         color: inherit;
8566     }
8567 }
8568
8569 .ideditor .local-storage-full {
8570     display: block;
8571     width: 100%;
8572 }
8573
8574 /* Notification Badges
8575 ------------------------------------------------------- */
8576 /* For an icon (e.g. new version) */
8577 .ideditor .badge {
8578     display: -webkit-inline-box;
8579     display: -ms-inline-flexbox;
8580     display: inline-flex;
8581     background: #d32232;
8582     width: 21px;
8583     height: 21px;
8584     border-radius: 50%;
8585     -webkit-box-align: center;
8586         -ms-flex-align: center;
8587             align-items: center;
8588     -webkit-box-pack: center;
8589         -ms-flex-pack: center;
8590             justify-content: center;
8591 }
8592 .ideditor[dir='ltr'] .badge {
8593     margin-left: 6px;
8594 }
8595 .ideditor[dir='rtl'] .badge {
8596     margin-right: 6px;
8597 }
8598 .ideditor .badge .icon {
8599     vertical-align: baseline;
8600     width: 11px;
8601     height: 11px;
8602     color: #fff;
8603     -webkit-box-flex: 0;
8604         -ms-flex: 0 0 auto;
8605             flex: 0 0 auto;
8606 }
8607
8608 /* For text (e.g. upcoming events) */
8609 .ideditor .badge-text {
8610     display: inline-block;
8611     color: #fff;
8612     text-align: center;
8613     width: 16px;
8614     height: 16px;
8615     font-size: 10px;
8616     font-weight: bold;
8617     margin-left: 5px;
8618     background: #f00;
8619     border-radius: 9px;
8620 }
8621 .ideditor[dir='rtl'] .badge-text {
8622     margin-left: 0;
8623     margin-right: 5px;
8624 }
8625
8626
8627 /* Modals / Prompts
8628 ------------------------------------------------------- */
8629 .ideditor .modal {
8630     top: 5%;
8631     max-height: 90%;
8632     position: relative;
8633     border-radius: 3px;
8634     overflow: hidden;
8635     margin: auto;
8636     z-index: 50;
8637     width: 80%;
8638     min-width: 200px;
8639     max-width: 550px;
8640     display: -webkit-box;
8641     display: -ms-flexbox;
8642     display: flex;
8643     -webkit-box-orient: vertical;
8644     -webkit-box-direction: normal;
8645         -ms-flex-direction: column;
8646             flex-direction: column;
8647 }
8648
8649 .ideditor .modal .content {
8650     overflow-x: hidden;
8651     overflow-y: auto;
8652 }
8653
8654 .ideditor .modal .loader {
8655     margin-bottom: 10px;
8656 }
8657 .ideditor .modal .description {
8658     text-align: center;
8659 }
8660
8661 .ideditor .shaded {
8662     z-index: 5000;
8663     position: absolute;
8664     top: 0;
8665     bottom: 0;
8666     left: 0;
8667     right: 0;
8668     overflow: auto;
8669 }
8670 .ideditor .shaded:before {
8671     content:'';
8672     background: rgba(0,0,0,0.5);
8673     position: absolute;
8674     left: 0px; right: 0px; top: 0px; bottom: 0px;
8675 }
8676
8677 .ideditor .modal-section {
8678     padding: 20px;
8679     border-bottom: 1px solid #ccc;
8680 }
8681 .ideditor .modal-section p:not(:last-of-type) {
8682     padding-bottom: 20px;
8683 }
8684 .ideditor .modal-section h4 {
8685     padding-bottom: 0;
8686 }
8687 .ideditor .modal-section.buttons {
8688     text-align: center;
8689 }
8690
8691 .ideditor .modal-section.buttons button {
8692     min-width: 130px;
8693 }
8694
8695 .ideditor .modal-section.buttons .action {
8696     display: inline-block;
8697     margin: 0 10px;
8698 }
8699
8700 .ideditor .save-section .buttons {
8701     display: -webkit-box;
8702     display: -ms-flexbox;
8703     display: flex;
8704     -ms-flex-wrap: wrap;
8705         flex-wrap: wrap;
8706     -ms-flex-pack: distribute;
8707         justify-content: space-around;
8708 }
8709
8710 .ideditor .save-section .buttons .action,
8711 .ideditor .save-section .buttons .secondary-action {
8712     width: 45%;
8713     margin: 10px auto;
8714     text-align: center;
8715     vertical-align: middle;
8716 }
8717
8718 .ideditor .loading-modal {
8719     text-align: center;
8720 }
8721 .ideditor .modal-actions {
8722     display: -webkit-box;
8723     display: -ms-flexbox;
8724     display: flex;
8725 }
8726 .ideditor .modal-actions button {
8727     color: #7092ff;
8728     border-bottom: 1px solid #ccc;
8729     border-radius: 0;
8730     min-height: 160px;
8731     text-align: center;
8732     width: 100%;
8733 }
8734
8735 .ideditor .logo-small {
8736     height: 40px;
8737     width: 40px;
8738     margin: auto;
8739 }
8740
8741 .ideditor .logo {
8742     height: 100px;
8743     width: 100%;
8744     max-width: 100px;
8745     margin: auto;
8746 }
8747
8748 .ideditor .modal-actions > :first-child {
8749     border-right: 1px solid #ccc;
8750 }
8751
8752 .ideditor .modal-section:last-child {
8753     border-bottom: 0;
8754 }
8755
8756 /* Restore Modal
8757 ------------------------------------------------------- */
8758 .ideditor .modal-actions .logo-restore {
8759     color: #7092ff;
8760 }
8761 .ideditor .modal-actions .logo-reset {
8762     color: #e06c5e;
8763 }
8764
8765 /* Success Screen / Community Index
8766 ------------------------------------------------------- */
8767 .ideditor .save-success.body {
8768     overflow-y: scroll;
8769     overflow-x: hidden;
8770 }
8771
8772 .ideditor .save-success .link-out {
8773     margin: 0px 5px;
8774     white-space: nowrap;
8775 }
8776
8777 .ideditor .save-summary,
8778 .ideditor .save-communityLinks {
8779     padding: 0px 20px 15px 20px;
8780 }
8781
8782 .ideditor .save-communityLinks {
8783     border-top: 1px solid #ccc;
8784 }
8785
8786 .ideditor .save-success table,
8787 .ideditor .save-success p {
8788     margin-top: 15px;
8789 }
8790 .ideditor .save-success h3 {
8791     font-size: 14px;
8792     margin-top: 15px;
8793     line-height: 1.5;
8794     padding-bottom: 0;
8795 }
8796 .ideditor .save-success td {
8797     vertical-align: top;
8798 }
8799 .ideditor .save-success td.cell-icon {
8800     width: 40px;
8801 }
8802 .ideditor .save-success td.cell-detail {
8803     padding: 0 10px;
8804 }
8805 .ideditor .save-success td.community-detail {
8806     padding-bottom: 15px;
8807 }
8808 .ideditor .save-success .community-table h3 {
8809     margin: 0;
8810 }
8811
8812 .ideditor .summary-view-on-osm,
8813 .ideditor .community-name {
8814     font-size: 14px;
8815     font-weight: bold;
8816 }
8817 .ideditor .community-languages {
8818     margin-top: 5px;
8819     font-style: italic;
8820 }
8821 .ideditor .community-languages:only-child {
8822     margin-top: 0;
8823 }
8824
8825 .ideditor .community-detail a.hide-toggle,
8826 .ideditor .community-detail a:visited.hide-toggle {
8827     font-size: 12px;
8828     font-weight: normal;
8829     padding-bottom: 0;
8830 }
8831 .ideditor .community-detail .hide-toggle svg.icon.pre-text {
8832     width: 12px;
8833     height: 15px;
8834 }
8835
8836 .ideditor .community-events {
8837     margin-top: 5px;
8838 }
8839
8840 .ideditor .community-event,
8841 .ideditor .community-more {
8842     background-color: #efefef;
8843     padding: 8px;
8844     border-radius: 4px;
8845     margin-bottom: 5px;
8846 }
8847
8848 .ideditor .community-event-name {
8849     font-size: 14px;
8850     font-weight: bold;
8851 }
8852 .ideditor .community-event-when {
8853     font-weight: bold;
8854 }
8855
8856 .ideditor .community-missing {
8857     padding: 10px;
8858     text-align: center;
8859 }
8860
8861
8862 /* Splash Modal
8863 ------------------------------------------------------- */
8864 .ideditor .modal-actions .logo-walkthrough,
8865 .ideditor .modal-actions .logo-features {
8866     color: #7092ff;
8867 }
8868
8869 .ideditor .modal-splash .section-preferences-third-party {
8870     margin-top: 20px;
8871 }
8872
8873 .ideditor .modal-splash .section-preferences-third-party .privacy-link {
8874     display: none;
8875 }
8876
8877
8878 /* Shortcuts Modal
8879 ------------------------------------------------------- */
8880 .ideditor .modal-shortcuts {
8881     width: 90%;
8882     max-width: 1050px;
8883 }
8884
8885 .ideditor .modal-shortcuts .modal-section:last-child {
8886     padding: 10px 15px 20px 15px;
8887     min-height: 275px;
8888 }
8889
8890 .ideditor .modal-shortcuts .tabs-bar {
8891     padding-bottom: 5px;
8892     text-align: center;
8893 }
8894
8895 .ideditor .modal-shortcuts a.tab {
8896     display: inline-block;
8897     padding: 5px 10px;
8898     margin: 0 5px;
8899     cursor: pointer;
8900     color: #666;
8901     font-size: 16px;
8902     font-weight: bold;
8903 }
8904 .ideditor .modal-shortcuts a.tab.active {
8905     color: #7092ff;
8906     border-bottom: 2px solid;
8907 }
8908 .ideditor .modal-shortcuts a.tab:focus,
8909 .ideditor .modal-shortcuts a.tab:active {
8910     color: #597be7;
8911     background-color: #efefef;
8912 }
8913 @media (hover: hover) {
8914     .ideditor .modal-shortcuts a.tab:hover {
8915         color: #597be7;
8916         background-color: #efefef;
8917     }
8918 }
8919
8920 .ideditor .modal-shortcuts .shortcut-tab {
8921     display: -webkit-box;
8922     display: -ms-flexbox;
8923     display: flex;
8924     -webkit-box-orient: horizontal;
8925     -webkit-box-direction: normal;
8926         -ms-flex-flow: row wrap;
8927             flex-flow: row wrap;
8928     -ms-flex-pack: distribute;
8929         justify-content: space-around;
8930 }
8931
8932 .ideditor .modal-shortcuts .shortcut-column {
8933     width: auto;
8934 }
8935
8936 .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
8937     -webkit-box-flex: 1;
8938         -ms-flex: 1 1 100%;
8939             flex: 1 1 100%;
8940     width: 100%;
8941 }
8942
8943 .ideditor .modal-shortcuts td {
8944     padding-bottom: 5px;
8945 }
8946
8947 .ideditor .modal-shortcuts .shortcut-section {
8948     padding: 20px 0 10px 0;
8949 }
8950
8951 .ideditor .modal-shortcuts .shortcut-keys {
8952     padding: 0 10px;
8953     color: #767676;
8954     text-align: right;
8955     white-space: nowrap;
8956 }
8957 .ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
8958     text-align: left;
8959 }
8960
8961 .ideditor .modal-shortcuts .shortcut-keys kbd {
8962     color: #555;
8963 }
8964
8965 .ideditor .modal-shortcuts .shortcut-keys .gesture {
8966     color: #333;
8967     padding: 3px;
8968 }
8969
8970
8971 /* Settings Modals
8972 ------------------------------------------------------- */
8973 .ideditor .settings-modal textarea {
8974     height: 70px;
8975     width: 100%;
8976 }
8977
8978 .ideditor .settings-custom-background .instructions-template {
8979     margin-bottom: 20px;
8980 }
8981 .ideditor .settings-custom-background .instructions-template p {
8982     margin-bottom: 0;
8983 }
8984 .ideditor .settings-custom-background .instructions-template ul {
8985     padding-bottom: 20px;
8986 }
8987 .ideditor .settings-custom-background .instructions-template ul li {
8988     list-style-type: disc;
8989     list-style-position: inside;
8990 }
8991
8992 .ideditor .settings-custom-data .instructions-url {
8993     margin-bottom: 10px;
8994 }
8995 .ideditor .settings-custom-data .field-file,
8996 .ideditor .settings-custom-data .instructions-template {
8997     margin-bottom: 20px;
8998 }
8999
9000
9001 /* Save Mode
9002 ------------------------------------------------------- */
9003 .ideditor a.user-info {
9004     display: inline-block;
9005 }
9006
9007 .ideditor .commit-form {
9008     margin-bottom: 0;
9009 }
9010
9011 .ideditor .user-info img {
9012     float: left;
9013 }
9014
9015 .ideditor .note-save .field-warning,
9016 .ideditor .field-warning {
9017     background: #ffb;
9018     border: 1px solid #ccc;
9019     border-radius: 4px;
9020     padding: 10px;
9021 }
9022
9023 .ideditor .note-save .field-warning:empty,
9024 .ideditor .field-warning:empty {
9025     display: none;
9026 }
9027
9028 .ideditor .field-warning,
9029 .ideditor .changeset-info,
9030 .ideditor .request-review,
9031 .ideditor .commit-info {
9032     margin-bottom: 10px;
9033 }
9034
9035 .ideditor .request-review label {
9036     cursor: pointer;
9037 }
9038
9039 .ideditor .changeset-list {
9040     border: 1px solid #ccc;
9041     border-radius: 4px;
9042     background: #fff;
9043     margin-bottom: 10px;
9044     overflow: hidden;
9045 }
9046
9047 .ideditor .changeset-list li button {
9048     padding: 5px 10px;
9049     width: 100%;
9050     border-radius: 0;
9051     text-align: initial;
9052 }
9053 .ideditor .changeset-list li {
9054     border-top: 1px solid #ccc;
9055 }
9056 .ideditor .changeset-list li:first-child {
9057     border-top: 0;
9058 }
9059 .ideditor .changeset-list .alert {
9060     opacity: 0.5;
9061 }
9062
9063
9064 /* Conflict resolution
9065 ------------------------------------------------------- */
9066 .ideditor .conflicts-help {
9067     padding: 20px;
9068     background-color: #ffffbb;
9069     border-bottom: 1px solid #ccc;
9070 }
9071
9072 .ideditor .conflicts-buttons {
9073     padding: 20px;
9074 }
9075
9076 .ideditor button.conflicts-button {
9077     float: left;
9078 }
9079
9080 .ideditor .conflict-container {
9081     border-bottom: 1px solid #ccc;
9082 }
9083
9084 .ideditor .conflict-description {
9085     padding: 5px 20px;
9086     display: block;
9087 }
9088
9089 .ideditor .conflicts-done {
9090     padding: 20px 20px 0 20px;
9091 }
9092
9093 .ideditor .conflict-detail-container {
9094     padding: 10px 20px;
9095 }
9096
9097 .ideditor .conflict-count {
9098     padding: 10px 20px;
9099 }
9100
9101 .ideditor .conflict-choices {
9102     margin-top: 10px;
9103 }
9104
9105 .ideditor .conflict-nav-buttons {
9106     padding: 10px 0 20px 0;
9107 }
9108
9109 .ideditor .conflict-nav-button {
9110     height: 30px;
9111 }
9112
9113
9114 /* Notices (Zoom in to Edit)
9115 ------------------------------------------------------- */
9116 .ideditor .notice {
9117     position: absolute;
9118     top: 15px;
9119     left: 0;
9120     right: 0;
9121     text-align: center;
9122 }
9123
9124 .ideditor .notice .zoom-to {
9125     margin: auto;
9126     width: 300px;
9127     padding: 20px 5px;
9128     font-size: 150%;
9129     border-radius: 8px;
9130     font-weight: bold;
9131 }
9132
9133 .ideditor .notice .zoom-to:focus,
9134 .ideditor .notice .zoom-to:active {
9135     background: rgba(0,0,0,0.6);
9136 }
9137 @media (hover: hover) {
9138     .ideditor .notice .zoom-to:hover {
9139         background: rgba(0,0,0,0.6);
9140     }
9141 }
9142
9143 .ideditor .notice .zoom-to .icon {
9144     width: 30px;
9145     height: 30px;
9146     vertical-align: middle;
9147     margin-right: 10px;
9148 }
9149 .ideditor[dir='rtl'] .notice .zoom-to .icon {
9150     margin-left: 10px;
9151     margin-right: 0;
9152 }
9153
9154
9155 /* Tooltips
9156 ------------------------------------------------------- */
9157 .ideditor .popover {
9158     position: absolute;
9159     display: none;
9160 }
9161 .ideditor .tooltip {
9162     color: #333;
9163     font-size: 12px;
9164     white-space: initial;
9165 }
9166 .ideditor .tooltip:not(.curtain-tooltip) {
9167     pointer-events: none;
9168 }
9169 .ideditor .popover.in {
9170     z-index: 5000;
9171     height: auto;
9172     display: block;
9173 }
9174 .ideditor .tooltip.in {
9175     opacity: 0.95;
9176 }
9177 .ideditor .popover.top {
9178     margin-top: -4px;
9179 }
9180 .ideditor .popover.right {
9181     margin-left: 4px;
9182 }
9183 .ideditor .popover.bottom {
9184     margin-top: 4px;
9185 }
9186 .ideditor .popover.left {
9187     margin-left: -4px;
9188 }
9189 .ideditor .popover.arrowed.top {
9190     margin-top: -10px;
9191 }
9192 .ideditor .popover.arrowed.right {
9193     margin-left: 10px;
9194 }
9195 .ideditor .popover.arrowed.bottom {
9196     margin-top: 10px;
9197 }
9198 .ideditor .popover.arrowed.left {
9199     margin-left: -10px;
9200 }
9201 .ideditor .bar-button .tooltip.arrowed.bottom {
9202     margin-top: 20px;
9203 }
9204 .ideditor .tooltip.top {
9205     text-align: center;
9206 }
9207 .ideditor .tooltip.right {
9208     text-align: left;
9209 }
9210 .ideditor .tooltip.bottom {
9211     text-align: center;
9212 }
9213 .ideditor .tooltip.left {
9214     text-align: right;
9215 }
9216
9217 .ideditor .popover-inner {
9218     border-radius: inherit;
9219 }
9220
9221 .ideditor .tooltip .popover-inner {
9222     border-radius: 4px;
9223     max-width: 200px;
9224     min-width: 80px;
9225     padding: 10px;
9226     font-weight: normal;
9227     background-color: #fff;
9228 }
9229
9230 .ideditor .popover-arrow {
9231     position: absolute;
9232     width: 0;
9233     height: 0;
9234     border-color: transparent;
9235     border-style: solid;
9236 }
9237 .ideditor .popover.top .popover-arrow {
9238     bottom: -5px;
9239     left: 50%;
9240     margin-left: -5px;
9241     border-top-color: #fff;
9242     border-width: 5px 5px 0;
9243 }
9244 .ideditor .popover.right .popover-arrow {
9245     top: 50%;
9246     left: -5px;
9247     margin-top: -5px;
9248     border-right-color: #fff;
9249     border-width: 5px 5px 5px 0;
9250 }
9251 .ideditor .popover.left .popover-arrow {
9252     top: 50%;
9253     right: -5px;
9254     margin-top: -5px;
9255     border-left-color: #fff;
9256     border-width: 5px 0 5px 5px;
9257 }
9258 .ideditor .popover.bottom .popover-arrow {
9259     top: -5px;
9260     left: 50%;
9261     margin-left: -5px;
9262     border-bottom-color: #fff;
9263     border-width: 0 5px 5px;
9264 }
9265 .ideditor .popover:not(.arrowed) .popover-arrow {
9266     display: none;
9267 }
9268
9269 .ideditor .tooltip-heading {
9270     font-weight: bold;
9271     background: #f6f6f6;
9272     padding: 10px;
9273     margin: -10px -10px 10px -10px;
9274     border-radius: 3px 3px 0 0;
9275     font-size: 14px;
9276 }
9277
9278 .ideditor .keyhint-wrap {
9279     background: #f6f6f6;
9280     padding: 10px;
9281     margin: 10px -10px -10px -10px;
9282     border-radius: 0 0 3px 3px;
9283 }
9284 .ideditor .popover-inner .shortcut {
9285     font-weight: bold;
9286     margin-left: 5px;
9287 }
9288
9289 .ideditor[dir='rtl'] .popover-inner .shortcut {
9290     margin-left: 0;
9291     margin-right: 5px;
9292 }
9293
9294 /* dark tooltips for sidebar / panels */
9295 .ideditor .tooltip.dark.top .popover-arrow,
9296 .ideditor .map-pane .tooltip.top .popover-arrow,
9297 .ideditor .sidebar .tooltip.top .popover-arrow,
9298 .ideditor .modal .tooltip.top .popover-arrow {
9299     border-top-color: #000;
9300 }
9301 .ideditor .tooltip.dark.bottom .popover-arrow,
9302 .ideditor .map-pane .tooltip.bottom .popover-arrow,
9303 .ideditor .sidebar .tooltip.bottom .popover-arrow,
9304 .ideditor .modal .tooltip.bottom .popover-arrow {
9305     border-bottom-color: #000;
9306 }
9307 .ideditor .tooltip.dark.left .popover-arrow,
9308 .ideditor .map-pane .tooltip.left .popover-arrow,
9309 .ideditor .sidebar .tooltip.left .popover-arrow,
9310 .ideditor .modal .tooltip.left .popover-arrow {
9311     border-left-color: #000;
9312 }
9313 .ideditor .tooltip.dark.right .popover-arrow,
9314 .ideditor .map-pane .tooltip.right .popover-arrow,
9315 .ideditor .sidebar .tooltip.right .popover-arrow,
9316 .ideditor .modal .tooltip.right .popover-arrow {
9317     border-right-color: #000;
9318 }
9319 .ideditor .tooltip.dark .popover-inner,
9320 .ideditor .tooltip.dark .tooltip-heading,
9321 .ideditor .tooltip.dark .keyhint-wrap,
9322 .ideditor .map-pane .popover-inner,
9323 .ideditor .map-pane .tooltip-heading,
9324 .ideditor .map-pane .keyhint-wrap,
9325 .ideditor .sidebar .popover-inner,
9326 .ideditor .sidebar .tooltip-heading,
9327 .ideditor .sidebar .keyhint-wrap,
9328 .ideditor .modal .popover-inner {
9329     background: #000;
9330     color: #ccc;
9331 }
9332 .ideditor .tooltip.dark kbd,
9333 .ideditor .map-pane .tooltip kbd,
9334 .ideditor .sidebar .tooltip kbd {
9335     background-color: #666;
9336     border: solid 1px #444;
9337     border-bottom-color: #333;
9338     -webkit-box-shadow: inset 0 -1px 0 #333;
9339             box-shadow: inset 0 -1px 0 #333;
9340     color: #eee;
9341 }
9342
9343 /* Exceptions for tooltip layouts */
9344
9345 /* commit warning tooltips need to be closer */
9346 .ideditor .warning-section .tooltip.top {
9347     margin-top: -5px;
9348 }
9349
9350 .ideditor li:first-of-type .badge .tooltip,
9351 .ideditor li.hide + li.version .badge .tooltip {
9352     left: auto !important;
9353     right: 5px !important;
9354 }
9355 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
9356 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
9357     left: 5px !important;
9358     right: auto !important;
9359 }
9360 .ideditor li:first-of-type .badge .tooltip .popover-arrow,
9361 .ideditor li.hide + li.version .badge .tooltip .popover-arrow {
9362     right: 15px !important;
9363     left: auto !important;
9364 }
9365 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
9366 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
9367     left: 15px !important;
9368     right: auto !important;
9369 }
9370
9371
9372 /* Contextual Edit Menu
9373 ------------------------------------------------------- */
9374 .ideditor .edit-menu {
9375     position: absolute;
9376     display: -webkit-box;
9377     display: -ms-flexbox;
9378     display: flex;
9379     -webkit-box-orient: vertical;
9380     -webkit-box-direction: normal;
9381         -ms-flex-direction: column;
9382             flex-direction: column;
9383     background: #fff;
9384     border-radius: 4px;
9385     /* padding is set in edit_menu.js */
9386 }
9387
9388 .ideditor .edit-menu .tooltip {
9389     width: 200px; /* see also edit_menu.js */
9390 }
9391
9392 .ideditor .edit-menu-item {
9393     display: -webkit-box;
9394     display: -ms-flexbox;
9395     display: flex;
9396     -webkit-box-align: center;
9397         -ms-flex-align: center;
9398             align-items: center;
9399     border-radius: 0;
9400     padding: 0 12px;
9401     /* height is set in edit_menu.js */
9402 }
9403 .ideditor .edit-menu-item .label {
9404     max-width: 120px;
9405     text-align: initial;
9406     line-height: 1.1em;
9407     font-weight: bold;
9408 }
9409 .ideditor[dir='ltr'] .edit-menu-item .label {
9410     margin-left: 8px;
9411 }
9412 .ideditor[dir='rtl'] .edit-menu-item .label {
9413     margin-right: 8px;
9414 }
9415
9416 .ideditor .edit-menu-item use {
9417     pointer-events: none;
9418 }
9419
9420 /* Lasso
9421 ------------------------------------------------------- */
9422 .ideditor .lasso-path {
9423     fill-opacity: 0.3;
9424     stroke: #fff;
9425     stroke-width: 1;
9426     stroke-opacity: 1;
9427     stroke-dasharray: 5, 5;
9428 }
9429
9430
9431 /* Scrollbars
9432  ----------------------------------------------------- */
9433 .ideditor ::-webkit-scrollbar {
9434     height: 20px;
9435     overflow: visible;
9436     width: 10px;
9437     border-left: 1px solid #DDD;
9438 }
9439
9440 .ideditor ::-webkit-scrollbar-track {
9441     background-clip: padding-box;
9442     border: solid transparent;
9443     border-width: 0;
9444 }
9445
9446 .ideditor ::-webkit-scrollbar-thumb {
9447     background-color: rgba(0,0,0,.2);
9448     background-clip: padding-box;
9449     border: solid transparent;
9450     border-width: 3px 3px 3px 4px;
9451     border-radius: 6px;
9452 }
9453 .ideditor ::-webkit-scrollbar-track:active {
9454     background-color: rgba(0,0,0,.05);
9455 }
9456 @media (hover: hover) {
9457     .ideditor ::-webkit-scrollbar-track:hover {
9458         background-color: rgba(0,0,0,.05);
9459     }
9460 }
9461
9462
9463 /* Intro walkthrough
9464  ----------------------------------------------------- */
9465 .ideditor .curtain {
9466     z-index: 1000;
9467     pointer-events: none;
9468     position: absolute;
9469 }
9470
9471 .ideditor .curtain-darkness {
9472     pointer-events: all;
9473     fill-opacity: 0.7;
9474     fill: #222;
9475     fill-rule: evenodd;
9476 }
9477
9478 .ideditor .intro-nav-wrap {
9479     display: -webkit-box;
9480     display: -ms-flexbox;
9481     display: flex;
9482     -webkit-box-orient: horizontal;
9483     -webkit-box-direction: normal;
9484         -ms-flex-direction: row;
9485             flex-direction: row;
9486     position: absolute;
9487     left: 0;
9488     right: 0;
9489     bottom: 30px;
9490     padding: 10px;
9491     z-index: 1001;
9492 }
9493
9494 .ideditor .intro-nav-wrap .intro-nav-wrap-logo {
9495     -webkit-box-flex: 0;
9496         -ms-flex: 0 0 auto;
9497             flex: 0 0 auto;
9498     height: 40px;
9499     width: 40px;
9500     color: #fff;
9501     margin: 0px 20px;
9502     vertical-align: middle;
9503 }
9504
9505 .ideditor .intro-nav-wrap .joined {
9506     -webkit-box-flex: 1;
9507         -ms-flex: 1 1 auto;
9508             flex: 1 1 auto;
9509     display: -webkit-box;
9510     display: -ms-flexbox;
9511     display: flex;
9512     -webkit-box-orient: horizontal;
9513     -webkit-box-direction: normal;
9514         -ms-flex-direction: row;
9515             flex-direction: row;
9516 }
9517
9518 .ideditor .intro-nav-wrap button.chapter {
9519     -webkit-box-flex: 1;
9520         -ms-flex: 1 1 100%;
9521             flex: 1 1 100%;
9522     padding: 0px 5px;
9523     font-weight: bold;
9524 }
9525
9526 .ideditor .intro-nav-wrap button.chapter.next {
9527     -webkit-animation-duration: 1s;
9528             animation-duration: 1s;
9529     -webkit-animation-name: pulse;
9530             animation-name: pulse;
9531     -webkit-animation-iteration-count: infinite;
9532             animation-iteration-count: infinite;
9533     -webkit-animation-direction: alternate;
9534             animation-direction: alternate;
9535 }
9536 @-webkit-keyframes pulse {
9537     from  { background: #7092ff; }
9538     to    { background: #c6d4ff; }
9539 }
9540 @keyframes pulse {
9541     from  { background: #7092ff; }
9542     to    { background: #c6d4ff; }
9543 }
9544
9545 .ideditor .intro-nav-wrap button.chapter.finished {
9546     background: #8cd05f;
9547 }
9548
9549 .ideditor .intro-nav-wrap button.chapter .status {
9550     display: none;
9551 }
9552
9553 .ideditor .intro-nav-wrap button.chapter.finished .status {
9554     display: inline-block;
9555 }
9556
9557 .ideditor .curtain-tooltip {
9558     z-index: 1002;
9559 }
9560
9561 .ideditor .curtain-tooltip.tooltip.in {
9562     opacity: 1;
9563 }
9564 .ideditor .curtain-tooltip.tooltip {
9565     text-align: left;
9566 }
9567 .ideditor[dir='rtl'] .curtain-tooltip.tooltip {
9568     text-align: right;
9569 }
9570
9571 .ideditor .curtain-tooltip .popover-inner {
9572     font-size: 15px;
9573     position: relative;
9574     padding: 20px;
9575 }
9576
9577 .ideditor .curtain-tooltip .popover-inner .button-section,
9578 .ideditor .curtain-tooltip .popover-inner .instruction {
9579     font-weight: bold;
9580     display: block;
9581     border-top: 1px solid #ccc;
9582     margin-top: 10px;
9583     margin-left: -20px;
9584     margin-right: -20px;
9585     padding: 10px 20px 0 20px;
9586 }
9587
9588 .ideditor .curtain-tooltip .popover-inner .button-section button {
9589     width: 66.6666%;
9590 }
9591
9592 .ideditor .curtain-tooltip .popover-inner .instruction:only-child {
9593     border: 0;
9594     padding: 0;
9595     margin: 0;
9596 }
9597
9598 .ideditor .curtain-tooltip .popover-inner .icon.pre-text {
9599     vertical-align: text-top;
9600     margin-right: 0;
9601     margin-left: 0;
9602     display: inline-block;
9603 }
9604
9605 .ideditor .curtain-tooltip.intro-points-describe,
9606 .ideditor .curtain-tooltip.intro-lines-name_road {
9607     top: 133px !important;
9608 }
9609
9610 .ideditor .tooltip-illustration {
9611     height: 80px;
9612     width: 200px;
9613     margin-left: -20px;
9614     margin-top: -10px;
9615 }
9616 .ideditor[dir='rtl'] .tooltip-illustration {
9617     margin-left: auto;
9618     margin-right: -20px;
9619 }
9620
9621 .ideditor .curtain-tooltip.intro-mouse {
9622     -webkit-user-select: none;
9623        -moz-user-select: none;
9624         -ms-user-select: none;
9625             user-select: none;
9626 }
9627
9628 .ideditor .curtain-tooltip.intro-mouse .counter {
9629     position: absolute;
9630     display: block;
9631     top: 50px;
9632     width: 100%;
9633     text-align: center;
9634     font-weight: bold;
9635     font-size: 14px;
9636     z-index: 1003;
9637 }
9638
9639 .ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
9640     fill: rgba(112, 146, 255, 0);
9641     color: rgba(112, 146, 255, 0);
9642 }
9643 .ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
9644     fill: rgba(112, 146, 255, 1);
9645 }
9646 .ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
9647     color: rgba(112, 146, 255, 1);
9648 }
9649
9650 .ideditor .huge-modal-button {
9651     width: 100%;
9652     padding: 20px;
9653 }
9654
9655 .ideditor .huge-modal-button .illustration {
9656     height: 100px;
9657     width: 100px;
9658     color: #7092ff;
9659 }