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-child {
5153     border-radius: 0 0 4px 4px;
5154 }
5155 .ideditor .form-field-input-url > input:not(:only-child) {
5156     border-radius: 0 0 0 4px;
5157 }
5158 .ideditor .form-field-input-number > input:only-of-type {
5159     border-radius: 0 0 0 4px;
5160 }
5161 .ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
5162     border-radius: 0 0 4px 0;
5163 }
5164 .ideditor .form-field-input-number > button:last-of-type {
5165     border-radius: 0 0 4px 0;
5166 }
5167 .ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
5168     border-radius: 0 0 0 4px;
5169 }
5170
5171 .ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
5172 .ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
5173 .ideditor[dir='ltr'] .form-field-input-identifier > button {
5174     border-bottom-right-radius: 4px;
5175 }
5176 .ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
5177 .ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
5178 .ideditor[dir='rtl'] .form-field-input-identifier > button {
5179     border-bottom-left-radius: 4px;
5180 }
5181
5182 /* draw the up/down on the buttons */
5183 .ideditor .form-field-input-number button.decrement::after,
5184 .ideditor .form-field-input-number button.increment::after {
5185     content: "";
5186     height: 0; width: 0;
5187     position: absolute;
5188     left: 0; right: 0; bottom: 0; top: 0;
5189     margin: auto;
5190 }
5191 .ideditor .form-field-input-number button.decrement::after {
5192     border-top: 5px solid #ccc;
5193     border-left: 5px solid transparent;
5194     border-right: 5px solid transparent;
5195 }
5196 .ideditor .form-field-input-number button.increment::after {
5197     border-bottom: 5px solid #ccc;
5198     border-left: 5px solid transparent;
5199     border-right: 5px solid transparent;
5200 }
5201
5202
5203 /* Field - Checkbox
5204 ------------------------------------------------------- */
5205 .ideditor .form-field-input-check {
5206     display: -webkit-box;
5207     display: -webkit-flex;
5208     display: -ms-flexbox;
5209     display: flex;
5210     -webkit-box-align: center;
5211     -webkit-align-items: center;
5212         -ms-flex-align: center;
5213             align-items: center;
5214     background: #fff;
5215     padding: 5px 10px;
5216     color: #7092ff;
5217     border: 1px solid #ccc;
5218     border-top: 0;
5219     cursor: pointer;
5220 }
5221 .ideditor .form-field-input-check > input[type="checkbox"] {
5222     -webkit-box-flex: 0;
5223     -webkit-flex: 0 1 auto;
5224         -ms-flex: 0 1 auto;
5225             flex: 0 1 auto;
5226     width: 20px;
5227     margin-top: 0;
5228 }
5229 .ideditor .form-field-input-check > span {
5230     -webkit-box-flex: 1;
5231     -webkit-flex: 1 1 auto;
5232         -ms-flex: 1 1 auto;
5233             flex: 1 1 auto;
5234 }
5235 .ideditor .form-field-input-check > span.mixed {
5236     font-style: italic;
5237 }
5238 .ideditor .form-field-input-check > .reverser {
5239     -webkit-box-flex: 0;
5240     -webkit-flex: 0 1 auto;
5241         -ms-flex: 0 1 auto;
5242             flex: 0 1 auto;
5243     background-color: #eff2f7;
5244     border: 1px solid #ccd5e3;
5245     border-radius: 2px;
5246     padding: 0px 8px;
5247     color: inherit;
5248 }
5249 .ideditor[dir='ltr'] .form-field-input-check > .reverser {
5250     padding-right: 2px;
5251 }
5252 .ideditor[dir='rtl'] .form-field-input-check > .reverser {
5253     padding-left: 2px;
5254 }
5255 .ideditor .form-field-input-check > .reverser:active,
5256 .ideditor .form-field-input-check > .reverser:focus {
5257     background: #e3e8ef;
5258 }
5259 @media (hover: hover) {
5260     .ideditor .form-field-input-check > .reverser:hover {
5261         background: #e3e8ef;
5262     }
5263 }
5264 .ideditor .form-field-input-check > .reverser.hide {
5265     display: none;
5266 }
5267 .ideditor .form-field-input-check:active,
5268 .ideditor .form-field-input-check:focus {
5269     background: #f1f1f1;
5270 }
5271 @media (hover: hover) {
5272     .ideditor .form-field-input-check:hover {
5273         background: #f1f1f1;
5274     }
5275 }
5276 .ideditor .form-field-input-check .set {
5277     color: inherit;
5278 }
5279 .ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
5280     opacity: .5;
5281 }
5282
5283
5284 /* Field - Radio button
5285 ------------------------------------------------------- */
5286 .ideditor .form-field-input-radio {
5287     -webkit-box-flex: 1;
5288     -webkit-flex: 1 1 auto;
5289         -ms-flex: 1 1 auto;
5290             flex: 1 1 auto;
5291     display: -webkit-box;
5292     display: -webkit-flex;
5293     display: -ms-flexbox;
5294     display: flex;
5295     -webkit-box-orient: horizontal;
5296     -webkit-box-direction: normal;
5297     -webkit-flex-flow: row wrap;
5298         -ms-flex-flow: row wrap;
5299             flex-flow: row wrap;
5300 }
5301 .ideditor .form-field-input-radio > label {
5302     -webkit-box-flex: 1;
5303     -webkit-flex: 1 1 auto;
5304         -ms-flex: 1 1 auto;
5305             flex: 1 1 auto;
5306     display: -webkit-box;
5307     display: -webkit-flex;
5308     display: -ms-flexbox;
5309     display: flex;
5310     -webkit-box-orient: horizontal;
5311     -webkit-box-direction: normal;
5312     -webkit-flex-flow: row nowrap;
5313         -ms-flex-flow: row nowrap;
5314             flex-flow: row nowrap;
5315     -webkit-box-align: center;
5316     -webkit-align-items: center;
5317         -ms-flex-align: center;
5318             align-items: center;
5319     width: 100%;
5320     padding: 5px 10px;
5321     background-color: #fff;
5322     color: #7092ff;
5323     cursor: pointer;
5324 }
5325 .ideditor .form-field-input-radio > label.mixed {
5326     font-style: italic;
5327 }
5328 .ideditor .form-field-input-radio > label:last-child {
5329     border-radius: 0 0 4px 4px;
5330 }
5331 .ideditor .form-field-input-radio > label:active,
5332 .ideditor .form-field-input-radio > label:focus {
5333     background-color: #ececec;
5334 }
5335 @media (hover: hover) {
5336     .ideditor .form-field-input-radio > label:hover {
5337         background-color: #ececec;
5338     }
5339 }
5340 .ideditor .form-field-input-radio > label.active {
5341     background-color: #e8ebff;
5342 }
5343 .ideditor .form-field-input-radio > label:not(:last-of-type) {
5344     border-bottom: 1px solid #ccc;
5345 }
5346 .ideditor .form-field-input-radio > label > input[type="radio"] {
5347     -webkit-box-flex: 0;
5348     -webkit-flex: 0 1 auto;
5349         -ms-flex: 0 1 auto;
5350             flex: 0 1 auto;
5351     width: 20px;
5352 }
5353 .ideditor .form-field-input-radio > label > span {
5354     -webkit-box-flex: 1;
5355     -webkit-flex: 1 1 auto;
5356         -ms-flex: 1 1 auto;
5357             flex: 1 1 auto;
5358     overflow: hidden;
5359     white-space: nowrap;
5360     -o-text-overflow: ellipsis;
5361        text-overflow: ellipsis;
5362 }
5363
5364 /* Hide placeholder for radio buttons if another is active, or not in hover state */
5365 .ideditor .form-field-input-radio label.active ~ .placeholder,
5366 .ideditor .form-field-input-radio .placeholder {
5367     padding: 0;
5368     opacity: 0;
5369     width: 0;
5370     height: 0;
5371     display: block;
5372     overflow: hidden;
5373 }
5374
5375
5376 /* Field - roadheight and roadspeed
5377 ------------------------------------------------------- */
5378 .ideditor .form-field-input-roadheight input.roadheight-number,
5379 .ideditor .form-field-input-roadheight input.roadheight-secondary-number,
5380 .ideditor .form-field-input-roadspeed input.roadspeed-number {
5381     -webkit-flex-basis: 0;
5382         -ms-flex-preferred-size: 0;
5383             flex-basis: 0;
5384 }
5385 .ideditor .form-field-input-roadheight input.roadheight-unit,
5386 .ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
5387     -webkit-box-flex: 0;
5388     -webkit-flex: 0 1 auto;
5389         -ms-flex: 0 1 auto;
5390             flex: 0 1 auto;
5391     width: 60px;
5392 }
5393 .ideditor .form-field-input-roadspeed input.roadspeed-unit {
5394     -webkit-box-flex: 0;
5395     -webkit-flex: 0 1 auto;
5396         -ms-flex: 0 1 auto;
5397             flex: 0 1 auto;
5398     width: 80px;
5399 }
5400 .ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
5401 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
5402     border-radius: 0 0 0 4px;
5403 }
5404 .ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
5405 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
5406     border-radius: 0 0 4px 0;
5407 }
5408 .ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
5409 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
5410     border-left: 0;
5411     border-radius: 0 0 4px 0;
5412 }
5413 .ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
5414 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
5415     border-right: 0;
5416     border-radius: 0 0 0 4px;
5417 }
5418
5419
5420 /* Field - Localized Name
5421 ------------------------------------------------------- */
5422 .ideditor .form-field-input-localized > input.localized-main {
5423     border-radius: 0 0 0 4px;
5424 }
5425 .ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
5426     border-radius: 0 0 4px 0;
5427 }
5428 .ideditor .form-field-input-localized > button.localized-add {
5429     border-radius: 0 0 4px 0;
5430 }
5431 .ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
5432     border-radius: 0 0 0 4px;
5433 }
5434
5435 .ideditor .form-field-input-localized button.localized-add.disabled,
5436 .ideditor .form-field-input-localized input.localized-main.disabled,
5437 .ideditor .form-field-input-localized input.localized-lang.disabled,
5438 .ideditor .form-field-input-localized input.localized-value.disabled {
5439     color: #777;
5440     background-color: #eee;
5441     cursor: not-allowed;
5442 }
5443
5444 /* nested subfields for name in different languages */
5445 .ideditor .localized-multilingual {
5446     padding: 0 10px;
5447     -webkit-flex-basis: 100%;
5448         -ms-flex-preferred-size: 100%;
5449             flex-basis: 100%;
5450 }
5451 .ideditor .localized-multilingual .entry {
5452     position: relative;
5453     overflow: hidden;
5454 }
5455
5456 /* draws a little line connecting the multilingual field up to the name field */
5457 .ideditor .localized-multilingual .entry::before {
5458     content: "";
5459     display: block;
5460     position: absolute;
5461     background: #ccc;
5462     height: 11px;
5463     width: 1px;
5464     left: 0;
5465     right: 0;
5466     top: -11px;
5467     margin: auto;
5468 }
5469
5470 .ideditor .localized-multilingual .entry .localized-lang {
5471     border-radius: 0;
5472     border-top-width: 0;
5473     width: 100%;
5474 }
5475 .ideditor .localized-multilingual .entry .localized-value {
5476     border-top-width: 0;
5477     border-radius: 0 0 4px 4px;
5478     width: 100%;
5479 }
5480
5481
5482 /* Field - Address
5483 ------------------------------------------------------- */
5484 .ideditor .form-field-input-address {
5485     -webkit-box-flex: 1;
5486     -webkit-flex: 1 1 auto;
5487         -ms-flex: 1 1 auto;
5488             flex: 1 1 auto;
5489     display: -webkit-box;
5490     display: -webkit-flex;
5491     display: -ms-flexbox;
5492     display: flex;
5493     -webkit-box-orient: horizontal;
5494     -webkit-box-direction: normal;
5495     -webkit-flex-flow: row wrap;
5496         -ms-flex-flow: row wrap;
5497             flex-flow: row wrap;
5498     border: 1px solid #ccc;
5499     border-top: 0px;
5500 }
5501
5502 .ideditor .addr-row {
5503     -webkit-box-flex: 1;
5504     -webkit-flex: 1 1 auto;
5505         -ms-flex: 1 1 auto;
5506             flex: 1 1 auto;
5507     display: -webkit-box;
5508     display: -webkit-flex;
5509     display: -ms-flexbox;
5510     display: flex;
5511     width: 100%;
5512 }
5513
5514 .ideditor .addr-row > input {
5515     -webkit-box-flex: 1;
5516     -webkit-flex: 1 1 auto;
5517         -ms-flex: 1 1 auto;
5518             flex: 1 1 auto;
5519     border-radius: 0;
5520     border-right: 0;
5521     border-bottom: 0;
5522 }
5523 .ideditor[dir='rtl'] .addr-row input {
5524     border-right: 1px solid #ccc;
5525     border-left: 0;
5526 }
5527
5528 .ideditor .addr-row:first-of-type input {
5529     border-top: 0;
5530 }
5531 .ideditor .addr-row input:first-of-type {
5532     border-left: 0;
5533 }
5534 .ideditor[dir='rtl'] .addr-row input:first-of-type {
5535     border-right: 0;
5536 }
5537 .ideditor .addr-row:last-of-type input:first-of-type {
5538     border-radius: 0 0 0 4px;
5539 }
5540 .ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
5541     border-radius: 0 0 4px 0;
5542 }
5543 .ideditor .addr-row:last-of-type input:last-of-type {
5544     border-radius: 0 0 4px 0;
5545 }
5546 .ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
5547     border-radius: 0 0 0 4px;
5548 }
5549
5550
5551 /* Field - Wikipedia
5552 ------------------------------------------------------- */
5553 .ideditor .form-field-input-wikipedia {
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 wrap;
5561         -ms-flex-flow: row wrap;
5562             flex-flow: row wrap;
5563     -webkit-box-flex: 1;
5564     -webkit-flex: 1 1 auto;
5565         -ms-flex: 1 1 auto;
5566             flex: 1 1 auto;
5567 }
5568
5569 .ideditor .wiki-lang-container,
5570 .ideditor .wiki-title-container {
5571     display: -webkit-box;
5572     display: -webkit-flex;
5573     display: -ms-flexbox;
5574     display: flex;
5575     -webkit-box-orient: horizontal;
5576     -webkit-box-direction: normal;
5577     -webkit-flex-flow: row nowrap;
5578         -ms-flex-flow: row nowrap;
5579             flex-flow: row nowrap;
5580     -webkit-box-flex: 1;
5581     -webkit-flex: 1 1 auto;
5582         -ms-flex: 1 1 auto;
5583             flex: 1 1 auto;
5584     width: 100%;
5585 }
5586
5587 .ideditor .wiki-lang-container > input.wiki-lang,
5588 .ideditor .wiki-title-container > input.wiki-title {
5589     -webkit-box-flex: 1;
5590     -webkit-flex: 1 1 auto;
5591         -ms-flex: 1 1 auto;
5592             flex: 1 1 auto;
5593     border-top: 0;
5594     border-radius: 0;
5595 }
5596 .ideditor .wiki-title-container > input.wiki-title {
5597     border-radius: 0 0 0 4px;
5598 }
5599 .ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
5600     border-radius: 0 0 4px 0;
5601 }
5602 .ideditor .wiki-title-container > button.wiki-link,
5603 .ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5604     border-radius: 0 0 4px 0;
5605 }
5606 .ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
5607 .ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5608     border-radius: 0 0 0 4px;
5609 }
5610
5611
5612 /* Field - Restriction Editor
5613 ------------------------------------------------------- */
5614 .ideditor .form-field-input-restrictions {
5615     display: block;
5616     border: 1px solid #ccc;
5617     border-top: 0;
5618     border-radius: 0 0 4px 4px;
5619 }
5620
5621 .ideditor .form-field-input-restrictions .restriction-controls-container {
5622     background-color: #fff;
5623     width: 100%;
5624     padding: 5px;
5625     border-top: 1px solid #ccc;
5626     border-radius: 0 0 4px 4px;
5627 }
5628
5629 .ideditor .restriction-controls-container .restriction-controls {
5630     display: table;
5631     -webkit-user-select: none;
5632        -moz-user-select: none;
5633         -ms-user-select: none;
5634             user-select: none;
5635 }
5636
5637 .ideditor .restriction-controls .restriction-control {
5638     display: table-row;
5639     padding: 5px 10px;
5640     height: 25px;
5641 }
5642
5643 .ideditor .restriction-control input,
5644 .ideditor .restriction-control > span {
5645     display: table-cell;
5646     text-align: start;
5647     padding: 0px 5px;
5648 }
5649
5650 .ideditor .restriction-control > span.restriction-control-label {
5651     text-align: end;
5652 }
5653
5654 .ideditor .restriction-control input {
5655     width: 60px;
5656     padding: 0;
5657     margin: 0px 5px;
5658     vertical-align: middle;
5659 }
5660
5661 .ideditor .form-field-input-restrictions .restriction-container {
5662     position: relative;
5663     height: 370px;
5664 }
5665 /* zero width space, so container takes up space */
5666 .ideditor .form-field-input-restrictions .restriction-container:after {
5667     content: '\200b';
5668 }
5669
5670 .ideditor .form-field-input-restrictions svg.surface {
5671     width: 100%;
5672     height: 100%;
5673 }
5674
5675 .ideditor .restriction-container .restriction-help {
5676     z-index: 1;
5677     position: absolute;
5678     top: 0;
5679     left: 0;
5680     right: 0;
5681     padding: 2px 6px;
5682     background-color: rgba(255, 255, 255, .8);
5683     color: #888;
5684     text-align: center;
5685     pointer-events: none;
5686     -webkit-user-select: none;
5687        -moz-user-select: none;
5688         -ms-user-select: none;
5689             user-select: none;
5690 }
5691
5692 .ideditor .restriction-help span {
5693     margin: 2px;
5694 }
5695
5696 .ideditor .restriction-help .qualifier {
5697     color: #666;
5698     font-weight: bold;
5699 }
5700 .ideditor .restriction-help .qualifier.allow {
5701     color: #8b5;
5702 }
5703 .ideditor .restriction-help .qualifier.restrict {
5704     color: #d53;
5705 }
5706 .ideditor .restriction-help .qualifier.only {
5707     color: #78f;
5708 }
5709
5710
5711 /* Field - Changeset Comment
5712 ------------------------------------------------------- */
5713 .ideditor .form-field-comment:not(.present) #preset-input-comment {
5714     border-color: rgb(230, 100, 100);
5715 }
5716 .ideditor .form-field-comment:not(.present) .field-label {
5717     border-color: rgb(230, 100, 100);
5718     background: rgba(230, 100, 100, 0.2);
5719 }
5720 .ideditor .form-field-comment:not(.present) button {
5721     border-color: rgb(230, 100, 100);
5722 }
5723
5724
5725 /* Field - Combobox
5726 ------------------------------------------------------- */
5727 .ideditor[dir='ltr'] textarea.combobox-input,
5728 .ideditor[dir='ltr'] input.combobox-input {
5729     /* leave room for the caret */
5730     padding-right: 20px;
5731 }
5732 .ideditor[dir='rtl'] textarea.combobox-input,
5733 .ideditor[dir='rtl'] input.combobox-input {
5734     padding-left: 20px;
5735 }
5736
5737 .ideditor div.combobox {
5738     z-index: 9999;
5739     display: none;
5740     -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
5741             box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
5742     margin-top: -1px;
5743     background: #fff;
5744     max-height: 245px;
5745     overflow-y: auto;
5746     overflow-x: hidden;
5747     border: 1px solid #ccc;
5748     border-radius: 0 0 4px 4px;
5749 }
5750
5751 .ideditor .combobox a {
5752     display: block;
5753     padding: 5px 10px;
5754     border-top: 1px solid #ccc;
5755     -o-text-overflow: ellipsis;
5756        text-overflow: ellipsis;
5757     white-space: nowrap;
5758     overflow: hidden;
5759 }
5760
5761 .ideditor .combobox a.selected,
5762 .ideditor .combobox a:active,
5763 .ideditor .combobox a:focus {
5764     background: #ececec;
5765 }
5766 @media (hover: hover) {
5767     .ideditor .combobox a:hover {
5768         background: #ececec;
5769     }
5770 }
5771
5772 .ideditor .combobox a:first-child {
5773     border-top: 0;
5774     padding: 4px 10px;
5775 }
5776
5777 .ideditor .combobox-caret {
5778     display: inline-block;
5779     position: relative;
5780     height: 5px;
5781     width: 30px !important;
5782     margin-left: -30px;
5783     -webkit-align-self: center;
5784         -ms-flex-item-align: center;
5785             align-self: center;
5786     vertical-align: middle;
5787     cursor: pointer;
5788 }
5789 .ideditor[dir='rtl'] .combobox-caret {
5790   margin-left: 0;
5791   margin-right: -30px;
5792 }
5793
5794 .ideditor .combobox-caret::after {
5795     content: "";
5796     height: 0; width: 0;
5797     position: absolute;
5798     left: 0; right: 0; bottom: 0; top: 0;
5799     margin: auto;
5800     border-top: 5px solid #ccc;
5801     border-left: 5px solid transparent;
5802     border-right: 5px solid transparent;
5803 }
5804
5805 .ideditor .combobox .combobox-option.raw-option {
5806     font-family: monospace;
5807     color: #333;
5808 }
5809
5810
5811 /* Field Help
5812 ------------------------------------------------------- */
5813 .ideditor .field-help-body {
5814     display: block;
5815     position: absolute;
5816     top: 0;
5817     left: 20px;
5818     right: 20px;
5819     margin: 5px;
5820     padding: 8px;
5821     border: 1px solid #ccc;
5822     border-top: 0;
5823     border-radius: 0 0 4px 4px;
5824     z-index: 20;
5825     background: rgba(255,255,255,0.95);
5826     -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5827             box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5828 }
5829
5830 .ideditor .field-help-title h2 {
5831     padding: 10px;
5832     margin-bottom: 0px;
5833     font-size: 17px;
5834 }
5835 .ideditor .field-help-title button {
5836     width: 45px;
5837     height: 55px;
5838     border-radius: 0;
5839 }
5840
5841 .ideditor .field-help-nav {
5842     font-size: 13px;
5843     font-weight: bold;
5844     margin-bottom: 10px;
5845 }
5846 .ideditor .field-help-nav-item {
5847     display: inline-block;
5848     padding: 5px 10px;
5849     cursor: pointer;
5850     color: #666;
5851 }
5852 .ideditor .field-help-nav-item.active {
5853     color: #7092ff;
5854     border-bottom: 2px solid;
5855 }
5856 .ideditor .field-help-nav-item:active,
5857 .ideditor .field-help-nav-item:focus {
5858     color: #597be7;
5859     background-color: #efefef;
5860 }
5861 @media (hover: hover) {
5862     .ideditor .field-help-nav-item:hover {
5863         color: #597be7;
5864         background-color: #efefef;
5865     }
5866 }
5867
5868 .ideditor .field-help-content {
5869     padding: 10px;
5870     overflow-y: auto;
5871     overflow-x: hidden;
5872 }
5873 .ideditor .field-help-content h3 {
5874     font-size: 12px;
5875     margin-bottom: 5px;
5876 }
5877 .ideditor .field-help-content p {
5878     margin-bottom: 15px;
5879 }
5880 .ideditor .field-help-content ul li {
5881     list-style: inside;
5882     margin-bottom: 5px;
5883 }
5884
5885 .ideditor .field-help-content .field-help-image {
5886     width: 100%;
5887     margin-bottom: 15px;
5888 }
5889
5890 .ideditor .field-help-content svg.turn {
5891     width: 40px;
5892     height: 20px;
5893 }
5894 .ideditor .field-help-content svg.shadow {
5895     opacity: 0.7;
5896     width: 60px;
5897     height: 20px;
5898 }
5899 .ideditor .field-help-content svg.from {
5900     color: #777;
5901 }
5902 .ideditor .field-help-content svg.allow {
5903     color: #5b3;
5904 }
5905 .ideditor .field-help-content svg.restrict {
5906     color: #d53;
5907 }
5908 .ideditor .field-help-content svg.only {
5909     color: #68f;
5910 }
5911
5912 .ideditor .field-help-content p.from_shadow,
5913 .ideditor .field-help-content p.allow_shadow,
5914 .ideditor .field-help-content p.restrict_shadow,
5915 .ideditor .field-help-content p.allow_turn,
5916 .ideditor .field-help-content p.restrict_turn {
5917     margin-bottom: 5px;
5918 }
5919
5920
5921 /* More Fields dropdown
5922 ------------------------------------------------------- */
5923 .ideditor .more-fields {
5924     margin-top: 10px;
5925     font-weight: bold;
5926 }
5927
5928 .ideditor .more-fields label {
5929     display: -webkit-box;
5930     display: -webkit-flex;
5931     display: -ms-flexbox;
5932     display: flex;
5933     -webkit-box-orient: horizontal;
5934     -webkit-box-direction: normal;
5935     -webkit-flex-flow: row nowrap;
5936         -ms-flex-flow: row nowrap;
5937             flex-flow: row nowrap;
5938     -webkit-box-pack: justify;
5939     -webkit-justify-content: space-between;
5940         -ms-flex-pack: justify;
5941             justify-content: space-between;
5942     -webkit-box-align: center;
5943     -webkit-align-items: center;
5944         -ms-flex-align: center;
5945             align-items: center;
5946 }
5947
5948 .ideditor .more-fields input {
5949     margin-left: 10px;
5950     -webkit-box-flex: 1;
5951     -webkit-flex: 1 1 auto;
5952         -ms-flex: 1 1 auto;
5953             flex: 1 1 auto;
5954 }
5955 .ideditor[dir='rtl'] .more-fields input {
5956     margin-left: auto;
5957     margin-right: 10px;
5958 }
5959
5960 .ideditor .form-field-input-wrap .label {
5961     background: #f6f6f6;
5962     padding: 5px 10px;
5963 }
5964
5965
5966 /* Raw Tag Editor
5967 ------------------------------------------------------- */
5968 .ideditor .raw-tag-options {
5969     display: -webkit-box;
5970     display: -webkit-flex;
5971     display: -ms-flexbox;
5972     display: flex;
5973     -webkit-box-orient: horizontal;
5974     -webkit-box-direction: normal;
5975     -webkit-flex-flow: row nowrap;
5976         -ms-flex-flow: row nowrap;
5977             flex-flow: row nowrap;
5978     -webkit-box-pack: end;
5979     -webkit-justify-content: flex-end;
5980         -ms-flex-pack: end;
5981             justify-content: flex-end;
5982     margin-top: -28px;
5983 }
5984 .ideditor button.raw-tag-option {
5985     -webkit-box-flex: 0;
5986     -webkit-flex: 0 0 auto;
5987         -ms-flex: 0 0 auto;
5988             flex: 0 0 auto;
5989     padding: 3px;
5990     background: #aaa;
5991     color: #eee;
5992     margin: 0 3px;
5993 }
5994 .ideditor button.raw-tag-option:focus,
5995 .ideditor button.raw-tag-option.active {
5996     color: #fff;
5997     background: #597be7;
5998 }
5999 @media (hover: hover) {
6000     .ideditor button.raw-tag-option:hover {
6001         color: #fff;
6002         background: #597be7;
6003     }
6004 }
6005 .ideditor button.raw-tag-option.selected {
6006     color: #fff;
6007     background: #7092ff;
6008 }
6009 .ideditor button.raw-tag-option svg.icon {
6010     width: 14px;
6011     height: 14px;
6012     display: block;
6013 }
6014 .ideditor[dir='ltr'] button.raw-tag-option-list {
6015     -webkit-transform: scaleX(-1);
6016         -ms-transform: scaleX(-1);
6017             transform: scaleX(-1);
6018     -webkit-filter: FlipH;
6019             filter: FlipH;
6020     -ms-filter: "FlipH";
6021 }
6022
6023
6024 .ideditor .tag-text {
6025     width: 100%;
6026     height: 100%;
6027     min-height: 32px;
6028     font-family: monospace;
6029     white-space: pre;
6030 }
6031
6032 .ideditor .tag-text,
6033 .ideditor .tag-list {
6034     margin-top: 10px;
6035 }
6036 .ideditor .tag-row {
6037     width: 100%;
6038     position: relative;
6039 }
6040 .ideditor .tag-row .inner-wrap {
6041     display: -webkit-box;
6042     display: -webkit-flex;
6043     display: -ms-flexbox;
6044     display: flex;
6045     -webkit-box-orient: horizontal;
6046     -webkit-box-direction: normal;
6047     -webkit-flex-flow: row nowrap;
6048         -ms-flex-flow: row nowrap;
6049             flex-flow: row nowrap;
6050     width: 100%;
6051     position: relative;
6052 }
6053 .ideditor .tag-row .key-wrap,
6054 .ideditor .tag-row .value-wrap {
6055     -webkit-box-flex: 1;
6056     -webkit-flex: 1 1 50%;
6057         -ms-flex: 1 1 50%;
6058             flex: 1 1 50%;
6059 }
6060
6061 .ideditor .tag-text.readonly,
6062 .ideditor .tag-row.readonly,
6063 .ideditor .tag-row.readonly input.key,
6064 .ideditor .tag-row.readonly input.value,
6065 .ideditor .tag-row.readonly button.remove {
6066     color: #777;
6067     background-color: #eee;
6068     cursor: not-allowed;
6069 }
6070
6071 .ideditor .tag-row input {
6072     border: 0;
6073     border-radius: 0;
6074     border-bottom: 1px solid #ccc;
6075     border-left: 1px solid #ccc;
6076     width: 100%;
6077 }
6078 .ideditor[dir='rtl'] .tag-row input {
6079     border-left: none;
6080     border-right: 1px solid #ccc;
6081 }
6082
6083
6084 .ideditor .tag-row input.key {
6085     font-weight: bold;
6086     background-color: #f6f6f6;
6087 }
6088
6089 .ideditor .tag-row input.value {
6090     border-right: 1px solid #ccc;
6091 }
6092 .ideditor[dir='rtl'] .tag-row input.value {
6093     border-left: 1px solid #ccc;
6094 }
6095
6096 .ideditor .tag-row:first-child input.key {
6097     border-top: 1px solid #ccc;
6098     border-top-left-radius: 4px;
6099 }
6100 .ideditor[dir='rtl'] .tag-row:first-child input.key {
6101     border-top-left-radius: 0;
6102     border-top-right-radius: 4px;
6103 }
6104
6105 .ideditor .tag-row:first-child input.value {
6106     border-top: 1px solid #ccc;
6107 }
6108 .ideditor .tag-row button {
6109     -webkit-box-flex: 0;
6110     -webkit-flex: 0 0 auto;
6111         -ms-flex: 0 0 auto;
6112             flex: 0 0 auto;
6113     width: 32px;
6114     border: 1px solid #ccc;
6115     border-top-width: 0;
6116     border-left-width: 0;
6117 }
6118 .ideditor[dir='rtl'] .tag-row button {
6119     border-left-width: 1px;
6120     border-right-width: 0;
6121 }
6122
6123 .ideditor .tag-row button:active,
6124 .ideditor .tag-row button:focus {
6125     background: #f1f1f1;
6126 }
6127 @media (hover: hover) {
6128     .ideditor .tag-row button:hover {
6129         background: #f1f1f1;
6130     }
6131 }
6132 .ideditor .tag-row button .icon {
6133     opacity: .5;
6134 }
6135 .ideditor .tag-row:first-child button {
6136     border-top-width: 1px;
6137 }
6138
6139 .ideditor .tag-row:first-child .tag-reference-button {
6140     border-top-right-radius: 4px;
6141 }
6142 .ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
6143     border-top-left-radius: 4px;
6144     border-top-right-radius: 0;
6145 }
6146
6147 .ideditor .tag-row:last-child .tag-reference-button {
6148     border-bottom-right-radius: 4px;
6149 }
6150 .ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
6151     border-bottom-left-radius: 4px;
6152     border-bottom-right-radius: 0;
6153 }
6154
6155 .ideditor .tag-row .tag-reference-button {
6156     border-radius: 0;
6157 }
6158 .ideditor[dir='rtl'] .tag-row .tag-reference-button {
6159     border-left-width: 1px;
6160     border-right-width: 0;
6161 }
6162
6163 /* Tag reference */
6164 .ideditor .tag-reference-loading {
6165     background-color: #f5f5f5;
6166 }
6167 .ideditor .tag-reference-loading .icon {
6168     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
6169     background-position: 0 0;
6170 }
6171
6172 .ideditor .tag-reference-body {
6173     -webkit-box-flex: 1;
6174     -webkit-flex: 1 1 auto;
6175         -ms-flex: 1 1 auto;
6176             flex: 1 1 auto;
6177     width: 100%;
6178     overflow: hidden;
6179     display: none;
6180     padding-top: 10px;
6181 }
6182 .ideditor .tag-reference-body.expanded {
6183     padding-bottom: 10px;
6184     display: inline-block;
6185 }
6186 .ideditor .tag-reference-description {
6187
6188 }
6189 .ideditor .tag-reference-link {
6190     display: block;
6191 }
6192
6193 .ideditor img.tag-reference-wiki-image {
6194     float: right;
6195     width: 33.3333%;
6196     border-radius: 4px;
6197     margin: 0 0 0 5px;
6198 }
6199 .ideditor[dir='rtl'] img.tag-reference-wiki-image {
6200     float: left;
6201     margin: 0 5px 0 0;
6202 }
6203
6204 .ideditor .preset-list .tag-reference-body {
6205     position: relative;
6206     width: 100%;
6207 }
6208 .ideditor .raw-tag-editor .tag-reference-body {
6209     width: 100%;
6210 }
6211 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
6212     background: #f6f6f6;
6213     color: #333;
6214 }
6215 .ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
6216     border-bottom: 1px solid #ccc;
6217 }
6218 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
6219     border-top: 1px solid #ccc;
6220 }
6221
6222
6223 /* Raw Member / Membership Editor
6224 ------------------------------------------------------- */
6225 .ideditor .section-raw-member-editor .member-list:empty,
6226 .ideditor .section-raw-membership-editor .member-list:empty {
6227     display: none;
6228 }
6229
6230 .ideditor .section-raw-member-editor .member-list,
6231 .ideditor .section-raw-membership-editor .member-list {
6232     position: relative; /* required for drag-and-drop */
6233     padding-top: 5px;
6234 }
6235 .ideditor .section-raw-member-editor .member-list li,
6236 .ideditor .section-raw-membership-editor .member-list li {
6237     position: relative;
6238     border-radius: 4px;
6239     margin: 0;
6240     padding-bottom: 10px;
6241 }
6242 .ideditor .section-raw-member-editor .member-row .member-entity-name,
6243 .ideditor .section-raw-membership-editor .member-row .member-entity-name {
6244     font-weight: normal;
6245     padding-left: 10px;
6246 }
6247
6248 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
6249 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
6250     padding-left:0;
6251     padding-right: 10px;
6252 }
6253
6254 .ideditor .form-field-input-member > input.member-role {
6255     border-radius: 0 0 4px 4px;
6256 }
6257
6258 .ideditor .member-row-new .member-entity-input {
6259     -webkit-box-flex: 1;
6260     -webkit-flex: 1 1 100%;
6261         -ms-flex: 1 1 100%;
6262             flex: 1 1 100%;
6263     border-radius: 4px 4px 0 0;
6264     border: 0;
6265 }
6266
6267 .ideditor .section-raw-member-editor .member-row.dragging {
6268     opacity: 0.75;
6269     z-index: 3000;
6270     /*
6271     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
6272     */
6273 }
6274
6275 /* add tag, add relation buttons */
6276 .ideditor .add-row {
6277     display: -webkit-box;
6278     display: -webkit-flex;
6279     display: -ms-flexbox;
6280     display: flex;
6281     width: 100%;
6282     -webkit-box-orient: horizontal;
6283     -webkit-box-direction: normal;
6284     -webkit-flex-flow: row nowrap;
6285         -ms-flex-flow: row nowrap;
6286             flex-flow: row nowrap;
6287 }
6288 .ideditor .add-row .add-tag,
6289 .ideditor .add-row .add-relation,
6290 .ideditor .add-row .space-value {
6291     -webkit-box-flex: 1;
6292     -webkit-flex: 1 1 50%;
6293         -ms-flex: 1 1 50%;
6294             flex: 1 1 50%;
6295 }
6296 .ideditor .add-row .space-buttons {
6297     -webkit-box-flex: 0;
6298     -webkit-flex: 0 0 62px;
6299         -ms-flex: 0 0 62px;
6300             flex: 0 0 62px;
6301 }
6302 .ideditor .add-row button {
6303     padding: 5px;
6304     background: rgba(0,0,0,.5);
6305 }
6306 .ideditor .add-row button:focus,
6307 .ideditor .add-row button:active {
6308     background: rgba(0,0,0,.8);
6309 }
6310 @media (hover: hover) {
6311     .ideditor .add-row button:hover {
6312         background: rgba(0,0,0,.8);
6313     }
6314 }
6315
6316 .ideditor .add-tag {
6317     border-radius: 0 0 4px 4px;
6318 }
6319 .ideditor .add-relation {
6320     margin-top: 10px;
6321     border-radius: 4px;
6322 }
6323
6324
6325 /* OSM Note / QA Editors
6326 ------------------------------------------------------- */
6327 .ideditor .note-header,
6328 .ideditor .qa-header {
6329     background-color: #f6f6f6;
6330     border-radius: 5px;
6331     border: 1px solid #ccc;
6332     display: -webkit-box;
6333     display: -webkit-flex;
6334     display: -ms-flexbox;
6335     display: flex;
6336     -webkit-box-orient: horizontal;
6337     -webkit-box-direction: normal;
6338     -webkit-flex-flow: row nowrap;
6339         -ms-flex-flow: row nowrap;
6340             flex-flow: row nowrap;
6341     -webkit-box-align: center;
6342     -webkit-align-items: center;
6343         -ms-flex-align: center;
6344             align-items: center;
6345 }
6346
6347 .ideditor .note-header-icon,
6348 .ideditor .qa-header-icon {
6349     background-color: #fff;
6350     padding: 10px;
6351     -webkit-box-flex: 0;
6352     -webkit-flex: 0 0 auto;
6353         -ms-flex: 0 0 auto;
6354             flex: 0 0 auto;
6355     position: relative;
6356     width: 60px;
6357     height: 60px;
6358     border-right: 1px solid #ccc;
6359     border-radius: 5px 0 0 5px;
6360 }
6361 .ideditor[dir='rtl'] .note-header-icon,
6362 .ideditor[dir='rtl'] .qa-header-icon {
6363     border-right: unset;
6364     border-left: 1px solid #ccc;
6365     border-radius: 0 5px 5px 0;
6366 }
6367
6368 .ideditor .note-header-icon .icon-wrap,
6369 .ideditor .qa-header-icon .icon-wrap {
6370     position: absolute;
6371     top: 0px;
6372 }
6373 .ideditor .preset-icon-28 {
6374     position: absolute;
6375     top: 16px;
6376     left: 16px;
6377     margin: auto;
6378 }
6379 .ideditor .preset-icon-28 .icon {
6380     width: 28px;
6381     height: 28px;
6382 }
6383
6384 .ideditor .note-header-label,
6385 .ideditor .qa-header-label {
6386     background-color: #f6f6f6;
6387     padding: 0 15px;
6388     -webkit-box-flex: 1;
6389     -webkit-flex: 1 1 100%;
6390         -ms-flex: 1 1 100%;
6391             flex: 1 1 100%;
6392     font-size: 14px;
6393     font-weight: bold;
6394     border-radius: 0 5px 5px 0;
6395 }
6396 .ideditor[dir='rtl'] .note-header-label,
6397 .ideditor[dir='rtl'] .qa-header-label {
6398     border-radius: 5px 0 0 5px;
6399 }
6400
6401 .ideditor .note-category {
6402     margin: 20px 0px;
6403 }
6404
6405 .ideditor .comments-container {
6406     background: #ececec;
6407     padding: 1px 10px;
6408     border-radius: 8px;
6409     margin-top: 20px;
6410 }
6411
6412 .ideditor .comment {
6413     background-color: #fff;
6414     border-radius: 5px;
6415     border: 1px solid #ccc;
6416     margin: 10px auto;
6417     display: -webkit-box;
6418     display: -webkit-flex;
6419     display: -ms-flexbox;
6420     display: flex;
6421     -webkit-box-orient: horizontal;
6422     -webkit-box-direction: normal;
6423     -webkit-flex-flow: row nowrap;
6424         -ms-flex-flow: row nowrap;
6425             flex-flow: row nowrap;
6426 }
6427 .ideditor .comment-avatar {
6428     padding: 10px;
6429     -webkit-box-flex: 0;
6430     -webkit-flex: 0 0 auto;
6431         -ms-flex: 0 0 auto;
6432             flex: 0 0 auto;
6433 }
6434 .ideditor .comment-avatar .icon.comment-avatar-icon {
6435     width: 40px;
6436     height: 40px;
6437     -o-object-fit: cover;
6438        object-fit: cover;
6439     border: 1px solid #ccc;
6440     border-radius: 20px;
6441 }
6442 .ideditor .comment-main {
6443     padding: 10px 10px 10px 0;
6444     -webkit-box-flex: 1;
6445     -webkit-flex: 1 1 100%;
6446         -ms-flex: 1 1 100%;
6447             flex: 1 1 100%;
6448     -webkit-box-orient: vertical;
6449     -webkit-box-direction: normal;
6450     -webkit-flex-flow: column nowrap;
6451         -ms-flex-flow: column nowrap;
6452             flex-flow: column nowrap;
6453     overflow: hidden;
6454     overflow-wrap: break-word;
6455 }
6456 .ideditor[dir='rtl'] .comment-main {
6457     padding: 10px 0 10px 10px;
6458 }
6459
6460 .ideditor .comment-metadata {
6461     -webkit-box-orient: horizontal;
6462     -webkit-box-direction: normal;
6463     -webkit-flex-flow: row nowrap;
6464         -ms-flex-flow: row nowrap;
6465             flex-flow: row nowrap;
6466     -webkit-box-pack: justify;
6467     -webkit-justify-content: space-between;
6468         -ms-flex-pack: justify;
6469             justify-content: space-between;
6470 }
6471 .ideditor .comment-author {
6472     font-weight: bold;
6473     color: #333;
6474 }
6475 .ideditor .comment-date {
6476     color: #aaa;
6477 }
6478 .ideditor .comment-text {
6479     color: #333;
6480     margin-top: 10px;
6481     overflow-y: auto;
6482     max-height: 250px;
6483 }
6484 .ideditor .comment-text::-webkit-scrollbar {
6485     border-left: none;
6486 }
6487
6488 .ideditor .note-save,
6489 .ideditor .qa-save {
6490     padding-top: 20px;
6491 }
6492
6493 .ideditor .qa-details-container {
6494     background: #ececec;
6495     padding: 10px;
6496     margin-top: 20px;
6497     border-radius: 4px;
6498     border: 1px solid #ccc;
6499     display: -webkit-box;
6500     display: -webkit-flex;
6501     display: -ms-flexbox;
6502     display: flex;
6503     -webkit-box-orient: vertical;
6504     -webkit-box-direction: normal;
6505     -webkit-flex-direction: column;
6506         -ms-flex-direction: column;
6507             flex-direction: column;
6508 }
6509 .ideditor .qa-details-description-text::first-letter {
6510     text-transform: capitalize;
6511 }
6512 .ideditor[dir='rtl'] .qa-details-description-text::first-letter {
6513     text-transform: none;  /* #5877 */
6514 }
6515 .ideditor .qa-details-subsection h4 {
6516     padding-bottom: 2px;
6517 }
6518 .ideditor .qa-details-subsection:not(:last-child) {
6519     margin-bottom: 10px;
6520 }
6521 .ideditor .qa-details-subsection:empty {
6522     display: none;
6523 }
6524
6525 .ideditor .note-save .new-comment-input,
6526 .ideditor .qa-save .new-comment-input {
6527     width: 100%;
6528     height: 100px;
6529     max-height: 300px;
6530     min-height: 100px;
6531 }
6532
6533 .ideditor .note-save .detail-section,
6534 .ideditor .qa-save .detail-section {
6535     margin: 10px 0;
6536 }
6537
6538 .ideditor .note-report {
6539     float: right;
6540 }
6541
6542
6543 /* Custom Data Editor
6544 ------------------------------------------------------- */
6545 .ideditor .data-header {
6546     background-color: #f6f6f6;
6547     border-radius: 5px;
6548     border: 1px solid #ccc;
6549     display: -webkit-box;
6550     display: -webkit-flex;
6551     display: -ms-flexbox;
6552     display: flex;
6553     -webkit-box-orient: horizontal;
6554     -webkit-box-direction: normal;
6555     -webkit-flex-flow: row nowrap;
6556         -ms-flex-flow: row nowrap;
6557             flex-flow: row nowrap;
6558     -webkit-box-align: center;
6559     -webkit-align-items: center;
6560         -ms-flex-align: center;
6561             align-items: center;
6562 }
6563
6564 .ideditor .data-header-icon {
6565     background-color: #fff;
6566     padding: 10px;
6567     -webkit-box-flex: 0;
6568     -webkit-flex: 0 0 auto;
6569         -ms-flex: 0 0 auto;
6570             flex: 0 0 auto;
6571     position: relative;
6572     width: 60px;
6573     height: 60px;
6574     border-right: 1px solid #ccc;
6575     border-radius: 5px 0 0 5px;
6576 }
6577 .ideditor[dir='rtl'] .data-header-icon {
6578     border-right: unset;
6579     border-left: 1px solid #ccc;
6580     border-radius: 0 5px 5px 0;
6581 }
6582
6583 .ideditor .data-header-icon .icon-wrap {
6584     position: absolute;
6585     top: 0px;
6586 }
6587
6588 .ideditor .data-header-label {
6589     background-color: #f6f6f6;
6590     padding: 0 15px;
6591     -webkit-box-flex: 1;
6592     -webkit-flex: 1 1 100%;
6593         -ms-flex: 1 1 100%;
6594             flex: 1 1 100%;
6595     font-size: 14px;
6596     font-weight: bold;
6597     border-radius: 0 5px 5px 0;
6598 }
6599 .ideditor[dir='rtl'] .data-header-label {
6600     border-radius: 5px 0 0 5px;
6601 }
6602
6603 /* custom data editor - no info/delete buttons */
6604 .ideditor .data-editor.raw-tag-editor .tag-row button {
6605     display: none;
6606 }
6607 .ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
6608 .ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
6609     width: 50%;
6610 }
6611
6612
6613 .ideditor .over-map {
6614     position: relative;
6615     height: 100%;
6616     pointer-events: none;
6617     display: -webkit-box;
6618     display: -webkit-flex;
6619     display: -ms-flexbox;
6620     display: flex;
6621     -webkit-box-orient: horizontal;
6622     -webkit-box-direction: reverse;
6623     -webkit-flex-direction: row-reverse;
6624         -ms-flex-direction: row-reverse;
6625             flex-direction: row-reverse;
6626     -webkit-box-align: end;
6627     -webkit-align-items: flex-end;
6628         -ms-flex-align: end;
6629             align-items: flex-end;
6630     overflow: hidden;
6631 }
6632 .ideditor .over-map > * {
6633     pointer-events: auto;
6634     z-index: 5;
6635 }
6636 /* offscreen this without hiding it */
6637 .ideditor .over-map .select-trap {
6638     position: absolute;
6639     right: -1000%;
6640     opacity: 0;
6641 }
6642
6643 /* Map Controls
6644 ------------------------------------------------------- */
6645 .ideditor .map-controls {
6646     right: 0;
6647     top: 0;
6648     width: 40px;
6649     position: absolute;
6650     z-index: 100;
6651     bottom: 0;
6652     display: -webkit-box;
6653     display: -webkit-flex;
6654     display: -ms-flexbox;
6655     display: flex;
6656     -webkit-box-orient: vertical;
6657     -webkit-box-direction: normal;
6658     -webkit-flex-direction: column;
6659         -ms-flex-direction: column;
6660             flex-direction: column;
6661     padding: 5px 0;
6662     pointer-events: none;
6663     overflow-x: hidden;
6664     overflow-y: auto;
6665 }
6666 .ideditor .map-controls::-webkit-scrollbar {
6667     display: none;
6668 }
6669 .ideditor .map-controls:before {
6670     content: '';
6671     display: inline-block;
6672     pointer-events: none;
6673     width: 40px;
6674     height: 100%;
6675     max-height: 70px;
6676     -webkit-box-flex: 0;
6677     -webkit-flex: 0 1 auto;
6678         -ms-flex: 0 1 auto;
6679             flex: 0 1 auto;
6680 }
6681 .ideditor[dir='rtl'] .map-controls {
6682     left: 0;
6683     right: auto;
6684 }
6685
6686 .ideditor .map-control {
6687     position: relative;
6688     display: -webkit-box;
6689     display: -webkit-flex;
6690     display: -ms-flexbox;
6691     display: flex;
6692     -webkit-box-orient: vertical;
6693     -webkit-box-direction: normal;
6694     -webkit-flex-direction: column;
6695         -ms-flex-direction: column;
6696             flex-direction: column;
6697 }
6698 .ideditor .map-control > button {
6699     position: relative;
6700     width: 40px;
6701     height: 40px;
6702     background: rgba(0,0,0,.5);
6703     border-radius: 0;
6704     pointer-events: auto;
6705 }
6706
6707 .ideditor .map-control > button:not(.disabled):focus,
6708 .ideditor .map-control > button:not(.disabled):active {
6709     background: rgba(0, 0, 0, .8);
6710 }
6711 .ideditor .map-control > button.active,
6712 .ideditor .map-control > button.active:active {
6713     background: #7092ff;
6714 }
6715 @media (hover: hover) {
6716     .ideditor .map-control > button:not(.disabled):hover {
6717         background: rgba(0, 0, 0, .8);
6718     }
6719     .ideditor .map-control > button.active:hover {
6720         background: #7092ff;
6721     }
6722 }
6723
6724 .ideditor .map-control > button.disabled .icon {
6725     color: rgba(255, 255, 255, 0.5);
6726 }
6727
6728
6729 /* Fullscreen Button (disabled)
6730 ------------------------------------------------------- */
6731 .ideditor div.full-screen {
6732     display: inline-block;
6733     width: 40px;
6734     margin-right: 10px;
6735     display: none;
6736 }
6737
6738 .ideditor div.full-screen .tooltip {
6739     min-width: 160px;
6740 }
6741
6742 .ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
6743     width: 40px;
6744     height: 40px;
6745     background: transparent;
6746 }
6747 .ideditor div.full-screen > button:active,
6748 .ideditor div.full-screen > button:focus {
6749     background-color: rgba(0, 0, 0, .8);
6750 }
6751 @media (hover: hover) {
6752     .ideditor div.full-screen > button:hover {
6753         background-color: rgba(0, 0, 0, .8);
6754     }
6755 }
6756
6757
6758 /* Map Controls
6759 ------------------------------------------------------- */
6760
6761 /* Zoom in/out buttons */
6762 .ideditor .zoombuttons > button.zoom-in {
6763     border-radius: 4px 0 0 0;
6764 }
6765 .ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
6766     border-radius: 0 4px 0 0;
6767 }
6768
6769 /* Geolocate button */
6770 .ideditor .geolocate-control {
6771     margin-bottom: 10px;
6772 }
6773 .ideditor .geolocate-control > button {
6774     border-radius: 0 0 0 4px;
6775 }
6776 .ideditor[dir='rtl'] .geolocate-control > button {
6777     border-radius: 0 0 4px 0;
6778 }
6779
6780 /* Zoom to selection button */
6781 .ideditor .zoom-to-selection-control .icon {
6782     width: 22px;
6783     height: 22px;
6784 }
6785
6786
6787 /* Background / Map Data / Help Pane buttons
6788 ------------------------------------------------------- */
6789 .ideditor .background-control > button {
6790     border-radius: 4px 0 0 0;
6791 }
6792 .ideditor[dir='rtl'] .background-control > button {
6793     border-radius: 0 4px 0 0;
6794 }
6795
6796 .ideditor .help-control > button {
6797     border-radius: 0 0 0 4px;
6798 }
6799 .ideditor[dir='rtl'] .help-control > button {
6800     border-radius: 0 0 4px 0;
6801 }
6802
6803
6804 /* Background / Map Data Settings
6805 ------------------------------------------------------- */
6806 .ideditor .imagery-faq {
6807     margin-bottom: 10px;
6808     white-space: nowrap;
6809 }
6810
6811 .ideditor .layer-list, .ideditor .controls-list {
6812     margin-bottom: 10px;
6813     border: 1px solid #ccc;
6814     border-radius: 4px;
6815 }
6816
6817 .ideditor .layer-list > li {
6818     background-color: #fff;
6819     color: #7092ff;
6820     position: relative;
6821     display: -webkit-box;
6822     display: -webkit-flex;
6823     display: -ms-flexbox;
6824     display: flex;
6825 }
6826
6827 .ideditor .layer-list:empty {
6828     display: none;
6829 }
6830
6831 .ideditor .layer-list > li:first-child {
6832     border-radius: 3px 3px 0 0;
6833 }
6834 .ideditor .layer-list > li:last-child {
6835     border-radius: 0 0 3px 3px;
6836 }
6837 .ideditor .layer-list > li:only-child {
6838     border-radius: 3px;
6839 }
6840 .ideditor .layer-list li:not(:last-child) {
6841     border-bottom: 1px solid #ccc;
6842 }
6843 .ideditor .layer-list li:active {
6844     background-color: #ececec;
6845 }
6846 @media (hover: hover) {
6847     .ideditor .layer-list li:hover {
6848         background-color: #ececec;
6849     }
6850 }
6851
6852 .ideditor .layer-list li.active button,
6853 .ideditor .layer-list li.switch button,
6854 .ideditor .layer-list li.active,
6855 .ideditor .layer-list li.switch {
6856     background: #e8ebff;
6857 }
6858
6859 .ideditor .layer-list li.best > div.best {
6860     padding: 5px;
6861     -webkit-box-flex: 0;
6862     -webkit-flex: 0 0 auto;
6863         -ms-flex: 0 0 auto;
6864             flex: 0 0 auto;
6865 }
6866
6867 .ideditor[dir='rtl'] .list-item-data-browse svg {
6868     -webkit-transform: rotateY(180deg);
6869             transform: rotateY(180deg);
6870 }
6871
6872 /* make sure tooltip fits in map-control panel */
6873 /* if too wide, placement will be wrong the first time it displays */
6874 .ideditor .layer-list li.best .popover-inner {
6875     max-width: 160px;
6876 }
6877
6878 .ideditor .layer-list label {
6879     padding: 5px 10px;
6880     cursor: pointer;
6881     -webkit-box-flex: 1;
6882     -webkit-flex: 1 1 auto;
6883         -ms-flex: 1 1 auto;
6884             flex: 1 1 auto;
6885     display: -webkit-box;
6886     display: -webkit-flex;
6887     display: -ms-flexbox;
6888     display: flex;
6889     -webkit-box-align: center;
6890     -webkit-align-items: center;
6891         -ms-flex-align: center;
6892             align-items: center;
6893     overflow: hidden;
6894 }
6895
6896 .ideditor[dir='ltr'] .layer-list .indented label {
6897     padding-left: 24px;
6898 }
6899 .ideditor[dir='rtl'] .layer-list .indented label {
6900     padding-right: 24px;
6901 }
6902
6903 .ideditor .layer-list label > span {
6904     display: block;
6905     overflow: hidden;
6906     white-space: nowrap;
6907     -o-text-overflow: ellipsis;
6908        text-overflow: ellipsis;
6909     -webkit-box-flex: 1;
6910     -webkit-flex-grow: 1;
6911         -ms-flex-positive: 1;
6912             flex-grow: 1;
6913 }
6914
6915 .ideditor .layer-list input.list-item-input {
6916     height: 2.2em;
6917     padding: 0px 4px;
6918     width: 50%;
6919     min-width: 160px;
6920 }
6921
6922 .ideditor .map-data-pane .layer-list button,
6923 .ideditor .background-pane .layer-list button {
6924     border-left: 1px solid #ccc;
6925     border-radius: 0;
6926     padding-left: 4px;
6927     padding-right: 4px;
6928 }
6929 .ideditor[dir='rtl'] .map-data-pane .layer-list button,
6930 .ideditor[dir='rtl'] .background-pane .layer-list button {
6931     border-left: none;
6932     border-right: 1px solid #ccc;
6933 }
6934
6935 .ideditor .map-data-pane .layer-list button .icon,
6936 .ideditor .background-pane .layer-list button .icon {
6937     opacity: 0.5;
6938 }
6939
6940 .ideditor .map-data-pane .layer-list button:last-of-type,
6941 .ideditor .background-pane .layer-list button:last-of-type {
6942     border-radius: 0 3px 3px 0;
6943 }
6944 .ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
6945 .ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
6946     border-radius: 3px 0 0 3px;
6947 }
6948
6949 .ideditor .map-data-pane .vectortile-container .vectortile-header {
6950     padding-bottom: 5px;
6951 }
6952 .ideditor .map-data-pane .vectortile-container .vectortile-footer {
6953     padding-bottom: 10px;
6954 }
6955
6956
6957 /* Issues
6958 ------------------------------------------------------- */
6959 .ideditor .issue {
6960     overflow: hidden;
6961 }
6962 .ideditor .issue .issue-label,
6963 .ideditor .issue-label .issue-text {
6964     width: 100%;
6965     display: -webkit-box;
6966     display: -webkit-flex;
6967     display: -ms-flexbox;
6968     display: flex;
6969     -webkit-box-orient: horizontal;
6970     -webkit-box-direction: normal;
6971     -webkit-flex-flow: row nowrap;
6972         -ms-flex-flow: row nowrap;
6973             flex-flow: row nowrap;
6974     cursor: pointer;
6975     text-align: initial;
6976     background: none;
6977 }
6978
6979 .ideditor .issue-text .issue-icon {
6980     -webkit-box-flex: 0;
6981     -webkit-flex: 0 0 auto;
6982         -ms-flex: 0 0 auto;
6983             flex: 0 0 auto;
6984     padding: 2px 3px;
6985 }
6986 .ideditor .issue-text .issue-message {
6987     -webkit-box-flex: 1;
6988     -webkit-flex: 1 1 auto;
6989         -ms-flex: 1 1 auto;
6990             flex: 1 1 auto;
6991     padding: 4px 5px;
6992 }
6993 .ideditor .issue-label .issue-autofix {
6994     -webkit-box-flex: 0;
6995     -webkit-flex: 0 0 auto;
6996         -ms-flex: 0 0 auto;
6997             flex: 0 0 auto;
6998     padding: 5px 8px;
6999 }
7000 .ideditor .issue-label .issue-info-button {
7001     height: unset;
7002     width: 32px;
7003     -webkit-box-flex: 0;
7004     -webkit-flex: 0 0 auto;
7005         -ms-flex: 0 0 auto;
7006             flex: 0 0 auto;
7007     border-left: 1px solid #ccc;
7008     background-color: rgba(0,0,0,0);
7009 }
7010 .ideditor[dir='rtl'] .issue-label .issue-info-button {
7011     border-left: 0;
7012     border-right: 1px solid #ccc;
7013 }
7014 .ideditor .issue-container .issue-label .issue-info-button .icon {
7015     opacity: 0.5;
7016 }
7017 .ideditor .issue-container.active .issue-label .issue-info-button .icon {
7018     opacity: 0.7;
7019 }
7020 .ideditor .issue-label .issue-info-button:last-child {
7021     border-radius: 0 4px 4px 0;
7022 }
7023 .ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
7024     border-radius: 4px 0 0 4px;
7025 }
7026
7027 .ideditor button.autofix.action {
7028     -webkit-box-flex: 0;
7029     -webkit-flex: 0 0 20px;
7030         -ms-flex: 0 0 20px;
7031             flex: 0 0 20px;
7032     height: 20px;
7033     width: 20px;
7034     background: #7092ff;
7035     color: #fff;
7036 }
7037 .ideditor button.autofix.action:focus,
7038 .ideditor button.autofix.action:active,
7039 .ideditor button.autofix.action.active {
7040     background: #597be7;
7041 }
7042 @media (hover: hover) {
7043     .ideditor button.autofix.action:hover {
7044         background: #597be7;
7045     }
7046 }
7047
7048 /* fix all */
7049 .ideditor .autofix-all {
7050     display: -webkit-box;
7051     display: -webkit-flex;
7052     display: -ms-flexbox;
7053     display: flex;
7054     -webkit-box-orient: horizontal;
7055     -webkit-box-direction: normal;
7056     -webkit-flex-flow: row nowrap;
7057         -ms-flex-flow: row nowrap;
7058             flex-flow: row nowrap;
7059     -webkit-box-pack: end;
7060     -webkit-justify-content: flex-end;
7061         -ms-flex-pack: end;
7062             justify-content: flex-end;
7063     margin-top: -25px;
7064     padding-bottom: 5px;
7065 }
7066 .ideditor .autofix-all-link-text {
7067     padding: 0;
7068 }
7069 .ideditor .autofix-all-link-icon svg {
7070     margin: 0 9px;
7071     background: currentColor;
7072     border-radius: 4px;
7073 }
7074 .ideditor .autofix-all-link-icon svg use {
7075     color: #fff;
7076 }
7077
7078 /* warning styles */
7079 .ideditor .warnings-list,
7080 .ideditor .warnings-list *,
7081 .ideditor .issue-container.active .issue.severity-warning,
7082 .ideditor .issue-container.active .issue.severity-warning * {
7083     border-color: #fb2;
7084 }
7085
7086 .ideditor .warnings-list .issue.severity-warning .issue-label,
7087 .ideditor .issue.severity-warning .issue-fix-list,
7088 .ideditor .warning-section {
7089     background: #ffc;
7090 }
7091
7092 .ideditor .issue-container.active .issue.severity-warning .issue-label {
7093     background: #ffa;
7094 }
7095
7096 .ideditor .issue.severity-warning .issue-icon {
7097     color: #f90;
7098 }
7099
7100 .ideditor .issue.severity-warning .issue-fix-item button.actionable,
7101 .ideditor .issue-container.active .issue.severity-warning .issue-info-button {
7102     color: #b15500;
7103     fill: #b15500;
7104 }
7105 .ideditor .warnings-list .issue.severity-warning .issue-label:active,
7106 .ideditor .warnings-list .issue.severity-warning .issue-label:focus,
7107 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7108 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
7109     background: #ff8;
7110 }
7111 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7112 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
7113 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
7114 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
7115     color: #7f3d00;
7116     fill: #7f3d00;
7117 }
7118 @media (hover: hover) {
7119     .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
7120     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
7121         background: #ff8;
7122     }
7123     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
7124     .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
7125         color: #7f3d00;
7126         fill: #7f3d00;
7127     }
7128 }
7129
7130
7131 /* error styles */
7132 .ideditor .errors-list,
7133 .ideditor .errors-list *,
7134 .ideditor .issue-container.active .issue.severity-error,
7135 .ideditor .issue-container.active .issue.severity-error * {
7136     border-color: #f77;
7137 }
7138
7139 .ideditor .errors-list .issue.severity-error .issue-label,
7140 .ideditor .issue.severity-error .issue-fix-list,
7141 .ideditor .error-section {
7142     background: #ffd6d6;
7143 }
7144
7145 .ideditor .issue-container.active .issue.severity-error .issue-label {
7146     background: #ffc6c6;
7147 }
7148
7149 .ideditor .issue.severity-error .issue-fix-item button.actionable,
7150 .ideditor .issue-container.active .issue.severity-error .issue-info-button {
7151     color: #b91201;
7152     fill: #b91201;
7153 }
7154 .ideditor .issue.severity-error .issue-icon {
7155     color: #dd1400;
7156 }
7157 .ideditor .errors-list .issue.severity-error .issue-label:active,
7158 .ideditor .errors-list .issue.severity-error .issue-label:focus,
7159 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7160 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
7161     background: #ffb6b6;
7162 }
7163 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7164 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
7165 .ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
7166 .ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
7167     color: #840c00;
7168     fill: #840c00;
7169 }
7170 @media (hover: hover) {
7171     .ideditor .errors-list .issue.severity-error .issue-label:hover,
7172     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
7173         background: #ffb6b6;
7174     }
7175     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
7176     .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
7177         color: #840c00;
7178         fill: #840c00;
7179     }
7180 }
7181
7182
7183 /* Issues Pane */
7184 .ideditor .issues-options-container {
7185     display: table;
7186 }
7187 .ideditor .issues-option {
7188     display: table-row;
7189 }
7190 .ideditor .issues-option-title {
7191     display: table-cell;
7192     font-weight: bold;
7193     padding-right: 10px;
7194 }
7195 .ideditor[dir='rtl'] .issues-option-title {
7196     padding-right: 0;
7197     padding-left: 10px;
7198 }
7199 .ideditor .issues-option label {
7200     display: table-cell;
7201     padding: 0 10px;
7202     white-space: nowrap;
7203 }
7204
7205 .ideditor .layer-list.issues-list li.issue {
7206     border-color: inherit;    /* override .layer-list styles */
7207     color: inherit;
7208     height: unset;
7209 }
7210
7211 .ideditor .layer-list.issue-rules-list,
7212 .ideditor .layer-list.issues-list,
7213 .ideditor .layer-list.layer-feature-list {
7214     margin-bottom: 0;
7215 }
7216 .ideditor .section-footer {
7217     display: -webkit-box;
7218     display: -webkit-flex;
7219     display: -ms-flexbox;
7220     display: flex;
7221     -webkit-box-orient: horizontal;
7222     -webkit-box-direction: normal;
7223     -webkit-flex-flow: row nowrap;
7224         -ms-flex-flow: row nowrap;
7225             flex-flow: row nowrap;
7226     -webkit-box-pack: end;
7227     -webkit-justify-content: flex-end;
7228         -ms-flex-pack: end;
7229             justify-content: flex-end;
7230     height: 30px;
7231 }
7232 .ideditor .section-footer a {
7233     padding: 5px;
7234 }
7235
7236 .ideditor .section-issues-status .box {
7237     border-radius: 4px;
7238     border: 1px solid #72d979;
7239     background: #c6ffca;
7240     padding: 5px !important;
7241     display: -webkit-box;
7242     display: -webkit-flex;
7243     display: -ms-flexbox;
7244     display: flex;
7245 }
7246 .ideditor .section-issues-status .icon {
7247     color: #05ac10;
7248 }
7249
7250 .ideditor input.square-degrees-input {
7251     padding: 2px !important; /* important needed for rtl */
7252     width: 3em;
7253     height: 2em;
7254     text-align: center;
7255     background: rgba(0,0,0,0);
7256     color: currentColor;
7257 }
7258
7259
7260 /* Entity Issues List */
7261 .ideditor .section-entity-issues .issue-container .issue {
7262     border-radius: 4px;
7263     border: 1px solid #ccc;
7264     background: #f6f6f6;
7265 }
7266 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
7267 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
7268 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
7269 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
7270     background: #f1f1f1;
7271 }
7272 @media (hover: hover) {
7273     .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
7274     .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
7275         background: #f1f1f1;
7276     }
7277 }
7278 .ideditor .section-entity-issues .issue .issue-label .issue-text {
7279     padding-right: 10px;
7280 }
7281 .ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
7282     padding-right: unset;
7283     padding-left: 10px;
7284 }
7285
7286 .ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
7287     font-weight: bold;
7288 }
7289 .ideditor .section-entity-issues .issue-container:not(:last-of-type) {
7290     margin-bottom: 5px;
7291 }
7292 .ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
7293     margin-top: 10px;
7294 }
7295 .ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
7296     margin-bottom: 10px;
7297 }
7298
7299 /* fixes */
7300 .ideditor .section-entity-issues .issue-fix-list {
7301     border-top: 1px solid;
7302     border-color: inherit;
7303 }
7304 .ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
7305     display: none;
7306 }
7307
7308 .ideditor li.issue-fix-item button {
7309     padding: 2px 10px 2px 20px;
7310     background: transparent;
7311     width: 100%;
7312     text-align: initial;
7313 }
7314 .ideditor[dir='rtl'] li.issue-fix-item button {
7315     padding: 2px 20px 2px 10px;
7316 }
7317 .ideditor li.issue-fix-item:first-of-type button {
7318     padding-top: 5px;
7319 }
7320 .ideditor li.issue-fix-item:last-of-type button {
7321     padding-bottom: 5px;
7322 }
7323
7324 .ideditor li.issue-fix-item button .fix-message {
7325     padding: 0 10px;
7326     vertical-align: middle;
7327 }
7328
7329 .ideditor li.issue-fix-item button.actionable {
7330     cursor: pointer;
7331 }
7332 .ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
7333     color: #555;
7334     fill: #555;
7335 }
7336
7337 .ideditor .issue-container:not(.active) ul.issue-fix-list {
7338     display: none;
7339 }
7340 .ideditor .issue-container:not(.active) .issue-info {
7341     display: none;
7342 }
7343
7344 .ideditor .issue-info {
7345     -webkit-box-flex: 1;
7346     -webkit-flex: 1 1 auto;
7347         -ms-flex: 1 1 auto;
7348             flex: 1 1 auto;
7349     width: 100%;
7350     overflow: hidden;
7351     display: none;
7352     padding: 10px 0;
7353 }
7354 .ideditor .issue-info.expanded {
7355     display: inline-block;
7356 }
7357
7358 .ideditor .issue-info .issue-reference {
7359     margin-bottom: 10px;
7360 }
7361 .ideditor .issue-info .tagDiff-table {
7362     min-width: 60%;
7363     width: unset;
7364     border: 1px solid #ccc;
7365 }
7366 .ideditor .issue-info .tagDiff-row {
7367     border: 1px solid #ccc;
7368 }
7369 .ideditor .issue-info .tagDiff-cell {
7370     padding: 2px 10px;
7371     font-family: monospace;
7372     font-size: 10px;
7373     border: 1px solid #ccc;
7374 }
7375 .ideditor .issue-info .tagDiff-cell-add {
7376     background: #dfd;
7377 }
7378 .ideditor .issue-info .tagDiff-cell-remove {
7379     background: #fdd;
7380 }
7381
7382
7383 /* Background - Display Options Sliders
7384 ------------------------------------------------------- */
7385 .ideditor .display-options-container {
7386     padding: 10px;
7387 }
7388
7389 .ideditor .display-control h5 {
7390     padding-bottom: 0;
7391     padding-top: 10px;
7392 }
7393
7394 .ideditor .display-control h5 span {
7395     margin: 5px;
7396 }
7397
7398 .ideditor .display-control .control-wrap {
7399     display: -webkit-box;
7400     display: -webkit-flex;
7401     display: -ms-flexbox;
7402     display: flex;
7403     -webkit-box-align: center;
7404     -webkit-align-items: center;
7405         -ms-flex-align: center;
7406             align-items: center;
7407     width: 100%;
7408 }
7409 .ideditor .display-control .display-option-input {
7410     height: 20px;
7411     -webkit-box-flex: 1;
7412     -webkit-flex: 1 1 100%;
7413         -ms-flex: 1 1 100%;
7414             flex: 1 1 100%;
7415 }
7416
7417 .ideditor .display-control button {
7418     height: 30px;
7419     width: 30px;
7420     margin-left: 5px;
7421     margin-right: 0px;
7422     vertical-align: text-bottom;
7423     border-radius: 4px;
7424     -webkit-box-flex: 0;
7425     -webkit-flex: 0 0 auto;
7426         -ms-flex: 0 0 auto;
7427             flex: 0 0 auto;
7428 }
7429 .ideditor[dir='rtl'] .display-control button {
7430     margin-left: 0px;
7431     margin-right: 5px;
7432 }
7433
7434
7435 /* Background - Adjust Alignment
7436 ------------------------------------------------------- */
7437 .ideditor .background-pane .nudge-container {
7438     border: 1px solid #ccc;
7439     border-radius: 4px;
7440     padding: 10px;
7441     position: relative;
7442 }
7443
7444 .ideditor .nudge-container .nudge-controls-wrap {
7445     position: relative;
7446     width: 100%;
7447     overflow: hidden;
7448 }
7449
7450 .ideditor .nudge-container .nudge-outer-rect {
7451     background-color: #eee;
7452     border: 1px solid #ccc;
7453     border-radius: 2px;
7454     padding: 20px 0;
7455     display: -webkit-box;
7456     display: -webkit-flex;
7457     display: -ms-flexbox;
7458     display: flex;
7459     -webkit-box-pack: center;
7460     -webkit-justify-content: center;
7461         -ms-flex-pack: center;
7462             justify-content: center;
7463     -webkit-box-align: center;
7464     -webkit-align-items: center;
7465         -ms-flex-align: center;
7466             align-items: center;
7467     margin: 45px;
7468     cursor: move;
7469     /* prevent scrolling pane while dragging on touchscreen */
7470     -ms-touch-action: none;
7471         touch-action: none;
7472     /* disable drag-to-select */
7473     -webkit-user-select: none;
7474        -moz-user-select: none;
7475         -ms-user-select: none;
7476             user-select: none;
7477     position: relative;
7478 }
7479
7480 .ideditor .nudge-container .nudge-inner-rect {
7481     background-color: #fff;
7482     border: 1px solid #ccc;
7483     border-radius: 2px;
7484     width: 65%;
7485     min-height: 20px;
7486 }
7487
7488 .ideditor .nudge-container .nudge::after {
7489     content: '';
7490     display: block;
7491     position: absolute;
7492     margin: auto;
7493     left: 0; right: 0; top: 0; bottom: 0;
7494     height: 0;
7495     width: 0;
7496 }
7497
7498 .ideditor .nudge-container input {
7499     width: 100%;
7500     padding: 2px;
7501     text-align: center;
7502     border: 0;
7503 }
7504
7505 .ideditor .nudge-container input.error {
7506     border: 1px solid #ff7878;
7507     border-radius: 2px;
7508     background: #ffb;
7509 }
7510
7511 .ideditor .nudge-container button {
7512     position: absolute;
7513     height: 40px;
7514     width: 40px;
7515 }
7516 .ideditor .nudge-container button.right,
7517 .ideditor .nudge-container button.left {
7518     top: 0;
7519     bottom: 0;
7520     margin-top: auto;
7521     margin-bottom: auto;
7522     vertical-align: middle;
7523 }
7524 .ideditor .nudge-container button.right {
7525     right: 0;
7526 }
7527 .ideditor .nudge-container button.left {
7528     left: 0;
7529 }
7530 .ideditor .nudge-container button.top,
7531 .ideditor .nudge-container button.bottom {
7532     left: 0;
7533     right: 0;
7534     margin-left: auto;
7535     margin-right: auto;
7536 }
7537 .ideditor .nudge-container button.top {
7538     top: 0;
7539 }
7540 .ideditor .nudge-container button.bottom {
7541     bottom: 0;
7542 }
7543
7544 .ideditor .nudge-container button.nudge-reset {
7545     right: 0;
7546     bottom: 0;
7547 }
7548
7549 .ideditor .nudge-surface {
7550    position: absolute;
7551    z-index: 5000;
7552    left: 0;
7553    top: 0;
7554    width: 100%;
7555    height: 100%;
7556    background-color: transparent;
7557    cursor: move;
7558 }
7559
7560 .ideditor .background-pane .nudge.right::after {
7561     border-top: 5px solid transparent;
7562     border-bottom: 5px solid transparent;
7563     border-left: 5px solid #222;
7564 }
7565
7566 .ideditor .background-pane .nudge.left::after {
7567     border-top: 5px solid transparent;
7568     border-bottom: 5px solid transparent;
7569     border-right: 5px solid #222;
7570 }
7571
7572 .ideditor .background-pane .nudge.top::after {
7573     border-right: 5px solid transparent;
7574     border-left: 5px solid transparent;
7575     border-bottom: 5px solid #222;
7576 }
7577
7578 .ideditor .background-pane .nudge.bottom::after {
7579     border-right: 5px solid transparent;
7580     border-left: 5px solid transparent;
7581     border-top: 5px solid #222;
7582 }
7583
7584
7585 /* Side Panes - Background / Map Data / Help
7586 ------------------------------------------------------- */
7587 .ideditor .map-panes {
7588     -webkit-box-flex: 0;
7589     -webkit-flex: 0 1 auto;
7590         -ms-flex: 0 1 auto;
7591             flex: 0 1 auto;
7592     position: relative;
7593     height: 100%;
7594     max-width: 100%;
7595 }
7596 .ideditor .map-pane {
7597     position: relative;
7598     top: 0;
7599     width: 400px;
7600     max-width: 100%;
7601     height: 100%;
7602     z-index: 10;
7603     display: -webkit-box;
7604     display: -webkit-flex;
7605     display: -ms-flexbox;
7606     display: flex;
7607     -webkit-box-orient: vertical;
7608     -webkit-box-direction: normal;
7609     -webkit-flex-direction: column;
7610         -ms-flex-direction: column;
7611             flex-direction: column;
7612 }
7613
7614 .ideditor .map-pane.help-pane {
7615     width: 600px;
7616 }
7617
7618 .ideditor .pane-heading {
7619     display: -webkit-box;
7620     display: -webkit-flex;
7621     display: -ms-flexbox;
7622     display: flex;
7623     -webkit-box-orient: horizontal;
7624     -webkit-box-direction: normal;
7625     -webkit-flex-flow: row nowrap;
7626         -ms-flex-flow: row nowrap;
7627             flex-flow: row nowrap;
7628     -webkit-box-pack: justify;
7629     -webkit-justify-content: space-between;
7630         -ms-flex-pack: justify;
7631             justify-content: space-between;
7632     border-bottom: 1px solid #ccc;
7633     -webkit-box-flex: 0;
7634     -webkit-flex: 0 0 auto;
7635         -ms-flex: 0 0 auto;
7636             flex: 0 0 auto;
7637 }
7638
7639 .ideditor .pane-heading h2 {
7640     margin: 14px 20px;
7641 }
7642
7643 .ideditor .pane-heading button {
7644     width: 40px;
7645     border-radius: 0;
7646 }
7647
7648 .ideditor .pane-content {
7649     height: 100%;
7650     padding: 10px 50px 20px 20px;
7651     overflow-x: hidden;
7652     overflow-y: scroll;
7653     position: relative;
7654 }
7655 .ideditor[dir='rtl'] .pane-content {
7656     padding: 10px 20px 20px 50px;
7657 }
7658
7659 .ideditor .help-pane .pane-content > div {
7660     padding-bottom: 15px;
7661 }
7662
7663
7664 /* Help
7665 ------------------------------------------------------- */
7666 .ideditor .help-pane p {
7667     font-size: 15px;
7668     margin-bottom: 20px;
7669 }
7670
7671 .ideditor .help-pane .left-content .icon.inline,
7672 .ideditor .curtain-tooltip .icon.inline {
7673     margin-right: 0;
7674     margin-left: 0;
7675     height: 1.34em;
7676     width: 1.34em;
7677 }
7678
7679 .ideditor .help-pane .toc {
7680     width: 100%;
7681     max-width: 200px;
7682     float: right;
7683     margin-left: 20px;
7684     margin-bottom: 20px;
7685     padding-left: 5px;
7686 }
7687
7688 .ideditor .help-pane .toc li a,
7689 .ideditor .help-pane .nav a {
7690     display: block;
7691     border: 1px solid #ccc;
7692     padding: 5px 10px;
7693 }
7694
7695 .ideditor .help-pane .toc li a {
7696     border-bottom: 0;
7697 }
7698 .ideditor .help-pane .toc li a:focus,
7699 .ideditor .help-pane .nav a:focus,
7700 .ideditor .help-pane .toc li a:active,
7701 .ideditor .help-pane .nav a:active {
7702     background: #ececec;
7703 }
7704 @media (hover: hover) {
7705     .ideditor .help-pane .toc li a:hover,
7706     .ideditor .help-pane .nav a:hover {
7707         background: #ececec;
7708     }
7709 }
7710
7711 .ideditor .help-pane .toc li a.selected {
7712     background: #e8ebff;
7713 }
7714
7715 .ideditor .help-pane .toc li:first-child a {
7716     border-radius: 4px 4px 0 0;
7717 }
7718
7719 .ideditor .help-pane .toc li:nth-last-child(3) a {
7720     border-bottom: 1px solid #ccc;
7721     border-radius: 0 0 4px 4px
7722 }
7723
7724 .ideditor .help-pane .toc li.shortcuts a,
7725 .ideditor .help-pane .toc li.walkthrough a {
7726     overflow: hidden;
7727     margin-top: 10px;
7728     border-bottom: 1px solid #ccc;
7729     border-radius: 4px;
7730 }
7731
7732 .ideditor .help-pane .toc li.walkthrough a {
7733     text-align: center;
7734 }
7735
7736 .ideditor .help-pane .nav {
7737     position: relative;
7738     padding-bottom: 30px;
7739 }
7740
7741 .ideditor .help-pane .nav a {
7742     float: left;
7743     width: 50%;
7744     text-align: center;
7745 }
7746
7747 .ideditor .help-pane .nav a:first-child {
7748     border-radius: 4px 0 0 4px;
7749 }
7750
7751 .ideditor .help-pane .nav a:last-child:not(:only-child) {
7752     border-radius: 0 4px 4px 0;
7753     border-left: 0;
7754 }
7755
7756 .ideditor .help-pane .nav a:only-child {
7757     width: 100%;
7758     border-radius: 4px;
7759 }
7760
7761
7762 /* Inspector (hover styles)
7763 ------------------------------------------------------- */
7764 .ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
7765 .ideditor .inspector-hover .form-field-input-wrap .label,
7766 .ideditor .inspector-hover .form-field-input-multicombo .chiplist,
7767 .ideditor .inspector-hover .form-field-button,
7768 .ideditor .inspector-hover .structure-extras-wrap,
7769 .ideditor .inspector-hover .comments-container .comment,
7770 .ideditor .inspector-hover button,
7771 .ideditor .inspector-hover input,
7772 .ideditor .inspector-hover textarea,
7773 .ideditor .inspector-hover label {
7774     background: #ececec;
7775 }
7776 .ideditor .inspector-hover .preset-list-button,
7777 .ideditor .inspector-hover .tag-row input {
7778     background: #f6f6f6;
7779 }
7780
7781 .ideditor .inspector-hover a,
7782 .ideditor .inspector-hover .form-field-input-multicombo .chip,
7783 .ideditor .inspector-hover .form-field-input-check span,
7784 .ideditor .inspector-hover .section-entity-issues .issue .icon {
7785     color: #666;
7786 }
7787
7788 .ideditor .inspector-hover .form-field-input-multicombo .chip {
7789     background: #eee;
7790     border: 1px solid #ccc;
7791 }
7792
7793 /* no scrollbars */
7794 .ideditor .inspector-hover div {
7795     overflow-x: visible;
7796     overflow-y: visible;
7797 }
7798
7799 /* hide and remove from layout */
7800 .ideditor .inspector-hidden,
7801 .ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
7802 .ideditor .inspector-hover label input[type="checkbox"],
7803 .ideditor .inspector-hover label input[type="radio"],
7804 .ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
7805 .ideditor .inspector-hover .form-field-input-radio label,
7806 .ideditor .inspector-hover .form-field-input-radio label span,
7807 .ideditor .inspector-hover .form-field-input-radio label.remove .icon,
7808 .ideditor .inspector-hover .add-row,
7809 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
7810 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
7811     display: none;
7812 }
7813
7814 /* hide but preserve in layout */
7815 .ideditor .inspector-hover .combobox-caret,
7816 .ideditor .inspector-hover .header button,
7817 .ideditor .inspector-hover .quick-links,
7818 .ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
7819 .ideditor .inspector-hover .hide-toggle:before,
7820 .ideditor .inspector-hover .more-fields,
7821 .ideditor .inspector-hover .field-label button,
7822 .ideditor .inspector-hover .tag-row button,
7823 .ideditor .inspector-hover .footer * {
7824     opacity: 0;
7825 }
7826
7827 /* Unstyle the active entity issue on hover */
7828 .ideditor .inspector-hover .section-entity-issues .issue-container.active {
7829     margin-top: 1px;
7830     margin-bottom: 1px;
7831 }
7832 .ideditor .inspector-hover .section-entity-issues .issue-container * {
7833     border-color: #ccc !important;
7834 }
7835 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
7836     border-bottom: 0;
7837 }
7838 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
7839     font-weight: normal;
7840 }
7841
7842
7843 /* Styles for raw tag inspector on hover */
7844 .ideditor .inspector-hover .tag-row .key-wrap,
7845 .ideditor .inspector-hover .tag-row .value-wrap {
7846     height: 31px;
7847 }
7848
7849 .ideditor .inspector-hover .tag-row:first-child input.value {
7850     border-top-right-radius: 4px;
7851 }
7852 .ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
7853     border-top-right-radius: 0;
7854     border-top-left-radius: 4px;
7855 }
7856
7857 .ideditor .inspector-hover .tag-row:last-child input.value {
7858     border-bottom-right-radius: 4px;
7859 }
7860 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
7861     border-bottom-right-radius: 0;
7862     border-bottom-left-radius: 4px;
7863 }
7864
7865 .ideditor .inspector-hover .tag-row:last-child input.key {
7866     border-bottom-left-radius: 4px;
7867 }
7868 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
7869     border-bottom-left-radius: 0;
7870     border-bottom-right-radius: 4px;
7871 }
7872
7873 .ideditor .inspector-hover .more-fields {
7874     max-height: 0;
7875     margin-bottom: -10px;
7876 }
7877
7878 /* Unstyle button fields */
7879 .ideditor .inspector-hover .form-field-input-radio label.active,
7880 .ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
7881     opacity: 1;
7882     background-color: transparent;
7883     color: #666;
7884     padding-left: 0;
7885     border-width: 0;
7886 }
7887 .ideditor .inspector-hover .form-field-input-radio button.active {
7888     padding-left: 10px;
7889 }
7890
7891 /* Show placeholder on hover for radio buttons */
7892 .ideditor .inspector-hover .form-field-input-radio {
7893     border: 1px solid #ccc;
7894     border-top: 0;
7895     border-radius: 0 0 4px 4px;
7896 }
7897 .ideditor .inspector-hover .form-field-input-radio .placeholder {
7898     opacity: 1;
7899     color: #666;
7900     padding: 5px 10px;
7901     width: 100%;
7902     height: auto;
7903     border: 0;
7904 }
7905 .ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
7906     border: 0;
7907 }
7908
7909
7910 /* Raster Background Tiles
7911 ------------------------------------------------------- */
7912 .ideditor img.tile {
7913     position: absolute;
7914     -webkit-transform-origin: 0 0;
7915         -ms-transform-origin: 0 0;
7916             transform-origin: 0 0;
7917
7918     -webkit-user-select: none;
7919
7920        -moz-user-select: none;
7921
7922         -ms-user-select: none;
7923
7924             user-select: none;
7925
7926     pointer-events: none;
7927
7928     -webkit-user-drag: none;
7929
7930     opacity: 0;
7931
7932     -webkit-transition: opacity 200ms linear;
7933
7934     -o-transition: opacity 200ms linear;
7935
7936     transition: opacity 200ms linear;
7937 }
7938
7939 .ideditor img.tile-loaded {
7940     opacity: 1;
7941 }
7942
7943 .ideditor img.tile-removing {
7944     opacity: 0;
7945 }
7946
7947 .ideditor .tile-label-debug {
7948     font-size: 10px;
7949     background: rgba(0, 0, 0, 0.7);
7950     color: #fff;
7951     position: absolute;
7952     text-align: center;
7953     padding: 5px;
7954     border-radius: 3px;
7955     z-index: 2;
7956     margin-left: -70px;
7957     margin-top: -20px;
7958
7959     -webkit-transform-origin: 0 0;
7960
7961         -ms-transform-origin: 0 0;
7962
7963             transform-origin: 0 0;
7964
7965     -webkit-user-select: none;
7966
7967        -moz-user-select: none;
7968
7969         -ms-user-select: none;
7970
7971             user-select: none;
7972 }
7973
7974 .ideditor img.tile-debug {
7975     outline: 1px solid red;
7976 }
7977
7978
7979 /* Map
7980 ------------------------------------------------------- */
7981 .ideditor .main-map {
7982     position: absolute;
7983     top: 0;
7984     left: 0;
7985     right: 0;
7986     bottom: 0;
7987     overflow: hidden;
7988     height: 100%;
7989     width: 100%;
7990     background: #000;
7991     -webkit-user-select: none;
7992        -moz-user-select: none;
7993         -ms-user-select: none;
7994             user-select: none;
7995     -ms-touch-action: none;
7996         touch-action: none;
7997     -webkit-touch-callout: none;
7998 }
7999 .ideditor .main-map * {
8000     -ms-touch-action: none;
8001         touch-action: none;
8002 }
8003
8004 .ideditor .supersurface {
8005     -webkit-transform-origin: 0 0;
8006         -ms-transform-origin: 0 0;
8007             transform-origin: 0 0;
8008 }
8009
8010 .ideditor .supersurface, .ideditor .layer {
8011     position: absolute;
8012     top: 0;
8013     left: 0;
8014     right: 0;
8015     bottom: 0;
8016 }
8017
8018
8019 /* Map-In-Map
8020 ------------------------------------------------------- */
8021 .ideditor .map-in-map {
8022     position: absolute;
8023     overflow: hidden;
8024     top: 10px;
8025     width: 200px;
8026     height: 150px;
8027     z-index: 2;
8028     background: #000;
8029     border: #aaa 1px solid;
8030     -webkit-box-shadow: 0 0 2em black;
8031             box-shadow: 0 0 2em black;
8032 }
8033 .ideditor[dir='ltr'] .map-in-map {
8034     left: 10px;
8035 }
8036 .ideditor[dir='rtl'] .map-in-map {
8037     right: 10px;
8038 }
8039
8040 .ideditor .map-in-map-tiles {
8041     -webkit-transform-origin: 0 0;
8042         -ms-transform-origin: 0 0;
8043             transform-origin: 0 0;
8044     -webkit-user-select: none;
8045        -moz-user-select: none;
8046         -ms-user-select: none;
8047             user-select: none;
8048 }
8049
8050 .ideditor .map-in-map-viewport,
8051 .ideditor .map-in-map-data {
8052     top: 0;
8053     left: 0;
8054     overflow: hidden;
8055     height: 100%;
8056     width: 100%;
8057 }
8058
8059 .ideditor .map-in-map-viewport {
8060     position: absolute;
8061 }
8062
8063 .ideditor .map-in-map-data {
8064     position: relative;
8065     z-index: 10;
8066 }
8067
8068 .ideditor .map-in-map-bbox {
8069     fill: none;
8070     stroke: rgba(255, 255, 0, 0.75);
8071     stroke-width: 1;
8072     shape-rendering: crispEdges;
8073 }
8074
8075 .ideditor .map-in-map-bbox.thick {
8076     stroke-width: 5;
8077 }
8078
8079
8080 /* Debug Data
8081 ------------------------------------------------------- */
8082 .ideditor .debug {
8083     stroke: currentColor;
8084     fill: none;
8085     stroke-width: 2;
8086 }
8087 .ideditor .map-in-map-data .debug {
8088     stroke-width: 1;
8089 }
8090
8091 .ideditor .nocolor { color: rgba(0, 0, 0, 0); }
8092 .ideditor .red     { color: rgba(255, 0, 0, 0.75); }
8093 .ideditor .green   { color: rgba(0, 255, 0, 0.75); }
8094 .ideditor .blue    { color: rgba(176, 176, 255, 0.75); }
8095 .ideditor .yellow  { color: rgba(255, 255, 0, 0.75); }
8096 .ideditor .cyan    { color: rgba(0, 255, 255, 0.75); }
8097 .ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
8098 .ideditor .orange  { color: rgba(255, 153, 0, 0.75); }
8099 .ideditor .pink    { color: rgba(255, 0, 153, 0.75); }
8100 .ideditor .purple  { color: rgba(153, 0, 255, 0.75); }
8101
8102 .ideditor .debug-legend {
8103     position: absolute;
8104     top: 70px;
8105     right: 80px;
8106     padding: 5px;
8107     border-radius: 4px;
8108     pointer-events: none;
8109 }
8110
8111 .ideditor .debug-legend-item {
8112     padding-right: 5px;
8113 }
8114 .ideditor .debug-legend-item:before {
8115     content: "\25A0";
8116     padding: 0 5px;
8117 }
8118
8119
8120 /* Information Panels
8121 ------------------------------------------------------- */
8122 .ideditor .info-panels {
8123     display: -webkit-box;
8124     display: -webkit-flex;
8125     display: -ms-flexbox;
8126     display: flex;
8127     -webkit-box-orient: horizontal;
8128     -webkit-box-direction: normal;
8129     -webkit-flex-flow: row wrap-reverse;
8130         -ms-flex-flow: row wrap-reverse;
8131             flex-flow: row wrap-reverse;
8132     -webkit-box-pack: end;
8133     -webkit-justify-content: flex-end;
8134         -ms-flex-pack: end;
8135             justify-content: flex-end;
8136     width: 100%;
8137     z-index: 1;
8138     -ms-user-select: element;
8139     pointer-events: none;
8140     overflow: hidden;
8141 }
8142
8143 .ideditor .panel-container h1,
8144 .ideditor .panel-container h2,
8145 .ideditor .panel-container h3,
8146 .ideditor .panel-container h4,
8147 .ideditor .panel-container h5 {
8148     display: inline-block;
8149     margin-bottom: 0;
8150 }
8151
8152 .ideditor .panel-container h1,
8153 .ideditor .panel-container h2,
8154 .ideditor .panel-container h3 {
8155     color: #ff8;
8156 }
8157
8158 .ideditor .panel-container {
8159     -webkit-box-flex: 0;
8160     -webkit-flex: 0 0 auto;
8161         -ms-flex: 0 0 auto;
8162             flex: 0 0 auto;
8163     margin: 0 2px 2px 0;
8164     border-radius: 4px;
8165     border: 1px solid rgba(0, 0, 0, 0.75);
8166     padding-bottom: 10px;
8167     width: 250px;
8168     max-width: 100%;
8169     pointer-events: auto;
8170 }
8171
8172 .ideditor .panel-container .panel-title {
8173     border-radius: 4px 4px 0 0;
8174 }
8175
8176 .ideditor .panel-title {
8177     padding: 5px 10px;
8178     display: -webkit-box;
8179     display: -webkit-flex;
8180     display: -ms-flexbox;
8181     display: flex;
8182     -webkit-box-pack: justify;
8183     -webkit-justify-content: space-between;
8184         -ms-flex-pack: justify;
8185             justify-content: space-between;
8186 }
8187
8188 .ideditor .panel-title button.close {
8189     padding: 2px;
8190     background: none;
8191     color: #ddd;
8192 }
8193 .ideditor[dir='rtl'] .panel-title button.close {
8194     float: left;
8195 }
8196 .ideditor .panel-title button.close:focus,
8197 .ideditor .panel-title button.close:active {
8198     color: #fff;
8199 }
8200 @media (hover: hover) {
8201     .ideditor .panel-title button.close:hover {
8202         color: #fff;
8203     }
8204 }
8205 .ideditor .panel-title button.close .icon {
8206     height: 20px;
8207     width: 16px;
8208 }
8209
8210 .ideditor .panel-content {
8211     padding: 5px 10px;
8212     position: relative;
8213 }
8214
8215 .ideditor .panel-content ul:empty {
8216     display: none;
8217 }
8218
8219 .ideditor .panel-content li span:not(.localized-text) {
8220     display: inline-block;
8221     white-space: nowrap;
8222     margin: 0 8px;
8223 }
8224
8225 .ideditor .panel-content .button {
8226     display: inline-block;
8227     background: #7092ff;
8228     border-radius: 2px;
8229     padding: 0 4px;
8230     margin-top: 10px;
8231     margin-right: 10px;
8232     color: #fff;
8233 }
8234 .ideditor[dir='rtl'] .panel-content .button {
8235     margin-right: auto;
8236     margin-left: 10px;
8237 }
8238
8239 .ideditor .panel-content-history .links a {
8240     margin-left: 8px;
8241 }
8242 .ideditor[dir='rtl'] .panel-content-history .links a {
8243     margin-left: auto;
8244     margin-right: 8px;
8245 }
8246 .ideditor .panel-content-history h4 {
8247     padding-bottom: 0;
8248 }
8249 .ideditor .panel-content-location .location-info {
8250     margin-top: 10px;
8251 }
8252
8253
8254 /* Map Footer
8255 ------------------------------------------------------- */
8256 .ideditor .map-footer {
8257     width: 100%;
8258     position: relative;
8259     border-radius: 0;
8260     pointer-events: none;
8261     display: -webkit-box;
8262     display: -webkit-flex;
8263     display: -ms-flexbox;
8264     display: flex;
8265     -webkit-box-orient: vertical;
8266     -webkit-box-direction: normal;
8267     -webkit-flex-direction: column;
8268         -ms-flex-direction: column;
8269             flex-direction: column;
8270     -ms-user-select: element;
8271     -webkit-box-flex: 0;
8272     -webkit-flex: 0 0 auto;
8273         -ms-flex: 0 0 auto;
8274             flex: 0 0 auto;
8275 }
8276
8277 .ideditor .map-footer-bar {
8278     pointer-events: all;
8279     display: block;
8280     height: 2.5em;
8281     position: relative;
8282 }
8283
8284 .ideditor .main-footer-wrap,
8285 .ideditor .flash-wrap {
8286     display: -webkit-box;
8287     display: -webkit-flex;
8288     display: -ms-flexbox;
8289     display: flex;
8290     -webkit-box-flex: 0;
8291     -webkit-flex: 0 0 100%;
8292         -ms-flex: 0 0 100%;
8293             flex: 0 0 100%;
8294     -webkit-box-orient: horizontal;
8295     -webkit-box-direction: normal;
8296     -webkit-flex-flow: row nowrap;
8297         -ms-flex-flow: row nowrap;
8298             flex-flow: row nowrap;
8299     -webkit-box-pack: justify;
8300     -webkit-justify-content: space-between;
8301         -ms-flex-pack: justify;
8302             justify-content: space-between;
8303     height: 100%;
8304     position: absolute;
8305     right: 0;
8306     left: 0;
8307 }
8308
8309 .ideditor .footer-show {
8310     bottom: 0px;
8311     -webkit-transition: bottom 75ms linear;
8312     -o-transition: bottom 75ms linear;
8313     transition: bottom 75ms linear;
8314 }
8315
8316 .ideditor .footer-hide {
8317     bottom: -100%;
8318     -webkit-transition: bottom 75ms linear;
8319     -o-transition: bottom 75ms linear;
8320     transition: bottom 75ms linear;
8321 }
8322
8323
8324 /* Attribution
8325 ------------------------------------------------------- */
8326 .ideditor .attribution-wrap {
8327     position: absolute;
8328     bottom: 5px;
8329     left: 5px;
8330     right: 5px;
8331     display: -webkit-box;
8332     display: -webkit-flex;
8333     display: -ms-flexbox;
8334     display: flex;
8335     -webkit-box-pack: justify;
8336     -webkit-justify-content: space-between;
8337         -ms-flex-pack: justify;
8338             justify-content: space-between;
8339     -webkit-box-align: end;
8340     -webkit-align-items: flex-end;
8341         -ms-flex-align: end;
8342             align-items: flex-end;
8343     z-index: 0;
8344     pointer-events: none;
8345 }
8346
8347 .ideditor .attribution-wrap > * {
8348     pointer-events: auto;
8349 }
8350
8351 .ideditor .attribution-wrap .base-layer-attribution,
8352 .ideditor .attribution-wrap .overlay-layer-attribution {
8353     color: #ccc;
8354     font-size: 10px;
8355 }
8356 .ideditor .attribution-wrap .overlay-layer-attribution {
8357     text-align: right;
8358 }
8359
8360 .ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
8361     content: '; ';
8362 }
8363
8364 .ideditor .attribution-wrap .attribution a,
8365 .ideditor .attribution-wrap .attribution a:visited {
8366     color: #ccf;
8367 }
8368 .ideditor .attribution-wrap .attribution a:focus,
8369 .ideditor .attribution-wrap .attribution a:hover {
8370     color: #aaf;
8371 }
8372 @media (hover: hover) {
8373     .ideditor .attribution-wrap .attribution a:hover {
8374         color: #aaf;
8375     }
8376 }
8377
8378 .ideditor .attribution-wrap .attribution .source-image {
8379     height: 20px;
8380     vertical-align: middle;
8381     border-radius: 3px;
8382 }
8383
8384 .ideditor .attribution-wrap .attribution span {
8385     margin: 0 3px;
8386 }
8387
8388
8389 /* Footer - Flash messages
8390 ------------------------------------------------------- */
8391 .ideditor .flash-content {
8392     display: -webkit-box;
8393     display: -webkit-flex;
8394     display: -ms-flexbox;
8395     display: flex;
8396     -webkit-box-flex: 1;
8397     -webkit-flex: 1 0 auto;
8398         -ms-flex: 1 0 auto;
8399             flex: 1 0 auto;
8400     -webkit-box-orient: horizontal;
8401     -webkit-box-direction: normal;
8402     -webkit-flex-flow: row nowrap;
8403         -ms-flex-flow: row nowrap;
8404             flex-flow: row nowrap;
8405     -webkit-box-align: center;
8406     -webkit-align-items: center;
8407         -ms-flex-align: center;
8408             align-items: center;
8409     padding: 2px;
8410 }
8411
8412 .ideditor .flash-icon {
8413     -webkit-box-flex: 0;
8414     -webkit-flex: 0 0 auto;
8415         -ms-flex: 0 0 auto;
8416             flex: 0 0 auto;
8417     width: 20px;
8418     height: 20px;
8419     margin: 0 8px;
8420 }
8421
8422 .ideditor .flash-icon circle {
8423     fill: #eee;
8424 }
8425 .ideditor .flash-icon.disabled circle {
8426     cursor: auto;
8427     fill: rgba(255,255,255,0.7);
8428 }
8429
8430 .ideditor .flash-icon use {
8431     color: #222;
8432 }
8433 .ideditor .flash-icon.disabled use,
8434 .ideditor .flash-icon.operation.disabled use {
8435     fill: rgba(32,32,32,0.7);
8436     color: rgba(40,40,40,0.7);
8437 }
8438
8439 .ideditor .flash-text {
8440     -webkit-box-flex: 1;
8441     -webkit-flex: 1 1 auto;
8442         -ms-flex: 1 1 auto;
8443             flex: 1 1 auto;
8444 }
8445
8446 /* Scale bar
8447 ------------------------------------------------------- */
8448 .ideditor .map-footer-bar .scale-block {
8449     vertical-align: bottom;
8450     width: 250px;
8451     -webkit-box-flex: 0;
8452     -webkit-flex: 0 0 auto;
8453         -ms-flex: 0 0 auto;
8454             flex: 0 0 auto;
8455     -webkit-user-select: none;
8456        -moz-user-select: none;
8457         -ms-user-select: none;
8458             user-select: none;
8459     height: 30px;
8460     -webkit-align-self: center;
8461         -ms-flex-item-align: center;
8462             align-self: center;
8463 }
8464
8465 .ideditor .scale-block .scale {
8466     height: 100%;
8467     width: 100%;
8468     cursor: pointer;
8469     display: block;
8470 }
8471 .ideditor[dir='rtl'] .scale-block .scale {
8472     -webkit-transform: scaleX(-1);
8473         -ms-transform: scaleX(-1);
8474             transform: scaleX(-1);
8475 }
8476
8477 .ideditor .scale-block .scale-text {
8478     display: inline-block;
8479     position: absolute;
8480     color: #ccc;
8481     top: 0.45em;
8482 }
8483
8484 .ideditor .scale-block .scale path {
8485     fill: none;
8486     stroke: #ccc;
8487     stroke-width: 1;
8488     shape-rendering: crispEdges;
8489 }
8490
8491 /* Footer - About, Source Switcher
8492 ------------------------------------------------------- */
8493 .ideditor .map-footer-bar .info-block {
8494     -webkit-box-flex: 1;
8495     -webkit-flex: 1 1 100%;
8496         -ms-flex: 1 1 100%;
8497             flex: 1 1 100%;
8498     overflow: hidden;
8499 }
8500
8501 .ideditor .map-footer-list {
8502     display: -webkit-box;
8503     display: -webkit-flex;
8504     display: -ms-flexbox;
8505     display: flex;
8506     -webkit-box-orient: horizontal;
8507     -webkit-box-direction: normal;
8508     -webkit-flex-flow: row nowrap;
8509         -ms-flex-flow: row nowrap;
8510             flex-flow: row nowrap;
8511     height: 100%;
8512     -webkit-box-pack: end;
8513     -webkit-justify-content: flex-end;
8514         -ms-flex-pack: end;
8515             justify-content: flex-end;
8516 }
8517
8518 .ideditor .map-footer-list li {
8519     height: 100%;
8520     display: -webkit-box;
8521     display: -webkit-flex;
8522     display: -ms-flexbox;
8523     display: flex;
8524     -webkit-box-align: center;
8525     -webkit-align-items: center;
8526         -ms-flex-align: center;
8527             align-items: center;
8528     white-space: nowrap;
8529     padding: 5px;
8530 }
8531 .ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
8532     border-right: 1px solid rgba(255,255,255,.5);
8533 }
8534 .ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
8535     border-left: 1px solid rgba(255,255,255,.5);
8536 }
8537 .ideditor .map-footer-list li:empty {
8538     display: none;
8539 }
8540
8541 .ideditor .map-footer-list a.chip {
8542     padding: 1px 4px 1px 4px;
8543     border-radius: 2px;
8544     color: #eee;
8545 }
8546 .ideditor .map-footer-list a.chip .icon {
8547     width: 14px;
8548     height: 14px;
8549     margin-top: -2px;
8550 }
8551 .ideditor .map-footer-list a.chip span.count {
8552     margin: 0 3px;
8553 }
8554
8555 .ideditor .source-switch a.chip.live {
8556     background: #d32232;
8557     color: #fff;
8558 }
8559
8560 .ideditor .feature-warning a.chip {
8561     background: #1e90ff;
8562 }
8563
8564 .ideditor .issues-info a.chip.resolved-count {
8565     background: #15911E;
8566 }
8567 .ideditor .issues-info a.chip.warnings-count {
8568     background: #DF8500;
8569 }
8570 .ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
8571     margin-right: 5px;
8572 }
8573 .ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
8574     margin-left: 5px;
8575 }
8576
8577 .ideditor .user-list a:not(:last-child):after {
8578     content: ', ';
8579 }
8580
8581 .ideditor .api-status {
8582     text-align: right;
8583     padding: 1px 10px;
8584     color: #eee;
8585     -webkit-box-flex: 1;
8586     -webkit-flex: 1 1 auto;
8587         -ms-flex: 1 1 auto;
8588             flex: 1 1 auto;
8589 }
8590 .ideditor[dir='rtl'] .api-status {
8591     text-align: left;
8592 }
8593 .ideditor .api-status:empty {
8594     display: none;
8595 }
8596
8597 .ideditor .api-status.offline,
8598 .ideditor .api-status.readonly,
8599 .ideditor .api-status.error {
8600     background: #a22;
8601 }
8602
8603 .ideditor .api-status a {
8604     text-decoration: underline;
8605     color: #ccc;
8606     pointer-events: all;
8607 }
8608 .ideditor .api-status a:focus,
8609 .ideditor .api-status a:active {
8610     color: inherit;
8611 }
8612 @media (hover: hover) {
8613     .ideditor .api-status a:hover {
8614         color: inherit;
8615     }
8616 }
8617
8618 /* Notification Badges
8619 ------------------------------------------------------- */
8620 /* For an icon (e.g. new version) */
8621 .ideditor .badge {
8622     display: -webkit-inline-box;
8623     display: -webkit-inline-flex;
8624     display: -ms-inline-flexbox;
8625     display: inline-flex;
8626     background: #d32232;
8627     width: 21px;
8628     height: 21px;
8629     border-radius: 50%;
8630     -webkit-box-align: center;
8631     -webkit-align-items: center;
8632         -ms-flex-align: center;
8633             align-items: center;
8634     -webkit-box-pack: center;
8635     -webkit-justify-content: center;
8636         -ms-flex-pack: center;
8637             justify-content: center;
8638 }
8639 .ideditor[dir='ltr'] .badge {
8640     margin-left: 6px;
8641 }
8642 .ideditor[dir='rtl'] .badge {
8643     margin-right: 6px;
8644 }
8645 .ideditor .badge .icon {
8646     vertical-align: baseline;
8647     width: 11px;
8648     height: 11px;
8649     color: #fff;
8650     -webkit-box-flex: 0;
8651     -webkit-flex: 0 0 auto;
8652         -ms-flex: 0 0 auto;
8653             flex: 0 0 auto;
8654 }
8655
8656 /* For text (e.g. upcoming events) */
8657 .ideditor .badge-text {
8658     display: inline-block;
8659     color: #fff;
8660     text-align: center;
8661     width: 16px;
8662     height: 16px;
8663     font-size: 10px;
8664     font-weight: bold;
8665     margin-left: 5px;
8666     background: #f00;
8667     border-radius: 9px;
8668 }
8669 .ideditor[dir='rtl'] .badge-text {
8670     margin-left: 0;
8671     margin-right: 5px;
8672 }
8673
8674
8675 /* Modals / Prompts
8676 ------------------------------------------------------- */
8677 .ideditor .modal {
8678     top: 5%;
8679     max-height: 90%;
8680     position: relative;
8681     border-radius: 3px;
8682     overflow: hidden;
8683     margin: auto;
8684     z-index: 50;
8685     width: 80%;
8686     min-width: 200px;
8687     max-width: 550px;
8688     display: -webkit-box;
8689     display: -webkit-flex;
8690     display: -ms-flexbox;
8691     display: flex;
8692     -webkit-box-orient: vertical;
8693     -webkit-box-direction: normal;
8694     -webkit-flex-direction: column;
8695         -ms-flex-direction: column;
8696             flex-direction: column;
8697 }
8698
8699 .ideditor .modal .content {
8700     overflow-x: hidden;
8701     overflow-y: auto;
8702 }
8703
8704 .ideditor .modal .loader {
8705     margin-bottom: 10px;
8706 }
8707 .ideditor .modal .description {
8708     text-align: center;
8709 }
8710
8711 .ideditor .shaded {
8712     z-index: 5000;
8713     position: absolute;
8714     top: 0;
8715     bottom: 0;
8716     left: 0;
8717     right: 0;
8718     overflow: auto;
8719 }
8720 .ideditor .shaded:before {
8721     content:'';
8722     background: rgba(0,0,0,0.5);
8723     position: absolute;
8724     left: 0px; right: 0px; top: 0px; bottom: 0px;
8725 }
8726
8727 .ideditor .modal-section {
8728     padding: 20px;
8729     border-bottom: 1px solid #ccc;
8730 }
8731 .ideditor .modal-section p:not(:last-of-type) {
8732     padding-bottom: 20px;
8733 }
8734 .ideditor .modal-section h4 {
8735     padding-bottom: 0;
8736 }
8737 .ideditor .modal-section.buttons {
8738     text-align: center;
8739 }
8740
8741 .ideditor .modal-section.buttons button {
8742     min-width: 130px;
8743 }
8744
8745 .ideditor .modal-section.buttons .action {
8746     display: inline-block;
8747     margin: 0 10px;
8748 }
8749
8750 .ideditor .save-section .buttons {
8751     display: -webkit-box;
8752     display: -webkit-flex;
8753     display: -ms-flexbox;
8754     display: flex;
8755     -webkit-flex-wrap: wrap;
8756         -ms-flex-wrap: wrap;
8757             flex-wrap: wrap;
8758     -webkit-justify-content: space-around;
8759         -ms-flex-pack: distribute;
8760             justify-content: space-around;
8761 }
8762
8763 .ideditor .save-section .buttons .action,
8764 .ideditor .save-section .buttons .secondary-action {
8765     width: 45%;
8766     margin: 10px auto;
8767     text-align: center;
8768     vertical-align: middle;
8769 }
8770
8771 .ideditor .loading-modal {
8772     text-align: center;
8773 }
8774 .ideditor .modal-actions {
8775     display: -webkit-box;
8776     display: -webkit-flex;
8777     display: -ms-flexbox;
8778     display: flex;
8779 }
8780 .ideditor .modal-actions button {
8781     color: #7092ff;
8782     border-bottom: 1px solid #ccc;
8783     border-radius: 0;
8784     min-height: 160px;
8785     text-align: center;
8786     width: 100%;
8787 }
8788
8789 .ideditor .logo-small {
8790     height: 40px;
8791     width: 40px;
8792     margin: auto;
8793 }
8794
8795 .ideditor .logo {
8796     height: 100px;
8797     width: 100%;
8798     max-width: 100px;
8799     margin: auto;
8800 }
8801
8802 .ideditor .modal-actions > :first-child {
8803     border-right: 1px solid #ccc;
8804 }
8805
8806 .ideditor .modal-section:last-child {
8807     border-bottom: 0;
8808 }
8809
8810 /* Restore Modal
8811 ------------------------------------------------------- */
8812 .ideditor .modal-actions .logo-restore {
8813     color: #7092ff;
8814 }
8815 .ideditor .modal-actions .logo-reset {
8816     color: #e06c5e;
8817 }
8818
8819 /* Success Screen / Community Index
8820 ------------------------------------------------------- */
8821 .ideditor .save-success.body {
8822     overflow-y: scroll;
8823     overflow-x: hidden;
8824 }
8825
8826 .ideditor .save-success .link-out {
8827     margin: 0px 5px;
8828     white-space: nowrap;
8829 }
8830
8831 .ideditor .save-summary,
8832 .ideditor .save-communityLinks {
8833     padding: 0px 20px 15px 20px;
8834 }
8835
8836 .ideditor .save-communityLinks {
8837     border-top: 1px solid #ccc;
8838 }
8839
8840 .ideditor .save-success table,
8841 .ideditor .save-success p {
8842     margin-top: 15px;
8843 }
8844 .ideditor .save-success h3 {
8845     font-size: 14px;
8846     margin-top: 15px;
8847     line-height: 1.5;
8848     padding-bottom: 0;
8849 }
8850 .ideditor .save-success td {
8851     vertical-align: top;
8852 }
8853 .ideditor .save-success td.cell-icon {
8854     width: 40px;
8855 }
8856 .ideditor .save-success td.cell-detail {
8857     padding: 0 10px;
8858 }
8859 .ideditor .save-success td.community-detail {
8860     padding-bottom: 15px;
8861 }
8862
8863 .ideditor .summary-view-on-osm,
8864 .ideditor .community-name {
8865     font-size: 14px;
8866     font-weight: bold;
8867 }
8868 .ideditor .community-languages {
8869     margin-top: 5px;
8870     font-style: italic;
8871 }
8872 .ideditor .community-languages:only-child {
8873     margin-top: 0;
8874 }
8875
8876 .ideditor .community-detail a.hide-toggle,
8877 .ideditor .community-detail a:visited.hide-toggle {
8878     font-size: 12px;
8879     font-weight: normal;
8880     padding-bottom: 0;
8881 }
8882 .ideditor .community-detail .hide-toggle svg.icon.pre-text {
8883     width: 12px;
8884     height: 15px;
8885 }
8886
8887 .ideditor .community-events {
8888     margin-top: 5px;
8889 }
8890
8891 .ideditor .community-event,
8892 .ideditor .community-more {
8893     background-color: #efefef;
8894     padding: 8px;
8895     border-radius: 4px;
8896     margin-bottom: 5px;
8897 }
8898
8899 .ideditor .community-event-name {
8900     font-size: 14px;
8901     font-weight: bold;
8902 }
8903 .ideditor .community-event-when {
8904     font-weight: bold;
8905 }
8906
8907 .ideditor .community-missing {
8908     padding: 10px;
8909     text-align: center;
8910 }
8911
8912
8913 /* Splash Modal
8914 ------------------------------------------------------- */
8915 .ideditor .modal-actions .logo-walkthrough,
8916 .ideditor .modal-actions .logo-features {
8917     color: #7092ff;
8918 }
8919
8920
8921 /* Shortcuts Modal
8922 ------------------------------------------------------- */
8923 .ideditor .modal-shortcuts {
8924     width: 90%;
8925     max-width: 1050px;
8926 }
8927
8928 .ideditor .modal-shortcuts .modal-section:last-child {
8929     padding: 10px 15px 20px 15px;
8930     min-height: 275px;
8931 }
8932
8933 .ideditor .modal-shortcuts .tabs-bar {
8934     padding-bottom: 5px;
8935     text-align: center;
8936 }
8937
8938 .ideditor .modal-shortcuts a.tab {
8939     display: inline-block;
8940     padding: 5px 10px;
8941     margin: 0 5px;
8942     cursor: pointer;
8943     color: #666;
8944     font-size: 16px;
8945     font-weight: bold;
8946 }
8947 .ideditor .modal-shortcuts a.tab.active {
8948     color: #7092ff;
8949     border-bottom: 2px solid;
8950 }
8951 .ideditor .modal-shortcuts a.tab:focus,
8952 .ideditor .modal-shortcuts a.tab:active {
8953     color: #597be7;
8954     background-color: #efefef;
8955 }
8956 @media (hover: hover) {
8957     .ideditor .modal-shortcuts a.tab:hover {
8958         color: #597be7;
8959         background-color: #efefef;
8960     }
8961 }
8962
8963 .ideditor .modal-shortcuts .shortcut-tab {
8964     display: -webkit-box;
8965     display: -webkit-flex;
8966     display: -ms-flexbox;
8967     display: flex;
8968     -webkit-box-orient: horizontal;
8969     -webkit-box-direction: normal;
8970     -webkit-flex-flow: row wrap;
8971         -ms-flex-flow: row wrap;
8972             flex-flow: row wrap;
8973     -webkit-justify-content: space-around;
8974         -ms-flex-pack: distribute;
8975             justify-content: space-around;
8976 }
8977
8978 .ideditor .modal-shortcuts .shortcut-column {
8979     width: auto;
8980 }
8981
8982 .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
8983     -webkit-box-flex: 1;
8984     -webkit-flex: 1 1 100%;
8985         -ms-flex: 1 1 100%;
8986             flex: 1 1 100%;
8987     width: 100%;
8988 }
8989
8990 .ideditor .modal-shortcuts td {
8991     padding-bottom: 5px;
8992 }
8993
8994 .ideditor .modal-shortcuts .shortcut-section {
8995     padding: 20px 0 10px 0;
8996 }
8997
8998 .ideditor .modal-shortcuts .shortcut-keys {
8999     padding: 0 10px;
9000     color: #767676;
9001     text-align: right;
9002     white-space: nowrap;
9003 }
9004 .ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
9005     text-align: left;
9006 }
9007
9008 .ideditor .modal-shortcuts .shortcut-keys kbd {
9009     color: #555;
9010 }
9011
9012 .ideditor .modal-shortcuts .shortcut-keys .gesture {
9013     color: #333;
9014     padding: 3px;
9015 }
9016
9017
9018 /* Settings Modals
9019 ------------------------------------------------------- */
9020 .ideditor .settings-modal textarea {
9021     height: 70px;
9022     width: 100%;
9023 }
9024
9025 .ideditor .settings-custom-background .instructions-template {
9026     margin-bottom: 20px;
9027 }
9028 .ideditor .settings-custom-background .instructions-template p {
9029     margin-bottom: 0;
9030 }
9031 .ideditor .settings-custom-background .instructions-template ul {
9032     padding-bottom: 20px;
9033 }
9034 .ideditor .settings-custom-background .instructions-template ul li {
9035     list-style-type: disc;
9036     list-style-position: inside;
9037 }
9038
9039 .ideditor .settings-custom-data .instructions-url {
9040     margin-bottom: 10px;
9041 }
9042 .ideditor .settings-custom-data .field-file,
9043 .ideditor .settings-custom-data .instructions-template {
9044     margin-bottom: 20px;
9045 }
9046
9047
9048 /* Save Mode
9049 ------------------------------------------------------- */
9050 .ideditor a.user-info {
9051     display: inline-block;
9052 }
9053
9054 .ideditor .commit-form {
9055     margin-bottom: 0;
9056 }
9057
9058 .ideditor .user-info img {
9059     float: left;
9060 }
9061
9062 .ideditor .note-save .field-warning,
9063 .ideditor .field-warning {
9064     background: #ffb;
9065     border: 1px solid #ccc;
9066     border-radius: 4px;
9067     padding: 10px;
9068 }
9069
9070 .ideditor .note-save .field-warning:empty,
9071 .ideditor .field-warning:empty {
9072     display: none;
9073 }
9074
9075 .ideditor .field-warning,
9076 .ideditor .changeset-info,
9077 .ideditor .request-review,
9078 .ideditor .commit-info {
9079     margin-bottom: 10px;
9080 }
9081
9082 .ideditor .request-review label {
9083     cursor: pointer;
9084 }
9085
9086 .ideditor .changeset-list {
9087     border: 1px solid #ccc;
9088     border-radius: 4px;
9089     background: #fff;
9090     margin-bottom: 10px;
9091     overflow: hidden;
9092 }
9093
9094 .ideditor .changeset-list li button {
9095     padding: 5px 10px;
9096     width: 100%;
9097     border-radius: 0;
9098     text-align: initial;
9099 }
9100 .ideditor .changeset-list li {
9101     border-top: 1px solid #ccc;
9102 }
9103 .ideditor .changeset-list li:first-child {
9104     border-top: 0;
9105 }
9106 .ideditor .changeset-list .alert {
9107     opacity: 0.5;
9108 }
9109
9110
9111 /* Conflict resolution
9112 ------------------------------------------------------- */
9113 .ideditor .conflicts-help {
9114     padding: 20px;
9115     background-color: #ffffbb;
9116     border-bottom: 1px solid #ccc;
9117 }
9118
9119 .ideditor .conflicts-buttons {
9120     padding: 20px;
9121 }
9122
9123 .ideditor button.conflicts-button {
9124     float: left;
9125 }
9126
9127 .ideditor .conflict-container {
9128     border-bottom: 1px solid #ccc;
9129 }
9130
9131 .ideditor .conflict-description {
9132     padding: 5px 20px;
9133     display: block;
9134 }
9135
9136 .ideditor .conflicts-done {
9137     padding: 20px 20px 0 20px;
9138 }
9139
9140 .ideditor .conflict-detail-container {
9141     padding: 10px 20px;
9142 }
9143
9144 .ideditor .conflict-count {
9145     padding: 10px 20px;
9146 }
9147
9148 .ideditor .conflict-choices {
9149     margin-top: 10px;
9150 }
9151
9152 .ideditor .conflict-nav-buttons {
9153     padding: 10px 0 20px 0;
9154 }
9155
9156 .ideditor .conflict-nav-button {
9157     height: 30px;
9158 }
9159
9160
9161 /* Notices (Zoom in to Edit)
9162 ------------------------------------------------------- */
9163 .ideditor .notice {
9164     position: absolute;
9165     top: 15px;
9166     left: 0;
9167     right: 0;
9168     text-align: center;
9169 }
9170
9171 .ideditor .notice .zoom-to {
9172     margin: auto;
9173     width: 300px;
9174     padding: 20px 5px;
9175     font-size: 150%;
9176     border-radius: 8px;
9177     font-weight: bold;
9178 }
9179
9180 .ideditor .notice .zoom-to:focus,
9181 .ideditor .notice .zoom-to:active {
9182     background: rgba(0,0,0,0.6);
9183 }
9184 @media (hover: hover) {
9185     .ideditor .notice .zoom-to:hover {
9186         background: rgba(0,0,0,0.6);
9187     }
9188 }
9189
9190 .ideditor .notice .zoom-to .icon {
9191     width: 30px;
9192     height: 30px;
9193     vertical-align: middle;
9194     margin-right: 10px;
9195 }
9196 .ideditor[dir='rtl'] .notice .zoom-to .icon {
9197     margin-left: 10px;
9198     margin-right: 0;
9199 }
9200
9201
9202 /* Tooltips
9203 ------------------------------------------------------- */
9204 .ideditor .popover {
9205     position: absolute;
9206     display: none;
9207 }
9208 .ideditor .tooltip {
9209     color: #333;
9210     font-size: 12px;
9211     white-space: initial;
9212 }
9213 .ideditor .tooltip:not(.curtain-tooltip) {
9214     pointer-events: none;
9215 }
9216 .ideditor .popover.in {
9217     z-index: 5000;
9218     height: auto;
9219     display: block;
9220 }
9221 .ideditor .tooltip.in {
9222     opacity: 0.95;
9223 }
9224 .ideditor .popover.top {
9225     margin-top: -4px;
9226 }
9227 .ideditor .popover.right {
9228     margin-left: 4px;
9229 }
9230 .ideditor .popover.bottom {
9231     margin-top: 4px;
9232 }
9233 .ideditor .popover.left {
9234     margin-left: -4px;
9235 }
9236 .ideditor .popover.arrowed.top {
9237     margin-top: -10px;
9238 }
9239 .ideditor .popover.arrowed.right {
9240     margin-left: 10px;
9241 }
9242 .ideditor .popover.arrowed.bottom {
9243     margin-top: 10px;
9244 }
9245 .ideditor .popover.arrowed.left {
9246     margin-left: -10px;
9247 }
9248 .ideditor .bar-button .tooltip.arrowed.bottom {
9249     margin-top: 20px;
9250 }
9251 .ideditor .tooltip.top {
9252     text-align: center;
9253 }
9254 .ideditor .tooltip.right {
9255     text-align: left;
9256 }
9257 .ideditor .tooltip.bottom {
9258     text-align: center;
9259 }
9260 .ideditor .tooltip.left {
9261     text-align: right;
9262 }
9263
9264 .ideditor .popover-inner {
9265     border-radius: inherit;
9266 }
9267
9268 .ideditor .tooltip .popover-inner {
9269     border-radius: 4px;
9270     max-width: 200px;
9271     min-width: 80px;
9272     padding: 10px;
9273     font-weight: normal;
9274     background-color: #fff;
9275 }
9276
9277 .ideditor .popover-arrow {
9278     position: absolute;
9279     width: 0;
9280     height: 0;
9281     border-color: transparent;
9282     border-style: solid;
9283 }
9284 .ideditor .popover.top .popover-arrow {
9285     bottom: -5px;
9286     left: 50%;
9287     margin-left: -5px;
9288     border-top-color: #fff;
9289     border-width: 5px 5px 0;
9290 }
9291 .ideditor .popover.right .popover-arrow {
9292     top: 50%;
9293     left: -5px;
9294     margin-top: -5px;
9295     border-right-color: #fff;
9296     border-width: 5px 5px 5px 0;
9297 }
9298 .ideditor .popover.left .popover-arrow {
9299     top: 50%;
9300     right: -5px;
9301     margin-top: -5px;
9302     border-left-color: #fff;
9303     border-width: 5px 0 5px 5px;
9304 }
9305 .ideditor .popover.bottom .popover-arrow {
9306     top: -5px;
9307     left: 50%;
9308     margin-left: -5px;
9309     border-bottom-color: #fff;
9310     border-width: 0 5px 5px;
9311 }
9312 .ideditor .popover:not(.arrowed) .popover-arrow {
9313     display: none;
9314 }
9315
9316 .ideditor .tooltip-heading {
9317     font-weight: bold;
9318     background: #f6f6f6;
9319     padding: 10px;
9320     margin: -10px -10px 10px -10px;
9321     border-radius: 3px 3px 0 0;
9322     font-size: 14px;
9323 }
9324
9325 .ideditor .keyhint-wrap {
9326     background: #f6f6f6;
9327     padding: 10px;
9328     margin: 10px -10px -10px -10px;
9329     border-radius: 0 0 3px 3px;
9330 }
9331 .ideditor .popover-inner .shortcut {
9332     font-weight: bold;
9333     margin-left: 5px;
9334 }
9335
9336 .ideditor[dir='rtl'] .popover-inner .shortcut {
9337     margin-left: 0;
9338     margin-right: 5px;
9339 }
9340
9341 /* dark tooltips for sidebar / panels */
9342 .ideditor .tooltip.dark.top .popover-arrow,
9343 .ideditor .map-pane .tooltip.top .popover-arrow,
9344 .ideditor .sidebar .tooltip.top .popover-arrow {
9345     border-top-color: #000;
9346 }
9347 .ideditor .tooltip.dark.bottom .popover-arrow,
9348 .ideditor .map-pane .tooltip.bottom .popover-arrow,
9349 .ideditor .sidebar .tooltip.bottom .popover-arrow {
9350     border-bottom-color: #000;
9351 }
9352 .ideditor .tooltip.dark.left .popover-arrow,
9353 .ideditor .map-pane .tooltip.left .popover-arrow,
9354 .ideditor .sidebar .tooltip.left .popover-arrow {
9355     border-left-color: #000;
9356 }
9357 .ideditor .tooltip.dark.right .popover-arrow,
9358 .ideditor .map-pane .tooltip.right .popover-arrow,
9359 .ideditor .sidebar .tooltip.right .popover-arrow {
9360     border-right-color: #000;
9361 }
9362 .ideditor .tooltip.dark .popover-inner,
9363 .ideditor .tooltip.dark .tooltip-heading,
9364 .ideditor .tooltip.dark .keyhint-wrap,
9365 .ideditor .map-pane .popover-inner,
9366 .ideditor .map-pane .tooltip-heading,
9367 .ideditor .map-pane .keyhint-wrap,
9368 .ideditor .sidebar .popover-inner,
9369 .ideditor .sidebar .tooltip-heading,
9370 .ideditor .sidebar .keyhint-wrap {
9371     background: #000;
9372     color: #ccc;
9373 }
9374 .ideditor .tooltip.dark kbd,
9375 .ideditor .map-pane .tooltip kbd,
9376 .ideditor .sidebar .tooltip kbd {
9377     background-color: #666;
9378     border: solid 1px #444;
9379     border-bottom-color: #333;
9380     -webkit-box-shadow: inset 0 -1px 0 #333;
9381             box-shadow: inset 0 -1px 0 #333;
9382     color: #eee;
9383 }
9384
9385 /* Exceptions for tooltip layouts */
9386
9387 /* commit warning tooltips need to be closer */
9388 .ideditor .warning-section .tooltip.top {
9389     margin-top: -5px;
9390 }
9391
9392 .ideditor li:first-of-type .badge .tooltip,
9393 .ideditor li.hide + li.version .badge .tooltip {
9394     left: auto !important;
9395     right: 5px !important;
9396 }
9397 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
9398 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
9399     left: 5px !important;
9400     right: auto !important;
9401 }
9402 .ideditor li:first-of-type .badge .tooltip .popover-arrow,
9403 .ideditor li.hide + li.version .badge .tooltip .popover-arrow {
9404     right: 15px !important;
9405     left: auto !important;
9406 }
9407 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
9408 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
9409     left: 15px !important;
9410     right: auto !important;
9411 }
9412
9413
9414 /* Contextual Edit Menu
9415 ------------------------------------------------------- */
9416 .ideditor .edit-menu {
9417     position: absolute;
9418     display: -webkit-box;
9419     display: -webkit-flex;
9420     display: -ms-flexbox;
9421     display: flex;
9422     -webkit-box-orient: vertical;
9423     -webkit-box-direction: normal;
9424     -webkit-flex-direction: column;
9425         -ms-flex-direction: column;
9426             flex-direction: column;
9427     background: #fff;
9428     border-radius: 4px;
9429     /* padding is set in edit_menu.js */
9430 }
9431
9432 .ideditor .edit-menu .tooltip {
9433     width: 200px; /* see also edit_menu.js */
9434 }
9435
9436 .ideditor .edit-menu-item {
9437     display: -webkit-box;
9438     display: -webkit-flex;
9439     display: -ms-flexbox;
9440     display: flex;
9441     -webkit-box-align: center;
9442     -webkit-align-items: center;
9443         -ms-flex-align: center;
9444             align-items: center;
9445     border-radius: 0;
9446     padding: 0 12px;
9447     /* height is set in edit_menu.js */
9448 }
9449 .ideditor .edit-menu-item .label {
9450     max-width: 120px;
9451     text-align: initial;
9452     line-height: 1.1em;
9453     font-weight: bold;
9454 }
9455 .ideditor[dir='ltr'] .edit-menu-item .label {
9456     margin-left: 8px;
9457 }
9458 .ideditor[dir='rtl'] .edit-menu-item .label {
9459     margin-right: 8px;
9460 }
9461
9462 .ideditor .edit-menu-item use {
9463     pointer-events: none;
9464 }
9465
9466 /* Lasso
9467 ------------------------------------------------------- */
9468 .ideditor .lasso-path {
9469     fill-opacity: 0.3;
9470     stroke: #fff;
9471     stroke-width: 1;
9472     stroke-opacity: 1;
9473     stroke-dasharray: 5, 5;
9474 }
9475
9476
9477 /* Scrollbars
9478  ----------------------------------------------------- */
9479 .ideditor ::-webkit-scrollbar {
9480     height: 20px;
9481     overflow: visible;
9482     width: 10px;
9483     background: #fff;
9484     border-left: 1px solid #DDD;
9485 }
9486
9487 .ideditor ::-webkit-scrollbar-track {
9488     background-clip: padding-box;
9489     border: solid transparent;
9490     border-width: 0;
9491 }
9492
9493 .ideditor ::-webkit-scrollbar-thumb {
9494     background-color: rgba(0,0,0,.2);
9495     background-clip: padding-box;
9496     border: solid transparent;
9497     border-width: 3px 3px 3px 4px;
9498     border-radius: 6px;
9499 }
9500 .ideditor ::-webkit-scrollbar-track:active {
9501     background-color: rgba(0,0,0,.05);
9502 }
9503 @media (hover: hover) {
9504     .ideditor ::-webkit-scrollbar-track:hover {
9505         background-color: rgba(0,0,0,.05);
9506     }
9507 }
9508
9509
9510 /* Intro walkthrough
9511  ----------------------------------------------------- */
9512 .ideditor .curtain {
9513     z-index: 1000;
9514     pointer-events: none;
9515     position: absolute;
9516 }
9517
9518 .ideditor .curtain-darkness {
9519     pointer-events: all;
9520     fill-opacity: 0.7;
9521     fill: #222;
9522     fill-rule: evenodd;
9523 }
9524
9525 .ideditor .intro-nav-wrap {
9526     display: -webkit-box;
9527     display: -webkit-flex;
9528     display: -ms-flexbox;
9529     display: flex;
9530     -webkit-box-orient: horizontal;
9531     -webkit-box-direction: normal;
9532     -webkit-flex-direction: row;
9533         -ms-flex-direction: row;
9534             flex-direction: row;
9535     position: absolute;
9536     left: 0;
9537     right: 0;
9538     bottom: 30px;
9539     padding: 10px;
9540     z-index: 1001;
9541 }
9542
9543 .ideditor .intro-nav-wrap .intro-nav-wrap-logo {
9544     -webkit-box-flex: 0;
9545     -webkit-flex: 0 0 auto;
9546         -ms-flex: 0 0 auto;
9547             flex: 0 0 auto;
9548     height: 40px;
9549     width: 40px;
9550     color: #fff;
9551     margin: 0px 20px;
9552     vertical-align: middle;
9553 }
9554
9555 .ideditor .intro-nav-wrap .joined {
9556     -webkit-box-flex: 1;
9557     -webkit-flex: 1 1 auto;
9558         -ms-flex: 1 1 auto;
9559             flex: 1 1 auto;
9560     display: -webkit-box;
9561     display: -webkit-flex;
9562     display: -ms-flexbox;
9563     display: flex;
9564     -webkit-box-orient: horizontal;
9565     -webkit-box-direction: normal;
9566     -webkit-flex-direction: row;
9567         -ms-flex-direction: row;
9568             flex-direction: row;
9569 }
9570
9571 .ideditor .intro-nav-wrap button.chapter {
9572     -webkit-box-flex: 1;
9573     -webkit-flex: 1 1 100%;
9574         -ms-flex: 1 1 100%;
9575             flex: 1 1 100%;
9576     padding: 0px 5px;
9577     font-weight: bold;
9578 }
9579
9580 .ideditor .intro-nav-wrap button.chapter.next {
9581     -webkit-animation-duration: 1s;
9582             animation-duration: 1s;
9583     -webkit-animation-name: pulse;
9584             animation-name: pulse;
9585     -webkit-animation-iteration-count: infinite;
9586             animation-iteration-count: infinite;
9587     -webkit-animation-direction: alternate;
9588             animation-direction: alternate;
9589 }
9590 @-webkit-keyframes pulse {
9591     from  { background: #7092ff; }
9592     to    { background: #c6d4ff; }
9593 }
9594 @keyframes pulse {
9595     from  { background: #7092ff; }
9596     to    { background: #c6d4ff; }
9597 }
9598
9599 .ideditor .intro-nav-wrap button.chapter.finished {
9600     background: #8cd05f;
9601 }
9602
9603 .ideditor .intro-nav-wrap button.chapter .status {
9604     display: none;
9605 }
9606
9607 .ideditor .intro-nav-wrap button.chapter.finished .status {
9608     display: inline-block;
9609 }
9610
9611 .ideditor .curtain-tooltip {
9612     z-index: 1002;
9613 }
9614
9615 .ideditor .curtain-tooltip.tooltip.in {
9616     opacity: 1;
9617 }
9618 .ideditor .curtain-tooltip.tooltip {
9619     text-align: left;
9620 }
9621 .ideditor[dir='rtl'] .curtain-tooltip.tooltip {
9622     text-align: right;
9623 }
9624
9625 .ideditor .curtain-tooltip .popover-inner {
9626     font-size: 15px;
9627     position: relative;
9628     padding: 20px;
9629 }
9630
9631 .ideditor .curtain-tooltip .popover-inner .button-section,
9632 .ideditor .curtain-tooltip .popover-inner .instruction {
9633     font-weight: bold;
9634     display: block;
9635     border-top: 1px solid #ccc;
9636     margin-top: 10px;
9637     margin-left: -20px;
9638     margin-right: -20px;
9639     padding: 10px 20px 0 20px;
9640 }
9641
9642 .ideditor .curtain-tooltip .popover-inner .button-section button {
9643     width: 66.6666%;
9644 }
9645
9646 .ideditor .curtain-tooltip .popover-inner .instruction:only-child {
9647     border: 0;
9648     padding: 0;
9649     margin: 0;
9650 }
9651
9652 .ideditor .curtain-tooltip .popover-inner .icon.pre-text {
9653     vertical-align: text-top;
9654     margin-right: 0;
9655     margin-left: 0;
9656     display: inline-block;
9657 }
9658
9659 .ideditor .curtain-tooltip.intro-points-describe,
9660 .ideditor .curtain-tooltip.intro-lines-name_road {
9661     top: 133px !important;
9662 }
9663
9664 .ideditor .tooltip-illustration {
9665     height: 80px;
9666     width: 200px;
9667     margin-left: -20px;
9668     margin-top: -10px;
9669 }
9670 .ideditor[dir='rtl'] .tooltip-illustration {
9671     margin-left: auto;
9672     margin-right: -20px;
9673 }
9674
9675 .ideditor .curtain-tooltip.intro-mouse {
9676     -webkit-user-select: none;
9677        -moz-user-select: none;
9678         -ms-user-select: none;
9679             user-select: none;
9680 }
9681
9682 .ideditor .curtain-tooltip.intro-mouse .counter {
9683     position: absolute;
9684     display: block;
9685     top: 50px;
9686     width: 100%;
9687     text-align: center;
9688     font-weight: bold;
9689     font-size: 14px;
9690     z-index: 1003;
9691 }
9692
9693 .ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
9694     fill: rgba(112, 146, 255, 0);
9695     color: rgba(112, 146, 255, 0);
9696 }
9697 .ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
9698     fill: rgba(112, 146, 255, 1);
9699 }
9700 .ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
9701     color: rgba(112, 146, 255, 1);
9702 }
9703
9704 .ideditor .huge-modal-button {
9705     width: 100%;
9706     padding: 20px;
9707 }
9708
9709 .ideditor .huge-modal-button .illustration {
9710     height: 100px;
9711     width: 100px;
9712     color: #7092ff;
9713 }