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