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