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 > *:not(.sidebar-resizer) {
4008     display: none;
4009 }
4010 .ideditor .sidebar.collapsed .sidebar-resizer {
4011     /* make target wider to avoid the user accidentally resizing window */
4012     width: 10px;
4013     right: -10px;
4014 }
4015 .ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
4016     left: -10px;
4017 }
4018
4019 .ideditor .sidebar-component {
4020     position: absolute;
4021     top: 0;
4022     left: 0;
4023     bottom: 0;
4024     right: 0;
4025     display: -webkit-box;
4026     display: -ms-flexbox;
4027     display: flex;
4028     -webkit-box-orient: vertical;
4029     -webkit-box-direction: normal;
4030         -ms-flex-direction: column;
4031             flex-direction: column;
4032 }
4033
4034 .ideditor .sidebar-component .body {
4035     width: 100%;
4036     height: 100%;
4037     overflow: auto;
4038     position: relative;
4039 }
4040
4041 .ideditor .panewrap {
4042     position: absolute;
4043     width: 200%;
4044     height: 100%;
4045     right: -100%;
4046 }
4047
4048 .ideditor .pane {
4049     position: absolute;
4050     width: 50%;
4051     top: 0;
4052     bottom: 2.5em;
4053     display: -webkit-box;
4054     display: -ms-flexbox;
4055     display: flex;
4056     -webkit-box-orient: vertical;
4057     -webkit-box-direction: normal;
4058         -ms-flex-direction: column;
4059             flex-direction: column;
4060 }
4061
4062 .ideditor .pane:first-child {
4063     left: 0;
4064 }
4065
4066 .ideditor .pane:last-child {
4067     right: 0;
4068 }
4069 .ideditor .feature-list-pane {
4070     display: -webkit-box;
4071     display: -ms-flexbox;
4072     display: flex;
4073     -webkit-box-orient: vertical;
4074     -webkit-box-direction: normal;
4075         -ms-flex-direction: column;
4076             flex-direction: column;
4077     height: 100%;
4078 }
4079
4080 .ideditor .inspector-wrap {
4081     width: 100%;
4082     height: 100%;
4083     overflow: hidden;
4084     position: relative;
4085 }
4086
4087 .ideditor .inspector-hidden {
4088     display: none;
4089 }
4090
4091 .ideditor .inspector-body {
4092     overflow-y: scroll;
4093     overflow-x: hidden;
4094     position: relative;
4095     height: 100%;
4096     -webkit-box-flex: 1;
4097         -ms-flex: 1 1 100%;
4098             flex: 1 1 100%;
4099 }
4100 .ideditor .entity-editor {
4101     padding: 20px;
4102 }
4103 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
4104 .ideditor .entity-editor > div:last-child {
4105     margin-bottom: 150px;
4106 }
4107
4108 .ideditor .sidebar .search-header {
4109     position: relative;
4110     overflow: hidden;
4111     -webkit-box-flex: 0;
4112         -ms-flex: 0 0 auto;
4113             flex: 0 0 auto;
4114 }
4115 .ideditor .sidebar .search-header .icon {
4116     display: inline-block;
4117     position: absolute;
4118     left: 10px;
4119     height: 100%;
4120     pointer-events: none;
4121 }
4122 .ideditor[dir='rtl'] .sidebar .search-header .icon {
4123     left: auto;
4124     right: 10px;
4125 }
4126
4127 .ideditor .sidebar .search-header input {
4128     width: 100%;
4129     padding: 0 10px;
4130     height: 3em;
4131     border-radius: 0;
4132     border-width: 0;
4133     border-bottom-width: 1px;
4134     text-indent: 30px;
4135     font-size: 18px;
4136     font-weight: bold;
4137 }
4138
4139 .ideditor .section:not(:last-child),
4140 .ideditor .map-pane .section {
4141     margin-bottom: 30px;
4142 }
4143
4144
4145 /* Feature List / Search Results
4146 ------------------------------------------------------- */
4147 .ideditor .feature-list  {
4148     width: 100%;
4149 }
4150 .ideditor .no-results-item,
4151 .ideditor .feature-list-item {
4152     width: 100%;
4153     position: relative;
4154     border-bottom: 1px solid #ccc;
4155     border-radius: 0;
4156 }
4157 .ideditor .no-results-item {
4158     padding: 10px;
4159     font-weight: bold;
4160 }
4161
4162 .ideditor .geocode-item {
4163     width: 100%;
4164     max-width: 200px;
4165     margin: 30px auto;
4166     min-height: 40px;
4167 }
4168
4169 .ideditor .feature-list-item {
4170     display: -webkit-box;
4171     display: -ms-flexbox;
4172     display: flex;
4173 }
4174 .ideditor .feature-list-item .label {
4175     text-align: left;
4176     padding: 10px;
4177     white-space: nowrap;
4178     -o-text-overflow: ellipsis;
4179        text-overflow: ellipsis;
4180     overflow: hidden;
4181     -webkit-box-flex: 1;
4182         -ms-flex: 1 1 auto;
4183             flex: 1 1 auto;
4184 }
4185 .ideditor[dir='rtl'] .feature-list-item .label {
4186     text-align: right;
4187 }
4188
4189 .ideditor .feature-list-item .label .icon {
4190     opacity: .5;
4191 }
4192 .ideditor .feature-list-item .close {
4193     padding: 10px;
4194
4195 }
4196 .ideditor .feature-list-item .close .icon {
4197     opacity: 0.5;
4198 }
4199 .ideditor .feature-list-item .entity-type {
4200     color: #7092ff;
4201     font-weight: bold;
4202 }
4203 .ideditor .feature-list-item:active .entity-type,
4204 .ideditor .feature-list-item:focus .entity-type {
4205     color: #597be7;
4206 }
4207 @media (hover: hover) {
4208     .ideditor .feature-list-item:hover .entity-type {
4209         color: #597be7;
4210     }
4211 }
4212 .ideditor .feature-list-item .entity-name {
4213     color: #666;
4214     padding-left: 10px;
4215 }
4216 .ideditor[dir='rtl'] .feature-list-item .entity-name {
4217     padding-left: 0;
4218     padding-right: 10px;
4219 }
4220 .ideditor .section-selected-features .feature-list {
4221     border: 1px solid #ccc;
4222     border-radius: 4px;
4223     overflow: hidden;
4224     margin-top: 5px;
4225 }
4226 .ideditor .section-selected-features .feature-list-item:last-child {
4227     border: none;
4228 }
4229
4230 /* Preset List and Icons
4231 ------------------------------------------------------- */
4232 .ideditor .preset-list  {
4233     width: 100%;
4234     padding: 20px 20px 10px 20px;
4235 }
4236
4237 .ideditor .preset-list-item {
4238     margin-bottom: 10px;
4239     position: static;
4240 }
4241
4242 .ideditor .preset-list-button-wrap {
4243     min-height: 62px;
4244     display: -webkit-box;
4245     display: -ms-flexbox;
4246     display: flex;
4247     border: 1px solid #ccc;
4248     border-radius: 4px;
4249 }
4250
4251 .ideditor .preset-list-button {
4252     width: 100%;
4253     height: 100%;
4254     position: relative;
4255     display: -webkit-box;
4256     display: -ms-flexbox;
4257     display: flex;
4258     -webkit-box-align: center;
4259         -ms-flex-align: center;
4260             align-items: center;
4261 }
4262
4263 .ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
4264     background: #ececec;
4265 }
4266
4267 .ideditor .preset-icon-container {
4268     position: relative;
4269     width: 60px;
4270     height: 60px;
4271     text-align: center;
4272     display: -webkit-box;
4273     display: -ms-flexbox;
4274     display: flex;
4275     -webkit-box-align: center;
4276         -ms-flex-align: center;
4277             align-items: center;
4278     -webkit-box-pack: center;
4279         -ms-flex-pack: center;
4280             justify-content: center;
4281     -webkit-box-flex: 0;
4282         -ms-flex: 0 0 auto;
4283             flex: 0 0 auto;
4284 }
4285 .ideditor .preset-icon-container.small {
4286     width: 40px;
4287     height: 40px;
4288     -webkit-box-flex: 0;
4289         -ms-flex: 0 0 auto;
4290             flex: 0 0 auto;
4291 }
4292 .ideditor .preset-icon-container img.image-icon {
4293     width: 50px;
4294     height: 50px;
4295     -o-object-fit: contain;
4296        object-fit: contain;
4297     border-radius: 2px;
4298     z-index: 2;
4299     visibility: hidden;
4300 }
4301 .ideditor .preset-icon-container.showing-img img.image-icon {
4302     visibility: visible;
4303 }
4304 .ideditor .preset-icon-container.showing-img *:not(.image-icon) {
4305     visibility: hidden;
4306 }
4307
4308 .ideditor .preset-icon-point-border path {
4309     stroke: #333;
4310     stroke-width: 1.2;
4311     fill: transparent;
4312 }
4313
4314 .ideditor .preset-icon-line {
4315     margin: auto;
4316     position: absolute;
4317     left: 0;
4318     right: 0;
4319     top: 0;
4320     width: 100%;
4321     height: 100%;
4322 }
4323 .ideditor .preset-icon-container path {
4324     cursor: inherit;
4325 }
4326 .ideditor .preset-icon-container circle.vertex {
4327     fill: #fff;
4328     stroke: rgba(0, 0, 0, 0.25);
4329 }
4330 .ideditor .preset-icon-fill circle.midpoint {
4331     fill: transparent;
4332     stroke: rgba(0, 0, 0, 0.25);
4333 }
4334 /* use a consistent stroke width */
4335 .ideditor .preset-icon-container path.line.stroke {
4336     stroke-width: 2 !important;
4337 }
4338 .ideditor .preset-icon-container path.line.casing {
4339     stroke-width: 4 !important;
4340 }
4341
4342 .ideditor .preset-icon-fill {
4343     margin: auto;
4344     position: absolute;
4345     width: 100%;
4346     height: 100%;
4347     left: 0;
4348     top: 0;
4349 }
4350 .ideditor .preset-icon-container svg,
4351 .ideditor .preset-icon-container svg > * {
4352     cursor: inherit !important;
4353 }
4354 .ideditor .preset-icon-fill path.area.stroke {
4355     fill: transparent;
4356 }
4357
4358 .ideditor .preset-icon-fill-vertex circle {
4359     stroke-width: 1.5px;
4360     stroke: #333;
4361     fill: #efefef;
4362     -webkit-backface-visibility: hidden;
4363             backface-visibility: hidden;
4364 }
4365
4366 .ideditor .preset-icon {
4367     width: 100%;
4368     height:100%;
4369     position: absolute;
4370     z-index: 1;
4371 }
4372 .ideditor .preset-icon .icon {
4373     position: absolute;
4374     margin: auto;
4375     left: 0;
4376     right: 0;
4377     width: 100%;
4378     height: 100%;
4379     -webkit-transform: scale(0.48);
4380         -ms-transform: scale(0.48);
4381             transform: scale(0.48);
4382 }
4383 .ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
4384     -webkit-transform: translateY(-7%) scale(0.27);
4385         -ms-transform: translateY(-7%) scale(0.27);
4386             transform: translateY(-7%) scale(0.27);
4387 }
4388 .ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
4389     -webkit-transform: translateY(-9%) scale(0.5);
4390         -ms-transform: translateY(-9%) scale(0.5);
4391             transform: translateY(-9%) scale(0.5);
4392 }
4393 .ideditor .preset-icon.framed .icon {
4394     -webkit-transform: scale(0.4);
4395         -ms-transform: scale(0.4);
4396             transform: scale(0.4);
4397 }
4398 .ideditor .preset-icon.framed.line-geom .icon,
4399 .ideditor .preset-icon.framed.route-geom .icon {
4400     top: 20%;
4401     -webkit-transform: translateY(-30%) scale(0.4);
4402         -ms-transform: translateY(-30%) scale(0.4);
4403             transform: translateY(-30%) scale(0.4);
4404 }
4405 .ideditor .preset-icon-iD .icon {
4406     -webkit-transform: scale(1);
4407         -ms-transform: scale(1);
4408             transform: scale(1);
4409 }
4410 .ideditor .preset-icon-iD.framed .icon {
4411     -webkit-transform: scale(0.74);
4412         -ms-transform: scale(0.74);
4413             transform: scale(0.74);
4414 }
4415 .ideditor .preset-icon-iD.framed.line-geom .icon,
4416 .ideditor .preset-icon-iD.framed.route-geom .icon {
4417     -webkit-transform: translateY(-30%) scale(0.74);
4418         -ms-transform: translateY(-30%) scale(0.74);
4419             transform: translateY(-30%) scale(0.74);
4420 }
4421 .ideditor .preset-icon-container.fallback .preset-icon .icon {
4422     -webkit-transform: scale(0.5) !important;
4423         -ms-transform: scale(0.5) !important;
4424             transform: scale(0.5) !important;
4425 }
4426
4427 .ideditor .preset-list-button .label {
4428     display: -webkit-box;
4429     display: -ms-flexbox;
4430     display: flex;
4431     -webkit-box-orient: horizontal;
4432     -webkit-box-direction: normal;
4433         -ms-flex-flow: row wrap;
4434             flex-flow: row wrap;
4435     -webkit-box-align: center;
4436         -ms-flex-align: center;
4437             align-items: center;
4438     background: #f6f6f6;
4439     text-align: left;
4440     padding: 5px 10px;
4441     border-left: 1px solid rgba(0, 0, 0, .1);
4442     -webkit-box-flex: 1;
4443         -ms-flex: 1 1 100%;
4444             flex: 1 1 100%;
4445     -ms-flex-item-align: stretch;
4446         align-self: stretch;
4447 }
4448 .ideditor[dir='rtl'] .preset-list-button .label {
4449     text-align: right;
4450     border-left: none;
4451     border-right: 1px solid rgba(0, 0, 0, .1);
4452 }
4453 .ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
4454     border-top-right-radius: 4px;
4455     border-bottom-right-radius: 4px;
4456 }
4457 .ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
4458     border-top-left-radius: 4px;
4459     border-bottom-left-radius: 4px;
4460 }
4461 .ideditor[dir='ltr'] .category .preset-list-button .label {
4462     border-radius: 0px 4px 4px 0px;
4463 }
4464 .ideditor[dir='rtl'] .category .preset-list-button .label {
4465     border-radius: 4px 0px 0px 4px;
4466 }
4467
4468 .ideditor .preset-list-item.mixed-types .label {
4469     font-style: italic;
4470 }
4471
4472 .ideditor .preset-list-button .label-inner {
4473     width: 100%;
4474     line-height: 1.35em;
4475 }
4476 .ideditor .preset-list-button .label-inner .namepart {
4477     -o-text-overflow: ellipsis;
4478        text-overflow: ellipsis;
4479 }
4480 .ideditor .preset-list-button .label-inner .namepart:nth-child(1) {
4481     font-weight: bold;
4482 }
4483
4484 .ideditor .preset-list-button:focus .label,
4485 .ideditor .preset-list-button:active .label,
4486 .ideditor .preset-list-button.disabled,
4487 .ideditor .preset-list-button.disabled .label {
4488     background-color: #ececec;
4489 }
4490 @media (hover: hover) {
4491     .ideditor .preset-list-button:hover .label {
4492         background-color: #ececec;
4493     }
4494 }
4495
4496 .ideditor .preset-list-button-wrap button.tag-reference-button {
4497     width: 32px;
4498     -webkit-box-flex: 0;
4499         -ms-flex: 0 0 auto;
4500             flex: 0 0 auto;
4501 }
4502 .ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
4503     background: #f6f6f6;
4504 }
4505 .ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
4506     border-left: 1px solid #ccc;
4507 }
4508 .ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
4509     border-right: 1px solid #ccc;
4510 }
4511 .ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
4512     border-radius: 0 4px 4px 0;
4513 }
4514 .ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
4515     border-radius: 4px 0 0 4px;
4516 }
4517 .ideditor .preset-list-button-wrap button.tag-reference-button .icon {
4518     opacity: .5;
4519 }
4520 .ideditor .preset-list-button-wrap .accessory-buttons {
4521     display: -webkit-box;
4522     display: -ms-flexbox;
4523     display: flex;
4524 }
4525
4526
4527 .ideditor .current .preset-list-button,
4528 .ideditor .current .preset-list-button .label {
4529     background-color: #e8ebff;
4530 }
4531
4532 .ideditor .category .preset-list-button:after,
4533 .ideditor .category .preset-list-button:before {
4534     content: "";
4535     position: absolute;
4536     top: -5px;
4537     left: -1px; right: -1px;
4538     border: 1px solid #ccc;
4539     border-bottom: none;
4540     border-radius: 6px 6px 0 0;
4541     height: 6px;
4542 }
4543
4544 .ideditor .category .preset-list-button:before {
4545     top: -3px;
4546 }
4547
4548 .ideditor .subgrid .preset-list {
4549     width: auto;
4550     padding: 10px;
4551     margin: 0 -10px;
4552     border: 0;
4553     border-radius: 8px;
4554 }
4555 .ideditor .subgrid .preset-list > *:last-child {
4556     margin-bottom: 0;
4557 }
4558
4559 .ideditor .subgrid .arrow {
4560     border: solid rgba(0, 0, 0, 0);
4561     border-width: 10px;
4562     border-bottom-color: #ececec;
4563     width: 0;
4564     height: 0;
4565     margin-left: 50%;
4566     margin-left: calc(50% - 10px);
4567 }
4568
4569
4570 /* Quick links
4571 ------------------------------------------------------- */
4572 .ideditor .quick-links {
4573     display: -webkit-box;
4574     display: -ms-flexbox;
4575     display: flex;
4576     -webkit-box-orient: horizontal;
4577     -webkit-box-direction: normal;
4578         -ms-flex-flow: row wrap;
4579             flex-flow: row wrap;
4580     -webkit-box-pack: end;
4581         -ms-flex-pack: end;
4582             justify-content: flex-end;
4583     padding: 5px 0 0 0;
4584 }
4585 .ideditor .quick-link {
4586     margin: 0 5px;
4587 }
4588
4589
4590 /* Entity/Preset Editor
4591 ------------------------------------------------------- */
4592 .ideditor .section .grouped-items-area {
4593     padding: 10px;
4594     margin: 0 -10px 10px -10px;
4595     border-radius: 8px;
4596     background: #ececec;
4597 }
4598 .ideditor .section .grouped-items-area:empty {
4599     display: none;
4600 }
4601
4602 /*
4603     The parts of a field:
4604     - `.form-field` is a `div` wraps the entire thing
4605     - `.field-label` is a `label` that wraps the top part, it contains;
4606        - `span` classed `label-text`
4607        - 0..n buttons for "remove", "modified", "tag reference"
4608     - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
4609        - usually an `input`
4610        - sometimes some buttons (translate, increment, decrement)
4611        - or could just be a `div` with anything really
4612     - `.tag-reference-body` at the bottom (usually hidden)
4613
4614    .------------------.                             -
4615    |  Name        | i |  <- .field-label        |
4616    +------------------+                               |
4617    |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
4618    '------------------'                               |
4619      tag reference       <- .tag-reference-body      |
4620                                                     -
4621 */
4622
4623 .ideditor .form-field {
4624     display: -webkit-box;
4625     display: -ms-flexbox;
4626     display: flex;
4627     -webkit-box-orient: horizontal;
4628     -webkit-box-direction: normal;
4629         -ms-flex-flow: row wrap;
4630             flex-flow: row wrap;
4631     margin-bottom: 10px;
4632     width: 100%;
4633     -webkit-transition: margin-bottom 200ms;
4634     -o-transition: margin-bottom 200ms;
4635     transition: margin-bottom 200ms;
4636 }
4637
4638 .ideditor .form-field.nowrap,
4639 .ideditor .wrap-form-field:last-child .form-field {
4640     margin-bottom: 0;
4641 }
4642
4643 /* A `label` element that wraps the top section */
4644 .ideditor .field-label {
4645     display: -webkit-box;
4646     display: -ms-flexbox;
4647     display: flex;
4648     -webkit-box-orient: horizontal;
4649     -webkit-box-direction: normal;
4650         -ms-flex-flow: row nowrap;
4651             flex-flow: row nowrap;
4652     -webkit-box-flex: 1;
4653         -ms-flex: 1 1 100%;
4654             flex: 1 1 100%;
4655     position: relative;
4656     font-weight: bold;
4657     color: #333;
4658     background: #f6f6f6;
4659     border: 1px solid #ccc;
4660     border-radius: 4px 4px 0 0;
4661     overflow: hidden;
4662 }
4663 .ideditor .field-label .label-text {
4664     overflow: hidden;
4665     -o-text-overflow: ellipsis;
4666        text-overflow: ellipsis;
4667     -webkit-box-flex: 1;
4668         -ms-flex: 1 1 auto;
4669             flex: 1 1 auto;
4670     padding: 5px 0 4px 10px;
4671 }
4672 .ideditor[dir='rtl'] .field-label .label-text {
4673     padding: 5px 10px 4px 0;
4674 }
4675 .ideditor .field-label .label-text span {
4676     white-space: nowrap;
4677 }
4678
4679 .ideditor .label-text .label-textannotation svg.icon {
4680     margin: 0 8px;
4681     color: #333;
4682     opacity: 0.5;
4683     width: 14px;
4684     height: 14px;
4685     vertical-align: text-top;
4686 }
4687
4688 .ideditor .field-label button {
4689     -webkit-box-flex: 0;
4690         -ms-flex: 0 0 auto;
4691             flex: 0 0 auto;
4692     border-left: 1px solid #ccc;
4693     width: 32px;
4694     border-radius: 0;
4695 }
4696 .ideditor[dir='rtl'] .field-label button {
4697     border-left: none;
4698     border-right: 1px solid #ccc;
4699 }
4700 .ideditor .field-label button:not(:hover):not(:active):not(:focus) {
4701     background: none;
4702 }
4703 .ideditor .field-label .icon {
4704     opacity: .5;
4705
4706 }
4707
4708 .ideditor .field-label .modified-icon,
4709 .ideditor .field-label .remove-icon,
4710 .ideditor .field-label .remove-icon-multilingual {
4711     display: none;
4712 }
4713 .ideditor .modified:not(.locked) .field-label .modified-icon,
4714 .ideditor .present:not(.locked) .field-label .remove-icon,
4715 .ideditor .present:not(.locked) .field-label .remove-icon-multilingual {
4716     display: inline-block;
4717 }
4718
4719 /* A `div` element that wraps the bottom section */
4720 .ideditor .form-field-input-wrap {
4721     display: -webkit-box;
4722     display: -ms-flexbox;
4723     display: flex;
4724     -webkit-box-orient: horizontal;
4725     -webkit-box-direction: normal;
4726         -ms-flex-flow: row nowrap;
4727             flex-flow: row nowrap;
4728     width: 100%;
4729     -webkit-box-flex: 1;
4730         -ms-flex: 1 1 auto;
4731             flex: 1 1 auto;
4732     border-top: 0;
4733     border-radius: 0 0 4px 4px;
4734 }
4735 .ideditor .nowrap .form-field-input-wrap {
4736     border-radius: 0;
4737 }
4738
4739
4740 .ideditor .form-field-input-wrap > input,
4741 .ideditor .form-field-input-wrap > label,
4742 .ideditor .form-field-input-wrap > textarea,
4743 .ideditor .form-field-input-wrap > ul.chiplist {
4744     -webkit-box-flex: 1;
4745         -ms-flex: 1 1 auto;
4746             flex: 1 1 auto;
4747     border: 1px solid #ccc;
4748     border-top: 0;
4749     border-radius: 0;
4750     position: relative;
4751 }
4752 .ideditor .form-field-input-wrap > textarea {
4753     height: 65px;
4754     border-radius: 0 0 4px 4px;
4755 }
4756
4757 /* Buttons inside fields */
4758 .ideditor .form-field-button {
4759     -webkit-box-flex: 0;
4760         -ms-flex: 0 0 auto;
4761             flex: 0 0 auto;
4762     width: 32px;
4763     position: relative;
4764     background-color: #fff;
4765     border: 1px solid #ccc;
4766     border-radius: 0;
4767     border-top-width: 0;
4768     border-left-width: 0;
4769     vertical-align: top;
4770 }
4771 .ideditor[dir='rtl'] .form-field-button {
4772     border-left-width: 1px;
4773     border-right-width: 0;
4774 }
4775 .ideditor .form-field-button:active,
4776 .ideditor .form-field-button:focus {
4777     background-color: #f1f1f1;
4778 }
4779 @media (hover: hover) {
4780     .ideditor .form-field-button:hover {
4781         background-color: #f1f1f1;
4782     }
4783 }
4784 .ideditor .form-field-button .icon {
4785     fill: #333;
4786     opacity: .5;
4787 }
4788
4789
4790 /* round corners of first/last child elements */
4791 .ideditor .form-field-input-wrap > button:last-of-type {
4792     border-bottom-right-radius: 4px;
4793 }
4794 .ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {
4795     border-bottom-left-radius: 4px;
4796 }
4797
4798
4799 /* Field - Access, Cycleway
4800 ------------------------------------------------------- */
4801 .ideditor .form-field-input-access,
4802 .ideditor .form-field-input-cycleway {
4803     -webkit-box-flex: 1;
4804         -ms-flex: 1 1 auto;
4805             flex: 1 1 auto;
4806     display: -webkit-box;
4807     display: -ms-flexbox;
4808     display: flex;
4809     -webkit-box-orient: horizontal;
4810     -webkit-box-direction: normal;
4811         -ms-flex-flow: row wrap;
4812             flex-flow: row wrap;
4813 }
4814
4815 /* Field - lists with labeled input items
4816 ------------------------------------------------------- */
4817 .ideditor .form-field ul.rows {
4818     -webkit-box-flex: 1;
4819         -ms-flex: 1 1 auto;
4820             flex: 1 1 auto;
4821     border: 1px solid #ccc;
4822     border-top: 0;
4823     border-radius: 0 0 4px 4px;
4824     overflow: hidden;
4825     width: 100%;
4826 }
4827 .ideditor .form-field ul.rows li {
4828     border-top: 1px solid #ccc;
4829 }
4830 .ideditor .form-field ul.rows li:first-child {
4831     border-top: 0;
4832 }
4833 .ideditor .form-field ul.rows li {
4834     display: -webkit-box;
4835     display: -ms-flexbox;
4836     display: flex;
4837     -webkit-box-orient: horizontal;
4838     -webkit-box-direction: normal;
4839         -ms-flex-flow: row nowrap;
4840             flex-flow: row nowrap;
4841 }
4842 .ideditor .form-field ul.rows li.labeled-input > span,
4843 .ideditor .form-field ul.rows li.labeled-input > div {
4844     -webkit-box-flex: 1;
4845         -ms-flex: 1 1 auto;
4846             flex: 1 1 auto;
4847     width: 100%;
4848     border-radius: 0;
4849 }
4850 .ideditor .form-field ul.rows li input {
4851     border-radius: 0;
4852     border-width: 0;
4853     width: 100%;
4854 }
4855 .ideditor .form-field ul.rows li button {
4856     border-width: 0;
4857 }
4858 .ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
4859 .ideditor[dir='ltr'] .form-field ul.rows li button {
4860     border-left-width: 1px;
4861 }
4862 .ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
4863 .ideditor[dir='rtl'] .form-field ul.rows li button {
4864     border-right-width: 1px;
4865 }
4866
4867
4868 /* Field - Structure
4869 ------------------------------------------------------- */
4870 .ideditor .structure-extras-wrap {
4871     width: 100%;
4872     padding: 10px 10px;
4873     background: #fff;
4874     border: 1px solid #ccc;
4875     border-top: 0px;
4876     border-radius: 0 0 4px 4px;
4877 }
4878 .ideditor .structure-extras-wrap > ul.rows {
4879     border: 1px solid #ccc;
4880     border-radius: 4px;
4881 }
4882
4883
4884 /* Field - Combo / Multicombo
4885 ------------------------------------------------------- */
4886 .ideditor .form-field-input-combo > input:only-of-type {
4887     border-radius: 0 0 4px 4px;
4888     width: 100%;
4889 }
4890 .ideditor .form-field-input-combo.empty-combobox input,
4891 .ideditor .form-field-input-multicombo .empty-combobox input {
4892     padding-right: 10px;
4893     padding-left: 10px;
4894 }
4895 .ideditor .form-field-input-combo.empty-combobox .combobox-caret,
4896 .ideditor .form-field-input-multicombo .empty-combobox .combobox-caret {
4897     display: none;
4898 }
4899
4900 .ideditor .form-field-input-multicombo ul.chiplist {
4901     padding: 5px 8px 5px 8px;
4902     background: #fff;
4903     display: block;
4904     border-radius: 0 0 4px 4px;
4905     width: 100%;
4906 }
4907
4908 .ideditor .form-field-input-multicombo li {
4909     display: -webkit-inline-box;
4910     display: -ms-inline-flexbox;
4911     display: inline-flex;
4912     -webkit-box-orient: horizontal;
4913     -webkit-box-direction: normal;
4914         -ms-flex-flow: row nowrap;
4915             flex-flow: row nowrap;
4916     -webkit-box-align: center;
4917         -ms-flex-align: center;
4918             align-items: center;
4919     margin-bottom: 3px;
4920     margin-top: 3px;
4921     border-radius: 4px;
4922 }
4923 .ideditor[dir='ltr'] .form-field-input-multicombo li {
4924     margin-right: 6px;
4925 }
4926 .ideditor[dir='rtl'] .form-field-input-multicombo li {
4927     margin-left: 6px;
4928 }
4929
4930 .ideditor .form-field-input-multicombo li.chip {
4931     background-color: #eff2f7;
4932     border: 1px solid #ccd5e3;
4933     max-width: 100%;
4934 }
4935 .ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
4936     padding: 2px 0px 2px 5px;
4937 }
4938 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
4939     padding: 2px 5px 2px 0px;
4940 }
4941 .ideditor .form-field-input-multicombo li.chip.draggable {
4942     cursor: -webkit-grab;
4943     cursor: grab;
4944 }
4945 .ideditor .form-field-input-multicombo li.chip.dragging {
4946     opacity: 0.75;
4947     z-index: 3000;
4948     cursor: -webkit-grabbing;
4949     cursor: grabbing;
4950 }
4951 .ideditor .form-field-input-multicombo li.mixed {
4952     border-color: #eff2f7;
4953     color: #888;
4954     font-style: italic;
4955 }
4956
4957 .ideditor .form-field-input-multicombo li.chip span {
4958     display: block;
4959     -webkit-box-flex: 1;
4960         -ms-flex: 1 1 auto;
4961             flex: 1 1 auto;
4962     overflow: hidden;
4963     word-wrap: break-word;
4964 }
4965
4966 .ideditor .form-field-input-multicombo a {
4967     font-family: Arial, Helvetica, sans-serif !important;
4968     font-size: 16px !important;
4969     padding: 0px 5px 0px 5px;
4970     margin: 0;
4971     cursor: pointer;
4972     color: #a6b4ce;
4973     display: block;
4974     text-align: center;
4975     -webkit-box-flex: 0;
4976         -ms-flex: 0 0 auto;
4977             flex: 0 0 auto;
4978 }
4979
4980 .ideditor .form-field-input-multicombo .input-wrap {
4981     border: 1px solid #ddd;
4982     width: 100px;
4983 }
4984 .ideditor .form-field-input-multicombo input {
4985     border: none;
4986     width: 100%;
4987 }
4988
4989 .ideditor .form-field-input-multicombo input:focus {
4990     border-radius: 4px !important;
4991 }
4992
4993 .ideditor .form-field-input-multicombo .full-line-chips li.chip {
4994     width: 100%;
4995 }
4996 .ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
4997     width: auto;
4998 }
4999
5000
5001 /* Field - Text / Numeric
5002 ------------------------------------------------------- */
5003 .ideditor .form-field-input-text > input:only-of-type,
5004 .ideditor .form-field-input-tel > input:only-of-type,
5005 .ideditor .form-field-input-email > input:only-of-type,
5006 .ideditor .form-field-input-url > input:only-of-type {
5007     border-radius: 0 0 4px 4px;
5008 }
5009 .ideditor .form-field-input-number > input:only-of-type {
5010     border-radius: 0 0 0 4px;
5011 }
5012 .ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
5013     border-radius: 0 0 4px 0;
5014 }
5015 .ideditor .form-field-input-number > button:last-of-type {
5016     border-radius: 0 0 4px 0;
5017 }
5018 .ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
5019     border-radius: 0 0 0 4px;
5020 }
5021
5022 .ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
5023 .ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
5024 .ideditor[dir='ltr'] .form-field-input-identifier > button {
5025     border-bottom-right-radius: 4px;
5026 }
5027 .ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
5028 .ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
5029 .ideditor[dir='rtl'] .form-field-input-identifier > button {
5030     border-bottom-left-radius: 4px;
5031 }
5032
5033 /* draw the up/down on the buttons */
5034 .ideditor .form-field-input-number button.decrement::after,
5035 .ideditor .form-field-input-number button.increment::after {
5036     content: "";
5037     height: 0; width: 0;
5038     position: absolute;
5039     left: 0; right: 0; bottom: 0; top: 0;
5040     margin: auto;
5041 }
5042 .ideditor .form-field-input-number button.decrement::after {
5043     border-top: 5px solid #ccc;
5044     border-left: 5px solid transparent;
5045     border-right: 5px solid transparent;
5046 }
5047 .ideditor .form-field-input-number button.increment::after {
5048     border-bottom: 5px solid #ccc;
5049     border-left: 5px solid transparent;
5050     border-right: 5px solid transparent;
5051 }
5052
5053
5054 /* Field - Checkbox
5055 ------------------------------------------------------- */
5056 .ideditor .form-field-input-check {
5057     display: -webkit-box;
5058     display: -ms-flexbox;
5059     display: flex;
5060     -webkit-box-align: center;
5061         -ms-flex-align: center;
5062             align-items: center;
5063     background: #fff;
5064     padding: 5px 10px;
5065     color: #7092ff;
5066     border: 1px solid #ccc;
5067     border-top: 0;
5068     cursor: pointer;
5069 }
5070 .ideditor .form-field-input-check > input[type="checkbox"] {
5071     -webkit-box-flex: 0;
5072         -ms-flex: 0 1 auto;
5073             flex: 0 1 auto;
5074     width: 20px;
5075     margin-top: 0;
5076 }
5077 .ideditor .form-field-input-check > span {
5078     -webkit-box-flex: 1;
5079         -ms-flex: 1 1 auto;
5080             flex: 1 1 auto;
5081 }
5082 .ideditor .form-field-input-check > span.mixed {
5083     font-style: italic;
5084 }
5085 .ideditor .form-field-input-check > .reverser {
5086     -webkit-box-flex: 0;
5087         -ms-flex: 0 1 auto;
5088             flex: 0 1 auto;
5089     background-color: #eff2f7;
5090     border: 1px solid #ccd5e3;
5091     border-radius: 2px;
5092     padding: 0px 8px;
5093     color: inherit;
5094 }
5095 .ideditor[dir='ltr'] .form-field-input-check > .reverser {
5096     padding-right: 2px;
5097 }
5098 .ideditor[dir='rtl'] .form-field-input-check > .reverser {
5099     padding-left: 2px;
5100 }
5101 .ideditor .form-field-input-check > .reverser:active,
5102 .ideditor .form-field-input-check > .reverser:focus {
5103     background: #e3e8ef;
5104 }
5105 @media (hover: hover) {
5106     .ideditor .form-field-input-check > .reverser:hover {
5107         background: #e3e8ef;
5108     }
5109 }
5110 .ideditor .form-field-input-check > .reverser.hide {
5111     display: none;
5112 }
5113 .ideditor .form-field-input-check:active,
5114 .ideditor .form-field-input-check:focus {
5115     background: #f1f1f1;
5116 }
5117 @media (hover: hover) {
5118     .ideditor .form-field-input-check:hover {
5119         background: #f1f1f1;
5120     }
5121 }
5122 .ideditor .form-field-input-check .set {
5123     color: inherit;
5124 }
5125 .ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
5126     opacity: .5;
5127 }
5128
5129
5130 /* Field - Radio button
5131 ------------------------------------------------------- */
5132 .ideditor .form-field-input-radio {
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 wrap;
5142             flex-flow: row wrap;
5143 }
5144 .ideditor .form-field-input-radio > label {
5145     -webkit-box-flex: 1;
5146         -ms-flex: 1 1 auto;
5147             flex: 1 1 auto;
5148     display: -webkit-box;
5149     display: -ms-flexbox;
5150     display: flex;
5151     -webkit-box-orient: horizontal;
5152     -webkit-box-direction: normal;
5153         -ms-flex-flow: row nowrap;
5154             flex-flow: row nowrap;
5155     -webkit-box-align: center;
5156         -ms-flex-align: center;
5157             align-items: center;
5158     width: 100%;
5159     padding: 5px 10px;
5160     background-color: #fff;
5161     color: #7092ff;
5162     cursor: pointer;
5163 }
5164 .ideditor .form-field-input-radio > label.mixed {
5165     font-style: italic;
5166 }
5167 .ideditor .form-field-input-radio > label:last-child {
5168     border-radius: 0 0 4px 4px;
5169 }
5170 .ideditor .form-field-input-radio > label:active,
5171 .ideditor .form-field-input-radio > label:focus {
5172     background-color: #ececec;
5173 }
5174 @media (hover: hover) {
5175     .ideditor .form-field-input-radio > label:hover {
5176         background-color: #ececec;
5177     }
5178 }
5179 .ideditor .form-field-input-radio > label.active {
5180     background-color: #e8ebff;
5181 }
5182 .ideditor .form-field-input-radio > label:not(:last-of-type) {
5183     border-bottom: 1px solid #ccc;
5184 }
5185 .ideditor .form-field-input-radio > label > input[type="radio"] {
5186     -webkit-box-flex: 0;
5187         -ms-flex: 0 1 auto;
5188             flex: 0 1 auto;
5189     width: 20px;
5190 }
5191 .ideditor .form-field-input-radio > label > span {
5192     -webkit-box-flex: 1;
5193         -ms-flex: 1 1 auto;
5194             flex: 1 1 auto;
5195     overflow: hidden;
5196     white-space: nowrap;
5197     -o-text-overflow: ellipsis;
5198        text-overflow: ellipsis;
5199 }
5200
5201 /* Hide placeholder for radio buttons if another is active, or not in hover state */
5202 .ideditor .form-field-input-radio label.active ~ .placeholder,
5203 .ideditor .form-field-input-radio .placeholder {
5204     padding: 0;
5205     opacity: 0;
5206     width: 0;
5207     height: 0;
5208     display: block;
5209     overflow: hidden;
5210 }
5211
5212
5213 /* Field - Maxspeed
5214 ------------------------------------------------------- */
5215 .ideditor .form-field-input-maxspeed input.maxspeed-number {
5216     -ms-flex-preferred-size: 0;
5217         flex-basis: 0;
5218 }
5219 .ideditor .form-field-input-maxspeed input.maxspeed-unit {
5220     -webkit-box-flex: 0;
5221         -ms-flex: 0 1 auto;
5222             flex: 0 1 auto;
5223     width: 80px;
5224 }
5225 .ideditor[dir='ltr'] .form-field-input-maxspeed > input:first-of-type {
5226     border-radius: 0 0 0 4px;
5227 }
5228 .ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
5229     border-radius: 0 0 4px 0;
5230 }
5231 .ideditor[dir='ltr'] .form-field-input-maxspeed > input:last-of-type {
5232     border-left: 0;
5233     border-radius: 0 0 4px 0;
5234 }
5235 .ideditor[dir='rtl'] .form-field-input-maxspeed > input:last-of-type {
5236     border-right: 0;
5237     border-radius: 0 0 0 4px;
5238 }
5239
5240
5241 /* Field - Localized Name
5242 ------------------------------------------------------- */
5243 .ideditor .form-field-input-localized > input.localized-main {
5244     border-radius: 0 0 0 4px;
5245 }
5246 .ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
5247     border-radius: 0 0 4px 0;
5248 }
5249 .ideditor .form-field-input-localized > button.localized-add {
5250     border-radius: 0 0 4px 0;
5251 }
5252 .ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
5253     border-radius: 0 0 0 4px;
5254 }
5255
5256 .ideditor .form-field-input-localized button.localized-add.disabled,
5257 .ideditor .form-field-input-localized input.localized-main.disabled,
5258 .ideditor .form-field-input-localized input.localized-lang.disabled,
5259 .ideditor .form-field-input-localized input.localized-value.disabled {
5260     color: #777;
5261     background-color: #eee;
5262     cursor: not-allowed;
5263 }
5264
5265 /* nested subfields for name in different languages */
5266 .ideditor .localized-multilingual {
5267     padding: 0 10px;
5268     -ms-flex-preferred-size: 100%;
5269         flex-basis: 100%;
5270 }
5271 .ideditor .localized-multilingual .entry {
5272     position: relative;
5273     overflow: hidden;
5274 }
5275
5276 /* draws a little line connecting the multilingual field up to the name field */
5277 .ideditor .localized-multilingual .entry::before {
5278     content: "";
5279     display: block;
5280     position: absolute;
5281     background: #ccc;
5282     height: 11px;
5283     width: 1px;
5284     left: 0;
5285     right: 0;
5286     top: -11px;
5287     margin: auto;
5288 }
5289
5290 .ideditor .localized-multilingual .entry .localized-lang {
5291     border-radius: 0;
5292     border-top-width: 0;
5293     width: 100%;
5294 }
5295 .ideditor .localized-multilingual .entry .localized-value {
5296     border-top-width: 0;
5297     border-radius: 0 0 4px 4px;
5298     width: 100%;
5299 }
5300
5301
5302 /* Field - Address
5303 ------------------------------------------------------- */
5304 .ideditor .form-field-input-address {
5305     -webkit-box-flex: 1;
5306         -ms-flex: 1 1 auto;
5307             flex: 1 1 auto;
5308     display: -webkit-box;
5309     display: -ms-flexbox;
5310     display: flex;
5311     -webkit-box-orient: horizontal;
5312     -webkit-box-direction: normal;
5313         -ms-flex-flow: row wrap;
5314             flex-flow: row wrap;
5315     border: 1px solid #ccc;
5316     border-top: 0px;
5317 }
5318
5319 .ideditor .addr-row {
5320     -webkit-box-flex: 1;
5321         -ms-flex: 1 1 auto;
5322             flex: 1 1 auto;
5323     display: -webkit-box;
5324     display: -ms-flexbox;
5325     display: flex;
5326     width: 100%;
5327 }
5328
5329 .ideditor .addr-row > input {
5330     -webkit-box-flex: 1;
5331         -ms-flex: 1 1 auto;
5332             flex: 1 1 auto;
5333     border-radius: 0;
5334     border-right: 0;
5335     border-bottom: 0;
5336 }
5337 .ideditor[dir='rtl'] .addr-row input {
5338     border-right: 1px solid #ccc;
5339     border-left: 0;
5340 }
5341
5342 .ideditor .addr-row:first-of-type input {
5343     border-top: 0;
5344 }
5345 .ideditor .addr-row input:first-of-type {
5346     border-left: 0;
5347 }
5348 .ideditor[dir='rtl'] .addr-row input:first-of-type {
5349     border-right: 0;
5350 }
5351 .ideditor .addr-row:last-of-type input:first-of-type {
5352     border-radius: 0 0 0 4px;
5353 }
5354 .ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
5355     border-radius: 0 0 4px 0;
5356 }
5357 .ideditor .addr-row:last-of-type input:last-of-type {
5358     border-radius: 0 0 4px 0;
5359 }
5360 .ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
5361     border-radius: 0 0 0 4px;
5362 }
5363
5364
5365 /* Field - Wikipedia
5366 ------------------------------------------------------- */
5367 .ideditor .form-field-input-wikipedia {
5368     display: -webkit-box;
5369     display: -ms-flexbox;
5370     display: flex;
5371     -webkit-box-orient: horizontal;
5372     -webkit-box-direction: normal;
5373         -ms-flex-flow: row wrap;
5374             flex-flow: row wrap;
5375     -webkit-box-flex: 1;
5376         -ms-flex: 1 1 auto;
5377             flex: 1 1 auto;
5378 }
5379
5380 .ideditor .wiki-lang-container,
5381 .ideditor .wiki-title-container {
5382     display: -webkit-box;
5383     display: -ms-flexbox;
5384     display: flex;
5385     -webkit-box-orient: horizontal;
5386     -webkit-box-direction: normal;
5387         -ms-flex-flow: row nowrap;
5388             flex-flow: row nowrap;
5389     -webkit-box-flex: 1;
5390         -ms-flex: 1 1 auto;
5391             flex: 1 1 auto;
5392     width: 100%;
5393 }
5394
5395 .ideditor .wiki-lang-container > input.wiki-lang,
5396 .ideditor .wiki-title-container > input.wiki-title {
5397     -webkit-box-flex: 1;
5398         -ms-flex: 1 1 auto;
5399             flex: 1 1 auto;
5400     border-top: 0;
5401     border-radius: 0;
5402 }
5403 .ideditor .wiki-title-container > input.wiki-title {
5404     border-radius: 0 0 0 4px;
5405 }
5406 .ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
5407     border-radius: 0 0 4px 0;
5408 }
5409 .ideditor .wiki-title-container > button.wiki-link,
5410 .ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5411     border-radius: 0 0 4px 0;
5412 }
5413 .ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
5414 .ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5415     border-radius: 0 0 0 4px;
5416 }
5417
5418
5419 /* Field - Restriction Editor
5420 ------------------------------------------------------- */
5421 .ideditor .form-field-input-restrictions {
5422     display: block;
5423     border: 1px solid #ccc;
5424     border-top: 0;
5425     border-radius: 0 0 4px 4px;
5426 }
5427
5428 .ideditor .form-field-input-restrictions .restriction-controls-container {
5429     background-color: #fff;
5430     width: 100%;
5431     padding: 5px;
5432     border-top: 1px solid #ccc;
5433     border-radius: 0 0 4px 4px;
5434 }
5435
5436 .ideditor .restriction-controls-container .restriction-controls {
5437     display: table;
5438     -webkit-user-select: none;
5439        -moz-user-select: none;
5440         -ms-user-select: none;
5441             user-select: none;
5442 }
5443
5444 .ideditor .restriction-controls .restriction-control {
5445     display: table-row;
5446     padding: 5px 10px;
5447     height: 25px;
5448 }
5449
5450 .ideditor .restriction-control input,
5451 .ideditor .restriction-control > span {
5452     display: table-cell;
5453     text-align: start;
5454     padding: 0px 5px;
5455 }
5456
5457 .ideditor .restriction-control > span.restriction-control-label {
5458     text-align: end;
5459 }
5460
5461 .ideditor .restriction-control input {
5462     width: 60px;
5463     padding: 0;
5464     margin: 0px 5px;
5465     vertical-align: middle;
5466 }
5467
5468 .ideditor .form-field-input-restrictions .restriction-container {
5469     position: relative;
5470     height: 370px;
5471 }
5472 /* zero width space, so container takes up space */
5473 .ideditor .form-field-input-restrictions .restriction-container:after {
5474     content: '\200b';
5475 }
5476
5477 .ideditor .form-field-input-restrictions svg.surface {
5478     width: 100%;
5479     height: 100%;
5480 }
5481
5482 .ideditor .restriction-container .restriction-help {
5483     z-index: 1;
5484     position: absolute;
5485     top: 0;
5486     left: 0;
5487     right: 0;
5488     padding: 2px 6px;
5489     background-color: rgba(255, 255, 255, .8);
5490     color: #888;
5491     text-align: center;
5492     pointer-events: none;
5493     -webkit-user-select: none;
5494        -moz-user-select: none;
5495         -ms-user-select: none;
5496             user-select: none;
5497 }
5498
5499 .ideditor .restriction-help span {
5500     margin: 2px;
5501 }
5502
5503 .ideditor .restriction-help .qualifier {
5504     color: #666;
5505     font-weight: bold;
5506 }
5507 .ideditor .restriction-help .qualifier.allow {
5508     color: #8b5;
5509 }
5510 .ideditor .restriction-help .qualifier.restrict {
5511     color: #d53;
5512 }
5513 .ideditor .restriction-help .qualifier.only {
5514     color: #78f;
5515 }
5516
5517
5518 /* Field - Changeset Comment
5519 ------------------------------------------------------- */
5520 .ideditor .form-field-comment:not(.present) #preset-input-comment {
5521     border-color: rgb(230, 100, 100);
5522 }
5523 .ideditor .form-field-comment:not(.present) .field-label {
5524     border-color: rgb(230, 100, 100);
5525     background: rgba(230, 100, 100, 0.2);
5526 }
5527 .ideditor .form-field-comment:not(.present) button {
5528     border-color: rgb(230, 100, 100);
5529 }
5530
5531
5532 /* Field - Combobox
5533 ------------------------------------------------------- */
5534 .ideditor[dir='ltr'] textarea.combobox-input,
5535 .ideditor[dir='ltr'] input.combobox-input {
5536     /* leave room for the caret */
5537     padding-right: 20px;
5538 }
5539 .ideditor[dir='rtl'] textarea.combobox-input,
5540 .ideditor[dir='rtl'] input.combobox-input {
5541     padding-left: 20px;
5542 }
5543
5544 .ideditor div.combobox {
5545     z-index: 9999;
5546     display: none;
5547     -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
5548             box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
5549     margin-top: -1px;
5550     background: #fff;
5551     max-height: 245px;
5552     overflow-y: auto;
5553     overflow-x: hidden;
5554     border: 1px solid #ccc;
5555     border-radius: 0 0 4px 4px;
5556 }
5557
5558 .ideditor .combobox a {
5559     display: block;
5560     padding: 5px 10px;
5561     border-top: 1px solid #ccc;
5562     -o-text-overflow: ellipsis;
5563        text-overflow: ellipsis;
5564     white-space: nowrap;
5565     overflow: hidden;
5566 }
5567
5568 .ideditor .combobox a.selected,
5569 .ideditor .combobox a:active,
5570 .ideditor .combobox a:focus {
5571     background: #ececec;
5572 }
5573 @media (hover: hover) {
5574     .ideditor .combobox a:hover {
5575         background: #ececec;
5576     }
5577 }
5578
5579 .ideditor .combobox a:first-child {
5580     border-top: 0;
5581     padding: 4px 10px;
5582 }
5583
5584 .ideditor .combobox-caret {
5585     display: inline-block;
5586     position: relative;
5587     height: 5px;
5588     width: 30px !important;
5589     margin-left: -30px;
5590     -ms-flex-item-align: center;
5591         align-self: center;
5592     vertical-align: middle;
5593     cursor: pointer;
5594 }
5595 .ideditor[dir='rtl'] .combobox-caret {
5596   margin-left: 0;
5597   margin-right: -30px;
5598 }
5599
5600 .ideditor .combobox-caret::after {
5601     content: "";
5602     height: 0; width: 0;
5603     position: absolute;
5604     left: 0; right: 0; bottom: 0; top: 0;
5605     margin: auto;
5606     border-top: 5px solid #ccc;
5607     border-left: 5px solid transparent;
5608     border-right: 5px solid transparent;
5609 }
5610
5611
5612 /* Field Help
5613 ------------------------------------------------------- */
5614 .ideditor .field-help-body {
5615     display: block;
5616     position: absolute;
5617     top: 0;
5618     left: 20px;
5619     right: 20px;
5620     margin: 5px;
5621     padding: 8px;
5622     border: 1px solid #ccc;
5623     border-top: 0;
5624     border-radius: 0 0 4px 4px;
5625     z-index: 20;
5626     background: rgba(255,255,255,0.95);
5627     -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5628             box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5629 }
5630
5631 .ideditor .field-help-title h2 {
5632     padding: 10px;
5633     margin-bottom: 0px;
5634     font-size: 17px;
5635 }
5636 .ideditor .field-help-title button {
5637     width: 45px;
5638     height: 55px;
5639     border-radius: 0;
5640 }
5641
5642 .ideditor .field-help-nav {
5643     font-size: 13px;
5644     font-weight: bold;
5645     margin-bottom: 10px;
5646 }
5647 .ideditor .field-help-nav-item {
5648     display: inline-block;
5649     padding: 5px 10px;
5650     cursor: pointer;
5651     color: #666;
5652 }
5653 .ideditor .field-help-nav-item.active {
5654     color: #7092ff;
5655     border-bottom: 2px solid;
5656 }
5657 .ideditor .field-help-nav-item:active,
5658 .ideditor .field-help-nav-item:focus {
5659     color: #597be7;
5660     background-color: #efefef;
5661 }
5662 @media (hover: hover) {
5663     .ideditor .field-help-nav-item:hover {
5664         color: #597be7;
5665         background-color: #efefef;
5666     }
5667 }
5668
5669 .ideditor .field-help-content {
5670     padding: 10px;
5671     overflow-y: auto;
5672     overflow-x: hidden;
5673 }
5674 .ideditor .field-help-content h3 {
5675     font-size: 12px;
5676     margin-bottom: 5px;
5677 }
5678 .ideditor .field-help-content p {
5679     margin-bottom: 15px;
5680 }
5681 .ideditor .field-help-content ul li {
5682     list-style: inside;
5683     margin-bottom: 5px;
5684 }
5685
5686 .ideditor .field-help-content .field-help-image {
5687     width: 100%;
5688     margin-bottom: 15px;
5689 }
5690
5691 .ideditor .field-help-content svg.turn {
5692     width: 40px;
5693     height: 20px;
5694 }
5695 .ideditor .field-help-content svg.shadow {
5696     opacity: 0.7;
5697     width: 60px;
5698     height: 20px;
5699 }
5700 .ideditor .field-help-content svg.from {
5701     color: #777;
5702 }
5703 .ideditor .field-help-content svg.allow {
5704     color: #5b3;
5705 }
5706 .ideditor .field-help-content svg.restrict {
5707     color: #d53;
5708 }
5709 .ideditor .field-help-content svg.only {
5710     color: #68f;
5711 }
5712
5713 .ideditor .field-help-content p.from_shadow,
5714 .ideditor .field-help-content p.allow_shadow,
5715 .ideditor .field-help-content p.restrict_shadow,
5716 .ideditor .field-help-content p.allow_turn,
5717 .ideditor .field-help-content p.restrict_turn {
5718     margin-bottom: 5px;
5719 }
5720
5721
5722 /* More Fields dropdown
5723 ------------------------------------------------------- */
5724 .ideditor .more-fields {
5725     margin-top: 10px;
5726     font-weight: bold;
5727 }
5728
5729 .ideditor .more-fields label {
5730     display: -webkit-box;
5731     display: -ms-flexbox;
5732     display: flex;
5733     -webkit-box-orient: horizontal;
5734     -webkit-box-direction: normal;
5735         -ms-flex-flow: row nowrap;
5736             flex-flow: row nowrap;
5737     -webkit-box-pack: justify;
5738         -ms-flex-pack: justify;
5739             justify-content: space-between;
5740     -webkit-box-align: center;
5741         -ms-flex-align: center;
5742             align-items: center;
5743 }
5744
5745 .ideditor .more-fields input {
5746     margin-left: 10px;
5747     -webkit-box-flex: 1;
5748         -ms-flex: 1 1 auto;
5749             flex: 1 1 auto;
5750 }
5751 .ideditor[dir='rtl'] .more-fields input {
5752     margin-left: auto;
5753     margin-right: 10px;
5754 }
5755
5756 .ideditor .form-field-input-wrap .label {
5757     background: #f6f6f6;
5758     padding: 5px 10px;
5759 }
5760
5761
5762 /* Raw Tag Editor
5763 ------------------------------------------------------- */
5764 .ideditor .raw-tag-options {
5765     display: -webkit-box;
5766     display: -ms-flexbox;
5767     display: flex;
5768     -webkit-box-orient: horizontal;
5769     -webkit-box-direction: normal;
5770         -ms-flex-flow: row nowrap;
5771             flex-flow: row nowrap;
5772     -webkit-box-pack: end;
5773         -ms-flex-pack: end;
5774             justify-content: flex-end;
5775     margin-top: -28px;
5776 }
5777 .ideditor button.raw-tag-option {
5778     -webkit-box-flex: 0;
5779         -ms-flex: 0 0 auto;
5780             flex: 0 0 auto;
5781     padding: 3px;
5782     background: #aaa;
5783     color: #eee;
5784     margin: 0 3px;
5785 }
5786 .ideditor button.raw-tag-option:focus,
5787 .ideditor button.raw-tag-option.active {
5788     color: #fff;
5789     background: #597be7;
5790 }
5791 @media (hover: hover) {
5792     .ideditor button.raw-tag-option:hover {
5793         color: #fff;
5794         background: #597be7;
5795     }
5796 }
5797 .ideditor button.raw-tag-option.selected {
5798     color: #fff;
5799     background: #7092ff;
5800 }
5801 .ideditor button.raw-tag-option svg.icon {
5802     width: 14px;
5803     height: 14px;
5804     display: block;
5805 }
5806 .ideditor[dir='ltr'] button.raw-tag-option-list {
5807     -webkit-transform: scaleX(-1);
5808         -ms-transform: scaleX(-1);
5809             transform: scaleX(-1);
5810     -webkit-filter: FlipH;
5811             filter: FlipH;
5812     -ms-filter: "FlipH";
5813 }
5814
5815
5816 .ideditor .tag-text {
5817     width: 100%;
5818     height: 100%;
5819     min-height: 32px;
5820     font-family: monospace;
5821     white-space: pre;
5822 }
5823
5824 .ideditor .tag-text,
5825 .ideditor .tag-list {
5826     margin-top: 10px;
5827 }
5828 .ideditor .tag-row {
5829     width: 100%;
5830     position: relative;
5831 }
5832 .ideditor .tag-row .inner-wrap {
5833     display: -webkit-box;
5834     display: -ms-flexbox;
5835     display: flex;
5836     -webkit-box-orient: horizontal;
5837     -webkit-box-direction: normal;
5838         -ms-flex-flow: row nowrap;
5839             flex-flow: row nowrap;
5840     width: 100%;
5841     position: relative;
5842 }
5843 .ideditor .tag-row .key-wrap,
5844 .ideditor .tag-row .value-wrap {
5845     -webkit-box-flex: 1;
5846         -ms-flex: 1 1 50%;
5847             flex: 1 1 50%;
5848 }
5849
5850 .ideditor .tag-text.readonly,
5851 .ideditor .tag-row.readonly,
5852 .ideditor .tag-row.readonly input.key,
5853 .ideditor .tag-row.readonly input.value,
5854 .ideditor .tag-row.readonly button.remove {
5855     color: #777;
5856     background-color: #eee;
5857     cursor: not-allowed;
5858 }
5859
5860 .ideditor .tag-row input {
5861     border: 0;
5862     border-radius: 0;
5863     border-bottom: 1px solid #ccc;
5864     border-left: 1px solid #ccc;
5865     width: 100%;
5866 }
5867 .ideditor[dir='rtl'] .tag-row input {
5868     border-left: none;
5869     border-right: 1px solid #ccc;
5870 }
5871
5872
5873 .ideditor .tag-row input.key {
5874     font-weight: bold;
5875     background-color: #f6f6f6;
5876 }
5877
5878 .ideditor .tag-row input.value {
5879     border-right: 1px solid #ccc;
5880 }
5881 .ideditor[dir='rtl'] .tag-row input.value {
5882     border-left: 1px solid #ccc;
5883 }
5884
5885 .ideditor .tag-row:first-child input.key {
5886     border-top: 1px solid #ccc;
5887     border-top-left-radius: 4px;
5888 }
5889 .ideditor[dir='rtl'] .tag-row:first-child input.key {
5890     border-top-left-radius: 0;
5891     border-top-right-radius: 4px;
5892 }
5893
5894 .ideditor .tag-row:first-child input.value {
5895     border-top: 1px solid #ccc;
5896 }
5897 .ideditor .tag-row button {
5898     -webkit-box-flex: 0;
5899         -ms-flex: 0 0 auto;
5900             flex: 0 0 auto;
5901     width: 32px;
5902     border: 1px solid #ccc;
5903     border-top-width: 0;
5904     border-left-width: 0;
5905 }
5906 .ideditor[dir='rtl'] .tag-row button {
5907     border-left-width: 1px;
5908     border-right-width: 0;
5909 }
5910
5911 .ideditor .tag-row button:active,
5912 .ideditor .tag-row button:focus {
5913     background: #f1f1f1;
5914 }
5915 @media (hover: hover) {
5916     .ideditor .tag-row button:hover {
5917         background: #f1f1f1;
5918     }
5919 }
5920 .ideditor .tag-row button .icon {
5921     opacity: .5;
5922 }
5923 .ideditor .tag-row:first-child button {
5924     border-top-width: 1px;
5925 }
5926
5927 .ideditor .tag-row:first-child .tag-reference-button {
5928     border-top-right-radius: 4px;
5929 }
5930 .ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
5931     border-top-left-radius: 4px;
5932     border-top-right-radius: 0;
5933 }
5934
5935 .ideditor .tag-row:last-child .tag-reference-button {
5936     border-bottom-right-radius: 4px;
5937 }
5938 .ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
5939     border-bottom-left-radius: 4px;
5940     border-bottom-right-radius: 0;
5941 }
5942
5943 .ideditor .tag-row .tag-reference-button {
5944     border-radius: 0;
5945 }
5946 .ideditor[dir='rtl'] .tag-row .tag-reference-button {
5947     border-left-width: 1px;
5948     border-right-width: 0;
5949 }
5950
5951 /* Tag reference */
5952 .ideditor .tag-reference-loading {
5953     background-color: #f5f5f5;
5954 }
5955 .ideditor .tag-reference-loading .icon {
5956     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
5957     background-position: 0 0;
5958 }
5959
5960 .ideditor .tag-reference-body {
5961     -webkit-box-flex: 1;
5962         -ms-flex: 1 1 auto;
5963             flex: 1 1 auto;
5964     width: 100%;
5965     overflow: hidden;
5966     display: none;
5967     padding-top: 10px;
5968 }
5969 .ideditor .tag-reference-body.expanded {
5970     padding-bottom: 10px;
5971     display: inline-block;
5972 }
5973 .ideditor .tag-reference-description {
5974
5975 }
5976 .ideditor .tag-reference-link {
5977     display: block;
5978 }
5979
5980 .ideditor img.tag-reference-wiki-image {
5981     float: right;
5982     width: 33.3333%;
5983     border-radius: 4px;
5984     margin: 0 0 0 5px;
5985 }
5986 .ideditor[dir='rtl'] img.tag-reference-wiki-image {
5987     float: left;
5988     margin: 0 5px 0 0;
5989 }
5990
5991 .ideditor .preset-list .tag-reference-body {
5992     position: relative;
5993     width: 100%;
5994 }
5995 .ideditor .raw-tag-editor .tag-reference-body {
5996     width: 100%;
5997 }
5998 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
5999     background: #f6f6f6;
6000     color: #333;
6001 }
6002 .ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
6003     border-bottom: 1px solid #ccc;
6004 }
6005 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
6006     border-top: 1px solid #ccc;
6007 }
6008
6009
6010 /* Raw Member / Membership Editor
6011 ------------------------------------------------------- */
6012 .ideditor .section-raw-member-editor .member-list:empty,
6013 .ideditor .section-raw-membership-editor .member-list:empty {
6014     display: none;
6015 }
6016
6017 .ideditor .section-raw-member-editor .member-list,
6018 .ideditor .section-raw-membership-editor .member-list {
6019     position: relative; /* required for drag-and-drop */
6020     padding-top: 5px;
6021 }
6022 .ideditor .section-raw-member-editor .member-list li,
6023 .ideditor .section-raw-membership-editor .member-list li {
6024     position: relative;
6025     border-radius: 4px;
6026     margin: 0;
6027     padding-bottom: 10px;
6028 }
6029 .ideditor .section-raw-member-editor .member-row .member-entity-name,
6030 .ideditor .section-raw-membership-editor .member-row .member-entity-name {
6031     font-weight: normal;
6032     padding-left: 10px;
6033 }
6034
6035 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
6036 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
6037     padding-left:0;
6038     padding-right: 10px;
6039 }
6040
6041 .ideditor .form-field-input-member > input.member-role {
6042     border-radius: 0 0 4px 4px;
6043 }
6044
6045 .ideditor .member-row-new .member-entity-input {
6046     -webkit-box-flex: 1;
6047         -ms-flex: 1 1 100%;
6048             flex: 1 1 100%;
6049     border-radius: 4px 4px 0 0;
6050     border: 0;
6051 }
6052
6053 .ideditor .section-raw-member-editor .member-row.dragging {
6054     opacity: 0.75;
6055     z-index: 3000;
6056     /*
6057     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
6058     */
6059 }
6060
6061 /* add tag, add relation buttons */
6062 .ideditor .add-row {
6063     display: -webkit-box;
6064     display: -ms-flexbox;
6065     display: flex;
6066     width: 100%;
6067     -webkit-box-orient: horizontal;
6068     -webkit-box-direction: normal;
6069         -ms-flex-flow: row nowrap;
6070             flex-flow: row nowrap;
6071 }
6072 .ideditor .add-row .add-tag,
6073 .ideditor .add-row .add-relation,
6074 .ideditor .add-row .space-value {
6075     -webkit-box-flex: 1;
6076         -ms-flex: 1 1 50%;
6077             flex: 1 1 50%;
6078 }
6079 .ideditor .add-row .space-buttons {
6080     -webkit-box-flex: 0;
6081         -ms-flex: 0 0 62px;
6082             flex: 0 0 62px;
6083 }
6084 .ideditor .add-row button {
6085     padding: 5px;
6086     background: rgba(0,0,0,.5);
6087 }
6088 .ideditor .add-row button:focus,
6089 .ideditor .add-row button:active {
6090     background: rgba(0,0,0,.8);
6091 }
6092 @media (hover: hover) {
6093     .ideditor .add-row button:hover {
6094         background: rgba(0,0,0,.8);
6095     }
6096 }
6097
6098 .ideditor .add-tag {
6099     border-radius: 0 0 4px 4px;
6100 }
6101 .ideditor .add-relation {
6102     margin-top: 10px;
6103     border-radius: 4px;
6104 }
6105
6106
6107 /* OSM Note / QA Editors
6108 ------------------------------------------------------- */
6109 .ideditor .note-header,
6110 .ideditor .qa-header {
6111     background-color: #f6f6f6;
6112     border-radius: 5px;
6113     border: 1px solid #ccc;
6114     display: -webkit-box;
6115     display: -ms-flexbox;
6116     display: flex;
6117     -webkit-box-orient: horizontal;
6118     -webkit-box-direction: normal;
6119         -ms-flex-flow: row nowrap;
6120             flex-flow: row nowrap;
6121     -webkit-box-align: center;
6122         -ms-flex-align: center;
6123             align-items: center;
6124 }
6125
6126 .ideditor .note-header-icon,
6127 .ideditor .qa-header-icon {
6128     background-color: #fff;
6129     padding: 10px;
6130     -webkit-box-flex: 0;
6131         -ms-flex: 0 0 auto;
6132             flex: 0 0 auto;
6133     position: relative;
6134     width: 60px;
6135     height: 60px;
6136     border-right: 1px solid #ccc;
6137     border-radius: 5px 0 0 5px;
6138 }
6139 .ideditor[dir='rtl'] .note-header-icon,
6140 .ideditor[dir='rtl'] .qa-header-icon {
6141     border-right: unset;
6142     border-left: 1px solid #ccc;
6143     border-radius: 0 5px 5px 0;
6144 }
6145
6146 .ideditor .note-header-icon .icon-wrap,
6147 .ideditor .qa-header-icon .icon-wrap {
6148     position: absolute;
6149     top: 0px;
6150 }
6151 .ideditor .preset-icon-28 {
6152     position: absolute;
6153     top: 16px;
6154     left: 16px;
6155     margin: auto;
6156 }
6157 .ideditor .preset-icon-28 .icon {
6158     width: 28px;
6159     height: 28px;
6160 }
6161
6162 .ideditor .note-header-label,
6163 .ideditor .qa-header-label {
6164     background-color: #f6f6f6;
6165     padding: 0 15px;
6166     -webkit-box-flex: 1;
6167         -ms-flex: 1 1 100%;
6168             flex: 1 1 100%;
6169     font-size: 14px;
6170     font-weight: bold;
6171     border-radius: 0 5px 5px 0;
6172 }
6173 .ideditor[dir='rtl'] .note-header-label,
6174 .ideditor[dir='rtl'] .qa-header-label {
6175     border-radius: 5px 0 0 5px;
6176 }
6177
6178 .ideditor .note-category {
6179     margin: 20px 0px;
6180 }
6181
6182 .ideditor .comments-container {
6183     background: #ececec;
6184     padding: 1px 10px;
6185     border-radius: 8px;
6186     margin-top: 20px;
6187 }
6188
6189 .ideditor .comment {
6190     background-color: #fff;
6191     border-radius: 5px;
6192     border: 1px solid #ccc;
6193     margin: 10px auto;
6194     display: -webkit-box;
6195     display: -ms-flexbox;
6196     display: flex;
6197     -webkit-box-orient: horizontal;
6198     -webkit-box-direction: normal;
6199         -ms-flex-flow: row nowrap;
6200             flex-flow: row nowrap;
6201 }
6202 .ideditor .comment-avatar {
6203     padding: 10px;
6204     -webkit-box-flex: 0;
6205         -ms-flex: 0 0 auto;
6206             flex: 0 0 auto;
6207 }
6208 .ideditor .comment-avatar .icon.comment-avatar-icon {
6209     width: 40px;
6210     height: 40px;
6211     -o-object-fit: cover;
6212        object-fit: cover;
6213     border: 1px solid #ccc;
6214     border-radius: 20px;
6215 }
6216 .ideditor .comment-main {
6217     padding: 10px 10px 10px 0;
6218     -webkit-box-flex: 1;
6219         -ms-flex: 1 1 100%;
6220             flex: 1 1 100%;
6221     -webkit-box-orient: vertical;
6222     -webkit-box-direction: normal;
6223         -ms-flex-flow: column nowrap;
6224             flex-flow: column nowrap;
6225     overflow: hidden;
6226     overflow-wrap: break-word;
6227 }
6228 .ideditor[dir='rtl'] .comment-main {
6229     padding: 10px 0 10px 10px;
6230 }
6231
6232 .ideditor .comment-metadata {
6233     -webkit-box-orient: horizontal;
6234     -webkit-box-direction: normal;
6235         -ms-flex-flow: row nowrap;
6236             flex-flow: row nowrap;
6237     -webkit-box-pack: justify;
6238         -ms-flex-pack: justify;
6239             justify-content: space-between;
6240 }
6241 .ideditor .comment-author {
6242     font-weight: bold;
6243     color: #333;
6244 }
6245 .ideditor .comment-date {
6246     color: #aaa;
6247 }
6248 .ideditor .comment-text {
6249     color: #333;
6250     margin-top: 10px;
6251     overflow-y: auto;
6252     max-height: 250px;
6253 }
6254 .ideditor .comment-text::-webkit-scrollbar {
6255     border-left: none;
6256 }
6257
6258 .ideditor .note-save,
6259 .ideditor .qa-save {
6260     padding-top: 20px;
6261 }
6262
6263 .ideditor .qa-details-container {
6264     background: #ececec;
6265     padding: 10px;
6266     margin-top: 20px;
6267     border-radius: 4px;
6268     border: 1px solid #ccc;
6269     display: -webkit-box;
6270     display: -ms-flexbox;
6271     display: flex;
6272     -webkit-box-orient: vertical;
6273     -webkit-box-direction: normal;
6274         -ms-flex-direction: column;
6275             flex-direction: column;
6276 }
6277 .ideditor .qa-details-description-text::first-letter {
6278     text-transform: capitalize;
6279 }
6280 .ideditor[dir='rtl'] .qa-details-description-text::first-letter {
6281     text-transform: none;  /* #5877 */
6282 }
6283 .ideditor .qa-details-subsection h4 {
6284     padding-bottom: 2px;
6285 }
6286 .ideditor .qa-details-subsection:not(:last-child) {
6287     margin-bottom: 10px;
6288 }
6289 .ideditor .qa-details-subsection:empty {
6290     display: none;
6291 }
6292
6293 .ideditor .note-save .new-comment-input,
6294 .ideditor .qa-save .new-comment-input {
6295     width: 100%;
6296     height: 100px;
6297     max-height: 300px;
6298     min-height: 100px;
6299 }
6300
6301 .ideditor .note-save .detail-section,
6302 .ideditor .qa-save .detail-section {
6303     margin: 10px 0;
6304 }
6305
6306 .ideditor .note-report {
6307     float: right;
6308 }
6309
6310
6311 /* Custom Data Editor
6312 ------------------------------------------------------- */
6313 .ideditor .data-header {
6314     background-color: #f6f6f6;
6315     border-radius: 5px;
6316     border: 1px solid #ccc;
6317     display: -webkit-box;
6318     display: -ms-flexbox;
6319     display: flex;
6320     -webkit-box-orient: horizontal;
6321     -webkit-box-direction: normal;
6322         -ms-flex-flow: row nowrap;
6323             flex-flow: row nowrap;
6324     -webkit-box-align: center;
6325         -ms-flex-align: center;
6326             align-items: center;
6327 }
6328
6329 .ideditor .data-header-icon {
6330     background-color: #fff;
6331     padding: 10px;
6332     -webkit-box-flex: 0;
6333         -ms-flex: 0 0 auto;
6334             flex: 0 0 auto;
6335     position: relative;
6336     width: 60px;
6337     height: 60px;
6338     border-right: 1px solid #ccc;
6339     border-radius: 5px 0 0 5px;
6340 }
6341 .ideditor[dir='rtl'] .data-header-icon {
6342     border-right: unset;
6343     border-left: 1px solid #ccc;
6344     border-radius: 0 5px 5px 0;
6345 }
6346
6347 .ideditor .data-header-icon .icon-wrap {
6348     position: absolute;
6349     top: 0px;
6350 }
6351
6352 .ideditor .data-header-label {
6353     background-color: #f6f6f6;
6354     padding: 0 15px;
6355     -webkit-box-flex: 1;
6356         -ms-flex: 1 1 100%;
6357             flex: 1 1 100%;
6358     font-size: 14px;
6359     font-weight: bold;
6360     border-radius: 0 5px 5px 0;
6361 }
6362 .ideditor[dir='rtl'] .data-header-label {
6363     border-radius: 5px 0 0 5px;
6364 }
6365
6366 /* custom data editor - no info/delete buttons */
6367 .ideditor .data-editor.raw-tag-editor .tag-row button {
6368     display: none;
6369 }
6370 .ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
6371 .ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
6372     width: 50%;
6373 }
6374
6375
6376 .ideditor .over-map {
6377     position: relative;
6378     height: 100%;
6379     pointer-events: none;
6380     display: -webkit-box;
6381     display: -ms-flexbox;
6382     display: flex;
6383     -webkit-box-orient: horizontal;
6384     -webkit-box-direction: reverse;
6385         -ms-flex-direction: row-reverse;
6386             flex-direction: row-reverse;
6387     -webkit-box-align: end;
6388         -ms-flex-align: end;
6389             align-items: flex-end;
6390     overflow: hidden;
6391 }
6392 .ideditor .over-map > * {
6393     pointer-events: auto;
6394     z-index: 5;
6395 }
6396 /* offscreen this without hiding it */
6397 .ideditor .over-map .select-trap {
6398     position: absolute;
6399     right: -1000%;
6400     opacity: 0;
6401 }
6402
6403 /* Map Controls
6404 ------------------------------------------------------- */
6405 .ideditor .map-controls {
6406     right: 0;
6407     top: 0;
6408     width: 40px;
6409     position: absolute;
6410     z-index: 100;
6411     bottom: 0;
6412     display: -webkit-box;
6413     display: -ms-flexbox;
6414     display: flex;
6415     -webkit-box-orient: vertical;
6416     -webkit-box-direction: normal;
6417         -ms-flex-direction: column;
6418             flex-direction: column;
6419     padding: 5px 0;
6420     pointer-events: none;
6421 }
6422 .ideditor .map-controls:before {
6423     content: '';
6424     display: inline-block;
6425     pointer-events: none;
6426     width: 40px;
6427     height: 100%;
6428     max-height: 70px;
6429     -webkit-box-flex: 0;
6430         -ms-flex: 0 1 auto;
6431             flex: 0 1 auto;
6432 }
6433 .ideditor[dir='rtl'] .map-controls {
6434     left: 0;
6435     right: auto;
6436 }
6437
6438 .ideditor .map-control {
6439     position: relative;
6440     display: -webkit-box;
6441     display: -ms-flexbox;
6442     display: flex;
6443     -webkit-box-orient: vertical;
6444     -webkit-box-direction: normal;
6445         -ms-flex-direction: column;
6446             flex-direction: column;
6447 }
6448 .ideditor .map-control > button {
6449     position: relative;
6450     width: 40px;
6451     height: 40px;
6452     background: rgba(0,0,0,.5);
6453     border-radius: 0;
6454     pointer-events: auto;
6455 }
6456
6457 .ideditor .map-control > button:not(.disabled):focus,
6458 .ideditor .map-control > button:not(.disabled):active {
6459     background: rgba(0, 0, 0, .8);
6460 }
6461 .ideditor .map-control > button.active,
6462 .ideditor .map-control > button.active:active {
6463     background: #7092ff;
6464 }
6465 @media (hover: hover) {
6466     .ideditor .map-control > button:not(.disabled):hover {
6467         background: rgba(0, 0, 0, .8);
6468     }
6469     .ideditor .map-control > button.active:hover {
6470         background: #7092ff;
6471     }
6472 }
6473
6474 .ideditor .map-control > button.disabled .icon {
6475     color: rgba(255, 255, 255, 0.5);
6476 }
6477
6478
6479 /* Fullscreen Button (disabled)
6480 ------------------------------------------------------- */
6481 .ideditor div.full-screen {
6482     display: inline-block;
6483     width: 40px;
6484     margin-right: 10px;
6485     display: none;
6486 }
6487
6488 .ideditor div.full-screen .tooltip {
6489     min-width: 160px;
6490 }
6491
6492 .ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
6493     width: 40px;
6494     height: 40px;
6495     background: transparent;
6496 }
6497 .ideditor div.full-screen > button:active,
6498 .ideditor div.full-screen > button:focus {
6499     background-color: rgba(0, 0, 0, .8);
6500 }
6501 @media (hover: hover) {
6502     .ideditor div.full-screen > button:hover {
6503         background-color: rgba(0, 0, 0, .8);
6504     }
6505 }
6506
6507
6508 /* Map Controls
6509 ------------------------------------------------------- */
6510
6511 /* Zoom in/out buttons */
6512 .ideditor .zoombuttons > button.zoom-in {
6513     border-radius: 4px 0 0 0;
6514 }
6515 .ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
6516     border-radius: 0 4px 0 0;
6517 }
6518
6519 /* Geolocate button */
6520 .ideditor .geolocate-control {
6521     margin-bottom: 10px;
6522 }
6523 .ideditor .geolocate-control > button {
6524     border-radius: 0 0 0 4px;
6525 }
6526 .ideditor[dir='rtl'] .geolocate-control > button {
6527     border-radius: 0 0 4px 0;
6528 }
6529
6530 /* Zoom to selection button */
6531 .ideditor .zoom-to-selection-control .icon {
6532     width: 22px;
6533     height: 22px;
6534 }
6535
6536
6537 /* Background / Map Data / Help Pane buttons
6538 ------------------------------------------------------- */
6539 .ideditor .background-control > button {
6540     border-radius: 4px 0 0 0;
6541 }
6542 .ideditor[dir='rtl'] .background-control > button {
6543     border-radius: 0 4px 0 0;
6544 }
6545
6546 .ideditor .help-control > button {
6547     border-radius: 0 0 0 4px;
6548 }
6549 .ideditor[dir='rtl'] .help-control > button {
6550     border-radius: 0 0 4px 0;
6551 }
6552
6553
6554 /* Background / Map Data Settings
6555 ------------------------------------------------------- */
6556 .ideditor .imagery-faq {
6557     margin-bottom: 10px;
6558     white-space: nowrap;
6559 }
6560
6561 .ideditor .layer-list, .ideditor .controls-list {
6562     margin-bottom: 10px;
6563     border: 1px solid #ccc;
6564     border-radius: 4px;
6565 }
6566
6567 .ideditor .layer-list > li {
6568     background-color: #fff;
6569     color: #7092ff;
6570     position: relative;
6571     display: -webkit-box;
6572     display: -ms-flexbox;
6573     display: flex;
6574 }
6575
6576 .ideditor .layer-list:empty {
6577     display: none;
6578 }
6579
6580 .ideditor .layer-list > li:first-child {
6581     border-radius: 3px 3px 0 0;
6582 }
6583 .ideditor .layer-list > li:last-child {
6584     border-radius: 0 0 3px 3px;
6585 }
6586 .ideditor .layer-list > li:only-child {
6587     border-radius: 3px;
6588 }
6589 .ideditor .layer-list li:not(:last-child) {
6590     border-bottom: 1px solid #ccc;
6591 }
6592 .ideditor .layer-list li:active {
6593     background-color: #ececec;
6594 }
6595 @media (hover: hover) {
6596     .ideditor .layer-list li:hover {
6597         background-color: #ececec;
6598     }
6599 }
6600
6601 .ideditor .layer-list li.active button,
6602 .ideditor .layer-list li.switch button,
6603 .ideditor .layer-list li.active,
6604 .ideditor .layer-list li.switch {
6605     background: #e8ebff;
6606 }
6607
6608 .ideditor .layer-list li.best > div.best {
6609     padding: 5px;
6610     -webkit-box-flex: 0;
6611         -ms-flex: 0 0 auto;
6612             flex: 0 0 auto;
6613 }
6614
6615 .ideditor[dir='rtl'] .list-item-data-browse svg {
6616     -webkit-transform: rotateY(180deg);
6617             transform: rotateY(180deg);
6618 }
6619
6620 /* make sure tooltip fits in map-control panel */
6621 /* if too wide, placement will be wrong the first time it displays */
6622 .ideditor .layer-list li.best .popover-inner {
6623     max-width: 160px;
6624 }
6625
6626 .ideditor .layer-list label {
6627     padding: 5px 10px;
6628     cursor: pointer;
6629     -webkit-box-flex: 1;
6630         -ms-flex: 1 1 auto;
6631             flex: 1 1 auto;
6632     display: -webkit-box;
6633     display: -ms-flexbox;
6634     display: flex;
6635     -webkit-box-align: center;
6636         -ms-flex-align: center;
6637             align-items: center;
6638     overflow: hidden;
6639 }
6640
6641 .ideditor[dir='ltr'] .layer-list .indented label {
6642     padding-left: 24px;
6643 }
6644 .ideditor[dir='rtl'] .layer-list .indented label {
6645     padding-right: 24px;
6646 }
6647
6648 .ideditor .layer-list label > span {
6649     display: block;
6650     overflow: hidden;
6651     white-space: nowrap;
6652     -o-text-overflow: ellipsis;
6653        text-overflow: ellipsis;
6654     -webkit-box-flex: 1;
6655         -ms-flex-positive: 1;
6656             flex-grow: 1;
6657 }
6658
6659 .ideditor .layer-list input.list-item-input {
6660     height: 2.2em;
6661     padding: 0px 4px;
6662     width: 50%;
6663     min-width: 160px;
6664 }
6665
6666 .ideditor .map-data-pane .layer-list button,
6667 .ideditor .background-pane .layer-list button {
6668     border-left: 1px solid #ccc;
6669     border-radius: 0;
6670     padding-left: 4px;
6671     padding-right: 4px;
6672 }
6673 .ideditor[dir='rtl'] .map-data-pane .layer-list button,
6674 .ideditor[dir='rtl'] .background-pane .layer-list button {
6675     border-left: none;
6676     border-right: 1px solid #ccc;
6677 }
6678
6679 .ideditor .map-data-pane .layer-list button .icon,
6680 .ideditor .background-pane .layer-list button .icon {
6681     opacity: 0.5;
6682 }
6683
6684 .ideditor .map-data-pane .layer-list button:last-of-type,
6685 .ideditor .background-pane .layer-list button:last-of-type {
6686     border-radius: 0 3px 3px 0;
6687 }
6688 .ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
6689 .ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
6690     border-radius: 3px 0 0 3px;
6691 }
6692
6693 .ideditor .map-data-pane .vectortile-container .vectortile-header {
6694     padding-bottom: 5px;
6695 }
6696 .ideditor .map-data-pane .vectortile-container .vectortile-footer {
6697     padding-bottom: 10px;
6698 }
6699
6700
6701 /* Issues
6702 ------------------------------------------------------- */
6703 .ideditor .issue {
6704     overflow: hidden;
6705 }
6706 .ideditor .issue .issue-label,
6707 .ideditor .issue-label .issue-text {
6708     width: 100%;
6709     display: -webkit-box;
6710     display: -ms-flexbox;
6711     display: flex;
6712     -webkit-box-orient: horizontal;
6713     -webkit-box-direction: normal;
6714         -ms-flex-flow: row nowrap;
6715             flex-flow: row nowrap;
6716     cursor: pointer;
6717     text-align: initial;
6718     background: none;
6719 }
6720
6721 .ideditor .issue-text .issue-icon {
6722     -webkit-box-flex: 0;
6723         -ms-flex: 0 0 auto;
6724             flex: 0 0 auto;
6725     padding: 5px 7px;
6726 }
6727 .ideditor .issue-text .issue-message {
6728     -webkit-box-flex: 1;
6729         -ms-flex: 1 1 auto;
6730             flex: 1 1 auto;
6731     padding: 5px 0;
6732 }
6733 .ideditor .issue-label .issue-autofix {
6734     -webkit-box-flex: 0;
6735         -ms-flex: 0 0 auto;
6736             flex: 0 0 auto;
6737     padding: 5px 8px;
6738 }
6739 .ideditor .issue-label .issue-info-button {
6740     height: unset;
6741     width: 32px;
6742     -webkit-box-flex: 0;
6743         -ms-flex: 0 0 auto;
6744             flex: 0 0 auto;
6745     border-left: 1px solid #ccc;
6746     background-color: rgba(0,0,0,0);
6747 }
6748 .ideditor[dir='rtl'] .issue-label .issue-info-button {
6749     border-left: 0;
6750     border-right: 1px solid #ccc;
6751 }
6752 .ideditor .issue-container .issue-label .issue-info-button .icon {
6753     opacity: 0.5;
6754 }
6755 .ideditor .issue-container.active .issue-label .issue-info-button .icon {
6756     opacity: 0.7;
6757 }
6758 .ideditor .issue-label .issue-info-button:last-child {
6759     border-radius: 0 4px 4px 0;
6760 }
6761 .ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
6762     border-radius: 4px 0 0 4px;
6763 }
6764
6765 .ideditor button.autofix.action {
6766     -webkit-box-flex: 0;
6767         -ms-flex: 0 0 20px;
6768             flex: 0 0 20px;
6769     height: 20px;
6770     width: 20px;
6771     background: #7092ff;
6772     color: #fff;
6773 }
6774 .ideditor button.autofix.action:focus,
6775 .ideditor button.autofix.action:active,
6776 .ideditor button.autofix.action.active {
6777     background: #597be7;
6778 }
6779 @media (hover: hover) {
6780     .ideditor button.autofix.action:hover {
6781         background: #597be7;
6782     }
6783 }
6784
6785 /* fix all */
6786 .ideditor .autofix-all {
6787     display: -webkit-box;
6788     display: -ms-flexbox;
6789     display: flex;
6790     -webkit-box-orient: horizontal;
6791     -webkit-box-direction: normal;
6792         -ms-flex-flow: row nowrap;
6793             flex-flow: row nowrap;
6794     -webkit-box-pack: end;
6795         -ms-flex-pack: end;
6796             justify-content: flex-end;
6797     margin-top: -25px;
6798     padding-bottom: 5px;
6799 }
6800 .ideditor .autofix-all-link-text {
6801     padding: 0;
6802 }
6803 .ideditor .autofix-all-link-icon svg {
6804     margin: 0 9px;
6805     background: currentColor;
6806     border-radius: 4px;
6807 }
6808 .ideditor .autofix-all-link-icon svg use {
6809     color: #fff;
6810 }
6811
6812 /* warning styles */
6813 .ideditor .warnings-list,
6814 .ideditor .warnings-list *,
6815 .ideditor .issue-container.active .issue.severity-warning,
6816 .ideditor .issue-container.active .issue.severity-warning * {
6817     border-color: #fb2;
6818 }
6819
6820 .ideditor .warnings-list .issue.severity-warning .issue-label,
6821 .ideditor .issue.severity-warning .issue-fix-list,
6822 .ideditor .warning-section {
6823     background: #ffc;
6824 }
6825
6826 .ideditor .issue-container.active .issue.severity-warning .issue-label {
6827     background: #ffa;
6828 }
6829
6830 .ideditor .issue.severity-warning .issue-icon {
6831     color: #f90;
6832 }
6833
6834 .ideditor .issue.severity-warning .issue-fix-item button.actionable,
6835 .ideditor .issue-container.active .issue.severity-warning .issue-info-button {
6836     color: #b15500;
6837     fill: #b15500;
6838 }
6839 .ideditor .warnings-list .issue.severity-warning .issue-label:active,
6840 .ideditor .warnings-list .issue.severity-warning .issue-label:focus,
6841 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
6842 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
6843     background: #ff8;
6844 }
6845 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
6846 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
6847 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
6848 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
6849     color: #7f3d00;
6850     fill: #7f3d00;
6851 }
6852 @media (hover: hover) {
6853     .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
6854     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
6855         background: #ff8;
6856     }
6857     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
6858     .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
6859         color: #7f3d00;
6860         fill: #7f3d00;
6861     }
6862 }
6863
6864
6865 /* error styles */
6866 .ideditor .errors-list,
6867 .ideditor .errors-list *,
6868 .ideditor .issue-container.active .issue.severity-error,
6869 .ideditor .issue-container.active .issue.severity-error * {
6870     border-color: #f77;
6871 }
6872
6873 .ideditor .errors-list .issue.severity-error .issue-label,
6874 .ideditor .issue.severity-error .issue-fix-list,
6875 .ideditor .error-section {
6876     background: #ffd6d6;
6877 }
6878
6879 .ideditor .issue-container.active .issue.severity-error .issue-label {
6880     background: #ffc6c6;
6881 }
6882
6883 .ideditor .issue.severity-error .issue-fix-item button.actionable,
6884 .ideditor .issue-container.active .issue.severity-error .issue-info-button {
6885     color: #b91201;
6886     fill: #b91201;
6887 }
6888 .ideditor .issue.severity-error .issue-icon {
6889     color: #dd1400;
6890 }
6891 .ideditor .errors-list .issue.severity-error .issue-label:active,
6892 .ideditor .errors-list .issue.severity-error .issue-label:focus,
6893 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
6894 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
6895     background: #ffb6b6;
6896 }
6897 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
6898 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
6899 .ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
6900 .ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
6901     color: #840c00;
6902     fill: #840c00;
6903 }
6904 @media (hover: hover) {
6905     .ideditor .errors-list .issue.severity-error .issue-label:hover,
6906     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
6907         background: #ffb6b6;
6908     }
6909     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
6910     .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
6911         color: #840c00;
6912         fill: #840c00;
6913     }
6914 }
6915
6916
6917 /* Issues Pane */
6918 .ideditor .issues-options-container {
6919     display: table;
6920 }
6921 .ideditor .issues-option {
6922     display: table-row;
6923 }
6924 .ideditor .issues-option-title {
6925     display: table-cell;
6926     font-weight: bold;
6927     padding-right: 10px;
6928 }
6929 .ideditor[dir='rtl'] .issues-option-title {
6930     padding-right: 0;
6931     padding-left: 10px;
6932 }
6933 .ideditor .issues-option label {
6934     display: table-cell;
6935     padding: 0 10px;
6936     white-space: nowrap;
6937 }
6938
6939 .ideditor .layer-list.issues-list li.issue {
6940     border-color: inherit;    /* override .layer-list styles */
6941     color: inherit;
6942     height: unset;
6943 }
6944
6945 .ideditor .layer-list.issue-rules-list,
6946 .ideditor .layer-list.issues-list,
6947 .ideditor .layer-list.layer-feature-list {
6948     margin-bottom: 0;
6949 }
6950 .ideditor .section-footer {
6951     display: -webkit-box;
6952     display: -ms-flexbox;
6953     display: flex;
6954     -webkit-box-orient: horizontal;
6955     -webkit-box-direction: normal;
6956         -ms-flex-flow: row nowrap;
6957             flex-flow: row nowrap;
6958     -webkit-box-pack: end;
6959         -ms-flex-pack: end;
6960             justify-content: flex-end;
6961     height: 30px;
6962 }
6963 .ideditor .section-footer a {
6964     padding: 5px;
6965 }
6966
6967 .ideditor .section-issues-status .box {
6968     border-radius: 4px;
6969     border: 1px solid #72d979;
6970     background: #c6ffca;
6971     padding: 5px !important;
6972     display: -webkit-box;
6973     display: -ms-flexbox;
6974     display: flex;
6975 }
6976 .ideditor .section-issues-status .icon {
6977     color: #05ac10;
6978 }
6979
6980 .ideditor input.square-degrees-input {
6981     padding: 2px !important; /* important needed for rtl */
6982     width: 3em;
6983     height: 2em;
6984     text-align: center;
6985     background: rgba(0,0,0,0);
6986     color: currentColor;
6987 }
6988
6989
6990 /* Entity Issues List */
6991 .ideditor .section-entity-issues .issue-container .issue {
6992     border-radius: 4px;
6993     border: 1px solid #ccc;
6994     background: #f6f6f6;
6995 }
6996 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
6997 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
6998 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
6999 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
7000     background: #f1f1f1;
7001 }
7002 @media (hover: hover) {
7003     .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
7004     .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
7005         background: #f1f1f1;
7006     }
7007 }
7008 .ideditor .section-entity-issues .issue .issue-label .issue-text {
7009     padding-right: 10px;
7010 }
7011 .ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
7012     padding-right: unset;
7013     padding-left: 10px;
7014 }
7015
7016 .ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
7017     font-weight: bold;
7018 }
7019 .ideditor .section-entity-issues .issue-container:not(:last-of-type) {
7020     margin-bottom: 5px;
7021 }
7022 .ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
7023     margin-top: 10px;
7024 }
7025 .ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
7026     margin-bottom: 10px;
7027 }
7028
7029 /* fixes */
7030 .ideditor .section-entity-issues .issue-fix-list {
7031     border-top: 1px solid;
7032     border-color: inherit;
7033 }
7034 .ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
7035     display: none;
7036 }
7037
7038 .ideditor li.issue-fix-item button {
7039     padding: 2px 10px 2px 20px;
7040     background: transparent;
7041     width: 100%;
7042     text-align: initial;
7043 }
7044 .ideditor[dir='rtl'] li.issue-fix-item button {
7045     padding: 2px 20px 2px 10px;
7046 }
7047 .ideditor li.issue-fix-item:first-of-type button {
7048     padding-top: 5px;
7049 }
7050 .ideditor li.issue-fix-item:last-of-type button {
7051     padding-bottom: 5px;
7052 }
7053
7054 .ideditor li.issue-fix-item button .fix-message {
7055     padding: 0 10px;
7056     vertical-align: middle;
7057 }
7058
7059 .ideditor li.issue-fix-item button.actionable {
7060     cursor: pointer;
7061 }
7062 .ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
7063     color: #555;
7064     fill: #555;
7065 }
7066
7067 .ideditor .issue-container:not(.active) ul.issue-fix-list {
7068     display: none;
7069 }
7070
7071 .ideditor .issue-info {
7072     -webkit-box-flex: 1;
7073         -ms-flex: 1 1 auto;
7074             flex: 1 1 auto;
7075     width: 100%;
7076     overflow: hidden;
7077     display: none;
7078     padding: 10px 0;
7079 }
7080 .ideditor .issue-info.expanded {
7081     display: inline-block;
7082 }
7083
7084 .ideditor .issue-info .issue-reference {
7085     margin-bottom: 10px;
7086 }
7087 .ideditor .issue-info .tagDiff-table {
7088     min-width: 60%;
7089     width: unset;
7090     border: 1px solid #ccc;
7091 }
7092 .ideditor .issue-info .tagDiff-row {
7093     border: 1px solid #ccc;
7094 }
7095 .ideditor .issue-info .tagDiff-cell {
7096     padding: 2px 10px;
7097     font-family: monospace;
7098     font-size: 10px;
7099     border: 1px solid #ccc;
7100 }
7101 .ideditor .issue-info .tagDiff-cell-add {
7102     background: #dfd;
7103 }
7104 .ideditor .issue-info .tagDiff-cell-remove {
7105     background: #fdd;
7106 }
7107
7108
7109 /* Background - Display Options Sliders
7110 ------------------------------------------------------- */
7111 .ideditor .display-options-container {
7112     padding: 10px;
7113 }
7114
7115 .ideditor .display-control h5 {
7116     padding-bottom: 0;
7117     padding-top: 10px;
7118 }
7119
7120 .ideditor .display-control h5 span {
7121     margin: 5px;
7122 }
7123
7124 .ideditor .display-control .control-wrap {
7125     display: -webkit-box;
7126     display: -ms-flexbox;
7127     display: flex;
7128     -webkit-box-align: center;
7129         -ms-flex-align: center;
7130             align-items: center;
7131     width: 100%;
7132 }
7133 .ideditor .display-control .display-option-input {
7134     height: 20px;
7135     -webkit-box-flex: 1;
7136         -ms-flex: 1 1 100%;
7137             flex: 1 1 100%;
7138 }
7139
7140 .ideditor .display-control button {
7141     height: 30px;
7142     width: 30px;
7143     margin-left: 5px;
7144     margin-right: 0px;
7145     vertical-align: text-bottom;
7146     border-radius: 4px;
7147     -webkit-box-flex: 0;
7148         -ms-flex: 0 0 auto;
7149             flex: 0 0 auto;
7150 }
7151 .ideditor[dir='rtl'] .display-control button {
7152     margin-left: 0px;
7153     margin-right: 5px;
7154 }
7155
7156
7157 /* Background - Adjust Alignment
7158 ------------------------------------------------------- */
7159 .ideditor .background-pane .nudge-container {
7160     border: 1px solid #ccc;
7161     border-radius: 4px;
7162     padding: 10px;
7163     position: relative;
7164 }
7165
7166 .ideditor .nudge-container .nudge-controls-wrap {
7167     position: relative;
7168     width: 100%;
7169     overflow: hidden;
7170 }
7171
7172 .ideditor .nudge-container .nudge-outer-rect {
7173     background-color: #eee;
7174     border: 1px solid #ccc;
7175     border-radius: 2px;
7176     padding: 20px 0;
7177     display: -webkit-box;
7178     display: -ms-flexbox;
7179     display: flex;
7180     -webkit-box-pack: center;
7181         -ms-flex-pack: center;
7182             justify-content: center;
7183     -webkit-box-align: center;
7184         -ms-flex-align: center;
7185             align-items: center;
7186     margin: 45px;
7187     cursor: move;
7188     /* prevent scrolling pane while dragging on touchscreen */
7189     -ms-touch-action: none;
7190         touch-action: none;
7191     /* disable drag-to-select */
7192     -webkit-user-select: none;
7193        -moz-user-select: none;
7194         -ms-user-select: none;
7195             user-select: none;
7196     position: relative;
7197 }
7198
7199 .ideditor .nudge-container .nudge-inner-rect {
7200     background-color: #fff;
7201     border: 1px solid #ccc;
7202     border-radius: 2px;
7203     width: 65%;
7204     min-height: 20px;
7205 }
7206
7207 .ideditor .nudge-container .nudge::after {
7208     content: '';
7209     display: block;
7210     position: absolute;
7211     margin: auto;
7212     left: 0; right: 0; top: 0; bottom: 0;
7213     height: 0;
7214     width: 0;
7215 }
7216
7217 .ideditor .nudge-container input {
7218     width: 100%;
7219     padding: 2px;
7220     text-align: center;
7221     border: 0;
7222 }
7223
7224 .ideditor .nudge-container input.error {
7225     border: 1px solid #ff7878;
7226     border-radius: 2px;
7227     background: #ffb;
7228 }
7229
7230 .ideditor .nudge-container button {
7231     position: absolute;
7232     height: 40px;
7233     width: 40px;
7234 }
7235 .ideditor .nudge-container button.right,
7236 .ideditor .nudge-container button.left {
7237     top: 0;
7238     bottom: 0;
7239     margin-top: auto;
7240     margin-bottom: auto;
7241     vertical-align: middle;
7242 }
7243 .ideditor .nudge-container button.right {
7244     right: 0;
7245 }
7246 .ideditor .nudge-container button.left {
7247     left: 0;
7248 }
7249 .ideditor .nudge-container button.top,
7250 .ideditor .nudge-container button.bottom {
7251     left: 0;
7252     right: 0;
7253     margin-left: auto;
7254     margin-right: auto;
7255 }
7256 .ideditor .nudge-container button.top {
7257     top: 0;
7258 }
7259 .ideditor .nudge-container button.bottom {
7260     bottom: 0;
7261 }
7262
7263 .ideditor .nudge-container button.nudge-reset {
7264     right: 0;
7265     bottom: 0;
7266 }
7267
7268 .ideditor .nudge-surface {
7269    position: absolute;
7270    z-index: 5000;
7271    left: 0;
7272    top: 0;
7273    width: 100%;
7274    height: 100%;
7275    background-color: transparent;
7276    cursor: move;
7277 }
7278
7279 .ideditor .background-pane .nudge.right::after {
7280     border-top: 5px solid transparent;
7281     border-bottom: 5px solid transparent;
7282     border-left: 5px solid #222;
7283 }
7284
7285 .ideditor .background-pane .nudge.left::after {
7286     border-top: 5px solid transparent;
7287     border-bottom: 5px solid transparent;
7288     border-right: 5px solid #222;
7289 }
7290
7291 .ideditor .background-pane .nudge.top::after {
7292     border-right: 5px solid transparent;
7293     border-left: 5px solid transparent;
7294     border-bottom: 5px solid #222;
7295 }
7296
7297 .ideditor .background-pane .nudge.bottom::after {
7298     border-right: 5px solid transparent;
7299     border-left: 5px solid transparent;
7300     border-top: 5px solid #222;
7301 }
7302
7303
7304 /* Side Panes - Background / Map Data / Help
7305 ------------------------------------------------------- */
7306 .ideditor .map-panes {
7307     -webkit-box-flex: 0;
7308         -ms-flex: 0 1 auto;
7309             flex: 0 1 auto;
7310     position: relative;
7311     height: 100%;
7312     max-width: 100%;
7313 }
7314 .ideditor .map-pane {
7315     position: relative;
7316     top: 0;
7317     width: 400px;
7318     max-width: 100%;
7319     height: 100%;
7320     z-index: 10;
7321     display: -webkit-box;
7322     display: -ms-flexbox;
7323     display: flex;
7324     -webkit-box-orient: vertical;
7325     -webkit-box-direction: normal;
7326         -ms-flex-direction: column;
7327             flex-direction: column;
7328 }
7329
7330 .ideditor .map-pane.help-pane {
7331     width: 600px;
7332 }
7333
7334 .ideditor .pane-heading {
7335     display: -webkit-box;
7336     display: -ms-flexbox;
7337     display: flex;
7338     -webkit-box-orient: horizontal;
7339     -webkit-box-direction: normal;
7340         -ms-flex-flow: row nowrap;
7341             flex-flow: row nowrap;
7342     -webkit-box-pack: justify;
7343         -ms-flex-pack: justify;
7344             justify-content: space-between;
7345     border-bottom: 1px solid #ccc;
7346     -webkit-box-flex: 0;
7347         -ms-flex: 0 0 auto;
7348             flex: 0 0 auto;
7349 }
7350
7351 .ideditor .pane-heading h2 {
7352     margin: 14px 20px;
7353 }
7354
7355 .ideditor .pane-heading button {
7356     width: 40px;
7357     border-radius: 0;
7358 }
7359
7360 .ideditor .pane-content {
7361     height: 100%;
7362     padding: 10px 50px 20px 20px;
7363     overflow-x: hidden;
7364     overflow-y: scroll;
7365     position: relative;
7366 }
7367 .ideditor[dir='rtl'] .pane-content {
7368     padding: 10px 20px 20px 50px;
7369 }
7370
7371 .ideditor .help-pane .pane-content > div {
7372     padding-bottom: 15px;
7373 }
7374
7375
7376 /* Help
7377 ------------------------------------------------------- */
7378 .ideditor .help-pane p {
7379     font-size: 15px;
7380     margin-bottom: 20px;
7381 }
7382
7383 .ideditor .help-pane .left-content .icon.inline,
7384 .ideditor .curtain-tooltip .icon.inline {
7385     margin-right: 0;
7386     margin-left: 0;
7387     height: 1.34em;
7388     width: 1.34em;
7389 }
7390
7391 .ideditor .help-pane .toc {
7392     width: 100%;
7393     max-width: 200px;
7394     float: right;
7395     margin-left: 20px;
7396     margin-bottom: 20px;
7397     padding-left: 5px;
7398 }
7399
7400 .ideditor .help-pane .toc li a,
7401 .ideditor .help-pane .nav a {
7402     display: block;
7403     border: 1px solid #ccc;
7404     padding: 5px 10px;
7405 }
7406
7407 .ideditor .help-pane .toc li a {
7408     border-bottom: 0;
7409 }
7410 .ideditor .help-pane .toc li a:focus,
7411 .ideditor .help-pane .nav a:focus,
7412 .ideditor .help-pane .toc li a:active,
7413 .ideditor .help-pane .nav a:active {
7414     background: #ececec;
7415 }
7416 @media (hover: hover) {
7417     .ideditor .help-pane .toc li a:hover,
7418     .ideditor .help-pane .nav a:hover {
7419         background: #ececec;
7420     }
7421 }
7422
7423 .ideditor .help-pane .toc li a.selected {
7424     background: #e8ebff;
7425 }
7426
7427 .ideditor .help-pane .toc li:first-child a {
7428     border-radius: 4px 4px 0 0;
7429 }
7430
7431 .ideditor .help-pane .toc li:nth-last-child(3) a {
7432     border-bottom: 1px solid #ccc;
7433     border-radius: 0 0 4px 4px
7434 }
7435
7436 .ideditor .help-pane .toc li.shortcuts a,
7437 .ideditor .help-pane .toc li.walkthrough a {
7438     overflow: hidden;
7439     margin-top: 10px;
7440     border-bottom: 1px solid #ccc;
7441     border-radius: 4px;
7442 }
7443
7444 .ideditor .help-pane .toc li.walkthrough a {
7445     text-align: center;
7446 }
7447
7448 .ideditor .help-pane .nav {
7449     position: relative;
7450     padding-bottom: 30px;
7451 }
7452
7453 .ideditor .help-pane .nav a {
7454     float: left;
7455     width: 50%;
7456     text-align: center;
7457 }
7458
7459 .ideditor .help-pane .nav a:first-child {
7460     border-radius: 4px 0 0 4px;
7461 }
7462
7463 .ideditor .help-pane .nav a:last-child:not(:only-child) {
7464     border-radius: 0 4px 4px 0;
7465     border-left: 0;
7466 }
7467
7468 .ideditor .help-pane .nav a:only-child {
7469     width: 100%;
7470     border-radius: 4px;
7471 }
7472
7473
7474 /* Inspector (hover styles)
7475 ------------------------------------------------------- */
7476 .ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
7477 .ideditor .inspector-hover .form-field-input-wrap .label,
7478 .ideditor .inspector-hover .form-field-input-multicombo .chiplist,
7479 .ideditor .inspector-hover .form-field-button,
7480 .ideditor .inspector-hover .structure-extras-wrap,
7481 .ideditor .inspector-hover .comments-container .comment,
7482 .ideditor .inspector-hover button,
7483 .ideditor .inspector-hover input,
7484 .ideditor .inspector-hover textarea,
7485 .ideditor .inspector-hover label {
7486     background: #ececec;
7487 }
7488 .ideditor .inspector-hover .preset-list-button,
7489 .ideditor .inspector-hover .tag-row input {
7490     background: #f6f6f6;
7491 }
7492
7493 .ideditor .inspector-hover a,
7494 .ideditor .inspector-hover .form-field-input-multicombo .chip,
7495 .ideditor .inspector-hover .form-field-input-check span,
7496 .ideditor .inspector-hover .section-entity-issues .issue .icon {
7497     color: #666;
7498 }
7499
7500 .ideditor .inspector-hover .form-field-input-multicombo .chip {
7501     background: #eee;
7502     border: 1px solid #ccc;
7503 }
7504
7505 /* no scrollbars */
7506 .ideditor .inspector-hover div {
7507     overflow-x: visible;
7508     overflow-y: visible;
7509 }
7510
7511 /* hide and remove from layout */
7512 .ideditor .inspector-hidden,
7513 .ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
7514 .ideditor .inspector-hover label input[type="checkbox"],
7515 .ideditor .inspector-hover label input[type="radio"],
7516 .ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
7517 .ideditor .inspector-hover .form-field-input-radio label,
7518 .ideditor .inspector-hover .form-field-input-radio label span,
7519 .ideditor .inspector-hover .form-field-input-radio label.remove .icon,
7520 .ideditor .inspector-hover .add-row,
7521 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
7522 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
7523     display: none;
7524 }
7525
7526 /* hide but preserve in layout */
7527 .ideditor .inspector-hover .combobox-caret,
7528 .ideditor .inspector-hover .header button,
7529 .ideditor .inspector-hover .quick-links,
7530 .ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
7531 .ideditor .inspector-hover .hide-toggle:before,
7532 .ideditor .inspector-hover .more-fields,
7533 .ideditor .inspector-hover .field-label button,
7534 .ideditor .inspector-hover .tag-row button,
7535 .ideditor .inspector-hover .footer * {
7536     opacity: 0;
7537 }
7538
7539 /* Unstyle the active entity issue on hover */
7540 .ideditor .inspector-hover .section-entity-issues .issue-container.active {
7541     margin-top: 1px;
7542     margin-bottom: 1px;
7543 }
7544 .ideditor .inspector-hover .section-entity-issues .issue-container * {
7545     border-color: #ccc !important;
7546 }
7547 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
7548     border-bottom: 0;
7549 }
7550 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
7551     font-weight: normal;
7552 }
7553
7554
7555 /* Styles for raw tag inspector on hover */
7556 .ideditor .inspector-hover .tag-row .key-wrap,
7557 .ideditor .inspector-hover .tag-row .value-wrap {
7558     height: 31px;
7559 }
7560
7561 .ideditor .inspector-hover .tag-row:first-child input.value {
7562     border-top-right-radius: 4px;
7563 }
7564 .ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
7565     border-top-right-radius: 0;
7566     border-top-left-radius: 4px;
7567 }
7568
7569 .ideditor .inspector-hover .tag-row:last-child input.value {
7570     border-bottom-right-radius: 4px;
7571 }
7572 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
7573     border-bottom-right-radius: 0;
7574     border-bottom-left-radius: 4px;
7575 }
7576
7577 .ideditor .inspector-hover .tag-row:last-child input.key {
7578     border-bottom-left-radius: 4px;
7579 }
7580 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
7581     border-bottom-left-radius: 0;
7582     border-bottom-right-radius: 4px;
7583 }
7584
7585 .ideditor .inspector-hover .more-fields {
7586     max-height: 0;
7587     margin-bottom: -10px;
7588 }
7589
7590 /* Unstyle button fields */
7591 .ideditor .inspector-hover .form-field-input-radio label.active,
7592 .ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
7593     opacity: 1;
7594     background-color: transparent;
7595     color: #666;
7596     padding-left: 0;
7597     border-width: 0;
7598 }
7599 .ideditor .inspector-hover .form-field-input-radio button.active {
7600     padding-left: 10px;
7601 }
7602
7603 /* Show placeholder on hover for radio buttons */
7604 .ideditor .inspector-hover .form-field-input-radio {
7605     border: 1px solid #ccc;
7606     border-top: 0;
7607     border-radius: 0 0 4px 4px;
7608 }
7609 .ideditor .inspector-hover .form-field-input-radio .placeholder {
7610     opacity: 1;
7611     color: #666;
7612     padding: 5px 10px;
7613     width: 100%;
7614     height: auto;
7615     border: 0;
7616 }
7617 .ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
7618     border: 0;
7619 }
7620
7621
7622 /* Raster Background Tiles
7623 ------------------------------------------------------- */
7624 .ideditor img.tile {
7625     position: absolute;
7626     -webkit-transform-origin: 0 0;
7627         -ms-transform-origin: 0 0;
7628             transform-origin: 0 0;
7629
7630     -webkit-user-select: none;
7631
7632        -moz-user-select: none;
7633
7634         -ms-user-select: none;
7635
7636             user-select: none;
7637
7638     pointer-events: none;
7639
7640     -webkit-user-drag: none;
7641
7642     opacity: 0;
7643
7644     -webkit-transition: opacity 200ms linear;
7645
7646     -o-transition: opacity 200ms linear;
7647
7648     transition: opacity 200ms linear;
7649 }
7650
7651 .ideditor img.tile-loaded {
7652     opacity: 1;
7653 }
7654
7655 .ideditor img.tile-removing {
7656     opacity: 0;
7657 }
7658
7659 .ideditor .tile-label-debug {
7660     font-size: 10px;
7661     background: rgba(0, 0, 0, 0.7);
7662     color: #fff;
7663     position: absolute;
7664     text-align: center;
7665     padding: 5px;
7666     border-radius: 3px;
7667     z-index: 2;
7668     margin-left: -70px;
7669     margin-top: -20px;
7670
7671     -webkit-transform-origin: 0 0;
7672
7673         -ms-transform-origin: 0 0;
7674
7675             transform-origin: 0 0;
7676
7677     -webkit-user-select: none;
7678
7679        -moz-user-select: none;
7680
7681         -ms-user-select: none;
7682
7683             user-select: none;
7684 }
7685
7686 .ideditor img.tile-debug {
7687     outline: 1px solid red;
7688 }
7689
7690
7691 /* Map
7692 ------------------------------------------------------- */
7693 .ideditor .main-map {
7694     position: absolute;
7695     top: 0;
7696     left: 0;
7697     right: 0;
7698     bottom: 0;
7699     overflow: hidden;
7700     height: 100%;
7701     width: 100%;
7702     background: #000;
7703     -webkit-user-select: none;
7704        -moz-user-select: none;
7705         -ms-user-select: none;
7706             user-select: none;
7707     -ms-touch-action: none;
7708         touch-action: none;
7709     -webkit-touch-callout: none;
7710 }
7711 .ideditor .main-map * {
7712     -ms-touch-action: none;
7713         touch-action: none;
7714 }
7715
7716 .ideditor .supersurface {
7717     -webkit-transform-origin: 0 0;
7718         -ms-transform-origin: 0 0;
7719             transform-origin: 0 0;
7720 }
7721
7722 .ideditor .supersurface, .ideditor .layer {
7723     position: absolute;
7724     top: 0;
7725     left: 0;
7726     right: 0;
7727     bottom: 0;
7728 }
7729
7730
7731 /* Map-In-Map
7732 ------------------------------------------------------- */
7733 .ideditor .map-in-map {
7734     position: absolute;
7735     overflow: hidden;
7736     top: 10px;
7737     width: 200px;
7738     height: 150px;
7739     z-index: 2;
7740     background: #000;
7741     border: #aaa 1px solid;
7742     -webkit-box-shadow: 0 0 2em black;
7743             box-shadow: 0 0 2em black;
7744 }
7745 .ideditor[dir='ltr'] .map-in-map {
7746     left: 10px;
7747 }
7748 .ideditor[dir='rtl'] .map-in-map {
7749     right: 10px;
7750 }
7751
7752 .ideditor .map-in-map-tiles {
7753     -webkit-transform-origin: 0 0;
7754         -ms-transform-origin: 0 0;
7755             transform-origin: 0 0;
7756     -webkit-user-select: none;
7757        -moz-user-select: none;
7758         -ms-user-select: none;
7759             user-select: none;
7760 }
7761
7762 .ideditor .map-in-map-viewport,
7763 .ideditor .map-in-map-data {
7764     top: 0;
7765     left: 0;
7766     overflow: hidden;
7767     height: 100%;
7768     width: 100%;
7769 }
7770
7771 .ideditor .map-in-map-viewport {
7772     position: absolute;
7773 }
7774
7775 .ideditor .map-in-map-data {
7776     position: relative;
7777     z-index: 10;
7778 }
7779
7780 .ideditor .map-in-map-bbox {
7781     fill: none;
7782     stroke: rgba(255, 255, 0, 0.75);
7783     stroke-width: 1;
7784     shape-rendering: crispEdges;
7785 }
7786
7787 .ideditor .map-in-map-bbox.thick {
7788     stroke-width: 5;
7789 }
7790
7791
7792 /* Debug Data
7793 ------------------------------------------------------- */
7794 .ideditor .debug {
7795     stroke: currentColor;
7796     fill: none;
7797     stroke-width: 2;
7798 }
7799 .ideditor .map-in-map-data .debug {
7800     stroke-width: 1;
7801 }
7802
7803 .ideditor .nocolor { color: rgba(0, 0, 0, 0); }
7804 .ideditor .red     { color: rgba(255, 0, 0, 0.75); }
7805 .ideditor .green   { color: rgba(0, 255, 0, 0.75); }
7806 .ideditor .blue    { color: rgba(176, 176, 255, 0.75); }
7807 .ideditor .yellow  { color: rgba(255, 255, 0, 0.75); }
7808 .ideditor .cyan    { color: rgba(0, 255, 255, 0.75); }
7809 .ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
7810 .ideditor .orange  { color: rgba(255, 153, 0, 0.75); }
7811 .ideditor .pink    { color: rgba(255, 0, 153, 0.75); }
7812 .ideditor .purple  { color: rgba(153, 0, 255, 0.75); }
7813
7814 .ideditor .debug-legend {
7815     position: absolute;
7816     top: 70px;
7817     right: 80px;
7818     padding: 5px;
7819     border-radius: 4px;
7820     pointer-events: none;
7821 }
7822
7823 .ideditor .debug-legend-item {
7824     padding-right: 5px;
7825 }
7826 .ideditor .debug-legend-item:before {
7827     content: "\25A0";
7828     padding: 0 5px;
7829 }
7830
7831
7832 /* Information Panels
7833 ------------------------------------------------------- */
7834 .ideditor .info-panels {
7835     display: -webkit-box;
7836     display: -ms-flexbox;
7837     display: flex;
7838     -webkit-box-orient: horizontal;
7839     -webkit-box-direction: normal;
7840         -ms-flex-flow: row wrap-reverse;
7841             flex-flow: row wrap-reverse;
7842     -webkit-box-pack: end;
7843         -ms-flex-pack: end;
7844             justify-content: flex-end;
7845     width: 100%;
7846     z-index: 1;
7847     -ms-user-select: element;
7848     pointer-events: none;
7849     overflow: hidden;
7850 }
7851
7852 .ideditor .panel-container h1,
7853 .ideditor .panel-container h2,
7854 .ideditor .panel-container h3,
7855 .ideditor .panel-container h4,
7856 .ideditor .panel-container h5 {
7857     display: inline-block;
7858     margin-bottom: 0;
7859 }
7860
7861 .ideditor .panel-container h1,
7862 .ideditor .panel-container h2,
7863 .ideditor .panel-container h3 {
7864     color: #ff8;
7865 }
7866
7867 .ideditor .panel-container {
7868     -webkit-box-flex: 0;
7869         -ms-flex: 0 0 auto;
7870             flex: 0 0 auto;
7871     margin: 0 2px 2px 0;
7872     border-radius: 4px;
7873     border: 1px solid rgba(0, 0, 0, 0.75);
7874     padding-bottom: 10px;
7875     width: 250px;
7876     max-width: 100%;
7877     pointer-events: auto;
7878 }
7879
7880 .ideditor .panel-container .panel-title {
7881     border-radius: 4px 4px 0 0;
7882 }
7883
7884 .ideditor .panel-title {
7885     padding: 5px 10px;
7886     display: -webkit-box;
7887     display: -ms-flexbox;
7888     display: flex;
7889     -webkit-box-pack: justify;
7890         -ms-flex-pack: justify;
7891             justify-content: space-between;
7892 }
7893
7894 .ideditor .panel-title button.close {
7895     padding: 2px;
7896     background: none;
7897     color: #ddd;
7898 }
7899 .ideditor[dir='rtl'] .panel-title button.close {
7900     float: left;
7901 }
7902 .ideditor .panel-title button.close:focus,
7903 .ideditor .panel-title button.close:active {
7904     color: #fff;
7905 }
7906 @media (hover: hover) {
7907     .ideditor .panel-title button.close:hover {
7908         color: #fff;
7909     }
7910 }
7911 .ideditor .panel-title button.close .icon {
7912     height: 20px;
7913     width: 16px;
7914 }
7915
7916 .ideditor .panel-content {
7917     padding: 5px 10px;
7918     position: relative;
7919 }
7920
7921 .ideditor .panel-content ul:empty {
7922     display: none;
7923 }
7924
7925 .ideditor .panel-content li span:not(.localized-text) {
7926     display: inline-block;
7927     white-space: nowrap;
7928     margin: 0 8px;
7929 }
7930
7931 .ideditor .panel-content .button {
7932     display: inline-block;
7933     background: #7092ff;
7934     border-radius: 2px;
7935     padding: 0 4px;
7936     margin-top: 10px;
7937     margin-right: 10px;
7938     color: #fff;
7939 }
7940 .ideditor[dir='rtl'] .panel-content .button {
7941     margin-right: auto;
7942     margin-left: 10px;
7943 }
7944
7945 .ideditor .panel-content-history .links a {
7946     margin-left: 8px;
7947 }
7948 .ideditor[dir='rtl'] .panel-content-history .links a {
7949     margin-left: auto;
7950     margin-right: 8px;
7951 }
7952 .ideditor .panel-content-history h4 {
7953     padding-bottom: 0;
7954 }
7955 .ideditor .panel-content-location .location-info {
7956     margin-top: 10px;
7957 }
7958
7959
7960 /* Map Footer
7961 ------------------------------------------------------- */
7962 .ideditor .map-footer {
7963     width: 100%;
7964     position: relative;
7965     border-radius: 0;
7966     pointer-events: none;
7967     display: -webkit-box;
7968     display: -ms-flexbox;
7969     display: flex;
7970     -webkit-box-orient: vertical;
7971     -webkit-box-direction: normal;
7972         -ms-flex-direction: column;
7973             flex-direction: column;
7974     -ms-user-select: element;
7975     -webkit-box-flex: 0;
7976         -ms-flex: 0 0 auto;
7977             flex: 0 0 auto;
7978 }
7979
7980 .ideditor .map-footer-bar {
7981     pointer-events: all;
7982     display: block;
7983     height: 2.5em;
7984     position: relative;
7985 }
7986
7987 .ideditor .main-footer-wrap,
7988 .ideditor .flash-wrap {
7989     display: -webkit-box;
7990     display: -ms-flexbox;
7991     display: flex;
7992     -webkit-box-flex: 0;
7993         -ms-flex: 0 0 100%;
7994             flex: 0 0 100%;
7995     -webkit-box-orient: horizontal;
7996     -webkit-box-direction: normal;
7997         -ms-flex-flow: row nowrap;
7998             flex-flow: row nowrap;
7999     -webkit-box-pack: justify;
8000         -ms-flex-pack: justify;
8001             justify-content: space-between;
8002     height: 100%;
8003     position: absolute;
8004     right: 0;
8005     left: 0;
8006 }
8007
8008 .ideditor .footer-show {
8009     bottom: 0px;
8010     -webkit-transition: bottom 75ms linear;
8011     -o-transition: bottom 75ms linear;
8012     transition: bottom 75ms linear;
8013 }
8014
8015 .ideditor .footer-hide {
8016     bottom: -100%;
8017     -webkit-transition: bottom 75ms linear;
8018     -o-transition: bottom 75ms linear;
8019     transition: bottom 75ms linear;
8020 }
8021
8022
8023 /* Attribution
8024 ------------------------------------------------------- */
8025 .ideditor .attribution-wrap {
8026     position: absolute;
8027     bottom: 5px;
8028     left: 5px;
8029     right: 5px;
8030     display: -webkit-box;
8031     display: -ms-flexbox;
8032     display: flex;
8033     -webkit-box-pack: justify;
8034         -ms-flex-pack: justify;
8035             justify-content: space-between;
8036     -webkit-box-align: end;
8037         -ms-flex-align: end;
8038             align-items: flex-end;
8039     z-index: 0;
8040 }
8041
8042 .ideditor .attribution-wrap * { pointer-events: all; }
8043
8044 .ideditor .attribution-wrap .base-layer-attribution,
8045 .ideditor .attribution-wrap .overlay-layer-attribution {
8046     color: #ccc;
8047     font-size: 10px;
8048 }
8049 .ideditor .attribution-wrap .overlay-layer-attribution {
8050     text-align: right;
8051 }
8052
8053 .ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
8054     content: '; ';
8055 }
8056
8057 .ideditor .attribution-wrap .attribution a,
8058 .ideditor .attribution-wrap .attribution a:visited {
8059     color: #ccf;
8060 }
8061 .ideditor .attribution-wrap .attribution a:focus,
8062 .ideditor .attribution-wrap .attribution a:hover {
8063     color: #aaf;
8064 }
8065 @media (hover: hover) {
8066     .ideditor .attribution-wrap .attribution a:hover {
8067         color: #aaf;
8068     }
8069 }
8070
8071 .ideditor .attribution-wrap .attribution .source-image {
8072     height: 20px;
8073     vertical-align: middle;
8074     border-radius: 3px;
8075 }
8076
8077 .ideditor .attribution-wrap .attribution span {
8078     margin: 0 3px;
8079 }
8080
8081
8082 /* Footer - Flash messages
8083 ------------------------------------------------------- */
8084 .ideditor .flash-content {
8085     display: -webkit-box;
8086     display: -ms-flexbox;
8087     display: flex;
8088     -webkit-box-flex: 1;
8089         -ms-flex: 1 0 auto;
8090             flex: 1 0 auto;
8091     -webkit-box-orient: horizontal;
8092     -webkit-box-direction: normal;
8093         -ms-flex-flow: row nowrap;
8094             flex-flow: row nowrap;
8095     -webkit-box-align: center;
8096         -ms-flex-align: center;
8097             align-items: center;
8098     padding: 2px;
8099 }
8100
8101 .ideditor .flash-icon {
8102     -webkit-box-flex: 0;
8103         -ms-flex: 0 0 auto;
8104             flex: 0 0 auto;
8105     width: 20px;
8106     height: 20px;
8107     margin: 0 8px;
8108 }
8109
8110 .ideditor .flash-icon circle {
8111     fill: #eee;
8112 }
8113 .ideditor .flash-icon.disabled circle {
8114     cursor: auto;
8115     fill: rgba(255,255,255,0.7);
8116 }
8117
8118 .ideditor .flash-icon use {
8119     color: #222;
8120 }
8121 .ideditor .flash-icon.disabled use,
8122 .ideditor .flash-icon.operation.disabled use {
8123     fill: rgba(32,32,32,0.7);
8124     color: rgba(40,40,40,0.7);
8125 }
8126
8127 .ideditor .flash-text {
8128     -webkit-box-flex: 1;
8129         -ms-flex: 1 1 auto;
8130             flex: 1 1 auto;
8131 }
8132
8133 /* Scale bar
8134 ------------------------------------------------------- */
8135 .ideditor .map-footer-bar .scale-block {
8136     vertical-align: bottom;
8137     width: 250px;
8138     -webkit-box-flex: 0;
8139         -ms-flex: 0 0 auto;
8140             flex: 0 0 auto;
8141     -webkit-user-select: none;
8142        -moz-user-select: none;
8143         -ms-user-select: none;
8144             user-select: none;
8145     height: 30px;
8146     -ms-flex-item-align: center;
8147         align-self: center;
8148 }
8149
8150 .ideditor .scale-block .scale {
8151     height: 100%;
8152     width: 100%;
8153     cursor: pointer;
8154     display: block;
8155 }
8156 .ideditor[dir='rtl'] .scale-block .scale {
8157     -webkit-transform: scaleX(-1);
8158         -ms-transform: scaleX(-1);
8159             transform: scaleX(-1);
8160 }
8161
8162 .ideditor .scale-block .scale-text {
8163     display: inline-block;
8164     position: absolute;
8165     color: #ccc;
8166     top: 0.45em;
8167 }
8168
8169 .ideditor .scale-block .scale path {
8170     fill: none;
8171     stroke: #ccc;
8172     stroke-width: 1;
8173     shape-rendering: crispEdges;
8174 }
8175
8176 /* Footer - About, Source Switcher
8177 ------------------------------------------------------- */
8178 .ideditor .map-footer-bar .info-block {
8179     -webkit-box-flex: 1;
8180         -ms-flex: 1 1 100%;
8181             flex: 1 1 100%;
8182     overflow: hidden;
8183 }
8184
8185 .ideditor .map-footer-list {
8186     display: -webkit-box;
8187     display: -ms-flexbox;
8188     display: flex;
8189     -webkit-box-orient: horizontal;
8190     -webkit-box-direction: normal;
8191         -ms-flex-flow: row nowrap;
8192             flex-flow: row nowrap;
8193     height: 100%;
8194     -webkit-box-pack: end;
8195         -ms-flex-pack: end;
8196             justify-content: flex-end;
8197 }
8198
8199 .ideditor .map-footer-list li {
8200     height: 100%;
8201     display: -webkit-box;
8202     display: -ms-flexbox;
8203     display: flex;
8204     -webkit-box-align: center;
8205         -ms-flex-align: center;
8206             align-items: center;
8207     white-space: nowrap;
8208     padding: 5px;
8209 }
8210 .ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
8211     border-right: 1px solid rgba(255,255,255,.5);
8212 }
8213 .ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
8214     border-left: 1px solid rgba(255,255,255,.5);
8215 }
8216 .ideditor .map-footer-list li:empty {
8217     display: none;
8218 }
8219
8220 .ideditor .map-footer-list a.chip {
8221     padding: 1px 4px 1px 4px;
8222     border-radius: 2px;
8223     color: #eee;
8224 }
8225 .ideditor .map-footer-list a.chip .icon {
8226     width: 14px;
8227     height: 14px;
8228     margin-top: -2px;
8229 }
8230 .ideditor .map-footer-list a.chip span.count {
8231     margin: 0 3px;
8232 }
8233
8234 .ideditor .source-switch a.chip.live {
8235     background: #d32232;
8236     color: #fff;
8237 }
8238
8239 .ideditor .feature-warning a.chip {
8240     background: #1e90ff;
8241 }
8242
8243 .ideditor .issues-info a.chip.resolved-count {
8244     background: #15911E;
8245 }
8246 .ideditor .issues-info a.chip.warnings-count {
8247     background: #DF8500;
8248 }
8249 .ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
8250     margin-right: 5px;
8251 }
8252 .ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
8253     margin-left: 5px;
8254 }
8255
8256 .ideditor .user-list a:not(:last-child):after {
8257     content: ', ';
8258 }
8259
8260 .ideditor .api-status {
8261     text-align: right;
8262     padding: 1px 10px;
8263     color: #eee;
8264     -webkit-box-flex: 1;
8265         -ms-flex: 1 1 auto;
8266             flex: 1 1 auto;
8267 }
8268 .ideditor[dir='rtl'] .api-status {
8269     text-align: left;
8270 }
8271 .ideditor .api-status:empty {
8272     display: none;
8273 }
8274
8275 .ideditor .api-status.offline,
8276 .ideditor .api-status.readonly,
8277 .ideditor .api-status.error {
8278     background: #a22;
8279 }
8280
8281 .ideditor .api-status a {
8282     text-decoration: underline;
8283     color: #ccc;
8284     pointer-events: all;
8285 }
8286 .ideditor .api-status a:focus,
8287 .ideditor .api-status a:active {
8288     color: inherit;
8289 }
8290 @media (hover: hover) {
8291     .ideditor .api-status a:hover {
8292         color: inherit;
8293     }
8294 }
8295
8296 /* Notification Badges
8297 ------------------------------------------------------- */
8298 /* For an icon (e.g. new version) */
8299 .ideditor .badge {
8300     display: -webkit-inline-box;
8301     display: -ms-inline-flexbox;
8302     display: inline-flex;
8303     background: #d32232;
8304     width: 21px;
8305     height: 21px;
8306     border-radius: 50%;
8307     -webkit-box-align: center;
8308         -ms-flex-align: center;
8309             align-items: center;
8310     -webkit-box-pack: center;
8311         -ms-flex-pack: center;
8312             justify-content: center;
8313 }
8314 .ideditor[dir='ltr'] .badge {
8315     margin-left: 6px;
8316 }
8317 .ideditor[dir='rtl'] .badge {
8318     margin-right: 6px;
8319 }
8320 .ideditor .badge .icon {
8321     vertical-align: baseline;
8322     width: 11px;
8323     height: 11px;
8324     color: #fff;
8325     -webkit-box-flex: 0;
8326         -ms-flex: 0 0 auto;
8327             flex: 0 0 auto;
8328 }
8329
8330 /* For text (e.g. upcoming events) */
8331 .ideditor .badge-text {
8332     display: inline-block;
8333     color: #fff;
8334     text-align: center;
8335     width: 16px;
8336     height: 16px;
8337     font-size: 10px;
8338     font-weight: bold;
8339     margin-left: 5px;
8340     background: #f00;
8341     border-radius: 9px;
8342 }
8343 .ideditor[dir='rtl'] .badge-text {
8344     margin-left: 0;
8345     margin-right: 5px;
8346 }
8347
8348
8349 /* Modals / Prompts
8350 ------------------------------------------------------- */
8351 .ideditor .modal {
8352     top: 5%;
8353     max-height: 90%;
8354     position: relative;
8355     border-radius: 3px;
8356     overflow: hidden;
8357     margin: auto;
8358     z-index: 50;
8359     width: 80%;
8360     min-width: 200px;
8361     max-width: 550px;
8362     display: -webkit-box;
8363     display: -ms-flexbox;
8364     display: flex;
8365     -webkit-box-orient: vertical;
8366     -webkit-box-direction: normal;
8367         -ms-flex-direction: column;
8368             flex-direction: column;
8369 }
8370
8371 .ideditor .modal .content {
8372     overflow-x: hidden;
8373     overflow-y: auto;
8374 }
8375
8376 .ideditor .modal .loader {
8377     margin-bottom: 10px;
8378 }
8379 .ideditor .modal .description {
8380     text-align: center;
8381 }
8382
8383 .ideditor .shaded {
8384     z-index: 5000;
8385     position: absolute;
8386     top: 0;
8387     bottom: 0;
8388     left: 0;
8389     right: 0;
8390     overflow: auto;
8391 }
8392 .ideditor .shaded:before {
8393     content:'';
8394     background: rgba(0,0,0,0.5);
8395     position: absolute;
8396     left: 0px; right: 0px; top: 0px; bottom: 0px;
8397 }
8398
8399 .ideditor .modal-section {
8400     padding: 20px;
8401     border-bottom: 1px solid #ccc;
8402 }
8403 .ideditor .modal-section p:not(:last-of-type) {
8404     padding-bottom: 20px;
8405 }
8406 .ideditor .modal-section h4 {
8407     padding-bottom: 0;
8408 }
8409 .ideditor .modal-section.buttons {
8410     text-align: center;
8411 }
8412
8413 .ideditor .modal-section.buttons button {
8414     min-width: 130px;
8415 }
8416
8417 .ideditor .modal-section.buttons .action {
8418     display: inline-block;
8419     margin: 0 10px;
8420 }
8421
8422 .ideditor .save-section .buttons {
8423     display: -webkit-box;
8424     display: -ms-flexbox;
8425     display: flex;
8426     -ms-flex-wrap: wrap;
8427         flex-wrap: wrap;
8428     -ms-flex-pack: distribute;
8429         justify-content: space-around;
8430 }
8431
8432 .ideditor .save-section .buttons .action,
8433 .ideditor .save-section .buttons .secondary-action {
8434     width: 45%;
8435     margin: 10px auto;
8436     text-align: center;
8437     vertical-align: middle;
8438 }
8439
8440 .ideditor .loading-modal {
8441     text-align: center;
8442 }
8443 .ideditor .modal-actions {
8444     display: -webkit-box;
8445     display: -ms-flexbox;
8446     display: flex;
8447 }
8448 .ideditor .modal-actions button {
8449     color: #7092ff;
8450     border-bottom: 1px solid #ccc;
8451     border-radius: 0;
8452     min-height: 160px;
8453     text-align: center;
8454     width: 100%;
8455 }
8456
8457 .ideditor .logo-small {
8458     height: 40px;
8459     width: 40px;
8460     margin: auto;
8461 }
8462
8463 .ideditor .logo {
8464     height: 100px;
8465     width: 100%;
8466     max-width: 100px;
8467     margin: auto;
8468 }
8469
8470 .ideditor .modal-actions > :first-child {
8471     border-right: 1px solid #ccc;
8472 }
8473
8474 .ideditor .modal-section:last-child {
8475     border-bottom: 0;
8476 }
8477
8478 /* Restore Modal
8479 ------------------------------------------------------- */
8480 .ideditor .modal-actions .logo-restore {
8481     color: #7092ff;
8482 }
8483 .ideditor .modal-actions .logo-reset {
8484     color: #e06c5e;
8485 }
8486
8487 /* Success Screen / Community Index
8488 ------------------------------------------------------- */
8489 .ideditor .save-success.body {
8490     overflow-y: scroll;
8491     overflow-x: hidden;
8492 }
8493
8494 .ideditor .save-success .link-out {
8495     margin: 0px 5px;
8496     white-space: nowrap;
8497 }
8498
8499 .ideditor .save-summary,
8500 .ideditor .save-communityLinks {
8501     padding: 0px 20px 15px 20px;
8502 }
8503
8504 .ideditor .save-communityLinks {
8505     border-top: 1px solid #ccc;
8506 }
8507
8508 .ideditor .save-success table,
8509 .ideditor .save-success p {
8510     margin-top: 15px;
8511 }
8512 .ideditor .save-success h3 {
8513     font-size: 14px;
8514     margin-top: 15px;
8515     line-height: 1.5;
8516     padding-bottom: 0;
8517 }
8518 .ideditor .save-success td {
8519     vertical-align: top;
8520 }
8521 .ideditor .save-success td.cell-icon {
8522     width: 40px;
8523 }
8524 .ideditor .save-success td.cell-detail {
8525     padding: 0 10px;
8526 }
8527 .ideditor .save-success td.community-detail {
8528     padding-bottom: 15px;
8529 }
8530
8531 .ideditor .summary-view-on-osm,
8532 .ideditor .community-name {
8533     font-size: 14px;
8534     font-weight: bold;
8535 }
8536 .ideditor .community-languages {
8537     margin-top: 5px;
8538     font-style: italic;
8539 }
8540 .ideditor .community-languages:only-child {
8541     margin-top: 0;
8542 }
8543
8544 .ideditor .community-detail a.hide-toggle,
8545 .ideditor .community-detail a:visited.hide-toggle {
8546     font-size: 12px;
8547     font-weight: normal;
8548     padding-bottom: 0;
8549 }
8550 .ideditor .community-detail .hide-toggle svg.icon.pre-text {
8551     width: 12px;
8552     height: 15px;
8553 }
8554
8555 .ideditor .community-events {
8556     margin-top: 5px;
8557 }
8558
8559 .ideditor .community-event,
8560 .ideditor .community-more {
8561     background-color: #efefef;
8562     padding: 8px;
8563     border-radius: 4px;
8564     margin-bottom: 5px;
8565 }
8566
8567 .ideditor .community-event-name {
8568     font-size: 14px;
8569     font-weight: bold;
8570 }
8571 .ideditor .community-event-when {
8572     font-weight: bold;
8573 }
8574
8575 .ideditor .community-missing {
8576     padding: 10px;
8577     text-align: center;
8578 }
8579
8580
8581 /* Splash Modal
8582 ------------------------------------------------------- */
8583 .ideditor .modal-actions .logo-walkthrough,
8584 .ideditor .modal-actions .logo-features {
8585     color: #7092ff;
8586 }
8587
8588
8589 /* Shortcuts Modal
8590 ------------------------------------------------------- */
8591 .ideditor .modal-shortcuts {
8592     width: 90%;
8593     max-width: 1050px;
8594 }
8595
8596 .ideditor .modal-shortcuts .modal-section:last-child {
8597     padding: 10px 15px 20px 15px;
8598     min-height: 275px;
8599 }
8600
8601 .ideditor .modal-shortcuts .tabs-bar {
8602     padding-bottom: 5px;
8603     text-align: center;
8604 }
8605
8606 .ideditor .modal-shortcuts a.tab {
8607     display: inline-block;
8608     padding: 5px 10px;
8609     margin: 0 5px;
8610     cursor: pointer;
8611     color: #666;
8612     font-size: 16px;
8613     font-weight: bold;
8614 }
8615 .ideditor .modal-shortcuts a.tab.active {
8616     color: #7092ff;
8617     border-bottom: 2px solid;
8618 }
8619 .ideditor .modal-shortcuts a.tab:focus,
8620 .ideditor .modal-shortcuts a.tab:active {
8621     color: #597be7;
8622     background-color: #efefef;
8623 }
8624 @media (hover: hover) {
8625     .ideditor .modal-shortcuts a.tab:hover {
8626         color: #597be7;
8627         background-color: #efefef;
8628     }
8629 }
8630
8631 .ideditor .modal-shortcuts .shortcut-tab {
8632     display: -webkit-box;
8633     display: -ms-flexbox;
8634     display: flex;
8635     -webkit-box-orient: horizontal;
8636     -webkit-box-direction: normal;
8637         -ms-flex-flow: row wrap;
8638             flex-flow: row wrap;
8639     -ms-flex-pack: distribute;
8640         justify-content: space-around;
8641 }
8642
8643 .ideditor .modal-shortcuts .shortcut-column {
8644     width: auto;
8645 }
8646
8647 .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
8648     -webkit-box-flex: 1;
8649         -ms-flex: 1 1 100%;
8650             flex: 1 1 100%;
8651     width: 100%;
8652 }
8653
8654 .ideditor .modal-shortcuts td {
8655     padding-bottom: 5px;
8656 }
8657
8658 .ideditor .modal-shortcuts .shortcut-section {
8659     padding: 20px 0 10px 0;
8660 }
8661
8662 .ideditor .modal-shortcuts .shortcut-keys {
8663     padding: 0 10px;
8664     color: #767676;
8665     text-align: right;
8666     white-space: nowrap;
8667 }
8668 .ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
8669     text-align: left;
8670 }
8671
8672 .ideditor .modal-shortcuts .shortcut-keys kbd {
8673     color: #555;
8674 }
8675
8676 .ideditor .modal-shortcuts .shortcut-keys .gesture {
8677     color: #333;
8678     padding: 3px;
8679 }
8680
8681
8682 /* Settings Modals
8683 ------------------------------------------------------- */
8684 .ideditor .settings-modal textarea {
8685     height: 70px;
8686     width: 100%;
8687 }
8688
8689 .ideditor .settings-custom-background .instructions-template {
8690     margin-bottom: 20px;
8691 }
8692 .ideditor .settings-custom-background .instructions-template p {
8693     margin-bottom: 0;
8694 }
8695 .ideditor .settings-custom-background .instructions-template ul {
8696     padding-bottom: 20px;
8697 }
8698 .ideditor .settings-custom-background .instructions-template ul li {
8699     list-style-type: disc;
8700     list-style-position: inside;
8701 }
8702
8703 .ideditor .settings-custom-data .instructions-url {
8704     margin-bottom: 10px;
8705 }
8706 .ideditor .settings-custom-data .field-file,
8707 .ideditor .settings-custom-data .instructions-template {
8708     margin-bottom: 20px;
8709 }
8710
8711
8712 /* Save Mode
8713 ------------------------------------------------------- */
8714 .ideditor a.user-info {
8715     display: inline-block;
8716 }
8717
8718 .ideditor .commit-form {
8719     margin-bottom: 0;
8720 }
8721
8722 .ideditor .user-info img {
8723     float: left;
8724 }
8725
8726 .ideditor .note-save .field-warning,
8727 .ideditor .field-warning {
8728     background: #ffb;
8729     border: 1px solid #ccc;
8730     border-radius: 4px;
8731     padding: 10px;
8732 }
8733
8734 .ideditor .note-save .field-warning:empty,
8735 .ideditor .field-warning:empty {
8736     display: none;
8737 }
8738
8739 .ideditor .field-warning,
8740 .ideditor .changeset-info,
8741 .ideditor .request-review,
8742 .ideditor .commit-info {
8743     margin-bottom: 10px;
8744 }
8745
8746 .ideditor .request-review label {
8747     cursor: pointer;
8748 }
8749
8750 .ideditor .changeset-list {
8751     border: 1px solid #ccc;
8752     border-radius: 4px;
8753     background: #fff;
8754     margin-bottom: 10px;
8755     overflow: hidden;
8756 }
8757
8758 .ideditor .changeset-list li button {
8759     padding: 5px 10px;
8760     width: 100%;
8761     border-radius: 0;
8762     text-align: initial;
8763 }
8764 .ideditor .changeset-list li {
8765     border-top: 1px solid #ccc;
8766 }
8767 .ideditor .changeset-list li:first-child {
8768     border-top: 0;
8769 }
8770 .ideditor .changeset-list .alert {
8771     opacity: 0.5;
8772 }
8773
8774
8775 /* Conflict resolution
8776 ------------------------------------------------------- */
8777 .ideditor .conflicts-help {
8778     padding: 20px;
8779     background-color: #ffffbb;
8780     border-bottom: 1px solid #ccc;
8781 }
8782
8783 .ideditor .conflicts-buttons {
8784     padding: 20px;
8785 }
8786
8787 .ideditor button.conflicts-button {
8788     float: left;
8789 }
8790
8791 .ideditor .conflict-container {
8792     border-bottom: 1px solid #ccc;
8793 }
8794
8795 .ideditor .conflict-description {
8796     padding: 5px 20px;
8797     display: block;
8798 }
8799
8800 .ideditor .conflicts-done {
8801     padding: 20px 20px 0 20px;
8802 }
8803
8804 .ideditor .conflict-detail-container {
8805     padding: 10px 20px;
8806 }
8807
8808 .ideditor .conflict-count {
8809     padding: 10px 20px;
8810 }
8811
8812 .ideditor .conflict-choices {
8813     margin-top: 10px;
8814 }
8815
8816 .ideditor .conflict-nav-buttons {
8817     padding: 10px 0 20px 0;
8818 }
8819
8820 .ideditor .conflict-nav-button {
8821     height: 30px;
8822 }
8823
8824
8825 /* Notices (Zoom in to Edit)
8826 ------------------------------------------------------- */
8827 .ideditor .notice {
8828     position: absolute;
8829     top: 15px;
8830     left: 0;
8831     right: 0;
8832     text-align: center;
8833 }
8834
8835 .ideditor .notice .zoom-to {
8836     margin: auto;
8837     width: 300px;
8838     padding: 20px 5px;
8839     font-size: 150%;
8840     border-radius: 8px;
8841     font-weight: bold;
8842 }
8843
8844 .ideditor .notice .zoom-to:focus,
8845 .ideditor .notice .zoom-to:active {
8846     background: rgba(0,0,0,0.6);
8847 }
8848 @media (hover: hover) {
8849     .ideditor .notice .zoom-to:hover {
8850         background: rgba(0,0,0,0.6);
8851     }
8852 }
8853
8854 .ideditor .notice .zoom-to .icon {
8855     width: 30px;
8856     height: 30px;
8857     vertical-align: middle;
8858     margin-right: 10px;
8859 }
8860 .ideditor[dir='rtl'] .notice .zoom-to .icon {
8861     margin-left: 10px;
8862     margin-right: 0;
8863 }
8864
8865
8866 /* Tooltips
8867 ------------------------------------------------------- */
8868 .ideditor .popover {
8869     position: absolute;
8870     display: none;
8871 }
8872 .ideditor .tooltip {
8873     color: #333;
8874     font-size: 12px;
8875     white-space: initial;
8876 }
8877 .ideditor .tooltip:not(.curtain-tooltip) {
8878     pointer-events: none;
8879 }
8880 .ideditor .popover.in {
8881     z-index: 5000;
8882     height: auto;
8883     display: block;
8884 }
8885 .ideditor .tooltip.in {
8886     opacity: 0.95;
8887 }
8888 .ideditor .popover.top {
8889     margin-top: -4px;
8890 }
8891 .ideditor .popover.right {
8892     margin-left: 4px;
8893 }
8894 .ideditor .popover.bottom {
8895     margin-top: 4px;
8896 }
8897 .ideditor .popover.left {
8898     margin-left: -4px;
8899 }
8900 .ideditor .popover.arrowed.top {
8901     margin-top: -10px;
8902 }
8903 .ideditor .popover.arrowed.right {
8904     margin-left: 10px;
8905 }
8906 .ideditor .popover.arrowed.bottom {
8907     margin-top: 10px;
8908 }
8909 .ideditor .popover.arrowed.left {
8910     margin-left: -10px;
8911 }
8912 .ideditor .bar-button .tooltip.arrowed.bottom {
8913     margin-top: 20px;
8914 }
8915 .ideditor .tooltip.top {
8916     text-align: center;
8917 }
8918 .ideditor .tooltip.right {
8919     text-align: left;
8920 }
8921 .ideditor .tooltip.bottom {
8922     text-align: center;
8923 }
8924 .ideditor .tooltip.left {
8925     text-align: right;
8926 }
8927
8928 .ideditor .popover-inner {
8929     border-radius: inherit;
8930 }
8931
8932 .ideditor .tooltip .popover-inner {
8933     border-radius: 4px;
8934     max-width: 200px;
8935     min-width: 80px;
8936     padding: 10px;
8937     font-weight: normal;
8938     background-color: #fff;
8939 }
8940
8941 .ideditor .popover-arrow {
8942     position: absolute;
8943     width: 0;
8944     height: 0;
8945     border-color: transparent;
8946     border-style: solid;
8947 }
8948 .ideditor .popover.top .popover-arrow {
8949     bottom: -5px;
8950     left: 50%;
8951     margin-left: -5px;
8952     border-top-color: #fff;
8953     border-width: 5px 5px 0;
8954 }
8955 .ideditor .popover.right .popover-arrow {
8956     top: 50%;
8957     left: -5px;
8958     margin-top: -5px;
8959     border-right-color: #fff;
8960     border-width: 5px 5px 5px 0;
8961 }
8962 .ideditor .popover.left .popover-arrow {
8963     top: 50%;
8964     right: -5px;
8965     margin-top: -5px;
8966     border-left-color: #fff;
8967     border-width: 5px 0 5px 5px;
8968 }
8969 .ideditor .popover.bottom .popover-arrow {
8970     top: -5px;
8971     left: 50%;
8972     margin-left: -5px;
8973     border-bottom-color: #fff;
8974     border-width: 0 5px 5px;
8975 }
8976 .ideditor .popover:not(.arrowed) .popover-arrow {
8977     display: none;
8978 }
8979
8980 .ideditor .tooltip-heading {
8981     font-weight: bold;
8982     background: #f6f6f6;
8983     padding: 10px;
8984     margin: -10px -10px 10px -10px;
8985     border-radius: 3px 3px 0 0;
8986     font-size: 14px;
8987 }
8988
8989 .ideditor .keyhint-wrap {
8990     background: #f6f6f6;
8991     padding: 10px;
8992     margin: 10px -10px -10px -10px;
8993     border-radius: 0 0 3px 3px;
8994 }
8995 .ideditor .popover-inner .shortcut {
8996     font-weight: bold;
8997     margin-left: 5px;
8998 }
8999
9000 .ideditor[dir='rtl'] .popover-inner .shortcut {
9001     margin-left: 0;
9002     margin-right: 5px;
9003 }
9004
9005 /* dark tooltips for sidebar / panels */
9006 .ideditor .tooltip.dark.top .popover-arrow,
9007 .ideditor .map-pane .tooltip.top .popover-arrow,
9008 .ideditor .sidebar .tooltip.top .popover-arrow {
9009     border-top-color: #000;
9010 }
9011 .ideditor .tooltip.dark.bottom .popover-arrow,
9012 .ideditor .map-pane .tooltip.bottom .popover-arrow,
9013 .ideditor .sidebar .tooltip.bottom .popover-arrow {
9014     border-bottom-color: #000;
9015 }
9016 .ideditor .tooltip.dark.left .popover-arrow,
9017 .ideditor .map-pane .tooltip.left .popover-arrow,
9018 .ideditor .sidebar .tooltip.left .popover-arrow {
9019     border-left-color: #000;
9020 }
9021 .ideditor .tooltip.dark.right .popover-arrow,
9022 .ideditor .map-pane .tooltip.right .popover-arrow,
9023 .ideditor .sidebar .tooltip.right .popover-arrow {
9024     border-right-color: #000;
9025 }
9026 .ideditor .tooltip.dark .popover-inner,
9027 .ideditor .tooltip.dark .tooltip-heading,
9028 .ideditor .tooltip.dark .keyhint-wrap,
9029 .ideditor .map-pane .popover-inner,
9030 .ideditor .map-pane .tooltip-heading,
9031 .ideditor .map-pane .keyhint-wrap,
9032 .ideditor .sidebar .popover-inner,
9033 .ideditor .sidebar .tooltip-heading,
9034 .ideditor .sidebar .keyhint-wrap {
9035     background: #000;
9036     color: #ccc;
9037 }
9038 .ideditor .tooltip.dark kbd,
9039 .ideditor .map-pane .tooltip kbd,
9040 .ideditor .sidebar .tooltip kbd {
9041     background-color: #666;
9042     border: solid 1px #444;
9043     border-bottom-color: #333;
9044     -webkit-box-shadow: inset 0 -1px 0 #333;
9045             box-shadow: inset 0 -1px 0 #333;
9046     color: #eee;
9047 }
9048
9049 /* Exceptions for tooltip layouts */
9050
9051 /* commit warning tooltips need to be closer */
9052 .ideditor .warning-section .tooltip.top {
9053     margin-top: -5px;
9054 }
9055
9056 .ideditor li:first-of-type .badge .tooltip,
9057 .ideditor li.hide + li.version .badge .tooltip {
9058     left: auto !important;
9059     right: 5px !important;
9060 }
9061 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
9062 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
9063     left: 5px !important;
9064     right: auto !important;
9065 }
9066 .ideditor li:first-of-type .badge .tooltip .popover-arrow,
9067 .ideditor li.hide + li.version .badge .tooltip .popover-arrow {
9068     right: 15px !important;
9069     left: auto !important;
9070 }
9071 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
9072 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
9073     left: 15px !important;
9074     right: auto !important;
9075 }
9076
9077
9078 /* Contextual Edit Menu
9079 ------------------------------------------------------- */
9080 .ideditor .edit-menu {
9081     position: absolute;
9082     display: -webkit-box;
9083     display: -ms-flexbox;
9084     display: flex;
9085     -webkit-box-orient: vertical;
9086     -webkit-box-direction: normal;
9087         -ms-flex-direction: column;
9088             flex-direction: column;
9089     background: #fff;
9090     border-radius: 4px;
9091     /* padding is set in edit_menu.js */
9092 }
9093
9094 .ideditor .edit-menu .tooltip {
9095     width: 200px; /* see also edit_menu.js */
9096 }
9097
9098 .ideditor .edit-menu-item {
9099     display: -webkit-box;
9100     display: -ms-flexbox;
9101     display: flex;
9102     -webkit-box-align: center;
9103         -ms-flex-align: center;
9104             align-items: center;
9105     border-radius: 0;
9106     padding: 0 12px;
9107     /* height is set in edit_menu.js */
9108 }
9109 .ideditor .edit-menu-item .label {
9110     max-width: 120px;
9111     text-align: initial;
9112     line-height: 1.1em;
9113     font-weight: bold;
9114 }
9115 .ideditor[dir='ltr'] .edit-menu-item .label {
9116     margin-left: 8px;
9117 }
9118 .ideditor[dir='rtl'] .edit-menu-item .label {
9119     margin-right: 8px;
9120 }
9121
9122 .ideditor .edit-menu-item use {
9123     pointer-events: none;
9124 }
9125
9126 /* Lasso
9127 ------------------------------------------------------- */
9128 .ideditor .lasso-path {
9129     fill-opacity: 0.3;
9130     stroke: #fff;
9131     stroke-width: 1;
9132     stroke-opacity: 1;
9133     stroke-dasharray: 5, 5;
9134 }
9135
9136
9137 /* Scrollbars
9138  ----------------------------------------------------- */
9139 .ideditor ::-webkit-scrollbar {
9140     height: 20px;
9141     overflow: visible;
9142     width: 10px;
9143     background: #fff;
9144     border-left: 1px solid #DDD;
9145 }
9146
9147 .ideditor ::-webkit-scrollbar-track {
9148     background-clip: padding-box;
9149     border: solid transparent;
9150     border-width: 0;
9151 }
9152
9153 .ideditor ::-webkit-scrollbar-thumb {
9154     background-color: rgba(0,0,0,.2);
9155     background-clip: padding-box;
9156     border: solid transparent;
9157     border-width: 3px 3px 3px 4px;
9158     border-radius: 6px;
9159 }
9160 .ideditor ::-webkit-scrollbar-track:active {
9161     background-color: rgba(0,0,0,.05);
9162 }
9163 @media (hover: hover) {
9164     .ideditor ::-webkit-scrollbar-track:hover {
9165         background-color: rgba(0,0,0,.05);
9166     }
9167 }
9168
9169
9170 /* Intro walkthrough
9171  ----------------------------------------------------- */
9172 .ideditor .curtain {
9173     z-index: 1000;
9174     pointer-events: none;
9175     position: absolute;
9176 }
9177
9178 .ideditor .curtain-darkness {
9179     pointer-events: all;
9180     fill-opacity: 0.7;
9181     fill: #222;
9182     fill-rule: evenodd;
9183 }
9184
9185 .ideditor .intro-nav-wrap {
9186     display: -webkit-box;
9187     display: -ms-flexbox;
9188     display: flex;
9189     -webkit-box-orient: horizontal;
9190     -webkit-box-direction: normal;
9191         -ms-flex-direction: row;
9192             flex-direction: row;
9193     position: absolute;
9194     left: 0;
9195     right: 0;
9196     bottom: 30px;
9197     padding: 10px;
9198     z-index: 1001;
9199 }
9200
9201 .ideditor .intro-nav-wrap .intro-nav-wrap-logo {
9202     -webkit-box-flex: 0;
9203         -ms-flex: 0 0 auto;
9204             flex: 0 0 auto;
9205     height: 40px;
9206     width: 40px;
9207     color: #fff;
9208     margin: 0px 20px;
9209     vertical-align: middle;
9210 }
9211
9212 .ideditor .intro-nav-wrap .joined {
9213     -webkit-box-flex: 1;
9214         -ms-flex: 1 1 auto;
9215             flex: 1 1 auto;
9216     display: -webkit-box;
9217     display: -ms-flexbox;
9218     display: flex;
9219     -webkit-box-orient: horizontal;
9220     -webkit-box-direction: normal;
9221         -ms-flex-direction: row;
9222             flex-direction: row;
9223 }
9224
9225 .ideditor .intro-nav-wrap button.chapter {
9226     -webkit-box-flex: 1;
9227         -ms-flex: 1 1 100%;
9228             flex: 1 1 100%;
9229     padding: 0px 5px;
9230     font-weight: bold;
9231 }
9232
9233 .ideditor .intro-nav-wrap button.chapter.next {
9234     -webkit-animation-duration: 1s;
9235             animation-duration: 1s;
9236     -webkit-animation-name: pulse;
9237             animation-name: pulse;
9238     -webkit-animation-iteration-count: infinite;
9239             animation-iteration-count: infinite;
9240     -webkit-animation-direction: alternate;
9241             animation-direction: alternate;
9242 }
9243 @-webkit-keyframes pulse {
9244     from  { background: #7092ff; }
9245     to    { background: #c6d4ff; }
9246 }
9247 @keyframes pulse {
9248     from  { background: #7092ff; }
9249     to    { background: #c6d4ff; }
9250 }
9251
9252 .ideditor .intro-nav-wrap button.chapter.finished {
9253     background: #8cd05f;
9254 }
9255
9256 .ideditor .intro-nav-wrap button.chapter .status {
9257     display: none;
9258 }
9259
9260 .ideditor .intro-nav-wrap button.chapter.finished .status {
9261     display: inline-block;
9262 }
9263
9264 .ideditor .curtain-tooltip {
9265     z-index: 1002;
9266 }
9267
9268 .ideditor .curtain-tooltip.tooltip.in {
9269     opacity: 1;
9270 }
9271 .ideditor .curtain-tooltip.tooltip {
9272     text-align: left;
9273 }
9274 .ideditor[dir='rtl'] .curtain-tooltip.tooltip {
9275     text-align: right;
9276 }
9277
9278 .ideditor .curtain-tooltip .popover-inner {
9279     font-size: 15px;
9280     position: relative;
9281     padding: 20px;
9282 }
9283
9284 .ideditor .curtain-tooltip .popover-inner .button-section,
9285 .ideditor .curtain-tooltip .popover-inner .instruction {
9286     font-weight: bold;
9287     display: block;
9288     border-top: 1px solid #ccc;
9289     margin-top: 10px;
9290     margin-left: -20px;
9291     margin-right: -20px;
9292     padding: 10px 20px 0 20px;
9293 }
9294
9295 .ideditor .curtain-tooltip .popover-inner .button-section button {
9296     width: 66.6666%;
9297 }
9298
9299 .ideditor .curtain-tooltip .popover-inner .instruction:only-child {
9300     border: 0;
9301     padding: 0;
9302     margin: 0;
9303 }
9304
9305 .ideditor .curtain-tooltip .popover-inner .icon.pre-text {
9306     vertical-align: text-top;
9307     margin-right: 0;
9308     margin-left: 0;
9309     display: inline-block;
9310 }
9311
9312 .ideditor .curtain-tooltip.intro-points-describe,
9313 .ideditor .curtain-tooltip.intro-lines-name_road {
9314     top: 133px !important;
9315 }
9316
9317 .ideditor .tooltip-illustration {
9318     height: 80px;
9319     width: 200px;
9320     margin-left: -20px;
9321     margin-top: -10px;
9322 }
9323 .ideditor[dir='rtl'] .tooltip-illustration {
9324     margin-left: auto;
9325     margin-right: -20px;
9326 }
9327
9328 .ideditor .curtain-tooltip.intro-mouse {
9329     -webkit-user-select: none;
9330        -moz-user-select: none;
9331         -ms-user-select: none;
9332             user-select: none;
9333 }
9334
9335 .ideditor .curtain-tooltip.intro-mouse .counter {
9336     position: absolute;
9337     display: block;
9338     top: 50px;
9339     width: 100%;
9340     text-align: center;
9341     font-weight: bold;
9342     font-size: 14px;
9343     z-index: 1003;
9344 }
9345
9346 .ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
9347     fill: rgba(112, 146, 255, 0);
9348     color: rgba(112, 146, 255, 0);
9349 }
9350 .ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
9351     fill: rgba(112, 146, 255, 1);
9352 }
9353 .ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
9354     color: rgba(112, 146, 255, 1);
9355 }
9356
9357 .ideditor .huge-modal-button {
9358     width: 100%;
9359     padding: 20px;
9360 }
9361
9362 .ideditor .huge-modal-button .illustration {
9363     height: 100px;
9364     width: 100px;
9365     color: #7092ff;
9366 }