vendor/assets/iD/iD.css.erb

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