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