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