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