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