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