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
2753 .ideditor #ideditor-viewer-mapilio-simple-wrap {
2754     height: 100%;
2755 }
2756
2757 .ideditor #ideditor-viewer-mapilio-simple {
2758     width: 100%;
2759     height: 100%;
2760     -webkit-transform-origin: 0 0;
2761         -ms-transform-origin: 0 0;
2762             transform-origin: 0 0;
2763 }
2764
2765 .ideditor #ideditor-viewer-mapilio-simple img {
2766     width: 100%;
2767     height: 100%;
2768     -o-object-fit: cover;
2769        object-fit: cover;
2770     overflow: hidden
2771 }
2772
2773 /* Streetside Viewer (pannellum) */
2774 .ideditor .ms-wrapper .photo-attribution .image-link {
2775     display: block;
2776 }
2777 .ideditor .ms-wrapper .photo-attribution .attribution-row {
2778     display: -webkit-box;
2779     display: -ms-flexbox;
2780     display: flex;
2781     -webkit-box-orient: horizontal;
2782     -webkit-box-direction: normal;
2783         -ms-flex-flow: row nowrap;
2784             flex-flow: row nowrap;
2785     -webkit-box-pack: justify;
2786         -ms-flex-pack: justify;
2787             justify-content: space-between;
2788     -webkit-box-align: center;
2789         -ms-flex-align: center;
2790             align-items: center;
2791     padding: 0 5px;
2792 }
2793 .ideditor .ms-wrapper .photo-attribution .image-view-link {
2794     text-align: left;
2795     margin: 0 5px;
2796 }
2797 .ideditor .ms-wrapper .photo-attribution .image-report-link {
2798     text-align: right;
2799 }
2800
2801 .ideditor .ms-wrapper .photo-attribution a:active {
2802     color: #0fffc4;
2803 }
2804 @media (hover: hover) {
2805     .ideditor .ms-wrapper .photo-attribution a:hover {
2806         color: #0fffc4;
2807     }
2808 }
2809
2810 .ideditor .ms-wrapper .pnlm-compass.pnlm-control,
2811 .ideditor .vegbilder-wrapper  .pnlm-compass.pnlm-control {
2812     width: 26px;
2813     height: 26px;
2814     left: 4px;
2815     top: 60px;
2816     background-size: contain;
2817     background-repeat: no-repeat no-repeat;
2818 }
2819
2820 .ideditor label.streetside-hires {
2821     cursor: pointer;
2822 }
2823 .ideditor .streetside-hires span {
2824     margin-top: 2px;
2825 }
2826 .ideditor .streetside-hires input[type="checkbox"] {
2827     float: left;
2828     width: 12px;
2829     height: 12px;
2830     margin: 0 5px;
2831 }
2832
2833 .ideditor .pnlm-zoom-controls {
2834     margin-top: 6px;
2835 }
2836
2837
2838 /* Mapillary viewer */
2839 .ideditor #ideditor-mly .domRenderer .TagSymbol {
2840     font-size: 10px;
2841     background-color: rgba(0,0,0,0.4);
2842     padding: 0 4px;
2843     border-radius: 4px;
2844     top: -25px;
2845 }
2846
2847 .ideditor .mly-wrapper .mapillary-attribution-container {
2848     display: -webkit-box;
2849     display: -ms-flexbox;
2850     display: flex;
2851     -webkit-box-align: center;
2852         -ms-flex-align: center;
2853             align-items: center;
2854 }
2855
2856 .ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-icon-container {
2857     display: -webkit-box;
2858     display: -ms-flexbox;
2859     display: flex;
2860     -webkit-box-align: center;
2861         -ms-flex-align: center;
2862             align-items: center;
2863 }
2864
2865 .ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-username {
2866     display: none;
2867 }
2868
2869 .ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-date {
2870     margin-right: 6px;
2871 }
2872
2873 /* KartaView viewer */
2874 .ideditor .kartaview-wrapper {
2875     position: relative;
2876     background-color: #000;
2877     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
2878     background-position: center;
2879     background-repeat: no-repeat;
2880 }
2881
2882 .ideditor .kartaview-wrapper img {
2883     width: 100%;
2884     height: 100%;
2885     overflow: hidden;
2886     -o-object-fit: cover;
2887        object-fit: cover;
2888 }
2889
2890 .ideditor .kartaview-wrapper .photo-attribution a:active {
2891     color: #20c4ff;
2892 }
2893 @media (hover: hover) {
2894     .ideditor .kartaview-wrapper .photo-attribution a:hover {
2895         color: #20c4ff;
2896     }
2897 }
2898
2899 .ideditor .kartaview-image-wrap {
2900     width: 100%;
2901     height: 100%;
2902     -webkit-transform-origin: 0 0;
2903         -ms-transform-origin: 0 0;
2904             transform-origin: 0 0;
2905 }
2906
2907 .ideditor .photo-wrapper {
2908     position: relative;
2909     background-color: #000;
2910 }
2911
2912 .ideditor .photoviewer .plane-frame {
2913     display: block;
2914     overflow: hidden;
2915     height: 100%;
2916     width: 100%;
2917     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
2918     background-position: center;
2919     background-repeat: no-repeat;
2920 }
2921
2922 .ideditor .photoviewer .plane-frame > img.plane-photo{
2923     width: auto;
2924     height: 100%;
2925     -webkit-transform-origin: 0 0;
2926         -ms-transform-origin: 0 0;
2927             transform-origin: 0 0;
2928 }
2929
2930 /* photo-controls (step forward, back, rotate) */
2931 .ideditor .photo-controls-wrap {
2932     text-align: center;
2933     position: absolute;
2934     top: 10px;
2935     width: 100%;
2936     z-index: 10;
2937     pointer-events: none;
2938 }
2939
2940 .ideditor .photo-controls {
2941     display: inline-block;
2942     z-index: 10;
2943     pointer-events: initial;
2944 }
2945
2946 .ideditor .photo-controls button,
2947 .ideditor .photo-controls button:focus {
2948     height: 18px;
2949     width: 18px;
2950     line-height: 18px;
2951     background: rgba(0,0,0,0.65);
2952     color: #eee;
2953     border-radius: 0;
2954 }
2955 .ideditor .photo-controls button:first-of-type {
2956     border-radius: 3px 0 0 3px;
2957 }
2958 .ideditor .photo-controls button:last-of-type {
2959     border-radius: 0 3px 3px 0;
2960 }
2961 .ideditor .photo-controls button:active {
2962     background: rgba(0,0,0,0.85);
2963     color: #fff;
2964 }
2965 @media (hover: hover) {
2966     .ideditor .photo-controls button:hover {
2967         background: rgba(0,0,0,0.85);
2968         color: #fff;
2969     }
2970 }
2971
2972 /* local georeferenced photos */
2973 .ideditor .layer-local-photos {
2974     pointer-events: none;
2975 }
2976 .ideditor .layer-local-photos .viewfield-group * {
2977     fill: #ed00d9;
2978 }
2979 .ideditor .local-photos {
2980     display: -webkit-box;
2981     display: -ms-flexbox;
2982     display: flex;
2983 }
2984 .ideditor .local-photos > div {
2985     width: 50%;
2986 }
2987 .ideditor .local-photos > div:first-child {
2988     margin-right: 20px;
2989 }
2990
2991 .ideditor .list-local-photos {
2992     max-height: 40vh;
2993     overflow-y: scroll;
2994     overflow-x: auto;
2995     /* workaround for something like "overflow-x: visible"
2996        see https://stackoverflow.com/a/39554003 */
2997     margin-left: -100px;
2998     padding-left: 100px;
2999 }
3000 .ideditor .list-local-photos::-webkit-scrollbar {
3001     border-left: none;
3002 }
3003 .ideditor .list-local-photos li {
3004     list-style: none;
3005     display: -webkit-box;
3006     display: -ms-flexbox;
3007     display: flex;
3008     -webkit-box-pack: justify;
3009         -ms-flex-pack: justify;
3010             justify-content: space-between;
3011     height: 30px;
3012 }
3013 .ideditor .list-local-photos span.filename {
3014     display: block;
3015     width: 100%;
3016     white-space: nowrap;
3017     overflow: hidden;
3018     text-overflow: ellipsis;
3019     line-height: 30px;
3020     padding-left: 8px;
3021     border-bottom: 1px solid #ccc;
3022     border-left: 1px solid #ccc;
3023     border-right: 1px solid #ccc;
3024 }
3025 .ideditor .list-local-photos li:first-child span.filename {
3026     border-top: 1px solid #ccc;
3027     border-top-left-radius: 4px;
3028 }
3029 .ideditor .list-local-photos li:first-child button {
3030     border-top: 1px solid #ccc;
3031 }
3032 .ideditor .list-local-photos li:first-child button.remove {
3033     border-top-right-radius: 4px;
3034 }
3035 .ideditor .list-local-photos li:last-child span.filename {
3036     border-bottom-left-radius: 4px;
3037 }
3038 .ideditor .list-local-photos li:last-child button.remove {
3039     border-bottom-right-radius: 4px;
3040 }
3041 .ideditor .list-local-photos li.invalid span.filename {
3042     color: #ccc;
3043 }
3044 .ideditor .list-local-photos li.invalid button.zoom-to-data {
3045     display: none;
3046 }
3047 .ideditor .list-local-photos li button.no-geolocation {
3048     display: none;
3049 }
3050 .ideditor .list-local-photos li.invalid button.no-geolocation {
3051     display: block;
3052 }
3053 .ideditor .list-local-photos .placeholder div {
3054     display: block;
3055     height: 40px;
3056     width: 40px;
3057     background-position: center;
3058     background-size: cover;
3059     background-repeat: no-repeat;
3060     background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
3061     -webkit-filter: invert(1);
3062             filter: invert(1);
3063 }
3064 .ideditor .local-photos label.button {
3065     background: #7092ff;
3066     color: #fff;
3067     font-weight: bold;
3068     padding: 10px 25px;
3069     text-align: center;
3070     font-size: 12px;
3071     display: inline-block;
3072     border-radius: 4px;
3073     cursor: pointer;
3074 }
3075 /* OSM Notes and QA Layers */
3076
3077 .ideditor .qa-header-icon .qaItem-fill,
3078 .ideditor .layer-keepRight .qaItem .qaItem-fill,
3079 .ideditor .layer-improveOSM .qaItem .qaItem-fill,
3080 .ideditor .layer-osmose .qaItem .qaItem-fill {
3081     stroke: #333;
3082     stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */
3083 }
3084
3085 .ideditor .note-header-icon .note-fill,
3086 .ideditor .layer-notes .note .note-fill {
3087     color: #f30;
3088     stroke: #333;
3089     stroke-width: 40px;
3090 }
3091 .ideditor .note-header-icon.new .note-fill,
3092 .ideditor .layer-notes .note.new .note-fill {
3093     color: #fe0;
3094     stroke: #333;
3095     stroke-width: 40px;
3096 }
3097 .ideditor .note-header-icon.closed .note-fill,
3098 .ideditor .layer-notes .note.closed .note-fill {
3099     color: #5d0;
3100     stroke: #333;
3101     stroke-width: 40px;
3102 }
3103
3104 /* slight adjustments to preset icon for note icons */
3105 .ideditor .note-header-icon .preset-icon-28 {
3106     top: 18px;
3107 }
3108 .ideditor .note-header-icon .note-icon-annotation {
3109     position: absolute;
3110     top: 22px;
3111     left: 22px;
3112     margin: auto;
3113 }
3114 .ideditor .note-header-icon .note-icon-annotation .icon {
3115     width: 15px;
3116     height: 15px;
3117 }
3118
3119 /* adjustment to center QA icons */
3120 .ideditor .qa-header-icon .preset-icon-28 {
3121     top: auto;
3122     left: auto;
3123 }
3124 .ideditor .qa-header-icon {
3125     display: -webkit-box;
3126     display: -ms-flexbox;
3127     display: flex;
3128     -webkit-box-align: center;
3129         -ms-flex-align: center;
3130             align-items: center;
3131     -webkit-box-pack: center;
3132         -ms-flex-pack: center;
3133             justify-content: center;
3134 }
3135
3136 /* Keep Right Issues
3137 ------------------------------------------------------- */
3138 .ideditor .keepRight.itemType-20,
3139 .ideditor .keepRight.itemType-40,
3140 .ideditor .keepRight.itemType-210,
3141 .ideditor .keepRight.itemType-270,
3142 .ideditor .keepRight.itemType-310,
3143 .ideditor .keepRight.itemType-320,
3144 .ideditor .keepRight.itemType-350 {   /* improper bridge tag */
3145     color: #ff9;
3146 }
3147
3148 .ideditor .keepRight.itemType-50 {    /* almost junctions */
3149     color: #88f;
3150 }
3151
3152 .ideditor .keepRight.itemType-60,
3153 .ideditor .keepRight.itemType-70,
3154 .ideditor .keepRight.itemType-90,
3155 .ideditor .keepRight.itemType-100,
3156 .ideditor .keepRight.itemType-110,
3157 .ideditor .keepRight.itemType-150,
3158 .ideditor .keepRight.itemType-220,
3159 .ideditor .keepRight.itemType-380 {   /* non-physical sport tag */
3160     color: #5d0;
3161 }
3162
3163 .ideditor .keepRight.itemType-130 {   /* disconnected ways */
3164     color: #fa3;
3165 }
3166
3167 .ideditor .keepRight.itemType-170 {   /* FIXME tag */
3168     color: #ff0;
3169 }
3170
3171 .ideditor .keepRight.itemType-190 {   /* intersection without junction */
3172     color: #f33;
3173 }
3174
3175 .ideditor .keepRight.itemType-200 {   /* overlapping ways */
3176     color: #fdbf6f;
3177 }
3178
3179 .ideditor .keepRight.itemType-160,
3180 .ideditor .keepRight.itemType-230 {   /* layer conflict */
3181     color: #b60;
3182 }
3183
3184 .ideditor .keepRight.itemType-280 {   /* boundary issues */
3185     color: #5f47a0;
3186 }
3187
3188 .ideditor .keepRight.itemType-180,
3189 .ideditor .keepRight.itemType-290 {   /* turn restriction issues */
3190     color: #ace;
3191 }
3192
3193 .ideditor .keepRight.itemType-300,
3194 .ideditor .keepRight.itemType-390 {   /* missing tracktype */
3195     color: #090;
3196 }
3197
3198 .ideditor .keepRight.itemType-360,
3199 .ideditor .keepRight.itemType-370,
3200 .ideditor .keepRight.itemType-410 {   /* website issues */
3201     color: #f9b;
3202 }
3203
3204 .ideditor .keepRight.itemType-120,
3205 .ideditor .keepRight.itemType-400 {   /* geometry / turn angles */
3206     color: #c35;
3207 }
3208
3209 /* ImproveOSM Issues
3210 ------------------------------------------------------- */
3211
3212 .ideditor .improveOSM.itemType-ow {   /* missing one way */
3213     color: #1E90FF;
3214 }
3215
3216 .ideditor .improveOSM.itemType-mr-road {   /* missing road */
3217     color: #B452CD;
3218 }
3219 .ideditor .improveOSM.itemType-mr-path {   /* missing path */
3220     color: #A0522D;
3221 }
3222 .ideditor .improveOSM.itemType-mr-parking {   /* missing parking */
3223     color: #EEEE00;
3224 }
3225 .ideditor .improveOSM.itemType-mr-both {   /* missing road+parking */
3226     color: #FFA500;
3227 }
3228
3229 .ideditor .improveOSM.itemType-tr {   /* missing turn restriction */
3230     color: #EC1C24;
3231 }
3232
3233 /* Custom Map Data (geojson, gpx, kml, vector tile) */
3234 .ideditor .layer-mapdata {
3235     pointer-events: none;
3236 }
3237
3238 .ideditor .layer-mapdata path.shadow {
3239     pointer-events: stroke;
3240     stroke: #f6634f;
3241     stroke-width: 16;
3242     stroke-opacity: 0;
3243     fill: none;
3244 }
3245 .ideditor .layer-mapdata path.MultiPoint.shadow,
3246 .ideditor .layer-mapdata path.Point.shadow {
3247     pointer-events: fill;
3248     fill: #f6634f;
3249     fill-opacity: 0;
3250 }
3251 .ideditor .layer-mapdata path.shadow.hover:not(.selected) {
3252     stroke-opacity: 0.4;
3253 }
3254 .ideditor .layer-mapdata path.shadow.selected {
3255     stroke-opacity: 0.7;
3256 }
3257
3258 .ideditor .layer-mapdata path.stroke {
3259     stroke: #ff26d4;
3260     stroke-width: 2;
3261     fill: none;
3262 }
3263
3264 .ideditor .layer-mapdata path.fill {
3265     stroke-width: 0;
3266     stroke-opacity: 0.3;
3267     stroke: #ff26d4;
3268     fill: #ff26d4;
3269     fill-opacity: 0.3;
3270     fill-rule: evenodd;
3271 }
3272
3273 .ideditor .layer-mapdata text.label-halo,
3274 .ideditor .layer-mapdata text.label {
3275     font-size: 10px;
3276     font-weight: bold;
3277     dominant-baseline: middle;
3278 }
3279 .ideditor .layer-mapdata text.label {
3280     fill: #ddd;
3281 }
3282 .ideditor .layer-mapdata text.label.hover,
3283 .ideditor .layer-mapdata text.label.selected {
3284     fill: #fff;
3285 }
3286 .ideditor .layer-mapdata text.label-halo {
3287     opacity: 0.7;
3288     stroke: #000;
3289     stroke-width: 5px;
3290     stroke-miterlimit: 1;
3291 }
3292 /* Fill Styles */
3293
3294 .ideditor .low-zoom.fill-wireframe path.stroke,
3295 .ideditor .fill-wireframe path.stroke {
3296     stroke-width: 1 !important;
3297     stroke-opacity: 0.5 !important;
3298     stroke-dasharray: none !important;
3299     fill: none !important;
3300 }
3301 .ideditor .low-zoom.fill-wireframe .layer-mapdata path.stroke,
3302 .ideditor .fill-wireframe .layer-mapdata path.stroke {
3303     stroke-width: 2 !important;
3304     stroke-opacity: 1 !important;
3305 }
3306
3307 .ideditor .low-zoom.fill-wireframe path.shadow,
3308 .ideditor .fill-wireframe path.shadow {
3309     stroke-width: 12;
3310 }
3311
3312 .ideditor .fill-wireframe path.shadow.related:not(.selected),
3313 .ideditor .fill-wireframe path.shadow.hover:not(.selected) {
3314     stroke-opacity: 0.4;
3315 }
3316 .ideditor .fill-wireframe path.shadow.selected {
3317     stroke-opacity: 0.6;
3318 }
3319
3320 .ideditor .fill-wireframe .point,
3321 .ideditor .fill-wireframe .areaicon,
3322 .ideditor .fill-wireframe .areaicon-halo,
3323 .ideditor .fill-wireframe path.casing,
3324 .ideditor .fill-wireframe path.fill,
3325 .ideditor .fill-wireframe path.oneway {
3326     display: none !important;
3327 }
3328
3329 .ideditor .fill-partial path.area.fill {
3330     fill-opacity: 0;
3331     stroke-width: 60px;
3332     pointer-events: none;
3333 }
3334 .ideditor .fill-partial path.area.fill.tag-building_part {
3335     stroke-width: 40px;
3336 }
3337 .ideditor .fill-partial path.area.fill.tag-indoor {
3338     stroke-width: 20px;
3339 }
3340 .ideditor.mode-browse .fill-partial path.area.fill,
3341 .ideditor.mode-select .fill-partial path.area.fill,
3342 .ideditor.mode-select-data .fill-partial path.area.fill,
3343 .ideditor.mode-select-error .fill-partial path.area.fill,
3344 .ideditor.mode-select-note .fill-partial path.area.fill {
3345     pointer-events: visibleStroke;
3346 }
3347 .ideditor svg.preset-icon-category-border path {
3348     stroke-width: 1;
3349     stroke: rgb(170, 170, 170);
3350     fill: rgba(170, 170, 170, 0.3);
3351 }
3352
3353 .ideditor .preset-category-barrier svg.preset-icon-category-border path {
3354     stroke: rgb(200, 144, 144);
3355     fill: rgba(200, 144, 144, 0.3);
3356 }
3357
3358 .ideditor .preset-category-building svg.preset-icon-category-border path {
3359     stroke: rgb(224, 110, 95);
3360     fill: rgba(224, 110, 95, 0.3);
3361 }
3362
3363 .ideditor .preset-category-landuse svg.preset-icon-category-border path {
3364     stroke: rgb(196, 189, 25);
3365     fill: rgba(196, 189, 25, 0.3);
3366 }
3367
3368 .ideditor .preset-category-natural svg.preset-icon-category-border path,
3369 .ideditor .preset-category-playground svg.preset-icon-category-border path,
3370 .ideditor .preset-category-golf svg.preset-icon-category-border path {
3371     stroke: rgb(140, 208, 95);
3372     fill: rgba(140, 208, 95, 0.3);
3373 }
3374
3375 .ideditor .preset-category-water svg.preset-icon-category-border path,
3376 .ideditor .preset-category-waterway svg.preset-icon-category-border path {
3377     stroke: rgb(119, 211, 222);
3378     fill: rgba(119, 211, 222, 0.3);
3379 }
3380
3381 .ideditor .preset-category-utility svg.preset-icon-category-border path {
3382     stroke: rgb(125, 125, 125);
3383     fill: rgba(219, 219, 125, 0.3);
3384 }
3385
3386 .ideditor .preset-category-path svg.preset-icon-category-border path {
3387     stroke: rgb(221, 221, 204);
3388     fill: rgba(221, 221, 204, 0.3);
3389 }
3390
3391 .ideditor .preset-category-road_service svg.preset-icon-category-border path,
3392 .ideditor .preset-category-road_minor svg.preset-icon-category-border path,
3393 .ideditor .preset-category-road_major svg.preset-icon-category-border path {
3394     stroke: #999;
3395 }
3396
3397 .ideditor .preset-category-rail svg.preset-icon-category-border path {
3398     stroke: #555;
3399 }
3400 /* Basics
3401 ------------------------------------------------------- */
3402 /* the root element of iD */
3403 .ideditor {
3404     height: 100%;
3405     width: 100%;
3406     margin: 0;
3407     padding: 0;
3408     border: 0;
3409     overflow: hidden;
3410
3411     /* Establish a local stacking context so all elements within iD are on the
3412        same layer relative to elements outside iD - #7457.
3413        https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
3414     */
3415     position: relative;
3416     z-index: 0;
3417
3418     font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont,
3419         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
3420         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
3421         sans-serif;
3422     color: #333;
3423
3424     -ms-touch-action: none;
3425
3426         touch-action: none;
3427     -ms-user-select: none;
3428     -ms-content-zooming: none;
3429 }
3430 .ideditor div {
3431     /* disable pinch-to-zoom of the UI on touch devices */
3432     -ms-touch-action: pan-x pan-y;
3433         touch-action: pan-x pan-y;
3434 }
3435
3436 .ideditor .main-content {
3437     position: relative;
3438     display: -webkit-box;
3439     display: -ms-flexbox;
3440     display: flex;
3441     -webkit-box-orient: vertical;
3442     -webkit-box-direction: normal;
3443         -ms-flex-direction: column;
3444             flex-direction: column;
3445     overflow: hidden;
3446     height: 100%;
3447     -ms-touch-action: none;
3448         touch-action: none;
3449 }
3450
3451 .ideditor .main-content.active {
3452     -webkit-filter: none !important;
3453             filter: none !important;
3454     -webkit-transition-duration: 200ms;
3455             transition-duration: 200ms;
3456 }
3457
3458 .ideditor .main-content.inactive {
3459     -webkit-filter: grayscale(80%) brightness(80%);
3460             filter: grayscale(80%) brightness(80%);
3461     -webkit-transition-duration: 200ms;
3462             transition-duration: 200ms;
3463 }
3464
3465 .ideditor #ideditor-defs {
3466     /* Can't be display: none or the clippaths are ignored. */
3467     position: absolute;
3468     width: 0;
3469     height: 0;
3470 }
3471
3472 .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 {
3473     -webkit-box-sizing: border-box;
3474             box-sizing: border-box;
3475 }
3476
3477 .ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
3478     -webkit-tap-highlight-color: rgba(0,0,0,0);
3479     -webkit-touch-callout: none;
3480 }
3481
3482 .ideditor ul li {
3483     list-style: none;
3484 }
3485
3486 .ideditor a,
3487 .ideditor button {
3488     cursor: pointer;
3489 }
3490
3491 .ideditor h2 {
3492     font-size: 25px;
3493     line-height: 1.25;
3494     font-weight: bold;
3495     margin-bottom: 20px;
3496 }
3497 .ideditor .header h2 {
3498     font-size: 20px;
3499     line-height: 1.25;
3500     font-weight: bold;
3501     margin-bottom: 0px;
3502 }
3503
3504 .ideditor h3:last-child,
3505 .ideditor h4:last-child { margin-bottom: 0;}
3506
3507 .ideditor h3 {
3508     font-size: 16px;
3509     line-height: 1.25;
3510     font-weight: bold;
3511     margin-bottom: 10px;
3512 }
3513 .ideditor h4, .ideditor h5 {
3514     font-size: 12px;
3515     font-weight: bold;
3516     padding-bottom: 10px;
3517 }
3518
3519 .ideditor button:focus,
3520 .ideditor textarea:focus,
3521 .ideditor input[type=text]:focus,
3522 .ideditor input[type=search]:focus,
3523 .ideditor input[type=number]:focus,
3524 .ideditor input[type=url]:focus,
3525 .ideditor input[type=tel]:focus,
3526 .ideditor input[type=email]:focus,
3527 .ideditor input[type=date]:focus {
3528     outline-color: transparent;
3529     outline-style: none;
3530 }
3531
3532 .ideditor ::-webkit-input-placeholder {
3533     color: #aaa;
3534     opacity: 1; /* Firefox */
3535 }
3536
3537 .ideditor ::-moz-placeholder {
3538     color: #aaa;
3539     opacity: 1; /* Firefox */
3540 }
3541
3542 .ideditor :-ms-input-placeholder {
3543     color: #aaa;
3544     opacity: 1; /* Firefox */
3545 }
3546
3547 .ideditor ::-ms-input-placeholder {
3548     color: #aaa;
3549     opacity: 1; /* Firefox */
3550 }
3551
3552 .ideditor ::placeholder {
3553     color: #aaa;
3554     opacity: 1; /* Firefox */
3555 }
3556
3557 .ideditor p {
3558     font-size: 12px;
3559     margin: 0;
3560     padding: 0;
3561 }
3562 .ideditor p:last-child {
3563     padding-bottom: 0;
3564 }
3565 .ideditor em {
3566     font-style: italic;
3567 }
3568 .ideditor strong {
3569     font-weight: bold;
3570 }
3571 .ideditor a,
3572 .ideditor a:visited,
3573 .ideditor a:active {
3574     color: #7092ff;
3575 }
3576 .ideditor a:focus {
3577     color: #597be7;
3578 }
3579 @media (hover: hover) {
3580     .ideditor a:hover {
3581         color: #597be7;
3582     }
3583 }
3584 .ideditor kbd {
3585     display: inline-block;
3586     text-align: center;
3587     padding: 3px 5px;
3588     font-size: 11px;
3589     line-height: 1.3;
3590     min-width: 0.9em;
3591     vertical-align: baseline;
3592     background-color: #fcfcfc;
3593     border: solid 1px #ccc;
3594     margin: 0 2px;
3595     border-bottom-color: #bbb;
3596     border-radius: 3px;
3597     -webkit-box-shadow: inset 0 -1px 0 #bbb;
3598             box-shadow: inset 0 -1px 0 #bbb;
3599 }
3600
3601 .ideditor code {
3602     font-family: ui-monospace, monospace, monospace;
3603     background: rgba(174, 174, 174, 0.25);
3604     padding: 1px 2px;
3605 }
3606
3607 /* Forms
3608 ------------------------------------------------------- */
3609 .ideditor textarea,
3610 .ideditor input[type=text],
3611 .ideditor input[type=search],
3612 .ideditor input[type=number],
3613 .ideditor input[type=url],
3614 .ideditor input[type=tel],
3615 .ideditor input[type=email],
3616 .ideditor input[type=date] {
3617     background-color: #fff;
3618     color: #333;
3619     border: 1px solid #ccc;
3620     padding: 0px 10px 0px 10px;
3621     border-radius: 4px;
3622     text-overflow: ellipsis;
3623     overflow: auto;
3624 }
3625 .ideditor input[type=text],
3626 .ideditor input[type=search],
3627 .ideditor input[type=number],
3628 .ideditor input[type=url],
3629 .ideditor input[type=tel],
3630 .ideditor input[type=email],
3631 .ideditor input[type=date],
3632 .ideditor input[type=color] {
3633     /* need this since line-height interpretation may vary by font or browser */
3634     height: 2.585em;
3635 }
3636 .ideditor textarea  {
3637     min-height: 2em;
3638     padding-top: 5px;
3639     padding-bottom: 5px;
3640     resize: vertical;
3641     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
3642         "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
3643         "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
3644         sans-serif;
3645 }
3646
3647 .ideditor textarea:active,
3648 .ideditor input:active,
3649 .ideditor textarea:focus,
3650 .ideditor input:focus {
3651     background-color: #f1f1f1;
3652 }
3653
3654 .ideditor textarea.disabled,
3655 .ideditor input.disabled {
3656     color: #777;
3657     background-color: #eee;
3658     cursor: not-allowed;
3659 }
3660
3661 .ideditor input[type="checkbox"],
3662 .ideditor input[type="radio"] {
3663     width: 14px;
3664     height: 14px;
3665     margin-right: 6px;
3666     cursor: pointer;
3667     vertical-align: middle;
3668 }
3669 .ideditor[dir='rtl'] input[type="checkbox"],
3670 .ideditor[dir='rtl'] input[type="radio"] {
3671     margin-left: 6px;
3672     margin-right: 0;
3673 }
3674
3675 .ideditor input.mixed::-webkit-input-placeholder, .ideditor textarea.mixed::-webkit-input-placeholder {
3676     font-style: italic;
3677 }
3678
3679 .ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
3680     font-style: italic;
3681 }
3682
3683 .ideditor input.mixed:-ms-input-placeholder, .ideditor textarea.mixed:-ms-input-placeholder {
3684     font-style: italic;
3685 }
3686
3687 .ideditor input.mixed::-ms-input-placeholder, .ideditor textarea.mixed::-ms-input-placeholder {
3688     font-style: italic;
3689 }
3690
3691 .ideditor input.mixed::placeholder,
3692 .ideditor textarea.mixed::placeholder {
3693     font-style: italic;
3694 }
3695
3696 /* keytraps need to be invisible yet not be display:none or visibility:hidden */
3697 .ideditor .keytrap {
3698     width: 0;
3699     height: 0;
3700     padding: 0;
3701     margin: 0;
3702     border: 0;
3703 }
3704
3705 /* tables */
3706 .ideditor table {
3707     background-color: #fff;
3708     border-collapse: collapse;
3709     width: 100%;
3710     border-spacing: 0;
3711 }
3712 .ideditor table th {
3713     text-align: left;
3714 }
3715 .ideditor table.tags, .ideditor table.tags td, .ideditor table.tags th {
3716     border: 1px solid #ccc;
3717     padding: 4px;
3718 }
3719
3720 .ideditor ::-ms-clear {
3721    display: none;
3722 }
3723
3724 /* Grid
3725 ------------------------------------------------------- */
3726 .ideditor .col6  { float: left; width: 50.0000%; max-width: 600px; }
3727 .ideditor .col12 { float: left; width: 100.0000%; }
3728
3729
3730 /* Utility Classes
3731 ------------------------------------------------------- */
3732 .ideditor .fillL {
3733     background: #fff;
3734     color: #333;
3735 }
3736 .ideditor .fillL2 {
3737     background: #f6f6f6;
3738     color: #333;
3739 }
3740 .ideditor .fillL3 {
3741     background: #ececec;
3742     color: #333;
3743 }
3744 .ideditor .fillD {
3745     background: rgba(0,0,0,.5);
3746     color: #fff;
3747 }
3748 .ideditor .fillD2 {
3749     background: rgba(0,0,0,.75);
3750     color: #fff;
3751 }
3752
3753 .ideditor .fl { float: left;}
3754 .ideditor .fr { float: right;}
3755 .ideditor .al { left: 0; }
3756 .ideditor .ar { right: 0; }
3757
3758 .ideditor input.hide,
3759 .ideditor textarea.hide,
3760 .ideditor div.hide,
3761 .ideditor form.hide,
3762 .ideditor button.hide,
3763 .ideditor a.hide,
3764 .ideditor ul.hide,
3765 .ideditor li.hide {
3766     display: none;
3767 }
3768
3769 .ideditor .deemphasize {
3770     color: #a9a9a9;
3771 }
3772 .ideditor .content {
3773     -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
3774             box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
3775 }
3776 .ideditor .loading {
3777     background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
3778     background-size: 5px 5px;
3779 }
3780
3781
3782 /* Buttons
3783 ------------------------------------------------------- */
3784 .ideditor button {
3785     text-align: center;
3786     border: 0;
3787     background: #fff;
3788     color: #333;
3789     font-size: 12px;
3790     display: inline-block;
3791     border-radius: 4px;
3792 }
3793
3794 .ideditor button:focus,
3795 .ideditor button:active,
3796 .ideditor button.hover {
3797     background-color: #ececec;
3798 }
3799 @media (hover: hover) {
3800     .ideditor button:hover {
3801         background-color: #ececec;
3802     }
3803 }
3804 .ideditor button.active {
3805     background: #7092ff;
3806 }
3807 .ideditor button.disabled {
3808     background-color: rgba(255,255,255,.25);
3809     color: rgba(0,0,0,.4);
3810     cursor: not-allowed;
3811 }
3812
3813 .ideditor .joined > * {
3814     border-radius: 0;
3815     border-right: 1px solid rgba(0,0,0,.5);
3816 }
3817 .ideditor[dir='rtl'] .joined > * {
3818     border-left: 1px solid rgba(0,0,0,.5);
3819     border-right: none;
3820 }
3821
3822 .ideditor .fillL .joined > * {
3823     border-right: 1px solid #fff;
3824 }
3825 .ideditor .joined > *:first-child {
3826     border-radius: 4px 0 0 4px;
3827 }
3828 .ideditor[dir='rtl'] .joined > *:first-child {
3829     border-radius: 0 4px 4px 0;
3830 }
3831 .ideditor .joined > *:last-child {
3832     border-right-width: 0;
3833     border-radius: 0 4px 4px 0;
3834 }
3835 .ideditor[dir='rtl'] .joined > *.bar-button:last-child {
3836     border-radius: 4px 0 0 4px;
3837 }
3838
3839
3840 /* Action buttons */
3841 .ideditor button.action {
3842     background: #7092ff;
3843     color: #fff;
3844     font-weight: bold;
3845 }
3846 .ideditor button.action:focus,
3847 .ideditor button.action:active {
3848     background: #597be7;
3849 }
3850 .ideditor button.secondary-action {
3851     background: #ececec;
3852     font-weight: bold;
3853 }
3854 .ideditor button.secondary-action:focus,
3855 .ideditor button.secondary-action:active {
3856     background: #cccccc;
3857 }
3858
3859 .ideditor button.action.disabled,
3860 .ideditor button[disabled].action {
3861     background: #cccccc;
3862     color: #888;
3863     cursor: not-allowed;
3864 }
3865
3866 .ideditor button.action,
3867 .ideditor button.secondary-action {
3868     padding: 10px 5px;
3869 }
3870
3871 @media (hover: hover) {
3872     .ideditor button.action:hover {
3873         background: #597be7;
3874     }
3875     .ideditor button.secondary-action:hover {
3876         background: #cccccc;
3877     }
3878     .ideditor button.action.disabled:hover,
3879     .ideditor button[disabled].action:hover {
3880         background: #cccccc;
3881         color: #888;
3882         cursor: not-allowed;
3883     }
3884 }
3885
3886
3887 /* Icons
3888 ------------------------------------------------------- */
3889 .ideditor .icon {
3890     vertical-align: middle;
3891     width: 20px;
3892     height: 20px;
3893 }
3894
3895 .ideditor .icon.operation use {
3896     fill: #222;
3897     color: #79f;
3898 }
3899 .ideditor button.disabled .icon.operation use,
3900 .ideditor .icon.operation.disabled use {
3901     fill: rgba(32,32,32,.2);
3902     color: rgba(40,40,40,.2);
3903 }
3904
3905 .ideditor .icon.monochrome use {
3906     fill: currentColor;
3907 }
3908
3909 .ideditor .icon.inline {
3910     vertical-align: text-top;
3911     display: inline-block;
3912     width: 1.17em;
3913     height: 1.17em;
3914     margin: 0px 3px;
3915 }
3916
3917 .ideditor .icon.pre-text {
3918     margin-right: 5px;
3919 }
3920 .ideditor[dir='rtl'] .icon.pre-text {
3921     margin-left: 5px;
3922     margin-right: 0;
3923 }
3924
3925 .ideditor .icon.pre-text.user-icon {
3926     margin-left: 5px;
3927     margin-right: 5px;
3928 }
3929
3930 .ideditor .icon.light {
3931     color: #fff;
3932     fill: currentColor;
3933 }
3934 .ideditor .icon.created {
3935     color: #00ca07;
3936 }
3937 .ideditor .icon.modified {
3938     color: #666;
3939 }
3940 .ideditor .icon.deleted {
3941     color: #ea0000;
3942 }
3943
3944 .ideditor .user-icon {
3945     max-height: 20px;
3946     max-width: 20px;
3947     height: auto;
3948     width: auto;
3949     border-radius: 3px;
3950 }
3951
3952 .ideditor .icon-annotation {
3953     color: #333;
3954     vertical-align: baseline;
3955 }
3956
3957
3958 /* Toolbar / Persistent UI Elements
3959 ------------------------------------------------------- */
3960 .ideditor .top-toolbar-wrap {
3961     position: relative;
3962     z-index: 101;
3963 }
3964 .ideditor .top-toolbar {
3965     display: -webkit-box;
3966     display: -ms-flexbox;
3967     display: flex;
3968     -webkit-box-orient: horizontal;
3969     -webkit-box-direction: normal;
3970         -ms-flex-flow: row nowrap;
3971             flex-flow: row nowrap;
3972     -webkit-box-pack: justify;
3973         -ms-flex-pack: justify;
3974             justify-content: space-between;
3975     padding: 10px 0 0 0;
3976     overflow-x: auto;
3977     overflow-y: hidden;
3978     height: 100%;
3979     width: 100%;
3980
3981     /* hide scrollbar but allow scrolling */
3982     scrollbar-width: none; /* Firefox */
3983     -ms-overflow-style: none; /* IE, Edge */
3984 }
3985 .ideditor .top-toolbar::-webkit-scrollbar {
3986     display: none; /* Chrome, Safari, Opera */
3987 }
3988 .ideditor .top-toolbar .toolbar-item {
3989     display: -webkit-box;
3990     display: -ms-flexbox;
3991     display: flex;
3992     -webkit-box-flex: 0;
3993         -ms-flex: 0 1 auto;
3994             flex: 0 1 auto;
3995     -webkit-box-orient: vertical;
3996     -webkit-box-direction: normal;
3997         -ms-flex-flow: column wrap;
3998             flex-flow: column wrap;
3999     -webkit-box-pack: center;
4000         -ms-flex-pack: center;
4001             justify-content: center;
4002 }
4003 .ideditor .top-toolbar .toolbar-item .item-content {
4004     display: -webkit-box;
4005     display: -ms-flexbox;
4006     display: flex;
4007     -webkit-box-flex: 0;
4008         -ms-flex: 0 1 auto;
4009             flex: 0 1 auto;
4010     -webkit-box-orient: horizontal;
4011     -webkit-box-direction: normal;
4012         -ms-flex-flow: row nowrap;
4013             flex-flow: row nowrap;
4014     -webkit-box-pack: center;
4015         -ms-flex-pack: center;
4016             justify-content: center;
4017     height: 40px;
4018     width: auto;
4019     margin: 0 5px;
4020 }
4021 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
4022 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
4023     margin-right: 10px;
4024 }
4025 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
4026 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
4027     margin-left: 10px;
4028 }
4029 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
4030 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
4031     padding-right: 5px;
4032 }
4033 .ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
4034 .ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
4035     padding-left: 5px;
4036 }
4037 .ideditor .top-toolbar .toolbar-item .item-label {
4038     text-align: center;
4039     font-size: 11px;
4040     white-space: nowrap;
4041     margin: 1px 2px 2px 2px;
4042 }
4043 .ideditor .top-toolbar .toolbar-item.spacer {
4044     width: 100%;
4045     -webkit-box-flex: 2;
4046         -ms-flex-positive: 2;
4047             flex-grow: 2;
4048 }
4049 .ideditor .top-toolbar .toolbar-item:first-child {
4050     -webkit-box-pack: start;
4051         -ms-flex-pack: start;
4052             justify-content: flex-start;
4053 }
4054 .ideditor .top-toolbar .toolbar-item:last-child {
4055     -webkit-box-pack: end;
4056         -ms-flex-pack: end;
4057             justify-content: flex-end;
4058 }
4059 .ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
4060     display: none;
4061 }
4062 .ideditor button.bar-button {
4063     -webkit-box-flex: 0;
4064         -ms-flex: 0 0 auto;
4065             flex: 0 0 auto;
4066     -webkit-box-orient: horizontal;
4067     -webkit-box-direction: normal;
4068         -ms-flex-flow: row nowrap;
4069             flex-flow: row nowrap;
4070     -webkit-box-align: center;
4071         -ms-flex-align: center;
4072             align-items: center;
4073     padding: 0 10px;
4074     min-width: 30px;
4075     white-space: nowrap;
4076     display: -webkit-box;
4077     display: -ms-flexbox;
4078     display: flex;
4079     font-weight: bold;
4080 }
4081 .ideditor button.bar-button .icon {
4082     -webkit-box-flex: 0;
4083         -ms-flex: 0 0 20px;
4084             flex: 0 0 20px;
4085 }
4086 .ideditor button.bar-button .label {
4087     -webkit-box-flex: 0;
4088         -ms-flex: 0 1 auto;
4089             flex: 0 1 auto;
4090     padding: 0 5px;
4091 }
4092
4093 .ideditor button.bar-button.dragging {
4094     opacity: 0.75;
4095     z-index: 200;
4096 }
4097 .ideditor button.bar-button.dragging .tooltip {
4098     display: none;
4099 }
4100 .ideditor button.bar-button.dragging.removing {
4101     cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer;
4102 }
4103
4104 .ideditor button.save .count {
4105     display: inline-block;
4106     min-width: 32px;
4107     text-align: center;
4108 }
4109
4110 .ideditor .help-pane svg.icon.inline.add-note,
4111 .ideditor button.add-note svg.icon {
4112     height: 15px;
4113     width: 15px;
4114     color: rgba(0,0,0,0.25);
4115     stroke: #333;
4116     stroke-width: 60px;
4117     margin-top: 3px;
4118 }
4119 .ideditor button.add-note svg.icon {
4120     margin-left: unset;
4121     margin-right: 4px;
4122 }
4123 .ideditor[dir='rtl'] button.add-note svg.icon {
4124     margin-left: 4px;
4125     margin-right: unset;
4126 }
4127 .ideditor .help-pane svg.icon.inline.add-note {
4128     margin-left: 3px;
4129     margin-right: 3px;
4130 }
4131
4132 .ideditor .spinner {
4133     opacity: .5;
4134     position: absolute;
4135     right: 4px;
4136     bottom: 4px;
4137     height: 20px;
4138     width: 20px;
4139 }
4140 .ideditor .spinner img {
4141     height: 100%;
4142     width: 100%;
4143     background: transparent;
4144     border-radius: 100%;
4145 }
4146 .ideditor[dir='rtl'] .spinner img {
4147     -webkit-transform: scaleX(-1);
4148         -ms-transform: scaleX(-1);
4149             transform: scaleX(-1);
4150     -webkit-filter: FlipH;
4151             filter: FlipH;
4152     -ms-filter: "FlipH";
4153 }
4154
4155
4156 .ideditor .top-toolbar.narrow .spinner,
4157 .ideditor .top-toolbar.narrow button.bar-button .label {
4158     display: none;
4159 }
4160 .ideditor .top-toolbar.narrow button .count {
4161     border-left-width: 0;
4162     border-right-width: 0;
4163 }
4164
4165 .ideditor[dir='ltr'] .undo-redo button:first-of-type {
4166     margin-right: 1px;
4167 }
4168 .ideditor[dir='rtl'] .undo-redo button:first-of-type {
4169     margin-left: 1px;
4170 }
4171
4172 /* Header for modals / panes
4173 ------------------------------------------------------- */
4174 .ideditor .header {
4175     border-bottom: 1px solid #ccc;
4176     padding: 20px 40px;
4177     position: relative;
4178     display: -webkit-box;
4179     display: -ms-flexbox;
4180     display: flex;
4181     -webkit-box-align: center;
4182         -ms-flex-align: center;
4183             align-items: center;
4184     -webkit-box-pack: center;
4185         -ms-flex-pack: center;
4186             justify-content: center;
4187     -webkit-box-flex: 0;
4188         -ms-flex: 0 0 auto;
4189             flex: 0 0 auto;
4190 }
4191
4192 .ideditor .header h3 {
4193     text-align: center;
4194     margin-bottom: 0;
4195     text-overflow: ellipsis;
4196     overflow: hidden;
4197     padding: 0;
4198 }
4199
4200 .ideditor .header button,
4201 .ideditor .modal > button {
4202     border-radius: 0;
4203     width: 40px;
4204     text-align: center;
4205     overflow: hidden;
4206 }
4207
4208 .ideditor .header button {
4209     position: relative;
4210     height: 100%;
4211 }
4212
4213 .ideditor .field-help-title button.close,
4214 .ideditor .sidebar .header button.close,
4215 .ideditor .preset-list-pane .header button.preset-choose {
4216     position: absolute;
4217     right: 0;
4218     top: 0;
4219 }
4220 .ideditor[dir='rtl'] .field-help-title button.close,
4221 .ideditor[dir='rtl'] .sidebar .header button.close,
4222 .ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
4223     left: 0;
4224     right: auto;
4225 }
4226
4227 .ideditor .entity-editor-pane .header button.preset-choose {
4228     position: absolute;
4229     left: 0;
4230     top: 0;
4231 }
4232 .ideditor[dir='rtl'] .entity-editor-pane .header button.preset-choose {
4233     left: auto;
4234     right: 0;
4235 }
4236
4237 .ideditor .preset-choose {
4238     font-size: 16px;
4239     line-height: 1.25;
4240     font-weight: bold;
4241 }
4242
4243 .ideditor .modal > button {
4244     position: absolute;
4245     right: 0;
4246     top: 0;
4247     height: 59px;
4248     z-index: 50;
4249 }
4250 .ideditor[dir='rtl'] .modal > button {
4251     left: 0;
4252     right: unset;
4253 }
4254
4255 .ideditor .footer {
4256     position: absolute;
4257     bottom: 0;
4258     margin: 0;
4259     padding: 0 15px;
4260     border-top: 1px solid #ccc;
4261     background-color: #f6f6f6;
4262     width: 100%;
4263     height: 2.5em;
4264     z-index: 1;
4265     -ms-flex-wrap: wrap;
4266         flex-wrap: wrap;
4267     -webkit-box-pack: justify;
4268         -ms-flex-pack: justify;
4269             justify-content: space-between;
4270     -webkit-box-align: center;
4271         -ms-flex-align: center;
4272             align-items: center;
4273     list-style: none;
4274     display: -webkit-box;
4275     display: -ms-flexbox;
4276     display: flex;
4277 }
4278
4279 .ideditor .footer > a {
4280     -webkit-box-pack: center;
4281         -ms-flex-pack: center;
4282             justify-content: center;
4283 }
4284
4285 /* Hide/Toggle collapsible sections (aka Disclosure)
4286 ------------------------------------------------------- */
4287 .ideditor .hide-toggle .icon.pre-text {
4288     vertical-align: middle;
4289     width: 16px;
4290     height: 16px;
4291     margin-top: -3px;
4292 }
4293
4294 .ideditor a:visited.hide-toggle,
4295 .ideditor a.hide-toggle {
4296     display: inline-block;
4297     font-size: 14px;
4298     font-weight: bold;
4299     margin-bottom: 5px;
4300 }
4301
4302
4303 /* Sidebar / Inspector
4304 ------------------------------------------------------- */
4305 .ideditor .sidebar {
4306     position: relative;
4307     float: left;
4308     height: 100%;
4309     z-index: 10;
4310     background: #f6f6f6;
4311     -ms-user-select: element;
4312     border: 0px solid #ccc;
4313     border-right-width: 1px;
4314 }
4315 .ideditor[dir='rtl'] .sidebar {
4316     float: right;
4317     border-right-width: 0px;
4318     border-left-width: 1px;
4319 }
4320
4321 .ideditor .sidebar-resizer {
4322     position: absolute;
4323     top: 0;
4324     right: -10px;
4325     width: 10px;
4326     height: 100%;
4327     cursor: col-resize;
4328     /* disable drag-to-select */
4329     -webkit-user-select: none;
4330        -moz-user-select: none;
4331         -ms-user-select: none;
4332             user-select: none;
4333 }
4334 .ideditor[dir='rtl'] .sidebar-resizer {
4335     right: auto;
4336     left: -6px;
4337 }
4338
4339 .ideditor .sidebar.collapsed > *:not(.sidebar-resizer) {
4340     display: none;
4341 }
4342 .ideditor .sidebar.collapsed .sidebar-resizer {
4343     /* make target wider to avoid the user accidentally resizing window */
4344     width: 10px;
4345     right: -10px;
4346 }
4347 .ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
4348     left: -10px;
4349 }
4350
4351 .ideditor .sidebar-component {
4352     position: absolute;
4353     top: 0;
4354     left: 0;
4355     bottom: 0;
4356     right: 0;
4357     display: -webkit-box;
4358     display: -ms-flexbox;
4359     display: flex;
4360     -webkit-box-orient: vertical;
4361     -webkit-box-direction: normal;
4362         -ms-flex-direction: column;
4363             flex-direction: column;
4364 }
4365
4366 .ideditor .sidebar-component .body {
4367     width: 100%;
4368     height: 100%;
4369     overflow: auto;
4370     position: relative;
4371 }
4372
4373 .ideditor .panewrap {
4374     position: absolute;
4375     width: 200%;
4376     height: 100%;
4377     right: -100%;
4378 }
4379
4380 .ideditor .pane {
4381     position: absolute;
4382     width: 50%;
4383     top: 0;
4384     bottom: 2.5em;
4385     display: -webkit-box;
4386     display: -ms-flexbox;
4387     display: flex;
4388     -webkit-box-orient: vertical;
4389     -webkit-box-direction: normal;
4390         -ms-flex-direction: column;
4391             flex-direction: column;
4392 }
4393
4394 .ideditor .pane:first-child {
4395     left: 0;
4396 }
4397
4398 .ideditor .pane:last-child {
4399     right: 0;
4400 }
4401 .ideditor .feature-list-pane {
4402     display: -webkit-box;
4403     display: -ms-flexbox;
4404     display: flex;
4405     -webkit-box-orient: vertical;
4406     -webkit-box-direction: normal;
4407         -ms-flex-direction: column;
4408             flex-direction: column;
4409     height: 100%;
4410 }
4411
4412 .ideditor .inspector-wrap {
4413     width: 100%;
4414     height: 100%;
4415     overflow: hidden;
4416     position: relative;
4417 }
4418
4419 .ideditor .inspector-hidden {
4420     display: none;
4421 }
4422
4423 .ideditor .inspector-body {
4424     overflow-y: scroll;
4425     overflow-x: hidden;
4426     position: relative;
4427     height: 100%;
4428     -webkit-box-flex: 1;
4429         -ms-flex: 1 1 100%;
4430             flex: 1 1 100%;
4431 }
4432 .ideditor .entity-editor {
4433     padding: 20px;
4434 }
4435 /* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
4436 .ideditor .entity-editor > div:last-child {
4437     margin-bottom: 150px;
4438 }
4439
4440 .ideditor .sidebar .search-header {
4441     position: relative;
4442     overflow: hidden;
4443     -webkit-box-flex: 0;
4444         -ms-flex: 0 0 auto;
4445             flex: 0 0 auto;
4446 }
4447 .ideditor .sidebar .search-header .icon {
4448     display: inline-block;
4449     position: absolute;
4450     left: 10px;
4451     height: 100%;
4452     pointer-events: none;
4453 }
4454 .ideditor[dir='rtl'] .sidebar .search-header .icon {
4455     left: auto;
4456     right: 10px;
4457 }
4458
4459 .ideditor .sidebar .search-header input {
4460     width: 100%;
4461     padding: 0 10px;
4462     height: 3em;
4463     border-radius: 0;
4464     border-width: 0;
4465     border-bottom-width: 1px;
4466     text-indent: 30px;
4467     font-size: 18px;
4468     font-weight: bold;
4469 }
4470
4471 .ideditor .section:not(:last-child),
4472 .ideditor .map-pane .section {
4473     margin-bottom: 30px;
4474 }
4475
4476
4477 /* Feature List / Search Results
4478 ------------------------------------------------------- */
4479 .ideditor .feature-list  {
4480     width: 100%;
4481 }
4482 .ideditor .no-results-item,
4483 .ideditor .feature-list-item {
4484     width: 100%;
4485     position: relative;
4486     border-bottom: 1px solid #ccc;
4487     border-radius: 0;
4488 }
4489 .ideditor .no-results-item {
4490     padding: 10px;
4491     font-weight: bold;
4492 }
4493
4494 .ideditor .geocode-item {
4495     width: 100%;
4496     max-width: 200px;
4497     margin: 30px auto;
4498     min-height: 40px;
4499 }
4500
4501 .ideditor .feature-list-item {
4502     display: -webkit-box;
4503     display: -ms-flexbox;
4504     display: flex;
4505 }
4506 .ideditor .feature-list-item .label {
4507     text-align: left;
4508     padding: 10px;
4509     white-space: nowrap;
4510     text-overflow: ellipsis;
4511     overflow: hidden;
4512     -webkit-box-flex: 1;
4513         -ms-flex: 1 1 auto;
4514             flex: 1 1 auto;
4515 }
4516 .ideditor[dir='rtl'] .feature-list-item .label {
4517     text-align: right;
4518 }
4519
4520 .ideditor .feature-list-item .label .icon {
4521     opacity: .5;
4522 }
4523 .ideditor .feature-list-item .close {
4524     padding: 10px;
4525
4526 }
4527 .ideditor .feature-list-item .close .icon {
4528     opacity: 0.5;
4529 }
4530 .ideditor .feature-list-item .entity-type {
4531     color: #7092ff;
4532     font-weight: bold;
4533 }
4534 .ideditor .feature-list-item:active .entity-type,
4535 .ideditor .feature-list-item:focus .entity-type {
4536     color: #597be7;
4537 }
4538 @media (hover: hover) {
4539     .ideditor .feature-list-item:hover .entity-type {
4540         color: #597be7;
4541     }
4542 }
4543 .ideditor .feature-list-item .entity-name {
4544     color: #666;
4545     padding-left: 10px;
4546 }
4547 .ideditor[dir='rtl'] .feature-list-item .entity-name {
4548     padding-left: 0;
4549     padding-right: 10px;
4550 }
4551 .ideditor .section-selected-features .feature-list {
4552     border: 1px solid #ccc;
4553     border-radius: 4px;
4554     overflow: hidden;
4555     margin-top: 5px;
4556 }
4557 .ideditor .section-selected-features .feature-list-item:last-child {
4558     border: none;
4559 }
4560 .ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:first-child) {
4561     border-top-left-radius: 0;
4562     border-bottom-left-radius: 0;
4563 }
4564 .ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
4565     border-top-right-radius: 0;
4566     border-bottom-right-radius: 0;
4567 }
4568 .ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:last-child) {
4569     border-top-right-radius: 0;
4570     border-bottom-right-radius: 0;
4571 }
4572 .ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
4573     border-top-left-radius: 0;
4574     border-bottom-left-radius: 0;
4575 }
4576
4577 /* Preset List and Icons
4578 ------------------------------------------------------- */
4579 .ideditor .preset-list  {
4580     width: 100%;
4581     padding: 20px 20px 10px 20px;
4582 }
4583
4584 .ideditor .preset-list-item {
4585     margin-bottom: 10px;
4586     position: static;
4587 }
4588
4589 .ideditor .preset-list-button-wrap {
4590     min-height: 62px;
4591     display: -webkit-box;
4592     display: -ms-flexbox;
4593     display: flex;
4594     border: 1px solid #ccc;
4595     border-radius: 4px;
4596 }
4597
4598 .ideditor .preset-list-button {
4599     width: 100%;
4600     height: 100%;
4601     position: relative;
4602     display: -webkit-box;
4603     display: -ms-flexbox;
4604     display: flex;
4605     -webkit-box-align: center;
4606         -ms-flex-align: center;
4607             align-items: center;
4608 }
4609
4610 .ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
4611     background: #ececec;
4612 }
4613
4614 .ideditor .preset-icon-container {
4615     position: relative;
4616     width: 60px;
4617     height: 60px;
4618     text-align: center;
4619     display: -webkit-box;
4620     display: -ms-flexbox;
4621     display: flex;
4622     -webkit-box-align: center;
4623         -ms-flex-align: center;
4624             align-items: center;
4625     -webkit-box-pack: center;
4626         -ms-flex-pack: center;
4627             justify-content: center;
4628     -webkit-box-flex: 0;
4629         -ms-flex: 0 0 auto;
4630             flex: 0 0 auto;
4631 }
4632 .ideditor .preset-icon-container.small {
4633     width: 40px;
4634     height: 40px;
4635     -webkit-box-flex: 0;
4636         -ms-flex: 0 0 auto;
4637             flex: 0 0 auto;
4638 }
4639 .ideditor .preset-icon-container img.image-icon {
4640     width: 50px;
4641     height: 50px;
4642     -o-object-fit: contain;
4643        object-fit: contain;
4644     border-radius: 2px;
4645     z-index: 2;
4646     visibility: hidden;
4647 }
4648 .ideditor .preset-icon-container.showing-img img.image-icon {
4649     visibility: visible;
4650 }
4651 .ideditor .preset-icon-container.showing-img *:not(.image-icon) {
4652     display: none;
4653 }
4654
4655 .ideditor .preset-icon-point-border path {
4656     stroke: #333;
4657     stroke-width: 1.2;
4658     fill: transparent;
4659 }
4660
4661 .ideditor .preset-icon-category-border path {
4662     stroke: #999;
4663     stroke-width: 1px;
4664     fill: transparent;
4665     -webkit-backface-visibility: hidden;
4666             backface-visibility: hidden;
4667     vector-effect: non-scaling-stroke;
4668 }
4669
4670 .ideditor .preset-icon-line {
4671     margin: auto;
4672     position: absolute;
4673     left: 0;
4674     right: 0;
4675     top: 0;
4676     width: 100%;
4677     height: 100%;
4678 }
4679 .ideditor .preset-icon-container path {
4680     cursor: inherit;
4681 }
4682 .ideditor .preset-icon-container circle.vertex {
4683     fill: #fff;
4684     stroke: rgba(0, 0, 0, 0.25);
4685 }
4686 .ideditor .preset-icon-fill circle.midpoint {
4687     fill: transparent;
4688     stroke: rgba(0, 0, 0, 0.25);
4689 }
4690 /* use a consistent stroke width */
4691 .ideditor .preset-icon-container path.line.stroke {
4692     stroke-width: 2 !important;
4693 }
4694 .ideditor .preset-icon-container path.line.casing {
4695     stroke-width: 4 !important;
4696 }
4697
4698 .ideditor .preset-icon-fill {
4699     margin: auto;
4700     position: absolute;
4701     width: 100%;
4702     height: 100%;
4703     left: 0;
4704     top: 0;
4705 }
4706 .ideditor .preset-icon-container svg,
4707 .ideditor .preset-icon-container svg > * {
4708     cursor: inherit !important;
4709 }
4710 .ideditor .preset-icon-fill path.area.stroke {
4711     fill: transparent;
4712 }
4713
4714 .ideditor .preset-icon-fill-vertex circle {
4715     stroke-width: 1.5px;
4716     stroke: #333;
4717     fill: #efefef;
4718     -webkit-backface-visibility: hidden;
4719             backface-visibility: hidden;
4720 }
4721
4722 .ideditor .preset-icon {
4723     width: 100%;
4724     height:100%;
4725     position: absolute;
4726     z-index: 1;
4727 }
4728 .ideditor .preset-icon .icon {
4729     position: absolute;
4730     margin: auto;
4731     left: 0;
4732     right: 0;
4733     width: 100%;
4734     height: 100%;
4735     -webkit-transform: scale(0.48);
4736         -ms-transform: scale(0.48);
4737             transform: scale(0.48);
4738 }
4739 .ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
4740     -webkit-transform: translateY(-7%) scale(0.27);
4741         -ms-transform: translateY(-7%) scale(0.27);
4742             transform: translateY(-7%) scale(0.27);
4743 }
4744 .ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
4745     -webkit-transform: translateY(-9%) scale(0.5);
4746         -ms-transform: translateY(-9%) scale(0.5);
4747             transform: translateY(-9%) scale(0.5);
4748 }
4749 .ideditor .preset-icon.framed .icon {
4750     -webkit-transform: scale(0.4);
4751         -ms-transform: scale(0.4);
4752             transform: scale(0.4);
4753 }
4754 .ideditor .preset-icon.framed.line-geom:not(.category) .icon,
4755 .ideditor .preset-icon.framed.route-geom .icon {
4756     top: 20%;
4757     -webkit-transform: translateY(-30%) scale(0.4);
4758         -ms-transform: translateY(-30%) scale(0.4);
4759             transform: translateY(-30%) scale(0.4);
4760 }
4761 .ideditor .preset-icon-iD .icon {
4762     -webkit-transform: scale(1);
4763         -ms-transform: scale(1);
4764             transform: scale(1);
4765 }
4766 .ideditor .preset-icon-iD.framed .icon {
4767     -webkit-transform: scale(0.74);
4768         -ms-transform: scale(0.74);
4769             transform: scale(0.74);
4770 }
4771 .ideditor .preset-icon-iD.framed.line-geom:not(.category) .icon,
4772 .ideditor .preset-icon-iD.framed.route-geom .icon {
4773     -webkit-transform: translateY(-30%) scale(0.74);
4774         -ms-transform: translateY(-30%) scale(0.74);
4775             transform: translateY(-30%) scale(0.74);
4776 }
4777 .ideditor .preset-icon-container.fallback .preset-icon .icon {
4778     -webkit-transform: scale(0.5) !important;
4779         -ms-transform: scale(0.5) !important;
4780             transform: scale(0.5) !important;
4781 }
4782
4783 .ideditor .preset-list-button .label {
4784     display: -webkit-box;
4785     display: -ms-flexbox;
4786     display: flex;
4787     -webkit-box-orient: horizontal;
4788     -webkit-box-direction: normal;
4789         -ms-flex-flow: row wrap;
4790             flex-flow: row wrap;
4791     -webkit-box-align: center;
4792         -ms-flex-align: center;
4793             align-items: center;
4794     background: #f6f6f6;
4795     text-align: left;
4796     padding: 5px 10px;
4797     border-left: 1px solid rgba(0, 0, 0, .1);
4798     -webkit-box-flex: 1;
4799         -ms-flex: 1 1 100%;
4800             flex: 1 1 100%;
4801     -ms-flex-item-align: stretch;
4802         align-self: stretch;
4803 }
4804 .ideditor[dir='rtl'] .preset-list-button .label {
4805     text-align: right;
4806     border-left: none;
4807     border-right: 1px solid rgba(0, 0, 0, .1);
4808 }
4809 .ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
4810     border-top-right-radius: 4px;
4811     border-bottom-right-radius: 4px;
4812 }
4813 .ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
4814     border-top-left-radius: 4px;
4815     border-bottom-left-radius: 4px;
4816 }
4817 .ideditor[dir='ltr'] .category .preset-list-button .label {
4818     border-radius: 0px 4px 4px 0px;
4819 }
4820 .ideditor[dir='rtl'] .category .preset-list-button .label {
4821     border-radius: 4px 0px 0px 4px;
4822 }
4823
4824 .ideditor .preset-list-item.mixed-types .label {
4825     font-style: italic;
4826 }
4827
4828 .ideditor .preset-list-button .label-inner {
4829     width: 100%;
4830     line-height: 1.35em;
4831 }
4832 .ideditor .preset-list-button .label-inner .namepart {
4833     text-overflow: ellipsis;
4834 }
4835 .ideditor .preset-list-button .label-inner .namepart:nth-child(1) {
4836     font-weight: bold;
4837 }
4838
4839 .ideditor .preset-list-button:focus .label,
4840 .ideditor .preset-list-button:active .label,
4841 .ideditor .preset-list-button.disabled,
4842 .ideditor .preset-list-button.disabled .label {
4843     background-color: #ececec;
4844 }
4845 @media (hover: hover) {
4846     .ideditor .preset-list-button:hover .label {
4847         background-color: #ececec;
4848     }
4849 }
4850
4851 .ideditor .preset-list-button-wrap button.tag-reference-button {
4852     width: 32px;
4853     -webkit-box-flex: 0;
4854         -ms-flex: 0 0 auto;
4855             flex: 0 0 auto;
4856 }
4857 .ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
4858     background: #f6f6f6;
4859 }
4860 .ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
4861     border-left: 1px solid #ccc;
4862 }
4863 .ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
4864     border-right: 1px solid #ccc;
4865 }
4866 .ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
4867     border-radius: 0 4px 4px 0;
4868 }
4869 .ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
4870     border-radius: 4px 0 0 4px;
4871 }
4872 .ideditor .preset-list-button-wrap button.tag-reference-button .icon {
4873     opacity: .5;
4874 }
4875 .ideditor .preset-list-button-wrap .accessory-buttons {
4876     display: -webkit-box;
4877     display: -ms-flexbox;
4878     display: flex;
4879 }
4880
4881
4882 .ideditor .current .preset-list-button,
4883 .ideditor .current .preset-list-button .label {
4884     background-color: #e8ebff;
4885 }
4886
4887 .ideditor .category .preset-list-button:after,
4888 .ideditor .category .preset-list-button:before {
4889     content: "";
4890     position: absolute;
4891     top: -5px;
4892     left: -1px; right: -1px;
4893     border: 1px solid #ccc;
4894     border-bottom: none;
4895     border-radius: 6px 6px 0 0;
4896     height: 6px;
4897 }
4898
4899 .ideditor .category .preset-list-button:before {
4900     top: -3px;
4901 }
4902
4903 .ideditor .subgrid .preset-list {
4904     width: auto;
4905     padding: 10px;
4906     margin: 0 -10px;
4907     border: 0;
4908     border-radius: 8px;
4909 }
4910 .ideditor .subgrid .preset-list > *:last-child {
4911     margin-bottom: 0;
4912 }
4913
4914 .ideditor .subgrid .arrow {
4915     border: solid rgba(0, 0, 0, 0);
4916     border-width: 10px;
4917     border-bottom-color: #ececec;
4918     width: 0;
4919     height: 0;
4920     margin-left: 50%;
4921     margin-left: calc(50% - 10px);
4922 }
4923
4924
4925 /* Quick links
4926 ------------------------------------------------------- */
4927 .ideditor .quick-links {
4928     display: -webkit-box;
4929     display: -ms-flexbox;
4930     display: flex;
4931     -webkit-box-orient: horizontal;
4932     -webkit-box-direction: normal;
4933         -ms-flex-flow: row wrap;
4934             flex-flow: row wrap;
4935     -webkit-box-pack: end;
4936         -ms-flex-pack: end;
4937             justify-content: flex-end;
4938     padding: 5px 0 0 0;
4939 }
4940 .ideditor .quick-link {
4941     margin: 0 5px;
4942 }
4943
4944
4945 /* Entity/Preset Editor
4946 ------------------------------------------------------- */
4947 .ideditor .section .grouped-items-area {
4948     padding: 10px;
4949     margin: 0 -10px 10px -10px;
4950     border-radius: 8px;
4951     background: #ececec;
4952 }
4953 .ideditor .section .grouped-items-area:empty {
4954     display: none;
4955 }
4956
4957 /*
4958     The parts of a field:
4959     - `.form-field` is a `div` wraps the entire thing
4960     - `.field-label` is a `label` that wraps the top part, it contains;
4961        - `span` classed `label-text`
4962        - 0..n buttons for "remove", "modified", "tag reference"
4963     - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
4964        - usually an `input`
4965        - sometimes some buttons (translate, increment, decrement)
4966        - or could just be a `div` with anything really
4967     - `.tag-reference-body` at the bottom (usually hidden)
4968
4969    .------------------.                             -
4970    |  Name        | i |  <- .field-label        |
4971    +------------------+                               |
4972    |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
4973    '------------------'                               |
4974      tag reference       <- .tag-reference-body      |
4975                                                     -
4976 */
4977
4978 .ideditor .form-field {
4979     display: -webkit-box;
4980     display: -ms-flexbox;
4981     display: flex;
4982     -webkit-box-orient: horizontal;
4983     -webkit-box-direction: normal;
4984         -ms-flex-flow: row wrap;
4985             flex-flow: row wrap;
4986     margin-bottom: 10px;
4987     width: 100%;
4988     -webkit-transition: margin-bottom 200ms;
4989     transition: margin-bottom 200ms;
4990 }
4991
4992 .ideditor .form-field.nowrap,
4993 .ideditor .wrap-form-field:last-child .form-field {
4994     margin-bottom: 0;
4995 }
4996
4997 /* A `label` element that wraps the top section */
4998 .ideditor .field-label {
4999     display: -webkit-box;
5000     display: -ms-flexbox;
5001     display: flex;
5002     -webkit-box-orient: horizontal;
5003     -webkit-box-direction: normal;
5004         -ms-flex-flow: row nowrap;
5005             flex-flow: row nowrap;
5006     -webkit-box-flex: 1;
5007         -ms-flex: 1 1 100%;
5008             flex: 1 1 100%;
5009     position: relative;
5010     font-weight: bold;
5011     color: #333;
5012     background: #f6f6f6;
5013     border: 1px solid #ccc;
5014     border-radius: 4px 4px 0 0;
5015     overflow: hidden;
5016 }
5017 .ideditor .field-label .label-text {
5018     overflow: hidden;
5019     text-overflow: ellipsis;
5020     -webkit-box-flex: 1;
5021         -ms-flex: 1 1 auto;
5022             flex: 1 1 auto;
5023     padding: 5px 0 4px 10px;
5024 }
5025 .ideditor[dir='rtl'] .field-label .label-text {
5026     padding: 5px 10px 4px 0;
5027 }
5028 .ideditor .field-label .label-text span {
5029     white-space: nowrap;
5030 }
5031
5032 .ideditor .label-text .label-textannotation svg.icon {
5033     margin: 0 8px;
5034     color: #333;
5035     opacity: 0.5;
5036     width: 14px;
5037     height: 14px;
5038     vertical-align: text-top;
5039 }
5040
5041 .ideditor .field-label button {
5042     -webkit-box-flex: 0;
5043         -ms-flex: 0 0 auto;
5044             flex: 0 0 auto;
5045     border-left: 1px solid #ccc;
5046     width: 32px;
5047     border-radius: 0;
5048 }
5049 .ideditor[dir='rtl'] .field-label button {
5050     border-left: none;
5051     border-right: 1px solid #ccc;
5052 }
5053 .ideditor .field-label button:not(:hover):not(:active):not(:focus) {
5054     background: none;
5055 }
5056 .ideditor .field-label .icon {
5057     opacity: .5;
5058
5059 }
5060
5061 .ideditor .field-label .modified-icon,
5062 .ideditor .field-label .remove-icon,
5063 .ideditor .field-label .remove-icon-multilingual {
5064     display: none;
5065 }
5066 .ideditor .modified:not(.locked) .field-label .modified-icon,
5067 .ideditor .present:not(.locked) .field-label .remove-icon,
5068 .ideditor .present:not(.locked) .field-label .remove-icon-multilingual {
5069     display: inline-block;
5070 }
5071
5072 /* A `div` element that wraps the bottom section */
5073 .ideditor .form-field-input-wrap {
5074     display: -webkit-box;
5075     display: -ms-flexbox;
5076     display: flex;
5077     -webkit-box-orient: horizontal;
5078     -webkit-box-direction: normal;
5079         -ms-flex-flow: row nowrap;
5080             flex-flow: row nowrap;
5081     width: 100%;
5082     -webkit-box-flex: 1;
5083         -ms-flex: 1 1 auto;
5084             flex: 1 1 auto;
5085     border-top: 0;
5086     border-radius: 0 0 4px 4px;
5087 }
5088 .ideditor .nowrap .form-field-input-wrap {
5089     border-radius: 0;
5090 }
5091
5092
5093 .ideditor .form-field-input-wrap > input,
5094 .ideditor .form-field-input-wrap > label,
5095 .ideditor .form-field-input-wrap > textarea,
5096 .ideditor .form-field-input-wrap > ul.chiplist {
5097     -webkit-box-flex: 1;
5098         -ms-flex: 1 1 auto;
5099             flex: 1 1 auto;
5100     border: 1px solid #ccc;
5101     border-top: 0;
5102     border-radius: 0;
5103     position: relative;
5104 }
5105 .ideditor .form-field-input-wrap > textarea {
5106     height: 65px;
5107     border-radius: 0 0 4px 4px;
5108 }
5109
5110 /* Buttons inside fields */
5111 .ideditor .form-field-button {
5112     -webkit-box-flex: 0;
5113         -ms-flex: 0 0 auto;
5114             flex: 0 0 auto;
5115     width: 32px;
5116     position: relative;
5117     background-color: #fff;
5118     border: 1px solid #ccc;
5119     border-radius: 0;
5120     border-top-width: 0;
5121     border-left-width: 0;
5122     vertical-align: top;
5123 }
5124 .ideditor[dir='rtl'] .form-field-button {
5125     border-left-width: 1px;
5126     border-right-width: 0;
5127 }
5128 .ideditor .form-field-button:active,
5129 .ideditor .form-field-button:focus {
5130     background-color: #f1f1f1;
5131 }
5132 @media (hover: hover) {
5133     .ideditor .form-field-button:hover {
5134         background-color: #f1f1f1;
5135     }
5136 }
5137 .ideditor .form-field-button .icon {
5138     fill: #333;
5139     opacity: .5;
5140 }
5141 .ideditor .form-field-button.colour-preview {
5142     border-radius: 0 0 4px 0;
5143 }
5144 .ideditor .form-field-button.colour-preview > div.colour-box {
5145     border: 3px solid #fff;
5146     height: 100%;
5147     border-radius: 8px;
5148     cursor: pointer;
5149     text-align: center;
5150     line-height: 20px;
5151     padding: 1px 0 0 1px;
5152 }
5153 .ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box {
5154     border-color: #ececec;
5155 }
5156 .ideditor .form-field-button.colour-preview:active > div.colour-box,
5157 .ideditor .form-field-button.colour-preview:focus > div.colour-box {
5158     border-color: #f1f1f1;
5159 }
5160 @media (hover: hover) {
5161     .ideditor .form-field-button.colour-preview:hover > div.colour-box {
5162         border-color: #f1f1f1;
5163     }
5164 }
5165 .ideditor input.colour-selector {
5166     visibility: hidden;
5167     position: absolute;
5168 }
5169 .ideditor input.date-selector {
5170     visibility: hidden;
5171     position: absolute;
5172 }
5173
5174
5175 /* round corners of first/last child elements */
5176 .ideditor .form-field-input-wrap > button:last-of-type {
5177     border-bottom-right-radius: 4px;
5178 }
5179 .ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {
5180     border-bottom-left-radius: 4px;
5181 }
5182
5183
5184 /* Field - Access, DirectionalCombo
5185 ------------------------------------------------------- */
5186 .ideditor .form-field-input-access,
5187 .ideditor .form-field-input-directionalcombo {
5188     -webkit-box-flex: 1;
5189         -ms-flex: 1 1 auto;
5190             flex: 1 1 auto;
5191     display: -webkit-box;
5192     display: -ms-flexbox;
5193     display: flex;
5194     -webkit-box-orient: horizontal;
5195     -webkit-box-direction: normal;
5196         -ms-flex-flow: row wrap;
5197             flex-flow: row wrap;
5198 }
5199
5200 /* Field - lists with labeled input items
5201 ------------------------------------------------------- */
5202 .ideditor .form-field ul.rows {
5203     -webkit-box-flex: 1;
5204         -ms-flex: 1 1 auto;
5205             flex: 1 1 auto;
5206     border: 1px solid #ccc;
5207     border-top: 0;
5208     border-radius: 0 0 4px 4px;
5209     overflow: hidden;
5210     width: 100%;
5211 }
5212 .ideditor .form-field ul.rows li {
5213     border-top: 1px solid #ccc;
5214 }
5215 .ideditor .form-field ul.rows li:first-child {
5216     border-top: 0;
5217 }
5218 .ideditor .form-field ul.rows li {
5219     display: -webkit-box;
5220     display: -ms-flexbox;
5221     display: flex;
5222     -webkit-box-orient: horizontal;
5223     -webkit-box-direction: normal;
5224         -ms-flex-flow: row nowrap;
5225             flex-flow: row nowrap;
5226 }
5227 .ideditor .form-field ul.rows li.labeled-input > span,
5228 .ideditor .form-field ul.rows li.labeled-input > div {
5229     -webkit-box-flex: 1;
5230         -ms-flex: 1 1 auto;
5231             flex: 1 1 auto;
5232     width: 100%;
5233     border-radius: 0;
5234 }
5235 .ideditor .form-field ul.rows li input {
5236     border-radius: 0;
5237     border-width: 0;
5238     width: 100%;
5239 }
5240 .ideditor .form-field ul.rows li button {
5241     border-width: 0;
5242 }
5243 .ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
5244 .ideditor[dir='ltr'] .form-field ul.rows li button {
5245     border-left-width: 1px;
5246 }
5247 .ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
5248 .ideditor[dir='rtl'] .form-field ul.rows li button {
5249     border-right-width: 1px;
5250 }
5251
5252
5253 /* Field - Structure
5254 ------------------------------------------------------- */
5255 .ideditor .structure-extras-wrap {
5256     width: 100%;
5257     padding: 10px 10px;
5258     background: #fff;
5259     border: 1px solid #ccc;
5260     border-top: 0px;
5261     border-radius: 0 0 4px 4px;
5262 }
5263 .ideditor .structure-extras-wrap > ul.rows {
5264     border: 1px solid #ccc;
5265     border-radius: 4px;
5266 }
5267
5268
5269 /* Field - Combo / Multicombo
5270 ------------------------------------------------------- */
5271 .ideditor .form-field-input-combo > input:only-of-type {
5272     border-radius: 0 0 4px 4px;
5273     width: 100%;
5274 }
5275 .ideditor .form-field-input-combo.empty-combobox input,
5276 .ideditor .form-field-input-multicombo .empty-combobox input {
5277     padding-right: 10px;
5278     padding-left: 10px;
5279 }
5280 .ideditor .form-field-input-combo.empty-combobox .combobox-caret,
5281 .ideditor .form-field-input-multicombo .empty-combobox .combobox-caret {
5282     display: none;
5283 }
5284
5285 .ideditor .form-field-input-combo input.raw-value,
5286 .ideditor .form-field-input-semicombo input.raw-value,
5287 .ideditor .form-field-input-multicombo input.raw-value {
5288     font-family: monospace;
5289 }
5290 .ideditor .form-field-input-combo input.known-value,
5291 .ideditor .form-field-input-semicombo input.known-value,
5292 .ideditor .form-field-input-multicombo input.known-value {
5293     color: #7092ff;
5294 }
5295
5296 .ideditor .form-field-input-multicombo ul.chiplist {
5297     padding: 5px 8px 5px 8px;
5298     background: #fff;
5299     display: block;
5300     border-radius: 0 0 4px 4px;
5301     width: 100%;
5302 }
5303
5304 .ideditor .form-field-input-multicombo li {
5305     display: -webkit-inline-box;
5306     display: -ms-inline-flexbox;
5307     display: inline-flex;
5308     -webkit-box-orient: horizontal;
5309     -webkit-box-direction: normal;
5310         -ms-flex-flow: row nowrap;
5311             flex-flow: row nowrap;
5312     -webkit-box-align: center;
5313         -ms-flex-align: center;
5314             align-items: center;
5315     margin-bottom: 3px;
5316     margin-top: 3px;
5317     border-radius: 4px;
5318 }
5319 .ideditor[dir='ltr'] .form-field-input-multicombo li {
5320     margin-right: 6px;
5321 }
5322 .ideditor[dir='rtl'] .form-field-input-multicombo li {
5323     margin-left: 6px;
5324 }
5325
5326 .ideditor .form-field-input-multicombo li.chip {
5327     background-color: #eff2f7;
5328     border: 1px solid #ccd5e3;
5329     max-width: 100%;
5330     color: #7092ff;
5331 }
5332 .ideditor .form-field-input-multicombo li.chip.negated span {
5333     text-decoration: line-through;
5334 }
5335 .ideditor .form-field-input-multicombo li.chip input {
5336     width: 1em;
5337 }
5338 .ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
5339     padding: 2px 0px 2px 5px;
5340 }
5341 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
5342     padding: 2px 5px 2px 0px;
5343 }
5344 .ideditor .form-field-input-multicombo li.chip.draggable {
5345     cursor: -webkit-grab;
5346     cursor: grab;
5347 }
5348 .ideditor .form-field-input-multicombo li.chip.dragging {
5349     opacity: 0.75;
5350     z-index: 3000;
5351     cursor: -webkit-grabbing;
5352     cursor: grabbing;
5353 }
5354 .ideditor .form-field-input-multicombo li.chip.raw-value {
5355     font-family: monospace;
5356     color: #333;
5357 }
5358 .ideditor .form-field-input-multicombo li.mixed {
5359     border-color: #eff2f7;
5360     color: #888;
5361     font-style: italic;
5362 }
5363
5364 .ideditor .form-field-input-multicombo li.chip > span {
5365     display: block;
5366     -webkit-box-flex: 1;
5367         -ms-flex: 1 1 auto;
5368             flex: 1 1 auto;
5369     overflow: hidden;
5370     word-wrap: break-word;
5371 }
5372
5373 .ideditor .form-field-input-multicombo a {
5374     font-family: Arial, Helvetica, sans-serif !important;
5375     font-size: 16px !important;
5376     padding: 0px 5px 0px 5px;
5377     margin: 0;
5378     cursor: pointer;
5379     color: #a6b4ce;
5380     display: block;
5381     text-align: center;
5382     -webkit-box-flex: 0;
5383         -ms-flex: 0 0 auto;
5384             flex: 0 0 auto;
5385 }
5386
5387 .ideditor .form-field-input-multicombo .input-wrap {
5388     border: 1px solid #ddd;
5389     width: 180px;
5390 }
5391 .ideditor .form-field-input-multicombo input {
5392     border: none;
5393     width: 100%;
5394 }
5395
5396 .ideditor .form-field-input-multicombo input:focus {
5397     border-radius: 4px !important;
5398 }
5399
5400 .ideditor .form-field-input-multicombo .full-line-chips li.chip {
5401     width: 100%;
5402 }
5403 .ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
5404     width: auto;
5405 }
5406
5407 .ideditor .form-field-input-combo .tag-value-icon,
5408 .ideditor .form-field-input-semicombo .input-wrap .tag-value-icon,
5409 .ideditor .form-field-input-multicombo .input-wrap .tag-value-icon {
5410     display: inline-block;
5411     position: relative;
5412     height: 24px;
5413     width: 30px;
5414     margin-right: -30px;
5415     -ms-flex-item-align: center;
5416         align-self: center;
5417     vertical-align: middle;
5418     z-index: 1;
5419     padding-left: 11px;
5420 }
5421 .ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon,
5422 .ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon,
5423 .ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon  {
5424     margin-right: 0;
5425     margin-left: -30px;
5426     padding-left: 0;
5427     padding-right: 11px;
5428 }
5429 .ideditor .tag-value-icon .icon {
5430     width: 21px;
5431     height: 21px;
5432     margin: auto;
5433 }
5434 .ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input,
5435 .ideditor[dir='ltr'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
5436 .ideditor[dir='ltr'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
5437     padding-left: 40px;
5438 }
5439 .ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input,
5440 .ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
5441 .ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
5442     padding-right: 40px;
5443 }
5444 .ideditor .combobox-option .tag-value-icon {
5445     display: inline-block;
5446     width: 28px;
5447 }
5448 .ideditor .form-field-input-multicombo li.chip .tag-value-icon .icon {
5449     margin: 0;
5450     margin-right: 6px;
5451     display: inline-block;
5452     vertical-align: center;
5453 }
5454 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip .tag-value-icon .icon {
5455     margin-right: 6px;
5456     margin-left: 0;
5457 }
5458
5459
5460 /* Field - Text / Numeric
5461 ------------------------------------------------------- */
5462 .ideditor .form-field-input-text > input:only-child,
5463 .ideditor .form-field-input-tel > input:only-of-type,
5464 .ideditor .form-field-input-email > input:only-of-type,
5465 .ideditor .form-field-input-url > input:only-child {
5466     border-radius: 0 0 4px 4px;
5467 }
5468 .ideditor .form-field-input-text > input:not(:only-child),
5469 .ideditor .form-field-input-url > input:not(:only-child) {
5470     border-radius: 0 0 0 4px;
5471 }
5472 .ideditor .form-field-input-number > input:only-of-type {
5473     border-radius: 0 0 0 4px;
5474 }
5475 .ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
5476     border-radius: 0 0 4px 0;
5477 }
5478 .ideditor .form-field-input-number > button:last-of-type {
5479     border-radius: 0 0 4px 0;
5480 }
5481 .ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
5482     border-radius: 0 0 0 4px;
5483 }
5484
5485 .ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
5486 .ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
5487 .ideditor[dir='ltr'] .form-field-input-identifier > button {
5488     border-bottom-right-radius: 4px;
5489 }
5490 .ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
5491 .ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
5492 .ideditor[dir='rtl'] .form-field-input-identifier > button {
5493     border-bottom-left-radius: 4px;
5494 }
5495
5496 /* draw the up/down on the buttons */
5497 .ideditor .form-field-input-number button.decrement::after,
5498 .ideditor .form-field-input-number button.increment::after {
5499     content: "";
5500     height: 0; width: 0;
5501     position: absolute;
5502     left: 0; right: 0; bottom: 0; top: 0;
5503     margin: auto;
5504 }
5505 .ideditor .form-field-input-number button.decrement::after {
5506     border-top: 5px solid #ccc;
5507     border-left: 5px solid transparent;
5508     border-right: 5px solid transparent;
5509 }
5510 .ideditor .form-field-input-number button.increment::after {
5511     border-bottom: 5px solid #ccc;
5512     border-left: 5px solid transparent;
5513     border-right: 5px solid transparent;
5514 }
5515
5516
5517 /* Field - Checkbox
5518 ------------------------------------------------------- */
5519 .ideditor .form-field-input-check {
5520     display: -webkit-box;
5521     display: -ms-flexbox;
5522     display: flex;
5523     -webkit-box-align: center;
5524         -ms-flex-align: center;
5525             align-items: center;
5526     background: #fff;
5527     padding: 5px 10px;
5528     color: #7092ff;
5529     border: 1px solid #ccc;
5530     border-top: 0;
5531     cursor: pointer;
5532 }
5533 .ideditor .form-field-input-check > input[type="checkbox"] {
5534     -webkit-box-flex: 0;
5535         -ms-flex: 0 1 auto;
5536             flex: 0 1 auto;
5537     margin-top: 0;
5538 }
5539 .ideditor .form-field-input-check > span {
5540     -webkit-box-flex: 1;
5541         -ms-flex: 1 1 auto;
5542             flex: 1 1 auto;
5543 }
5544 .ideditor .form-field-input-check > span.mixed {
5545     font-style: italic;
5546 }
5547 .ideditor .form-field-input-check > .reverser {
5548     -webkit-box-flex: 0;
5549         -ms-flex: 0 1 auto;
5550             flex: 0 1 auto;
5551     background-color: #eff2f7;
5552     border: 1px solid #ccd5e3;
5553     border-radius: 2px;
5554     padding: 0px 8px;
5555     color: inherit;
5556 }
5557 .ideditor[dir='ltr'] .form-field-input-check > .reverser {
5558     padding-right: 2px;
5559 }
5560 .ideditor[dir='rtl'] .form-field-input-check > .reverser {
5561     padding-left: 2px;
5562 }
5563 .ideditor .form-field-input-check > .reverser:active,
5564 .ideditor .form-field-input-check > .reverser:focus {
5565     background: #e3e8ef;
5566 }
5567 @media (hover: hover) {
5568     .ideditor .form-field-input-check > .reverser:hover {
5569         background: #e3e8ef;
5570     }
5571 }
5572 .ideditor .form-field-input-check > .reverser.hide {
5573     display: none;
5574 }
5575 .ideditor .form-field-input-check:active,
5576 .ideditor .form-field-input-check:focus {
5577     background: #f1f1f1;
5578 }
5579 @media (hover: hover) {
5580     .ideditor .form-field-input-check:hover {
5581         background: #f1f1f1;
5582     }
5583 }
5584 .ideditor .form-field-input-check .set {
5585     color: inherit;
5586 }
5587 .ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
5588     opacity: .5;
5589 }
5590
5591
5592 /* Field - Radio button
5593 ------------------------------------------------------- */
5594 .ideditor .form-field-input-radio {
5595     -webkit-box-flex: 1;
5596         -ms-flex: 1 1 auto;
5597             flex: 1 1 auto;
5598     display: -webkit-box;
5599     display: -ms-flexbox;
5600     display: flex;
5601     -webkit-box-orient: horizontal;
5602     -webkit-box-direction: normal;
5603         -ms-flex-flow: row wrap;
5604             flex-flow: row wrap;
5605 }
5606 .ideditor .form-field-input-radio > label {
5607     -webkit-box-flex: 1;
5608         -ms-flex: 1 1 auto;
5609             flex: 1 1 auto;
5610     display: -webkit-box;
5611     display: -ms-flexbox;
5612     display: flex;
5613     -webkit-box-orient: horizontal;
5614     -webkit-box-direction: normal;
5615         -ms-flex-flow: row nowrap;
5616             flex-flow: row nowrap;
5617     -webkit-box-align: center;
5618         -ms-flex-align: center;
5619             align-items: center;
5620     width: 100%;
5621     padding: 5px 10px;
5622     background-color: #fff;
5623     color: #7092ff;
5624     cursor: pointer;
5625 }
5626 .ideditor .form-field-input-radio > label.mixed {
5627     font-style: italic;
5628 }
5629 .ideditor .form-field-input-radio > label:last-child {
5630     border-radius: 0 0 4px 4px;
5631 }
5632 .ideditor .form-field-input-radio > label:active,
5633 .ideditor .form-field-input-radio > label:focus {
5634     background-color: #ececec;
5635 }
5636 @media (hover: hover) {
5637     .ideditor .form-field-input-radio > label:hover {
5638         background-color: #ececec;
5639     }
5640 }
5641 .ideditor .form-field-input-radio > label.active {
5642     background-color: #e8ebff;
5643 }
5644 .ideditor .form-field-input-radio > label:not(:last-of-type) {
5645     border-bottom: 1px solid #ccc;
5646 }
5647 .ideditor .form-field-input-radio > label > input[type="radio"] {
5648     -webkit-box-flex: 0;
5649         -ms-flex: 0 1 auto;
5650             flex: 0 1 auto;
5651 }
5652 .ideditor .form-field-input-radio > label > span {
5653     -webkit-box-flex: 1;
5654         -ms-flex: 1 1 auto;
5655             flex: 1 1 auto;
5656     overflow: hidden;
5657     white-space: nowrap;
5658     text-overflow: ellipsis;
5659 }
5660
5661 /* Hide placeholder for radio buttons if another is active, or not in hover state */
5662 .ideditor .form-field-input-radio label.active ~ .placeholder,
5663 .ideditor .form-field-input-radio .placeholder {
5664     padding: 0;
5665     opacity: 0;
5666     width: 0;
5667     height: 0;
5668     display: block;
5669     overflow: hidden;
5670 }
5671
5672
5673 /* Field - roadheight and roadspeed
5674 ------------------------------------------------------- */
5675 .ideditor .form-field-input-roadheight input.roadheight-number,
5676 .ideditor .form-field-input-roadheight input.roadheight-secondary-number,
5677 .ideditor .form-field-input-roadspeed input.roadspeed-number {
5678     -ms-flex-preferred-size: 0;
5679         flex-basis: 0;
5680 }
5681 .ideditor .form-field-input-roadheight input.roadheight-unit,
5682 .ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
5683     -webkit-box-flex: 0;
5684         -ms-flex: 0 1 auto;
5685             flex: 0 1 auto;
5686     width: 60px;
5687 }
5688 .ideditor .form-field-input-roadspeed input.roadspeed-unit {
5689     -webkit-box-flex: 0;
5690         -ms-flex: 0 1 auto;
5691             flex: 0 1 auto;
5692     width: 80px;
5693 }
5694 .ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
5695 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
5696     border-radius: 0 0 0 4px;
5697 }
5698 .ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
5699 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
5700     border-radius: 0 0 4px 0;
5701 }
5702 .ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
5703 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
5704     border-left: 0;
5705     border-radius: 0 0 4px 0;
5706 }
5707 .ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
5708 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
5709     border-right: 0;
5710     border-radius: 0 0 0 4px;
5711 }
5712
5713
5714 /* Field - Localized Name
5715 ------------------------------------------------------- */
5716 .ideditor .form-field-input-localized > input.localized-main {
5717     border-radius: 0 0 0 4px;
5718 }
5719 .ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
5720     border-radius: 0 0 4px 0;
5721 }
5722 .ideditor .form-field-input-localized > button.localized-add {
5723     border-radius: 0 0 4px 0;
5724 }
5725 .ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
5726     border-radius: 0 0 0 4px;
5727 }
5728
5729 .ideditor .form-field-input-localized button.localized-add.disabled,
5730 .ideditor .form-field-input-localized input.localized-main.disabled,
5731 .ideditor .form-field-input-localized input.localized-lang.disabled,
5732 .ideditor .form-field-input-localized input.localized-value.disabled {
5733     color: #777;
5734     background-color: #eee;
5735     cursor: not-allowed;
5736 }
5737
5738 /* nested subfields for name in different languages */
5739 .ideditor .localized-multilingual {
5740     padding: 0 10px;
5741     -ms-flex-preferred-size: 100%;
5742         flex-basis: 100%;
5743 }
5744 .ideditor .localized-multilingual .entry {
5745     position: relative;
5746     overflow: hidden;
5747 }
5748
5749 /* draws a little line connecting the multilingual field up to the name field */
5750 .ideditor .localized-multilingual .entry::before {
5751     content: "";
5752     display: block;
5753     position: absolute;
5754     background: #ccc;
5755     height: 11px;
5756     width: 1px;
5757     left: 0;
5758     right: 0;
5759     top: -11px;
5760     margin: auto;
5761 }
5762
5763 .ideditor .localized-multilingual .entry .localized-lang {
5764     border-radius: 0;
5765     border-top-width: 0;
5766     width: 100%;
5767 }
5768 .ideditor .localized-multilingual .entry .localized-value {
5769     border-top-width: 0;
5770     border-radius: 0 0 4px 4px;
5771     width: 100%;
5772 }
5773
5774
5775 /* Field - Address
5776 ------------------------------------------------------- */
5777 .ideditor .form-field-input-address {
5778     -webkit-box-flex: 1;
5779         -ms-flex: 1 1 auto;
5780             flex: 1 1 auto;
5781     display: -webkit-box;
5782     display: -ms-flexbox;
5783     display: flex;
5784     -webkit-box-orient: horizontal;
5785     -webkit-box-direction: normal;
5786         -ms-flex-flow: row wrap;
5787             flex-flow: row wrap;
5788     border: 1px solid #ccc;
5789     border-top: 0px;
5790 }
5791
5792 .ideditor .addr-row {
5793     -webkit-box-flex: 1;
5794         -ms-flex: 1 1 auto;
5795             flex: 1 1 auto;
5796     display: -webkit-box;
5797     display: -ms-flexbox;
5798     display: flex;
5799     width: 100%;
5800 }
5801
5802 .ideditor .addr-row > input {
5803     -webkit-box-flex: 1;
5804         -ms-flex: 1 1 auto;
5805             flex: 1 1 auto;
5806     border-radius: 0;
5807     border-right: 0;
5808     border-bottom: 0;
5809 }
5810 .ideditor[dir='rtl'] .addr-row input {
5811     border-right: 1px solid #ccc;
5812     border-left: 0;
5813 }
5814
5815 .ideditor .addr-row:first-of-type input {
5816     border-top: 0;
5817 }
5818 .ideditor .addr-row input:first-of-type {
5819     border-left: 0;
5820 }
5821 .ideditor[dir='rtl'] .addr-row input:first-of-type {
5822     border-right: 0;
5823 }
5824 .ideditor .addr-row:last-of-type input:first-of-type {
5825     border-radius: 0 0 0 4px;
5826 }
5827 .ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
5828     border-radius: 0 0 4px 0;
5829 }
5830 .ideditor .addr-row:last-of-type input:last-of-type {
5831     border-radius: 0 0 4px 0;
5832 }
5833 .ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
5834     border-radius: 0 0 0 4px;
5835 }
5836 .ideditor .combobox-address-street-place .combobox-option.address-street,
5837 .ideditor .combobox-address-street-place .combobox-option.address-place {
5838     padding-right: 20px;
5839 }
5840 .ideditor .combobox-address-street-place .combobox-option.address-street::after,
5841 .ideditor .combobox-address-street-place .combobox-option.address-place::after {
5842     position: absolute;
5843     right: 2px;
5844     opacity: 0.4;
5845 }
5846 .ideditor .combobox-address-street-place .combobox-option.address-place::after {
5847     content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPg0KICAgIDxwYXRoIGQ9Ik0xMCwzIEM2LjY4NiwzIDQsNS42MTIgNCw4LjgzMyBDNCwxMi4wNTUgMTAsMTcgMTAsMTcgQzEwLDE3IDE2LDEyLjA1NSAxNiw4LjgzMyBDMTYsNS42MTIgMTMuMzE0LDMgMTAsMyB6IE0xMC4xODcsNi41IEMxMS41MTMsNi41IDEyLjU4Nyw3LjU0NSAxMi41ODcsOC44MzMgQzEyLjU4NywxMC4xMjIgMTEuNTEzLDExLjE2NyAxMC4xODcsMTEuMTY3IEM4Ljg2MiwxMS4xNjcgNy43ODcsMTAuMTIyIDcuNzg3LDguODMzIEM3Ljc4Nyw3LjU0NSA4Ljg2Miw2LjUgMTAuMTg3LDYuNSB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4NCjwvc3ZnPg==);
5848 }
5849
5850
5851 /* Field - Wikipedia
5852 ------------------------------------------------------- */
5853 .ideditor .form-field-input-wikipedia {
5854     display: -webkit-box;
5855     display: -ms-flexbox;
5856     display: flex;
5857     -webkit-box-orient: horizontal;
5858     -webkit-box-direction: normal;
5859         -ms-flex-flow: row wrap;
5860             flex-flow: row wrap;
5861     -webkit-box-flex: 1;
5862         -ms-flex: 1 1 auto;
5863             flex: 1 1 auto;
5864 }
5865
5866 .ideditor .wiki-lang-container,
5867 .ideditor .wiki-title-container {
5868     display: -webkit-box;
5869     display: -ms-flexbox;
5870     display: flex;
5871     -webkit-box-orient: horizontal;
5872     -webkit-box-direction: normal;
5873         -ms-flex-flow: row nowrap;
5874             flex-flow: row nowrap;
5875     -webkit-box-flex: 1;
5876         -ms-flex: 1 1 auto;
5877             flex: 1 1 auto;
5878     width: 100%;
5879 }
5880
5881 .ideditor .wiki-lang-container > input.wiki-lang,
5882 .ideditor .wiki-title-container > input.wiki-title {
5883     -webkit-box-flex: 1;
5884         -ms-flex: 1 1 auto;
5885             flex: 1 1 auto;
5886     border-top: 0;
5887     border-radius: 0;
5888 }
5889 .ideditor .wiki-title-container > input.wiki-title {
5890     border-radius: 0 0 0 4px;
5891 }
5892 .ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
5893     border-radius: 0 0 4px 0;
5894 }
5895 .ideditor .wiki-title-container > button.wiki-link,
5896 .ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5897     border-radius: 0 0 4px 0;
5898 }
5899 .ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
5900 .ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5901     border-radius: 0 0 0 4px;
5902 }
5903
5904
5905 /* Field - Restriction Editor
5906 ------------------------------------------------------- */
5907 .ideditor .form-field-input-restrictions {
5908     display: block;
5909     border: 1px solid #ccc;
5910     border-top: 0;
5911     border-radius: 0 0 4px 4px;
5912 }
5913
5914 .ideditor .form-field-input-restrictions .restriction-controls-container {
5915     background-color: #fff;
5916     width: 100%;
5917     padding: 5px;
5918     border-top: 1px solid #ccc;
5919     border-radius: 0 0 4px 4px;
5920 }
5921
5922 .ideditor .restriction-controls-container .restriction-controls {
5923     display: table;
5924     -webkit-user-select: none;
5925        -moz-user-select: none;
5926         -ms-user-select: none;
5927             user-select: none;
5928 }
5929
5930 .ideditor .restriction-controls .restriction-control {
5931     display: table-row;
5932     padding: 5px 10px;
5933     height: 25px;
5934 }
5935
5936 .ideditor .restriction-control input,
5937 .ideditor .restriction-control > span {
5938     display: table-cell;
5939     text-align: start;
5940     padding: 0px 5px;
5941 }
5942
5943 .ideditor .restriction-control > span.restriction-control-label {
5944     text-align: end;
5945 }
5946
5947 .ideditor .restriction-control input {
5948     width: 60px;
5949     padding: 0;
5950     margin: 0px 5px;
5951     vertical-align: middle;
5952 }
5953
5954 .ideditor .form-field-input-restrictions .restriction-container {
5955     position: relative;
5956     height: 370px;
5957 }
5958 /* zero width space, so container takes up space */
5959 .ideditor .form-field-input-restrictions .restriction-container:after {
5960     content: '\200b';
5961 }
5962
5963 .ideditor .form-field-input-restrictions svg.surface {
5964     width: 100%;
5965     height: 100%;
5966 }
5967
5968 .ideditor .restriction-container .restriction-help {
5969     z-index: 1;
5970     position: absolute;
5971     top: 0;
5972     left: 0;
5973     right: 0;
5974     padding: 2px 6px;
5975     background-color: rgba(255, 255, 255, .8);
5976     color: #888;
5977     text-align: center;
5978     pointer-events: none;
5979     -webkit-user-select: none;
5980        -moz-user-select: none;
5981         -ms-user-select: none;
5982             user-select: none;
5983 }
5984
5985 .ideditor .restriction-help span {
5986     margin: 2px;
5987 }
5988
5989 .ideditor .restriction-help .qualifier {
5990     color: #666;
5991     font-weight: bold;
5992 }
5993 .ideditor .restriction-help .qualifier.allow {
5994     color: #8b5;
5995 }
5996 .ideditor .restriction-help .qualifier.restrict {
5997     color: #d53;
5998 }
5999 .ideditor .restriction-help .qualifier.only {
6000     color: #78f;
6001 }
6002
6003
6004 /* Field - Changeset Comment
6005 ------------------------------------------------------- */
6006 .ideditor .form-field-comment:not(.present) #preset-input-comment {
6007     border-color: rgb(230, 100, 100);
6008 }
6009 .ideditor .form-field-comment:not(.present) .field-label {
6010     border-color: rgb(230, 100, 100);
6011     background: rgba(230, 100, 100, 0.2);
6012 }
6013 .ideditor .form-field-comment:not(.present) button {
6014     border-color: rgb(230, 100, 100);
6015 }
6016
6017
6018 /* Field - Combobox
6019 ------------------------------------------------------- */
6020 .ideditor[dir='ltr'] textarea.combobox-input,
6021 .ideditor[dir='ltr'] input.combobox-input {
6022     /* leave room for the caret */
6023     padding-right: 20px;
6024 }
6025 .ideditor[dir='rtl'] textarea.combobox-input,
6026 .ideditor[dir='rtl'] input.combobox-input {
6027     padding-left: 20px;
6028 }
6029
6030 .ideditor div.combobox {
6031     z-index: 9999;
6032     display: none;
6033     -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
6034             box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
6035     margin-top: -1px;
6036     background: #fff;
6037     max-height: 245px;
6038     overflow-y: auto;
6039     overflow-x: hidden;
6040     border: 1px solid #ccc;
6041     border-radius: 0 0 4px 4px;
6042 }
6043
6044 .ideditor .combobox a {
6045     display: block;
6046     padding: 5px 10px;
6047     border-top: 1px solid #ccc;
6048     text-overflow: ellipsis;
6049     white-space: nowrap;
6050     overflow: hidden;
6051 }
6052
6053 .ideditor .combobox a.selected,
6054 .ideditor .combobox a:active,
6055 .ideditor .combobox a:focus {
6056     background: #ececec;
6057 }
6058 @media (hover: hover) {
6059     .ideditor .combobox a:hover {
6060         background: #ececec;
6061     }
6062 }
6063
6064 .ideditor .combobox a:first-child {
6065     border-top: 0;
6066     padding: 4px 10px;
6067 }
6068
6069 .ideditor .combobox-caret {
6070     display: inline-block;
6071     position: relative;
6072     height: 5px;
6073     width: 30px !important;
6074     margin-left: -30px;
6075     -ms-flex-item-align: center;
6076         align-self: center;
6077     vertical-align: middle;
6078     cursor: pointer;
6079 }
6080 .ideditor[dir='rtl'] .combobox-caret {
6081   margin-left: 0;
6082   margin-right: -30px;
6083 }
6084
6085 .ideditor .combobox-caret::after {
6086     content: "";
6087     height: 0; width: 0;
6088     position: absolute;
6089     left: 0; right: 0; bottom: 0; top: 0;
6090     margin: auto;
6091     border-top: 5px solid #ccc;
6092     border-left: 5px solid transparent;
6093     border-right: 5px solid transparent;
6094 }
6095
6096 .ideditor .combobox .combobox-option.raw-option {
6097     font-family: monospace;
6098     color: #333;
6099 }
6100
6101 .ideditor .form-field-input-wrap {
6102     position: relative;
6103 }
6104
6105 .ideditor .form-field-input-wrap span.length-indicator-wrap {
6106     visibility: hidden;
6107     position: absolute;
6108     top: -5px;
6109     left: 0;
6110     right: 0;
6111 }
6112
6113 .ideditor .form-field-input-wrap input:focus + span.length-indicator-wrap,
6114 .ideditor .form-field-input-wrap textarea:focus + span.length-indicator-wrap,
6115 .ideditor .form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap,
6116 .ideditor .form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap {
6117     visibility: visible;
6118 }
6119
6120 .ideditor .form-field-input-wrap span.length-indicator {
6121     display: block;
6122     left: 0;
6123     right: 0;
6124     height: 4px;
6125     background-color: #7092ff;
6126     border-right-style: solid;
6127     border-right-color: lightgray;
6128 }
6129
6130 .ideditor .form-field-input-wrap span.length-indicator.limit-reached {
6131     border-right-color: red;
6132 }
6133
6134 .ideditor .tooltip.max-length-warning {
6135     z-index: 10;
6136 }
6137
6138 /* Field Help
6139 ------------------------------------------------------- */
6140 .ideditor .field-help-body {
6141     display: block;
6142     position: absolute;
6143     top: 0;
6144     left: 20px;
6145     right: 20px;
6146     margin: 5px;
6147     padding: 8px;
6148     border: 1px solid #ccc;
6149     border-top: 0;
6150     border-radius: 0 0 4px 4px;
6151     z-index: 20;
6152     background: rgba(255,255,255,0.95);
6153     -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
6154             box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
6155 }
6156
6157 .ideditor .field-help-title h2 {
6158     padding: 10px;
6159     margin-bottom: 0px;
6160     font-size: 17px;
6161 }
6162 .ideditor .field-help-title button {
6163     width: 45px;
6164     height: 55px;
6165     border-radius: 0;
6166 }
6167
6168 .ideditor .field-help-nav {
6169     font-size: 13px;
6170     font-weight: bold;
6171     margin-bottom: 10px;
6172 }
6173 .ideditor .field-help-nav-item {
6174     display: inline-block;
6175     padding: 5px 10px;
6176     cursor: pointer;
6177     color: #666;
6178 }
6179 .ideditor .field-help-nav-item.active {
6180     color: #7092ff;
6181     border-bottom: 2px solid;
6182 }
6183 .ideditor .field-help-nav-item:active,
6184 .ideditor .field-help-nav-item:focus {
6185     color: #597be7;
6186     background-color: #efefef;
6187 }
6188 @media (hover: hover) {
6189     .ideditor .field-help-nav-item:hover {
6190         color: #597be7;
6191         background-color: #efefef;
6192     }
6193 }
6194
6195 .ideditor .field-help-content {
6196     padding: 10px;
6197     overflow-y: auto;
6198     overflow-x: hidden;
6199 }
6200 .ideditor .field-help-content h3 {
6201     font-size: 12px;
6202     margin-bottom: 5px;
6203 }
6204 .ideditor .field-help-content p {
6205     margin-bottom: 15px;
6206 }
6207 .ideditor .field-help-content ul li {
6208     list-style: inside;
6209     margin-bottom: 5px;
6210 }
6211
6212 .ideditor .field-help-content .field-help-image {
6213     width: 100%;
6214     margin-bottom: 15px;
6215 }
6216
6217 .ideditor .field-help-content svg.turn {
6218     width: 40px;
6219     height: 20px;
6220 }
6221 .ideditor .field-help-content svg.shadow {
6222     opacity: 0.7;
6223     width: 60px;
6224     height: 20px;
6225 }
6226 .ideditor .field-help-content svg.from {
6227     color: #777;
6228 }
6229 .ideditor .field-help-content svg.allow {
6230     color: #5b3;
6231 }
6232 .ideditor .field-help-content svg.restrict {
6233     color: #d53;
6234 }
6235 .ideditor .field-help-content svg.only {
6236     color: #68f;
6237 }
6238
6239 .ideditor .field-help-content p.from_shadow,
6240 .ideditor .field-help-content p.allow_shadow,
6241 .ideditor .field-help-content p.restrict_shadow,
6242 .ideditor .field-help-content p.allow_turn,
6243 .ideditor .field-help-content p.restrict_turn {
6244     margin-bottom: 5px;
6245 }
6246
6247
6248 /* More Fields dropdown
6249 ------------------------------------------------------- */
6250 .ideditor .more-fields {
6251     margin-top: 10px;
6252     font-weight: bold;
6253 }
6254
6255 .ideditor .more-fields label {
6256     display: -webkit-box;
6257     display: -ms-flexbox;
6258     display: flex;
6259     -webkit-box-orient: horizontal;
6260     -webkit-box-direction: normal;
6261         -ms-flex-flow: row nowrap;
6262             flex-flow: row nowrap;
6263     -webkit-box-pack: justify;
6264         -ms-flex-pack: justify;
6265             justify-content: space-between;
6266     -webkit-box-align: center;
6267         -ms-flex-align: center;
6268             align-items: center;
6269 }
6270
6271 .ideditor .more-fields input {
6272     margin-left: 10px;
6273     -webkit-box-flex: 1;
6274         -ms-flex: 1 1 auto;
6275             flex: 1 1 auto;
6276 }
6277 .ideditor[dir='rtl'] .more-fields input {
6278     margin-left: auto;
6279     margin-right: 10px;
6280 }
6281
6282 .ideditor .form-field-input-wrap .label {
6283     background: #f6f6f6;
6284     padding: 5px 10px;
6285 }
6286
6287
6288 /* Raw Tag Editor
6289 ------------------------------------------------------- */
6290 .ideditor .raw-tag-options {
6291     display: -webkit-box;
6292     display: -ms-flexbox;
6293     display: flex;
6294     -webkit-box-orient: horizontal;
6295     -webkit-box-direction: normal;
6296         -ms-flex-flow: row nowrap;
6297             flex-flow: row nowrap;
6298     -webkit-box-pack: end;
6299         -ms-flex-pack: end;
6300             justify-content: flex-end;
6301     margin-top: -28px;
6302 }
6303 .ideditor button.raw-tag-option {
6304     -webkit-box-flex: 0;
6305         -ms-flex: 0 0 auto;
6306             flex: 0 0 auto;
6307     padding: 3px;
6308     background: #aaa;
6309     color: #eee;
6310     margin: 0 3px;
6311 }
6312 .ideditor button.raw-tag-option:focus,
6313 .ideditor button.raw-tag-option.active {
6314     color: #fff;
6315     background: #597be7;
6316 }
6317 @media (hover: hover) {
6318     .ideditor button.raw-tag-option:hover {
6319         color: #fff;
6320         background: #597be7;
6321     }
6322 }
6323 .ideditor button.raw-tag-option.selected {
6324     color: #fff;
6325     background: #7092ff;
6326 }
6327 .ideditor button.raw-tag-option svg.icon {
6328     width: 14px;
6329     height: 14px;
6330     display: block;
6331 }
6332 .ideditor[dir='ltr'] button.raw-tag-option-list {
6333     -webkit-transform: scaleX(-1);
6334         -ms-transform: scaleX(-1);
6335             transform: scaleX(-1);
6336     -webkit-filter: FlipH;
6337             filter: FlipH;
6338     -ms-filter: "FlipH";
6339 }
6340
6341
6342 .ideditor .tag-text {
6343     width: 100%;
6344     height: 100%;
6345     min-height: 32px;
6346     font-family: monospace;
6347     white-space: pre;
6348 }
6349
6350 .ideditor .tag-text,
6351 .ideditor .tag-list {
6352     margin-top: 10px;
6353 }
6354 .ideditor .tag-row {
6355     width: 100%;
6356     position: relative;
6357 }
6358 .ideditor .tag-row .inner-wrap {
6359     display: -webkit-box;
6360     display: -ms-flexbox;
6361     display: flex;
6362     -webkit-box-orient: horizontal;
6363     -webkit-box-direction: normal;
6364         -ms-flex-flow: row nowrap;
6365             flex-flow: row nowrap;
6366     width: 100%;
6367     position: relative;
6368 }
6369 .ideditor .tag-row .key-wrap,
6370 .ideditor .tag-row .value-wrap {
6371     -webkit-box-flex: 1;
6372         -ms-flex: 1 1 50%;
6373             flex: 1 1 50%;
6374 }
6375
6376 .ideditor .tag-text.readonly,
6377 .ideditor .tag-row.readonly,
6378 .ideditor .tag-row.readonly input.key,
6379 .ideditor .tag-row.readonly input.value,
6380 .ideditor .tag-row.readonly button.remove {
6381     color: #777;
6382     background-color: #eee;
6383     cursor: not-allowed;
6384 }
6385
6386 .ideditor .tag-row input {
6387     border: 0;
6388     border-radius: 0;
6389     border-bottom: 1px solid #ccc;
6390     border-left: 1px solid #ccc;
6391     width: 100%;
6392 }
6393 .ideditor[dir='rtl'] .tag-row input {
6394     border-left: none;
6395     border-right: 1px solid #ccc;
6396 }
6397
6398
6399 .ideditor .tag-row input.key {
6400     font-weight: bold;
6401     background-color: #f6f6f6;
6402 }
6403
6404 .ideditor .tag-row input.value {
6405     border-right: 1px solid #ccc;
6406 }
6407 .ideditor[dir='rtl'] .tag-row input.value {
6408     border-left: 1px solid #ccc;
6409 }
6410
6411 .ideditor .tag-row:first-child input.key {
6412     border-top: 1px solid #ccc;
6413     border-top-left-radius: 4px;
6414 }
6415 .ideditor[dir='rtl'] .tag-row:first-child input.key {
6416     border-top-left-radius: 0;
6417     border-top-right-radius: 4px;
6418 }
6419
6420 .ideditor .tag-row:first-child input.value {
6421     border-top: 1px solid #ccc;
6422 }
6423 .ideditor .tag-row button {
6424     -webkit-box-flex: 0;
6425         -ms-flex: 0 0 auto;
6426             flex: 0 0 auto;
6427     width: 32px;
6428     border: 1px solid #ccc;
6429     border-top-width: 0;
6430     border-left-width: 0;
6431 }
6432 .ideditor[dir='rtl'] .tag-row button {
6433     border-left-width: 1px;
6434     border-right-width: 0;
6435 }
6436
6437 .ideditor .tag-row button:active,
6438 .ideditor .tag-row button:focus {
6439     background: #f1f1f1;
6440 }
6441 @media (hover: hover) {
6442     .ideditor .tag-row button:hover {
6443         background: #f1f1f1;
6444     }
6445 }
6446 .ideditor .tag-row button .icon {
6447     opacity: .5;
6448 }
6449 .ideditor .tag-row:first-child button {
6450     border-top-width: 1px;
6451 }
6452
6453 .ideditor .tag-row:first-child .tag-reference-button {
6454     border-top-right-radius: 4px;
6455 }
6456 .ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
6457     border-top-left-radius: 4px;
6458     border-top-right-radius: 0;
6459 }
6460
6461 .ideditor .tag-row:last-child .tag-reference-button {
6462     border-bottom-right-radius: 4px;
6463 }
6464 .ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
6465     border-bottom-left-radius: 4px;
6466     border-bottom-right-radius: 0;
6467 }
6468
6469 .ideditor .tag-row .tag-reference-button {
6470     border-radius: 0;
6471 }
6472 .ideditor[dir='rtl'] .tag-row .tag-reference-button {
6473     border-left-width: 1px;
6474     border-right-width: 0;
6475 }
6476
6477 /* Tag reference */
6478 .ideditor .tag-reference-loading {
6479     background-color: #f5f5f5;
6480 }
6481 .ideditor .tag-reference-loading .icon {
6482     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
6483     background-position: 0 0;
6484 }
6485
6486 .ideditor .tag-reference-body {
6487     -webkit-box-flex: 1;
6488         -ms-flex: 1 1 auto;
6489             flex: 1 1 auto;
6490     width: 100%;
6491     overflow: hidden;
6492     display: none;
6493     padding-top: 10px;
6494 }
6495 .ideditor .tag-reference-body.expanded {
6496     padding-bottom: 10px;
6497     padding-left: 10px;
6498     display: block;
6499 }
6500 .ideditor[dir='rtl'] .tag-reference-body.expanded {
6501     padding-left: 0;
6502     padding-right: 10px;
6503 }
6504 .ideditor .tag-reference-link {
6505     display: block;
6506 }
6507 .ideditor .tag-reference-link .icon:first-child {
6508     margin-left: 0;
6509 }
6510
6511 .ideditor img.tag-reference-wiki-image {
6512     float: right;
6513     width: 33.3333%;
6514     border-radius: 4px;
6515     margin: 0 0 0 5px;
6516 }
6517 .ideditor[dir='rtl'] img.tag-reference-wiki-image {
6518     float: left;
6519     margin: 0 5px 0 0;
6520 }
6521
6522 .ideditor .preset-list .tag-reference-body {
6523     position: relative;
6524     width: 100%;
6525 }
6526 .ideditor .raw-tag-editor .tag-reference-body {
6527     width: 100%;
6528 }
6529 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
6530     background: #f6f6f6;
6531     color: #333;
6532 }
6533 .ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
6534     border-bottom: 1px solid #ccc;
6535 }
6536 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
6537     border-top: 1px solid #ccc;
6538 }
6539
6540
6541 /* Raw Member / Membership Editor
6542 ------------------------------------------------------- */
6543 .ideditor .section-raw-member-editor .member-list:empty,
6544 .ideditor .section-raw-membership-editor .member-list:empty {
6545     display: none;
6546 }
6547
6548 .ideditor .section-raw-member-editor .member-list,
6549 .ideditor .section-raw-membership-editor .member-list {
6550     position: relative; /* required for drag-and-drop */
6551     padding-top: 5px;
6552 }
6553 .ideditor .section-raw-member-editor .member-list li,
6554 .ideditor .section-raw-membership-editor .member-list li {
6555     position: relative;
6556     border-radius: 4px;
6557     margin: 0;
6558     padding-bottom: 10px;
6559 }
6560 .ideditor .section-raw-member-editor .member-row .member-entity-name,
6561 .ideditor .section-raw-membership-editor .member-row .member-entity-name {
6562     font-weight: normal;
6563     padding-left: 10px;
6564 }
6565
6566 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
6567 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
6568     padding-left:0;
6569     padding-right: 10px;
6570 }
6571
6572 .ideditor .form-field-input-member > input.member-role {
6573     border-radius: 0 0 4px 4px;
6574 }
6575
6576 .ideditor .member-row-new .member-entity-input {
6577     -webkit-box-flex: 1;
6578         -ms-flex: 1 1 100%;
6579             flex: 1 1 100%;
6580     border-radius: 4px 4px 0 0;
6581     border: 0;
6582 }
6583
6584 .ideditor .section-raw-member-editor .member-row.dragging {
6585     opacity: 0.75;
6586     z-index: 3000;
6587     /*
6588     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
6589     */
6590 }
6591
6592 /* add tag, add relation buttons */
6593 .ideditor .add-row {
6594     display: -webkit-box;
6595     display: -ms-flexbox;
6596     display: flex;
6597     width: 100%;
6598     -webkit-box-orient: horizontal;
6599     -webkit-box-direction: normal;
6600         -ms-flex-flow: row nowrap;
6601             flex-flow: row nowrap;
6602 }
6603 .ideditor .add-row .add-tag,
6604 .ideditor .add-row .add-relation,
6605 .ideditor .add-row .space-value {
6606     -webkit-box-flex: 1;
6607         -ms-flex: 1 1 50%;
6608             flex: 1 1 50%;
6609 }
6610 .ideditor .add-row .space-buttons {
6611     -webkit-box-flex: 0;
6612         -ms-flex: 0 0 62px;
6613             flex: 0 0 62px;
6614 }
6615 .ideditor .add-row button {
6616     padding: 5px;
6617     background: rgba(0,0,0,.5);
6618 }
6619 .ideditor .add-row button:focus,
6620 .ideditor .add-row button:active {
6621     background: rgba(0,0,0,.8);
6622 }
6623 @media (hover: hover) {
6624     .ideditor .add-row button:hover {
6625         background: rgba(0,0,0,.8);
6626     }
6627 }
6628
6629 .ideditor .add-tag {
6630     border-radius: 0 0 4px 4px;
6631 }
6632 .ideditor .add-relation {
6633     margin-top: 10px;
6634     border-radius: 4px;
6635 }
6636
6637
6638 /* OSM Note / QA Editors
6639 ------------------------------------------------------- */
6640 .ideditor .note-header,
6641 .ideditor .qa-header {
6642     background-color: #f6f6f6;
6643     border-radius: 5px;
6644     border: 1px solid #ccc;
6645     display: -webkit-box;
6646     display: -ms-flexbox;
6647     display: flex;
6648     -webkit-box-orient: horizontal;
6649     -webkit-box-direction: normal;
6650         -ms-flex-flow: row nowrap;
6651             flex-flow: row nowrap;
6652     -webkit-box-align: center;
6653         -ms-flex-align: center;
6654             align-items: center;
6655 }
6656
6657 .ideditor .note-header-icon,
6658 .ideditor .qa-header-icon {
6659     background-color: #fff;
6660     padding: 10px;
6661     -webkit-box-flex: 0;
6662         -ms-flex: 0 0 auto;
6663             flex: 0 0 auto;
6664     position: relative;
6665     width: 60px;
6666     height: 60px;
6667     border-right: 1px solid #ccc;
6668     border-radius: 5px 0 0 5px;
6669 }
6670 .ideditor[dir='rtl'] .note-header-icon,
6671 .ideditor[dir='rtl'] .qa-header-icon {
6672     border-right: unset;
6673     border-left: 1px solid #ccc;
6674     border-radius: 0 5px 5px 0;
6675 }
6676
6677 .ideditor .note-header-icon .icon-wrap,
6678 .ideditor .qa-header-icon .icon-wrap {
6679     position: absolute;
6680     top: 0px;
6681 }
6682 .ideditor .preset-icon-28 {
6683     position: absolute;
6684     top: 16px;
6685     left: 16px;
6686     margin: auto;
6687 }
6688 .ideditor .preset-icon-28 .icon {
6689     width: 28px;
6690     height: 28px;
6691 }
6692
6693 .ideditor .note-header-label,
6694 .ideditor .qa-header-label {
6695     background-color: #f6f6f6;
6696     padding: 0 15px;
6697     -webkit-box-flex: 1;
6698         -ms-flex: 1 1 100%;
6699             flex: 1 1 100%;
6700     font-size: 14px;
6701     font-weight: bold;
6702     border-radius: 0 5px 5px 0;
6703 }
6704 .ideditor[dir='rtl'] .note-header-label,
6705 .ideditor[dir='rtl'] .qa-header-label {
6706     border-radius: 5px 0 0 5px;
6707 }
6708
6709 .ideditor .note-category {
6710     margin: 20px 0px;
6711 }
6712
6713 .ideditor .comments-container {
6714     background: #ececec;
6715     padding: 1px 10px;
6716     border-radius: 8px;
6717     margin-top: 20px;
6718 }
6719
6720 .ideditor .comment {
6721     background-color: #fff;
6722     border-radius: 5px;
6723     border: 1px solid #ccc;
6724     margin: 10px auto;
6725     display: -webkit-box;
6726     display: -ms-flexbox;
6727     display: flex;
6728     -webkit-box-orient: horizontal;
6729     -webkit-box-direction: normal;
6730         -ms-flex-flow: row nowrap;
6731             flex-flow: row nowrap;
6732 }
6733 .ideditor .comment-avatar {
6734     padding: 10px;
6735     -webkit-box-flex: 0;
6736         -ms-flex: 0 0 auto;
6737             flex: 0 0 auto;
6738 }
6739 .ideditor .comment-avatar .icon.comment-avatar-icon {
6740     width: 40px;
6741     height: 40px;
6742     -o-object-fit: cover;
6743        object-fit: cover;
6744     border: 1px solid #ccc;
6745     border-radius: 20px;
6746 }
6747 .ideditor .comment-main {
6748     padding: 10px 10px 10px 0;
6749     -webkit-box-flex: 1;
6750         -ms-flex: 1 1 100%;
6751             flex: 1 1 100%;
6752     -webkit-box-orient: vertical;
6753     -webkit-box-direction: normal;
6754         -ms-flex-flow: column nowrap;
6755             flex-flow: column nowrap;
6756     overflow: hidden;
6757     overflow-wrap: break-word;
6758 }
6759 .ideditor[dir='rtl'] .comment-main {
6760     padding: 10px 0 10px 10px;
6761 }
6762
6763 .ideditor .comment-metadata {
6764     -webkit-box-orient: horizontal;
6765     -webkit-box-direction: normal;
6766         -ms-flex-flow: row nowrap;
6767             flex-flow: row nowrap;
6768     -webkit-box-pack: justify;
6769         -ms-flex-pack: justify;
6770             justify-content: space-between;
6771 }
6772 .ideditor .comment-author {
6773     font-weight: bold;
6774     color: #333;
6775 }
6776 .ideditor .comment-date {
6777     color: #aaa;
6778 }
6779 .ideditor .comment-text {
6780     color: #333;
6781     margin-top: 10px;
6782     overflow-y: auto;
6783     max-height: 250px;
6784 }
6785 .ideditor .comment-text::-webkit-scrollbar {
6786     border-left: none;
6787 }
6788
6789 .ideditor .note-save,
6790 .ideditor .qa-save {
6791     padding-top: 20px;
6792 }
6793
6794 .ideditor .qa-details-container {
6795     background: #ececec;
6796     padding: 10px;
6797     margin-top: 20px;
6798     border-radius: 4px;
6799     border: 1px solid #ccc;
6800     display: -webkit-box;
6801     display: -ms-flexbox;
6802     display: flex;
6803     -webkit-box-orient: vertical;
6804     -webkit-box-direction: normal;
6805         -ms-flex-direction: column;
6806             flex-direction: column;
6807 }
6808 .ideditor .qa-details-description-text::first-letter {
6809     text-transform: capitalize;
6810 }
6811 .ideditor[dir='rtl'] .qa-details-description-text::first-letter {
6812     text-transform: none;  /* #5877 */
6813 }
6814 .ideditor .qa-details-subsection h4 {
6815     padding-bottom: 2px;
6816 }
6817 .ideditor .qa-details-subsection:not(:last-child) {
6818     margin-bottom: 10px;
6819 }
6820 .ideditor .qa-details-subsection:empty {
6821     display: none;
6822 }
6823
6824 .ideditor .note-save .new-comment-input,
6825 .ideditor .qa-save .new-comment-input {
6826     width: 100%;
6827     height: 100px;
6828     max-height: 300px;
6829     min-height: 100px;
6830 }
6831
6832 .ideditor .note-save .detail-section,
6833 .ideditor .qa-save .detail-section {
6834     margin: 10px 0;
6835 }
6836
6837 .ideditor .note-report {
6838     float: right;
6839 }
6840
6841
6842 /* Custom Data Editor
6843 ------------------------------------------------------- */
6844 .ideditor .data-header {
6845     background-color: #f6f6f6;
6846     border-radius: 5px;
6847     border: 1px solid #ccc;
6848     display: -webkit-box;
6849     display: -ms-flexbox;
6850     display: flex;
6851     -webkit-box-orient: horizontal;
6852     -webkit-box-direction: normal;
6853         -ms-flex-flow: row nowrap;
6854             flex-flow: row nowrap;
6855     -webkit-box-align: center;
6856         -ms-flex-align: center;
6857             align-items: center;
6858 }
6859
6860 .ideditor .data-header-icon {
6861     background-color: #fff;
6862     padding: 10px;
6863     -webkit-box-flex: 0;
6864         -ms-flex: 0 0 auto;
6865             flex: 0 0 auto;
6866     position: relative;
6867     width: 60px;
6868     height: 60px;
6869     border-right: 1px solid #ccc;
6870     border-radius: 5px 0 0 5px;
6871 }
6872 .ideditor[dir='rtl'] .data-header-icon {
6873     border-right: unset;
6874     border-left: 1px solid #ccc;
6875     border-radius: 0 5px 5px 0;
6876 }
6877
6878 .ideditor .data-header-icon .icon-wrap {
6879     position: absolute;
6880     top: 0px;
6881 }
6882
6883 .ideditor .data-header-label {
6884     background-color: #f6f6f6;
6885     padding: 0 15px;
6886     -webkit-box-flex: 1;
6887         -ms-flex: 1 1 100%;
6888             flex: 1 1 100%;
6889     font-size: 14px;
6890     font-weight: bold;
6891     border-radius: 0 5px 5px 0;
6892 }
6893 .ideditor[dir='rtl'] .data-header-label {
6894     border-radius: 5px 0 0 5px;
6895 }
6896
6897 /* custom data editor - no info/delete buttons */
6898 .ideditor .data-editor.raw-tag-editor .tag-row button {
6899     display: none;
6900 }
6901 .ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
6902 .ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
6903     width: 50%;
6904 }
6905
6906
6907 .ideditor .over-map {
6908     position: relative;
6909     height: 100%;
6910     pointer-events: none;
6911     display: -webkit-box;
6912     display: -ms-flexbox;
6913     display: flex;
6914     -webkit-box-orient: horizontal;
6915     -webkit-box-direction: reverse;
6916         -ms-flex-direction: row-reverse;
6917             flex-direction: row-reverse;
6918     -webkit-box-align: end;
6919         -ms-flex-align: end;
6920             align-items: flex-end;
6921     overflow: hidden;
6922 }
6923 .ideditor .over-map > * {
6924     pointer-events: auto;
6925     z-index: 5;
6926 }
6927 /* offscreen this without hiding it */
6928 .ideditor .over-map .select-trap {
6929     position: absolute;
6930     right: -1000%;
6931     opacity: 0;
6932 }
6933
6934 /* Map Controls
6935 ------------------------------------------------------- */
6936 .ideditor .map-controls-wrap {
6937     position: absolute;
6938     left: 0;
6939     right: 0;
6940     height: 100%;
6941     z-index: 100;
6942     display: block;
6943     overflow-x: hidden;
6944     overflow-y: auto;
6945     pointer-events: none;
6946     -ms-overflow-style: none;
6947     scrollbar-width: none;
6948 }
6949 .ideditor .map-controls-wrap::-webkit-scrollbar {
6950     display: none;
6951 }
6952 .ideditor .map-controls {
6953     right: 0;
6954     top: 0;
6955     width: 40px;
6956     position: absolute;
6957     bottom: 0;
6958     display: -webkit-box;
6959     display: -ms-flexbox;
6960     display: flex;
6961     -webkit-box-orient: vertical;
6962     -webkit-box-direction: normal;
6963         -ms-flex-direction: column;
6964             flex-direction: column;
6965     padding: 5px 0;
6966     pointer-events: none;
6967 }
6968 .ideditor .map-controls:before {
6969     content: '';
6970     display: inline-block;
6971     pointer-events: none;
6972     width: 40px;
6973     height: 100%;
6974     max-height: 70px;
6975     -webkit-box-flex: 0;
6976         -ms-flex: 0 1 auto;
6977             flex: 0 1 auto;
6978 }
6979 .ideditor[dir='rtl'] .map-controls {
6980     left: 0;
6981     right: auto;
6982 }
6983
6984 .ideditor .map-control {
6985     position: relative;
6986     display: -webkit-box;
6987     display: -ms-flexbox;
6988     display: flex;
6989     -webkit-box-orient: vertical;
6990     -webkit-box-direction: normal;
6991         -ms-flex-direction: column;
6992             flex-direction: column;
6993 }
6994 .ideditor .map-control > button {
6995     position: relative;
6996     width: 40px;
6997     height: 40px;
6998     background: rgba(0,0,0,.5);
6999     border-radius: 0;
7000     pointer-events: auto;
7001 }
7002
7003 .ideditor .map-control > button:not(.disabled):focus,
7004 .ideditor .map-control > button:not(.disabled):active {
7005     background: rgba(0, 0, 0, .8);
7006 }
7007 .ideditor .map-control > button.active,
7008 .ideditor .map-control > button.active:active {
7009     background: #7092ff;
7010 }
7011 @media (hover: hover) {
7012     .ideditor .map-control > button:not(.disabled):hover {
7013         background: rgba(0, 0, 0, .8);
7014     }
7015     .ideditor .map-control > button.active:hover {
7016         background: #7092ff;
7017     }
7018 }
7019
7020 .ideditor .map-control > button.disabled .icon {
7021     color: rgba(255, 255, 255, 0.5);
7022 }
7023
7024
7025 /* Fullscreen Button (disabled)
7026 ------------------------------------------------------- */
7027 .ideditor div.full-screen {
7028     /*display: inline-block;*/
7029     width: 40px;
7030     margin-right: 10px;
7031     display: none;
7032 }
7033
7034 .ideditor div.full-screen .tooltip {
7035     min-width: 160px;
7036 }
7037
7038 .ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
7039     width: 40px;
7040     height: 40px;
7041     background: transparent;
7042 }
7043 .ideditor div.full-screen > button:active,
7044 .ideditor div.full-screen > button:focus {
7045     background-color: rgba(0, 0, 0, .8);
7046 }
7047 @media (hover: hover) {
7048     .ideditor div.full-screen > button:hover {
7049         background-color: rgba(0, 0, 0, .8);
7050     }
7051 }
7052
7053
7054 /* Map Controls
7055 ------------------------------------------------------- */
7056
7057 /* Zoom in/out buttons */
7058 .ideditor .zoombuttons > button.zoom-in {
7059     border-radius: 4px 0 0 0;
7060 }
7061 .ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
7062     border-radius: 0 4px 0 0;
7063 }
7064
7065 /* Geolocate button */
7066 .ideditor .geolocate-control {
7067     margin-bottom: 10px;
7068 }
7069 .ideditor .geolocate-control > button {
7070     border-radius: 0 0 0 4px;
7071 }
7072 .ideditor[dir='rtl'] .geolocate-control > button {
7073     border-radius: 0 0 4px 0;
7074 }
7075
7076 /* Zoom to selection button */
7077 .ideditor .zoom-to-selection-control .icon {
7078     width: 22px;
7079     height: 22px;
7080 }
7081
7082
7083 /* Background / Map Data / Help Pane buttons
7084 ------------------------------------------------------- */
7085 .ideditor .background-control > button {
7086     border-radius: 4px 0 0 0;
7087 }
7088 .ideditor[dir='rtl'] .background-control > button {
7089     border-radius: 0 4px 0 0;
7090 }
7091
7092 .ideditor .help-control > button {
7093     border-radius: 0 0 0 4px;
7094 }
7095 .ideditor[dir='rtl'] .help-control > button {
7096     border-radius: 0 0 4px 0;
7097 }
7098
7099
7100 /* Background / Map Data Settings
7101 ------------------------------------------------------- */
7102 .ideditor .imagery-faq {
7103     margin-bottom: 10px;
7104     white-space: nowrap;
7105 }
7106
7107 .ideditor .layer-list, .ideditor .controls-list {
7108     margin-bottom: 10px;
7109     border: 1px solid #ccc;
7110     border-radius: 4px;
7111 }
7112
7113 .ideditor .layer-list > li {
7114     background-color: #fff;
7115     color: #7092ff;
7116     position: relative;
7117     display: -webkit-box;
7118     display: -ms-flexbox;
7119     display: flex;
7120 }
7121
7122 .ideditor .layer-list:empty {
7123     display: none;
7124 }
7125
7126 .ideditor .layer-list > li:first-child {
7127     border-radius: 3px 3px 0 0;
7128 }
7129 .ideditor .layer-list > li:last-child {
7130     border-radius: 0 0 3px 3px;
7131 }
7132 .ideditor .layer-list > li:only-child {
7133     border-radius: 3px;
7134 }
7135 .ideditor .layer-list li:not(:last-child) {
7136     border-bottom: 1px solid #ccc;
7137 }
7138 .ideditor .layer-list li:active {
7139     background-color: #ececec;
7140 }
7141 @media (hover: hover) {
7142     .ideditor .layer-list li:hover {
7143         background-color: #ececec;
7144     }
7145 }
7146
7147 .ideditor .layer-list li.active button,
7148 .ideditor .layer-list li.switch button,
7149 .ideditor .layer-list li.active,
7150 .ideditor .layer-list li.switch {
7151     background: #e8ebff;
7152 }
7153
7154 .ideditor .layer-list li.best > div.best {
7155     padding: 5px;
7156     -webkit-box-flex: 0;
7157         -ms-flex: 0 0 auto;
7158             flex: 0 0 auto;
7159     -ms-flex-item-align: center;
7160         align-self: center;
7161 }
7162
7163 .ideditor[dir='rtl'] .list-item-data-browse svg {
7164     -webkit-transform: rotateY(180deg);
7165             transform: rotateY(180deg);
7166 }
7167
7168 /* make sure tooltip fits in map-control panel */
7169 /* if too wide, placement will be wrong the first time it displays */
7170 .ideditor .layer-list li.best .popover-inner {
7171     max-width: 160px;
7172 }
7173
7174 .ideditor .layer-list label {
7175     padding: 5px 10px;
7176     cursor: pointer;
7177     -webkit-box-flex: 1;
7178         -ms-flex: 1 1 auto;
7179             flex: 1 1 auto;
7180     display: -webkit-box;
7181     display: -ms-flexbox;
7182     display: flex;
7183     -webkit-box-align: center;
7184         -ms-flex-align: center;
7185             align-items: center;
7186     overflow: hidden;
7187 }
7188
7189 .ideditor[dir='ltr'] .layer-list .indented label {
7190     padding-left: 24px;
7191 }
7192 .ideditor[dir='rtl'] .layer-list .indented label {
7193     padding-right: 24px;
7194 }
7195
7196 .ideditor .layer-list label > span {
7197     display: block;
7198     overflow: hidden;
7199     width: calc(100% - 20px); /* Ensures radio input width within flexbox */
7200 }
7201
7202 .ideditor .layer-list label span.localized-text {
7203     line-height: 0.95rem;
7204 }
7205
7206 .ideditor .layer-list input.list-item-input {
7207     height: 2.2em;
7208     padding: 0px 4px;
7209     width: 50%;
7210     min-width: 160px;
7211 }
7212
7213 .ideditor .map-data-pane .layer-list button,
7214 .ideditor .background-pane .layer-list button {
7215     border-left: 1px solid #ccc;
7216     border-radius: 0;
7217     padding-left: 4px;
7218     padding-right: 4px;
7219 }
7220 .ideditor[dir='rtl'] .map-data-pane .layer-list button,
7221 .ideditor[dir='rtl'] .background-pane .layer-list button {
7222     border-left: none;
7223     border-right: 1px solid #ccc;
7224 }
7225
7226 .ideditor .map-data-pane .layer-list button .icon,
7227 .ideditor .background-pane .layer-list button .icon {
7228     opacity: 0.5;
7229 }
7230
7231 .ideditor .map-data-pane .layer-list button:last-of-type,
7232 .ideditor .background-pane .layer-list button:last-of-type {
7233     border-radius: 0 3px 3px 0;
7234 }
7235 .ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
7236 .ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
7237     border-radius: 3px 0 0 3px;
7238 }
7239
7240 .ideditor .map-data-pane .vectortile-container .vectortile-header {
7241     padding-bottom: 5px;
7242 }
7243 .ideditor .map-data-pane .vectortile-container .vectortile-footer {
7244     padding-bottom: 10px;
7245 }
7246
7247
7248 /* Issues
7249 ------------------------------------------------------- */
7250 .ideditor .issue {
7251     overflow: hidden;
7252 }
7253 .ideditor .issue .issue-label,
7254 .ideditor .issue-label .issue-text {
7255     width: 100%;
7256     display: -webkit-box;
7257     display: -ms-flexbox;
7258     display: flex;
7259     -webkit-box-orient: horizontal;
7260     -webkit-box-direction: normal;
7261         -ms-flex-flow: row nowrap;
7262             flex-flow: row nowrap;
7263     cursor: pointer;
7264     text-align: initial;
7265     background: none;
7266 }
7267
7268 .ideditor .issue-text .issue-icon {
7269     -webkit-box-flex: 0;
7270         -ms-flex: 0 0 auto;
7271             flex: 0 0 auto;
7272     padding: 2px 3px;
7273 }
7274 .ideditor .issue-text .issue-message {
7275     -webkit-box-flex: 1;
7276         -ms-flex: 1 1 auto;
7277             flex: 1 1 auto;
7278     padding: 4px 5px;
7279 }
7280 .ideditor .issue-label .issue-autofix {
7281     -webkit-box-flex: 0;
7282         -ms-flex: 0 0 auto;
7283             flex: 0 0 auto;
7284     padding: 5px 8px;
7285 }
7286 .ideditor .issue-label .issue-info-button {
7287     height: unset;
7288     width: 32px;
7289     -webkit-box-flex: 0;
7290         -ms-flex: 0 0 auto;
7291             flex: 0 0 auto;
7292     border-left: 1px solid #ccc;
7293     background-color: rgba(0,0,0,0);
7294 }
7295 .ideditor[dir='rtl'] .issue-label .issue-info-button {
7296     border-left: 0;
7297     border-right: 1px solid #ccc;
7298 }
7299 .ideditor .issue-container .issue-label .issue-info-button .icon {
7300     opacity: 0.5;
7301 }
7302 .ideditor .issue-container.active .issue-label .issue-info-button .icon {
7303     opacity: 0.7;
7304 }
7305 .ideditor .issue-label .issue-info-button:last-child {
7306     border-radius: 0 4px 4px 0;
7307 }
7308 .ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
7309     border-radius: 4px 0 0 4px;
7310 }
7311
7312 .ideditor button.autofix.action {
7313     -webkit-box-flex: 0;
7314         -ms-flex: 0 0 20px;
7315             flex: 0 0 20px;
7316     height: 20px;
7317     width: 20px;
7318     background: #7092ff;
7319     color: #fff;
7320 }
7321 .ideditor button.autofix.action:focus,
7322 .ideditor button.autofix.action:active,
7323 .ideditor button.autofix.action.active {
7324     background: #597be7;
7325 }
7326 @media (hover: hover) {
7327     .ideditor button.autofix.action:hover {
7328         background: #597be7;
7329     }
7330 }
7331
7332 /* fix all */
7333 .ideditor .autofix-all {
7334     display: -webkit-box;
7335     display: -ms-flexbox;
7336     display: flex;
7337     -webkit-box-orient: horizontal;
7338     -webkit-box-direction: normal;
7339         -ms-flex-flow: row nowrap;
7340             flex-flow: row nowrap;
7341     -webkit-box-pack: end;
7342         -ms-flex-pack: end;
7343             justify-content: flex-end;
7344     margin-top: -25px;
7345     padding-bottom: 5px;
7346 }
7347 .ideditor .autofix-all-link-text {
7348     padding: 0;
7349 }
7350 .ideditor .autofix-all-link-icon svg {
7351     margin: 0 9px;
7352     background: currentColor;
7353     border-radius: 4px;
7354 }
7355 .ideditor .autofix-all-link-icon svg use {
7356     color: #fff;
7357 }
7358
7359 /* warning styles */
7360 .ideditor .warnings-list,
7361 .ideditor .warnings-list *,
7362 .ideditor .issue-container.active .issue.severity-warning,
7363 .ideditor .issue-container.active .issue.severity-warning * {
7364     border-color: #fb2;
7365 }
7366
7367 .ideditor .warnings-list .issue.severity-warning .issue-label,
7368 .ideditor .issue.severity-warning .issue-fix-list,
7369 .ideditor .warning-section {
7370     background: #ffc;
7371 }
7372
7373 .ideditor .issue-container.active .issue.severity-warning .issue-label {
7374     background: #ffa;
7375 }
7376
7377 .ideditor .issue.severity-warning .issue-icon {
7378     color: #f90;
7379 }
7380
7381 .ideditor .issue.severity-warning .issue-fix-item button.actionable,
7382 .ideditor .issue-container.active .issue.severity-warning .issue-info-button {
7383     color: #b15500;
7384     fill: #b15500;
7385 }
7386 .ideditor .warnings-list .issue.severity-warning .issue-label:active,
7387 .ideditor .warnings-list .issue.severity-warning .issue-label:focus,
7388 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7389 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
7390     background: #ff8;
7391 }
7392 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7393 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
7394 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
7395 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
7396     color: #7f3d00;
7397     fill: #7f3d00;
7398 }
7399 @media (hover: hover) {
7400     .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
7401     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
7402         background: #ff8;
7403     }
7404     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
7405     .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
7406         color: #7f3d00;
7407         fill: #7f3d00;
7408     }
7409 }
7410
7411
7412 /* error styles */
7413 .ideditor .errors-list,
7414 .ideditor .errors-list *,
7415 .ideditor .issue-container.active .issue.severity-error,
7416 .ideditor .issue-container.active .issue.severity-error * {
7417     border-color: #f77;
7418 }
7419
7420 .ideditor .errors-list .issue.severity-error .issue-label,
7421 .ideditor .issue.severity-error .issue-fix-list,
7422 .ideditor .error-section {
7423     background: #ffd6d6;
7424 }
7425
7426 .ideditor .issue-container.active .issue.severity-error .issue-label {
7427     background: #ffc6c6;
7428 }
7429
7430 .ideditor .issue.severity-error .issue-fix-item button.actionable,
7431 .ideditor .issue-container.active .issue.severity-error .issue-info-button {
7432     color: #b91201;
7433     fill: #b91201;
7434 }
7435 .ideditor .issue.severity-error .issue-icon {
7436     color: #dd1400;
7437 }
7438 .ideditor .errors-list .issue.severity-error .issue-label:active,
7439 .ideditor .errors-list .issue.severity-error .issue-label:focus,
7440 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7441 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
7442     background: #ffb6b6;
7443 }
7444 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7445 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
7446 .ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
7447 .ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
7448     color: #840c00;
7449     fill: #840c00;
7450 }
7451 @media (hover: hover) {
7452     .ideditor .errors-list .issue.severity-error .issue-label:hover,
7453     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
7454         background: #ffb6b6;
7455     }
7456     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
7457     .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
7458         color: #840c00;
7459         fill: #840c00;
7460     }
7461 }
7462
7463
7464 /* Issues Pane */
7465 .ideditor .issues-options-container {
7466     display: table;
7467 }
7468 .ideditor .issues-option {
7469     display: table-row;
7470 }
7471 .ideditor .issues-option-title {
7472     display: table-cell;
7473     font-weight: bold;
7474     padding-right: 10px;
7475 }
7476 .ideditor[dir='rtl'] .issues-option-title {
7477     padding-right: 0;
7478     padding-left: 10px;
7479 }
7480 .ideditor .issues-option label {
7481     display: table-cell;
7482     padding: 0 10px;
7483     white-space: nowrap;
7484 }
7485
7486 .ideditor .layer-list.issues-list li.issue {
7487     border-color: inherit;    /* override .layer-list styles */
7488     color: inherit;
7489     height: unset;
7490 }
7491
7492 .ideditor .layer-list.issue-rules-list,
7493 .ideditor .layer-list.issues-list,
7494 .ideditor .layer-list.layer-feature-list {
7495     margin-bottom: 0;
7496 }
7497 .ideditor .section-footer {
7498     display: -webkit-box;
7499     display: -ms-flexbox;
7500     display: flex;
7501     -webkit-box-orient: horizontal;
7502     -webkit-box-direction: normal;
7503         -ms-flex-flow: row nowrap;
7504             flex-flow: row nowrap;
7505     -webkit-box-pack: end;
7506         -ms-flex-pack: end;
7507             justify-content: flex-end;
7508     height: 30px;
7509 }
7510 .ideditor .section-footer a {
7511     padding: 5px;
7512 }
7513
7514 .ideditor .section-issues-status .box {
7515     border-radius: 4px;
7516     border: 1px solid #72d979;
7517     background: #c6ffca;
7518     padding: 5px !important;
7519     display: -webkit-box;
7520     display: -ms-flexbox;
7521     display: flex;
7522 }
7523 .ideditor .section-issues-status .icon {
7524     color: #05ac10;
7525 }
7526
7527 .ideditor input.square-degrees-input {
7528     padding: 2px !important; /* important needed for rtl */
7529     width: 3em;
7530     height: 2em;
7531     text-align: center;
7532     background: rgba(0,0,0,0);
7533     color: currentColor;
7534 }
7535
7536
7537 /* Entity Issues List */
7538 .ideditor .section-entity-issues .issue-container .issue {
7539     border-radius: 4px;
7540     border: 1px solid #ccc;
7541     background: #f6f6f6;
7542 }
7543 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
7544 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
7545 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
7546 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
7547     background: #f1f1f1;
7548 }
7549 @media (hover: hover) {
7550     .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
7551     .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
7552         background: #f1f1f1;
7553     }
7554 }
7555 .ideditor .section-entity-issues .issue .issue-label .issue-text {
7556     padding-right: 10px;
7557 }
7558 .ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
7559     padding-right: unset;
7560     padding-left: 10px;
7561 }
7562
7563 .ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
7564     font-weight: bold;
7565 }
7566 .ideditor .section-entity-issues .issue-container:not(:last-of-type) {
7567     margin-bottom: 5px;
7568 }
7569 .ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
7570     margin-top: 10px;
7571 }
7572 .ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
7573     margin-bottom: 10px;
7574 }
7575
7576 /* fixes */
7577 .ideditor .section-entity-issues .issue-fix-list {
7578     border-top: 1px solid;
7579     border-color: inherit;
7580 }
7581 .ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
7582     display: none;
7583 }
7584
7585 .ideditor li.issue-fix-item button {
7586     padding: 2px 10px 2px 20px;
7587     background: transparent;
7588     width: 100%;
7589     text-align: initial;
7590 }
7591 .ideditor[dir='rtl'] li.issue-fix-item button {
7592     padding: 2px 20px 2px 10px;
7593 }
7594 .ideditor li.issue-fix-item:first-of-type button {
7595     padding-top: 5px;
7596 }
7597 .ideditor li.issue-fix-item:last-of-type button {
7598     padding-bottom: 5px;
7599 }
7600
7601 .ideditor li.issue-fix-item button .fix-message {
7602     padding: 0 10px;
7603     vertical-align: middle;
7604 }
7605
7606 .ideditor li.issue-fix-item button.actionable {
7607     cursor: pointer;
7608 }
7609 .ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
7610     color: #555;
7611     fill: #555;
7612 }
7613
7614 .ideditor .issue-container:not(.active) ul.issue-fix-list {
7615     display: none;
7616 }
7617 .ideditor .issue-container:not(.active) .issue-info {
7618     display: none;
7619 }
7620
7621 .ideditor .issue-info {
7622     -webkit-box-flex: 1;
7623         -ms-flex: 1 1 auto;
7624             flex: 1 1 auto;
7625     width: 100%;
7626     overflow: hidden;
7627     display: none;
7628     padding: 10px 0;
7629 }
7630 .ideditor .issue-info.expanded {
7631     display: inline-block;
7632 }
7633
7634 .ideditor .issue-info .issue-reference {
7635     margin-bottom: 10px;
7636 }
7637 .ideditor .issue-info .tagDiff-table {
7638     min-width: 60%;
7639     width: unset;
7640     border: 1px solid #ccc;
7641 }
7642 .ideditor .issue-info .tagDiff-row {
7643     border: 1px solid #ccc;
7644 }
7645 .ideditor .issue-info .tagDiff-cell {
7646     padding: 2px 10px;
7647     font-family: monospace;
7648     font-size: 10px;
7649     border: 1px solid #ccc;
7650 }
7651 .ideditor .issue-info .tagDiff-cell-add {
7652     background: #dfd;
7653 }
7654 .ideditor .issue-info .tagDiff-cell-remove {
7655     background: #fdd;
7656 }
7657
7658
7659 /* Background - Display Options Sliders
7660 ------------------------------------------------------- */
7661 .ideditor .display-options-container {
7662     padding: 10px;
7663 }
7664
7665 .ideditor .display-options-container label {
7666     padding-bottom: 0;
7667     padding-top: 10px;
7668 }
7669
7670 .ideditor .display-options-container label span {
7671     font-weight: bold;
7672     margin: 5px;
7673 }
7674
7675 .ideditor .display-control .control-wrap {
7676     display: -webkit-box;
7677     display: -ms-flexbox;
7678     display: flex;
7679     -webkit-box-align: center;
7680         -ms-flex-align: center;
7681             align-items: center;
7682     width: 100%;
7683 }
7684 .ideditor .display-control .display-option-input {
7685     height: 20px;
7686     -webkit-box-flex: 1;
7687         -ms-flex: 1 1 100%;
7688             flex: 1 1 100%;
7689 }
7690
7691 .ideditor .display-control button {
7692     height: 30px;
7693     width: 30px;
7694     margin-left: 5px;
7695     margin-right: 0px;
7696     vertical-align: text-bottom;
7697     border-radius: 4px;
7698     -webkit-box-flex: 0;
7699         -ms-flex: 0 0 auto;
7700             flex: 0 0 auto;
7701 }
7702 .ideditor[dir='rtl'] .display-control button {
7703     margin-left: 0px;
7704     margin-right: 5px;
7705 }
7706
7707
7708 /* Background - Adjust Alignment
7709 ------------------------------------------------------- */
7710 .ideditor .background-pane .nudge-container {
7711     border: 1px solid #ccc;
7712     border-radius: 4px;
7713     padding: 10px;
7714     position: relative;
7715 }
7716
7717 .ideditor .nudge-container .nudge-controls-wrap {
7718     position: relative;
7719     width: 100%;
7720     overflow: hidden;
7721 }
7722
7723 .ideditor .nudge-container .nudge-outer-rect {
7724     background-color: #eee;
7725     border: 1px solid #ccc;
7726     border-radius: 2px;
7727     padding: 20px 0;
7728     display: -webkit-box;
7729     display: -ms-flexbox;
7730     display: flex;
7731     -webkit-box-pack: center;
7732         -ms-flex-pack: center;
7733             justify-content: center;
7734     -webkit-box-align: center;
7735         -ms-flex-align: center;
7736             align-items: center;
7737     margin: 45px;
7738     cursor: move;
7739     /* prevent scrolling pane while dragging on touchscreen */
7740     -ms-touch-action: none;
7741         touch-action: none;
7742     /* disable drag-to-select */
7743     -webkit-user-select: none;
7744        -moz-user-select: none;
7745         -ms-user-select: none;
7746             user-select: none;
7747     position: relative;
7748 }
7749
7750 .ideditor .nudge-container .nudge-inner-rect {
7751     background-color: #fff;
7752     border: 1px solid #ccc;
7753     border-radius: 2px;
7754     width: 65%;
7755     min-height: 20px;
7756 }
7757
7758 .ideditor .nudge-container .nudge::after {
7759     content: '';
7760     display: block;
7761     position: absolute;
7762     margin: auto;
7763     left: 0; right: 0; top: 0; bottom: 0;
7764     height: 0;
7765     width: 0;
7766 }
7767
7768 .ideditor .nudge-container input {
7769     width: 100%;
7770     padding: 2px;
7771     text-align: center;
7772     border: 0;
7773 }
7774
7775 .ideditor .nudge-container input.error {
7776     border: 1px solid #ff7878;
7777     border-radius: 2px;
7778     background: #ffb;
7779 }
7780
7781 .ideditor .nudge-container button {
7782     position: absolute;
7783     height: 40px;
7784     width: 40px;
7785 }
7786 .ideditor .nudge-container button.right,
7787 .ideditor .nudge-container button.left {
7788     top: 0;
7789     bottom: 0;
7790     margin-top: auto;
7791     margin-bottom: auto;
7792     vertical-align: middle;
7793 }
7794 .ideditor .nudge-container button.right {
7795     right: 0;
7796 }
7797 .ideditor .nudge-container button.left {
7798     left: 0;
7799 }
7800 .ideditor .nudge-container button.top,
7801 .ideditor .nudge-container button.bottom {
7802     left: 0;
7803     right: 0;
7804     margin-left: auto;
7805     margin-right: auto;
7806 }
7807 .ideditor .nudge-container button.top {
7808     top: 0;
7809 }
7810 .ideditor .nudge-container button.bottom {
7811     bottom: 0;
7812 }
7813
7814 .ideditor .nudge-container button.nudge-reset {
7815     right: 0;
7816     bottom: 0;
7817 }
7818
7819 .ideditor .nudge-surface {
7820    position: absolute;
7821    z-index: 5000;
7822    left: 0;
7823    top: 0;
7824    width: 100%;
7825    height: 100%;
7826    background-color: transparent;
7827    cursor: move;
7828 }
7829
7830 .ideditor .background-pane .nudge.right::after {
7831     border-top: 5px solid transparent;
7832     border-bottom: 5px solid transparent;
7833     border-left: 5px solid #222;
7834 }
7835
7836 .ideditor .background-pane .nudge.left::after {
7837     border-top: 5px solid transparent;
7838     border-bottom: 5px solid transparent;
7839     border-right: 5px solid #222;
7840 }
7841
7842 .ideditor .background-pane .nudge.top::after {
7843     border-right: 5px solid transparent;
7844     border-left: 5px solid transparent;
7845     border-bottom: 5px solid #222;
7846 }
7847
7848 .ideditor .background-pane .nudge.bottom::after {
7849     border-right: 5px solid transparent;
7850     border-left: 5px solid transparent;
7851     border-top: 5px solid #222;
7852 }
7853
7854
7855 /* Side Panes - Background / Map Data / Help
7856 ------------------------------------------------------- */
7857 .ideditor .map-panes {
7858     -webkit-box-flex: 0;
7859         -ms-flex: 0 1 auto;
7860             flex: 0 1 auto;
7861     position: relative;
7862     height: 100%;
7863     max-width: 100%;
7864 }
7865 .ideditor .map-pane {
7866     position: relative;
7867     top: 0;
7868     width: 400px;
7869     max-width: 100%;
7870     height: 100%;
7871     z-index: 10;
7872     display: -webkit-box;
7873     display: -ms-flexbox;
7874     display: flex;
7875     -webkit-box-orient: vertical;
7876     -webkit-box-direction: normal;
7877         -ms-flex-direction: column;
7878             flex-direction: column;
7879 }
7880
7881 .ideditor .map-pane.help-pane {
7882     width: 600px;
7883 }
7884
7885 .ideditor .pane-heading {
7886     display: -webkit-box;
7887     display: -ms-flexbox;
7888     display: flex;
7889     -webkit-box-orient: horizontal;
7890     -webkit-box-direction: normal;
7891         -ms-flex-flow: row nowrap;
7892             flex-flow: row nowrap;
7893     -webkit-box-pack: justify;
7894         -ms-flex-pack: justify;
7895             justify-content: space-between;
7896     border-bottom: 1px solid #ccc;
7897     -webkit-box-flex: 0;
7898         -ms-flex: 0 0 auto;
7899             flex: 0 0 auto;
7900 }
7901
7902 .ideditor .pane-heading h2 {
7903     margin: 14px 20px;
7904 }
7905
7906 .ideditor .pane-heading button {
7907     width: 40px;
7908     border-radius: 0;
7909 }
7910
7911 .ideditor .pane-content {
7912     height: 100%;
7913     padding: 10px 50px 20px 20px;
7914     overflow-x: hidden;
7915     overflow-y: scroll;
7916     position: relative;
7917 }
7918 .ideditor[dir='rtl'] .pane-content {
7919     padding: 10px 20px 20px 50px;
7920 }
7921
7922 .ideditor .help-pane .pane-content > div {
7923     padding-bottom: 15px;
7924 }
7925
7926
7927 /* Help
7928 ------------------------------------------------------- */
7929 .ideditor .help-pane p {
7930     font-size: 15px;
7931     margin-bottom: 20px;
7932 }
7933
7934 .ideditor .help-pane .left-content .icon.inline,
7935 .ideditor .curtain-tooltip .icon.inline {
7936     margin-right: 0;
7937     margin-left: 0;
7938     height: 1.34em;
7939     width: 1.34em;
7940 }
7941
7942 .ideditor .help-pane .toc {
7943     width: 100%;
7944     max-width: 200px;
7945     float: right;
7946     margin-left: 20px;
7947     margin-bottom: 20px;
7948     padding-left: 5px;
7949 }
7950
7951 .ideditor .help-pane .toc li a,
7952 .ideditor .help-pane .nav a {
7953     display: block;
7954     border: 1px solid #ccc;
7955     padding: 5px 10px;
7956 }
7957
7958 .ideditor .help-pane .toc li a {
7959     border-bottom: 0;
7960 }
7961 .ideditor .help-pane .toc li a:focus,
7962 .ideditor .help-pane .nav a:focus,
7963 .ideditor .help-pane .toc li a:active,
7964 .ideditor .help-pane .nav a:active {
7965     background: #ececec;
7966 }
7967 @media (hover: hover) {
7968     .ideditor .help-pane .toc li a:hover,
7969     .ideditor .help-pane .nav a:hover {
7970         background: #ececec;
7971     }
7972 }
7973
7974 .ideditor .help-pane .toc li a.selected {
7975     background: #e8ebff;
7976 }
7977
7978 .ideditor .help-pane .toc li:first-child a {
7979     border-radius: 4px 4px 0 0;
7980 }
7981
7982 .ideditor .help-pane .toc li:nth-last-child(3) a {
7983     border-bottom: 1px solid #ccc;
7984     border-radius: 0 0 4px 4px
7985 }
7986
7987 .ideditor .help-pane .toc li.shortcuts a,
7988 .ideditor .help-pane .toc li.walkthrough a {
7989     overflow: hidden;
7990     margin-top: 10px;
7991     border-bottom: 1px solid #ccc;
7992     border-radius: 4px;
7993 }
7994
7995 .ideditor .help-pane .toc li.walkthrough a {
7996     text-align: center;
7997 }
7998
7999 .ideditor .help-pane .nav {
8000     position: relative;
8001     padding-bottom: 30px;
8002 }
8003
8004 .ideditor .help-pane .nav a {
8005     float: left;
8006     width: 50%;
8007     text-align: center;
8008 }
8009
8010 .ideditor .help-pane .nav a:first-child {
8011     border-radius: 4px 0 0 4px;
8012 }
8013
8014 .ideditor .help-pane .nav a:last-child:not(:only-child) {
8015     border-radius: 0 4px 4px 0;
8016     border-left: 0;
8017 }
8018
8019 .ideditor .help-pane .nav a:only-child {
8020     width: 100%;
8021     border-radius: 4px;
8022 }
8023
8024
8025 /* Inspector (hover styles)
8026 ------------------------------------------------------- */
8027 .ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
8028 .ideditor .inspector-hover .form-field-input-wrap .label,
8029 .ideditor .inspector-hover .form-field-input-multicombo .chiplist,
8030 .ideditor .inspector-hover .form-field-button,
8031 .ideditor .inspector-hover .structure-extras-wrap,
8032 .ideditor .inspector-hover .comments-container .comment,
8033 .ideditor .inspector-hover button,
8034 .ideditor .inspector-hover input,
8035 .ideditor .inspector-hover textarea,
8036 .ideditor .inspector-hover label {
8037     background: #ececec;
8038 }
8039 .ideditor .inspector-hover .preset-list-button,
8040 .ideditor .inspector-hover .tag-row input {
8041     background: #f6f6f6;
8042 }
8043
8044 .ideditor .inspector-hover a,
8045 .ideditor .inspector-hover .form-field-input-multicombo .chip,
8046 .ideditor .inspector-hover .form-field-input-check span,
8047 .ideditor .inspector-hover .section-entity-issues .issue .icon {
8048     color: #666;
8049 }
8050
8051 .ideditor .inspector-hover .form-field-input-multicombo .chip {
8052     background: #eee;
8053     border: 1px solid #ccc;
8054 }
8055
8056 /* scrollbars only when necessary*/
8057 .ideditor .inspector-hover div {
8058     overflow-x: visible;
8059     overflow-y: auto;
8060 }
8061
8062 /* hide and remove from layout */
8063 .ideditor .inspector-hidden,
8064 .ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
8065 .ideditor .inspector-hover label input[type="checkbox"],
8066 .ideditor .inspector-hover label input[type="radio"],
8067 .ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
8068 .ideditor .inspector-hover .form-field-input-radio label,
8069 .ideditor .inspector-hover .form-field-input-radio label span,
8070 .ideditor .inspector-hover .form-field-input-radio label.remove .icon,
8071 .ideditor .inspector-hover .add-row,
8072 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
8073 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
8074     display: none;
8075 }
8076
8077 /* hide but preserve in layout */
8078 .ideditor .inspector-hover .combobox-caret,
8079 .ideditor .inspector-hover .header button,
8080 .ideditor .inspector-hover .quick-links,
8081 .ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
8082 .ideditor .inspector-hover .hide-toggle:before,
8083 .ideditor .inspector-hover .more-fields,
8084 .ideditor .inspector-hover .field-label button,
8085 .ideditor .inspector-hover .tag-row button,
8086 .ideditor .inspector-hover .footer * {
8087     opacity: 0;
8088 }
8089
8090 /* Unstyle the active entity issue on hover */
8091 .ideditor .inspector-hover .section-entity-issues .issue-container.active {
8092     margin-top: 1px;
8093     margin-bottom: 1px;
8094 }
8095 .ideditor .inspector-hover .section-entity-issues .issue-container * {
8096     border-color: #ccc !important;
8097 }
8098 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
8099     border-bottom: 0;
8100 }
8101 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
8102     font-weight: normal;
8103 }
8104
8105
8106 /* Styles for raw tag inspector on hover */
8107 .ideditor .inspector-hover .tag-row .key-wrap,
8108 .ideditor .inspector-hover .tag-row .value-wrap {
8109     height: 31px;
8110 }
8111
8112 .ideditor .inspector-hover .tag-row:first-child input.value {
8113     border-top-right-radius: 4px;
8114 }
8115 .ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
8116     border-top-right-radius: 0;
8117     border-top-left-radius: 4px;
8118 }
8119
8120 .ideditor .inspector-hover .tag-row:last-child input.value {
8121     border-bottom-right-radius: 4px;
8122 }
8123 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
8124     border-bottom-right-radius: 0;
8125     border-bottom-left-radius: 4px;
8126 }
8127
8128 .ideditor .inspector-hover .tag-row:last-child input.key {
8129     border-bottom-left-radius: 4px;
8130 }
8131 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
8132     border-bottom-left-radius: 0;
8133     border-bottom-right-radius: 4px;
8134 }
8135
8136 .ideditor .inspector-hover .more-fields {
8137     max-height: 0;
8138     margin-bottom: -10px;
8139 }
8140
8141 /* Unstyle button fields */
8142 .ideditor .inspector-hover .form-field-input-radio label.active,
8143 .ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
8144     opacity: 1;
8145     background-color: transparent;
8146     color: #666;
8147     padding-left: 0;
8148     border-width: 0;
8149 }
8150 .ideditor .inspector-hover .form-field-input-radio button.active {
8151     padding-left: 10px;
8152 }
8153
8154 /* Show placeholder on hover for radio buttons */
8155 .ideditor .inspector-hover .form-field-input-radio {
8156     border: 1px solid #ccc;
8157     border-top: 0;
8158     border-radius: 0 0 4px 4px;
8159 }
8160 .ideditor .inspector-hover .form-field-input-radio .placeholder {
8161     opacity: 1;
8162     color: #666;
8163     padding: 5px 10px;
8164     width: 100%;
8165     height: auto;
8166     border: 0;
8167 }
8168 .ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
8169     border: 0;
8170 }
8171
8172
8173 /* Raster Background Tiles
8174 ------------------------------------------------------- */
8175 .ideditor img.tile {
8176     position: absolute;
8177     -webkit-transform-origin: 0 0;
8178         -ms-transform-origin: 0 0;
8179             transform-origin: 0 0;
8180
8181     -webkit-user-select: none;
8182
8183        -moz-user-select: none;
8184
8185         -ms-user-select: none;
8186
8187             user-select: none;
8188
8189     pointer-events: none;
8190
8191     -webkit-user-drag: none;
8192
8193     opacity: 0;
8194
8195     -webkit-transition: opacity 200ms linear;
8196
8197     transition: opacity 200ms linear;
8198 }
8199
8200 .ideditor img.tile-loaded {
8201     opacity: 1;
8202 }
8203
8204 .ideditor img.tile-removing {
8205     opacity: 0;
8206 }
8207
8208 .ideditor .tile-label-debug {
8209     font-size: 10px;
8210     background: rgba(0, 0, 0, 0.7);
8211     color: #fff;
8212     position: absolute;
8213     text-align: center;
8214     padding: 5px;
8215     border-radius: 3px;
8216     z-index: 2;
8217     margin-left: -70px;
8218     margin-top: -20px;
8219
8220     -webkit-transform-origin: 0 0;
8221
8222         -ms-transform-origin: 0 0;
8223
8224             transform-origin: 0 0;
8225
8226     -webkit-user-select: none;
8227
8228        -moz-user-select: none;
8229
8230         -ms-user-select: none;
8231
8232             user-select: none;
8233 }
8234
8235 .ideditor img.tile-debug {
8236     outline: 1px solid red;
8237 }
8238
8239
8240 /* Map
8241 ------------------------------------------------------- */
8242 .ideditor .main-map {
8243     position: absolute;
8244     top: 0;
8245     left: 0;
8246     right: 0;
8247     bottom: 0;
8248     overflow: hidden;
8249     height: 100%;
8250     width: 100%;
8251     background: #000;
8252     -webkit-user-select: none;
8253        -moz-user-select: none;
8254         -ms-user-select: none;
8255             user-select: none;
8256     -ms-touch-action: none;
8257         touch-action: none;
8258     -webkit-touch-callout: none;
8259 }
8260 .ideditor .main-map * {
8261     -ms-touch-action: none;
8262         touch-action: none;
8263 }
8264
8265 .ideditor .supersurface {
8266     -webkit-transform-origin: 0 0;
8267         -ms-transform-origin: 0 0;
8268             transform-origin: 0 0;
8269 }
8270
8271 .ideditor .supersurface, .ideditor .layer {
8272     position: absolute;
8273     top: 0;
8274     left: 0;
8275     right: 0;
8276     bottom: 0;
8277 }
8278
8279
8280 /* Map-In-Map
8281 ------------------------------------------------------- */
8282 .ideditor .map-in-map {
8283     position: absolute;
8284     overflow: hidden;
8285     top: 10px;
8286     width: 200px;
8287     height: 150px;
8288     z-index: 2;
8289     background: #000;
8290     border: #aaa 1px solid;
8291     -webkit-box-shadow: 0 0 2em black;
8292             box-shadow: 0 0 2em black;
8293 }
8294 .ideditor[dir='ltr'] .map-in-map {
8295     left: 10px;
8296 }
8297 .ideditor[dir='rtl'] .map-in-map {
8298     right: 10px;
8299 }
8300
8301 .ideditor .map-in-map-tiles {
8302     -webkit-transform-origin: 0 0;
8303         -ms-transform-origin: 0 0;
8304             transform-origin: 0 0;
8305     -webkit-user-select: none;
8306        -moz-user-select: none;
8307         -ms-user-select: none;
8308             user-select: none;
8309 }
8310
8311 .ideditor .map-in-map-viewport,
8312 .ideditor .map-in-map-data {
8313     top: 0;
8314     left: 0;
8315     overflow: hidden;
8316     height: 100%;
8317     width: 100%;
8318 }
8319
8320 .ideditor .map-in-map-viewport {
8321     position: absolute;
8322 }
8323
8324 .ideditor .map-in-map-data {
8325     position: relative;
8326     z-index: 10;
8327 }
8328
8329 .ideditor .map-in-map-bbox {
8330     fill: none;
8331     stroke: rgba(255, 255, 0, 0.75);
8332     stroke-width: 1;
8333     shape-rendering: crispEdges;
8334 }
8335
8336 .ideditor .map-in-map-bbox.thick {
8337     stroke-width: 5;
8338 }
8339
8340
8341 /* Debug Data
8342 ------------------------------------------------------- */
8343 .ideditor .debug {
8344     stroke: currentColor;
8345     fill: none;
8346     stroke-width: 2;
8347 }
8348 .ideditor .map-in-map-data .debug {
8349     stroke-width: 1;
8350 }
8351
8352 .ideditor .nocolor { color: rgba(0, 0, 0, 0); }
8353 .ideditor .red     { color: rgba(255, 0, 0, 0.75); }
8354 .ideditor .green   { color: rgba(0, 255, 0, 0.75); }
8355 .ideditor .blue    { color: rgba(176, 176, 255, 0.75); }
8356 .ideditor .yellow  { color: rgba(255, 255, 0, 0.75); }
8357 .ideditor .cyan    { color: rgba(0, 255, 255, 0.75); }
8358 .ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
8359 .ideditor .orange  { color: rgba(255, 153, 0, 0.75); }
8360 .ideditor .pink    { color: rgba(255, 0, 153, 0.75); }
8361 .ideditor .purple  { color: rgba(153, 0, 255, 0.75); }
8362
8363 .ideditor .debug-legend {
8364     position: absolute;
8365     top: 70px;
8366     right: 80px;
8367     padding: 5px;
8368     border-radius: 4px;
8369     pointer-events: none;
8370 }
8371
8372 .ideditor .debug-legend-item {
8373     padding-right: 5px;
8374 }
8375 .ideditor .debug-legend-item:before {
8376     content: "\25A0";
8377     padding: 0 5px;
8378 }
8379
8380
8381 /* Information Panels
8382 ------------------------------------------------------- */
8383 .ideditor .info-panels {
8384     display: -webkit-box;
8385     display: -ms-flexbox;
8386     display: flex;
8387     -webkit-box-orient: horizontal;
8388     -webkit-box-direction: normal;
8389         -ms-flex-flow: row wrap-reverse;
8390             flex-flow: row wrap-reverse;
8391     -webkit-box-pack: end;
8392         -ms-flex-pack: end;
8393             justify-content: flex-end;
8394     width: 100%;
8395     z-index: 1;
8396     -ms-user-select: element;
8397     pointer-events: none;
8398     overflow: hidden;
8399 }
8400
8401 .ideditor .panel-container h1,
8402 .ideditor .panel-container h2,
8403 .ideditor .panel-container h3,
8404 .ideditor .panel-container h4,
8405 .ideditor .panel-container h5 {
8406     display: inline-block;
8407     margin-bottom: 0;
8408 }
8409
8410 .ideditor .panel-container h1,
8411 .ideditor .panel-container h2,
8412 .ideditor .panel-container h3 {
8413     color: #ff8;
8414 }
8415
8416 .ideditor .panel-container {
8417     -webkit-box-flex: 0;
8418         -ms-flex: 0 0 auto;
8419             flex: 0 0 auto;
8420     margin: 0 2px 2px 0;
8421     border-radius: 4px;
8422     border: 1px solid rgba(0, 0, 0, 0.75);
8423     padding-bottom: 10px;
8424     width: 250px;
8425     max-width: 100%;
8426     pointer-events: auto;
8427 }
8428
8429 .ideditor .panel-container .panel-title {
8430     border-radius: 4px 4px 0 0;
8431 }
8432
8433 .ideditor .panel-title {
8434     padding: 5px 10px;
8435     display: -webkit-box;
8436     display: -ms-flexbox;
8437     display: flex;
8438     -webkit-box-pack: justify;
8439         -ms-flex-pack: justify;
8440             justify-content: space-between;
8441 }
8442
8443 .ideditor .panel-title button.close {
8444     padding: 2px;
8445     background: none;
8446     color: #ddd;
8447 }
8448 .ideditor[dir='rtl'] .panel-title button.close {
8449     float: left;
8450 }
8451 .ideditor .panel-title button.close:focus,
8452 .ideditor .panel-title button.close:active {
8453     color: #fff;
8454 }
8455 @media (hover: hover) {
8456     .ideditor .panel-title button.close:hover {
8457         color: #fff;
8458     }
8459 }
8460 .ideditor .panel-title button.close .icon {
8461     height: 20px;
8462     width: 16px;
8463 }
8464
8465 .ideditor .panel-content {
8466     padding: 5px 10px;
8467     position: relative;
8468 }
8469
8470 .ideditor .panel-content ul:empty {
8471     display: none;
8472 }
8473
8474 .ideditor .panel-content li span:not(.localized-text) {
8475     display: inline-block;
8476     white-space: nowrap;
8477     margin: 0 8px;
8478 }
8479
8480 .ideditor .panel-content .button {
8481     display: inline-block;
8482     background: #7092ff;
8483     border-radius: 2px;
8484     padding: 0 4px;
8485     margin-top: 10px;
8486     margin-right: 10px;
8487     color: #fff;
8488 }
8489 .ideditor[dir='rtl'] .panel-content .button {
8490     margin-right: auto;
8491     margin-left: 10px;
8492 }
8493
8494 .ideditor .panel-content-history .links a {
8495     margin-left: 8px;
8496 }
8497 .ideditor[dir='rtl'] .panel-content-history .links a {
8498     margin-left: auto;
8499     margin-right: 8px;
8500 }
8501 .ideditor .panel-content-history h4 {
8502     padding-bottom: 0;
8503 }
8504 .ideditor .panel-content-location .location-info {
8505     margin-top: 10px;
8506 }
8507
8508
8509 /* Map Footer
8510 ------------------------------------------------------- */
8511 .ideditor .map-footer {
8512     width: 100%;
8513     position: relative;
8514     border-radius: 0;
8515     pointer-events: none;
8516     display: -webkit-box;
8517     display: -ms-flexbox;
8518     display: flex;
8519     -webkit-box-orient: vertical;
8520     -webkit-box-direction: normal;
8521         -ms-flex-direction: column;
8522             flex-direction: column;
8523     -ms-user-select: element;
8524     -webkit-box-flex: 0;
8525         -ms-flex: 0 0 auto;
8526             flex: 0 0 auto;
8527 }
8528
8529 .ideditor .map-footer-bar {
8530     pointer-events: all;
8531     display: block;
8532     height: 2.5em;
8533     position: relative;
8534 }
8535
8536 .ideditor .main-footer-wrap,
8537 .ideditor .flash-wrap {
8538     display: -webkit-box;
8539     display: -ms-flexbox;
8540     display: flex;
8541     -webkit-box-flex: 0;
8542         -ms-flex: 0 0 100%;
8543             flex: 0 0 100%;
8544     -webkit-box-orient: horizontal;
8545     -webkit-box-direction: normal;
8546         -ms-flex-flow: row nowrap;
8547             flex-flow: row nowrap;
8548     -webkit-box-pack: justify;
8549         -ms-flex-pack: justify;
8550             justify-content: space-between;
8551     height: 100%;
8552     position: absolute;
8553     right: 0;
8554     left: 0;
8555 }
8556
8557 .ideditor .footer-show {
8558     bottom: 0px;
8559     -webkit-transition: bottom 75ms linear;
8560     transition: bottom 75ms linear;
8561 }
8562
8563 .ideditor .footer-hide {
8564     bottom: -100%;
8565     -webkit-transition: bottom 75ms linear;
8566     transition: bottom 75ms linear;
8567 }
8568
8569
8570 /* Attribution
8571 ------------------------------------------------------- */
8572 .ideditor .attribution-wrap {
8573     position: absolute;
8574     bottom: 5px;
8575     left: 5px;
8576     right: 5px;
8577     display: -webkit-box;
8578     display: -ms-flexbox;
8579     display: flex;
8580     -webkit-box-pack: justify;
8581         -ms-flex-pack: justify;
8582             justify-content: space-between;
8583     -webkit-box-align: end;
8584         -ms-flex-align: end;
8585             align-items: flex-end;
8586     z-index: 0;
8587     pointer-events: none;
8588 }
8589
8590 .ideditor .attribution-wrap > * {
8591     pointer-events: auto;
8592 }
8593
8594 .ideditor .attribution-wrap .base-layer-attribution,
8595 .ideditor .attribution-wrap .overlay-layer-attribution {
8596     color: #ccc;
8597     font-size: 10px;
8598 }
8599 .ideditor .attribution-wrap .overlay-layer-attribution {
8600     text-align: right;
8601 }
8602
8603 .ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
8604     content: '; ';
8605 }
8606
8607 .ideditor .attribution-wrap .attribution a,
8608 .ideditor .attribution-wrap .attribution a:visited {
8609     color: #ccf;
8610 }
8611 .ideditor .attribution-wrap .attribution a:focus,
8612 .ideditor .attribution-wrap .attribution a:hover {
8613     color: #aaf;
8614 }
8615 @media (hover: hover) {
8616     .ideditor .attribution-wrap .attribution a:hover {
8617         color: #aaf;
8618     }
8619 }
8620
8621 .ideditor .attribution-wrap .attribution .source-image {
8622     height: 20px;
8623     vertical-align: middle;
8624     border-radius: 3px;
8625 }
8626
8627 .ideditor .attribution-wrap .attribution span {
8628     margin: 0 3px;
8629 }
8630
8631
8632 /* Footer - Flash messages
8633 ------------------------------------------------------- */
8634 .ideditor .flash-content {
8635     display: -webkit-box;
8636     display: -ms-flexbox;
8637     display: flex;
8638     -webkit-box-flex: 1;
8639         -ms-flex: 1 0 auto;
8640             flex: 1 0 auto;
8641     -webkit-box-orient: horizontal;
8642     -webkit-box-direction: normal;
8643         -ms-flex-flow: row nowrap;
8644             flex-flow: row nowrap;
8645     -webkit-box-align: center;
8646         -ms-flex-align: center;
8647             align-items: center;
8648     padding: 2px;
8649 }
8650
8651 .ideditor .flash-icon {
8652     -webkit-box-flex: 0;
8653         -ms-flex: 0 0 auto;
8654             flex: 0 0 auto;
8655     width: 20px;
8656     height: 20px;
8657     margin: 0 8px;
8658 }
8659
8660 .ideditor .flash-icon circle {
8661     fill: #eee;
8662 }
8663 .ideditor .flash-icon.disabled circle {
8664     cursor: auto;
8665     fill: rgba(255,255,255,0.7);
8666 }
8667
8668 .ideditor .flash-icon use {
8669     color: #222;
8670 }
8671 .ideditor .flash-icon.disabled use,
8672 .ideditor .flash-icon.operation.disabled use {
8673     fill: rgba(32,32,32,0.7);
8674     color: rgba(40,40,40,0.7);
8675 }
8676
8677 .ideditor .flash-text {
8678     -webkit-box-flex: 1;
8679         -ms-flex: 1 1 auto;
8680             flex: 1 1 auto;
8681 }
8682
8683 /* Scale bar
8684 ------------------------------------------------------- */
8685 .ideditor .map-footer-bar .scale-block {
8686     vertical-align: bottom;
8687     width: 250px;
8688     -webkit-box-flex: 0;
8689         -ms-flex: 0 0 auto;
8690             flex: 0 0 auto;
8691     -webkit-user-select: none;
8692        -moz-user-select: none;
8693         -ms-user-select: none;
8694             user-select: none;
8695     height: 30px;
8696     -ms-flex-item-align: center;
8697         align-self: center;
8698 }
8699
8700 .ideditor .scale-block .scale {
8701     height: 100%;
8702     width: 100%;
8703     cursor: pointer;
8704     display: block;
8705 }
8706 .ideditor[dir='rtl'] .scale-block .scale {
8707     -webkit-transform: scaleX(-1);
8708         -ms-transform: scaleX(-1);
8709             transform: scaleX(-1);
8710 }
8711
8712 .ideditor .scale-block .scale-text {
8713     display: inline-block;
8714     position: absolute;
8715     color: #ccc;
8716     top: 0.45em;
8717 }
8718
8719 .ideditor .scale-block .scale path {
8720     fill: none;
8721     stroke: #ccc;
8722     stroke-width: 1;
8723     shape-rendering: crispEdges;
8724 }
8725
8726 /* Footer - About, Source Switcher
8727 ------------------------------------------------------- */
8728 .ideditor .map-footer-bar .info-block {
8729     -webkit-box-flex: 1;
8730         -ms-flex: 1 1 100%;
8731             flex: 1 1 100%;
8732     overflow: hidden;
8733 }
8734
8735 .ideditor .map-footer-list {
8736     display: -webkit-box;
8737     display: -ms-flexbox;
8738     display: flex;
8739     -webkit-box-orient: horizontal;
8740     -webkit-box-direction: normal;
8741         -ms-flex-flow: row nowrap;
8742             flex-flow: row nowrap;
8743     height: 100%;
8744     -webkit-box-pack: end;
8745         -ms-flex-pack: end;
8746             justify-content: flex-end;
8747 }
8748
8749 .ideditor .map-footer-list li {
8750     height: 100%;
8751     display: -webkit-box;
8752     display: -ms-flexbox;
8753     display: flex;
8754     -webkit-box-align: center;
8755         -ms-flex-align: center;
8756             align-items: center;
8757     white-space: nowrap;
8758     padding: 5px;
8759 }
8760 .ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
8761     border-right: 1px solid rgba(255,255,255,.5);
8762 }
8763 .ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
8764     border-left: 1px solid rgba(255,255,255,.5);
8765 }
8766 .ideditor .map-footer-list li:empty {
8767     display: none;
8768 }
8769
8770 .ideditor .map-footer-list a.chip {
8771     padding: 1px 4px 1px 4px;
8772     border-radius: 2px;
8773     color: #eee;
8774 }
8775 .ideditor .map-footer-list a.chip .icon {
8776     width: 14px;
8777     height: 14px;
8778     margin-top: -2px;
8779 }
8780 .ideditor .map-footer-list a.chip span.count {
8781     margin: 0 3px;
8782 }
8783
8784 .ideditor .source-switch a.chip.live {
8785     background: #d32232;
8786     color: #fff;
8787 }
8788
8789 .ideditor .feature-warning a.chip {
8790     background: #1e90ff;
8791 }
8792
8793 .ideditor .issues-info a.chip.resolved-count {
8794     background: #15911E;
8795 }
8796 .ideditor .issues-info a.chip.warnings-count {
8797     background: #DF8500;
8798 }
8799 .ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
8800     margin-right: 5px;
8801 }
8802 .ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
8803     margin-left: 5px;
8804 }
8805
8806 .ideditor .user-list a:not(:last-child):after {
8807     content: ', ';
8808 }
8809
8810 .ideditor .api-status {
8811     text-align: right;
8812     padding: 1px 10px;
8813     color: #eee;
8814     -webkit-box-flex: 1;
8815         -ms-flex: 1 1 auto;
8816             flex: 1 1 auto;
8817 }
8818 .ideditor[dir='rtl'] .api-status {
8819     text-align: left;
8820 }
8821 .ideditor .api-status:empty {
8822     display: none;
8823 }
8824
8825 .ideditor .api-status.offline,
8826 .ideditor .api-status.readonly,
8827 .ideditor .api-status.error {
8828     background: #a22;
8829 }
8830
8831 .ideditor .api-status a {
8832     text-decoration: underline;
8833     color: #ccc;
8834     pointer-events: all;
8835 }
8836 .ideditor .api-status a:focus,
8837 .ideditor .api-status a:active {
8838     color: inherit;
8839 }
8840 @media (hover: hover) {
8841     .ideditor .api-status a:hover {
8842         color: inherit;
8843     }
8844 }
8845
8846 .ideditor .local-storage-full {
8847     display: block;
8848     width: 100%;
8849 }
8850
8851 /* Notification Badges
8852 ------------------------------------------------------- */
8853 /* For an icon (e.g. new version) */
8854 .ideditor .badge {
8855     display: -webkit-inline-box;
8856     display: -ms-inline-flexbox;
8857     display: inline-flex;
8858     background: #d32232;
8859     width: 21px;
8860     height: 21px;
8861     border-radius: 50%;
8862     -webkit-box-align: center;
8863         -ms-flex-align: center;
8864             align-items: center;
8865     -webkit-box-pack: center;
8866         -ms-flex-pack: center;
8867             justify-content: center;
8868 }
8869 .ideditor[dir='ltr'] .badge {
8870     margin-left: 6px;
8871 }
8872 .ideditor[dir='rtl'] .badge {
8873     margin-right: 6px;
8874 }
8875 .ideditor .badge .icon {
8876     vertical-align: baseline;
8877     width: 11px;
8878     height: 11px;
8879     color: #fff;
8880     -webkit-box-flex: 0;
8881         -ms-flex: 0 0 auto;
8882             flex: 0 0 auto;
8883 }
8884
8885 /* For text (e.g. upcoming events) */
8886 .ideditor .badge-text {
8887     display: inline-block;
8888     color: #fff;
8889     text-align: center;
8890     width: 16px;
8891     height: 16px;
8892     font-size: 10px;
8893     font-weight: bold;
8894     margin-left: 5px;
8895     background: #f00;
8896     border-radius: 9px;
8897 }
8898 .ideditor[dir='rtl'] .badge-text {
8899     margin-left: 0;
8900     margin-right: 5px;
8901 }
8902
8903
8904 /* Modals / Prompts
8905 ------------------------------------------------------- */
8906 .ideditor .modal {
8907     top: 5%;
8908     max-height: 90%;
8909     position: relative;
8910     border-radius: 3px;
8911     overflow: hidden;
8912     margin: auto;
8913     z-index: 50;
8914     width: 80%;
8915     min-width: 200px;
8916     max-width: 550px;
8917     display: -webkit-box;
8918     display: -ms-flexbox;
8919     display: flex;
8920     -webkit-box-orient: vertical;
8921     -webkit-box-direction: normal;
8922         -ms-flex-direction: column;
8923             flex-direction: column;
8924 }
8925
8926 .ideditor .modal .content {
8927     overflow-x: hidden;
8928     overflow-y: auto;
8929 }
8930
8931 .ideditor .modal .loader {
8932     margin-bottom: 10px;
8933 }
8934 .ideditor .modal .description {
8935     text-align: center;
8936 }
8937
8938 .ideditor .shaded {
8939     z-index: 5000;
8940     position: absolute;
8941     top: 0;
8942     bottom: 0;
8943     left: 0;
8944     right: 0;
8945     overflow: auto;
8946 }
8947 .ideditor .shaded:before {
8948     content:'';
8949     background: rgba(0,0,0,0.5);
8950     position: absolute;
8951     left: 0px; right: 0px; top: 0px; bottom: 0px;
8952 }
8953
8954 .ideditor .modal-section {
8955     padding: 20px;
8956     border-bottom: 1px solid #ccc;
8957 }
8958 .ideditor .modal-section p:not(:last-of-type) {
8959     padding-bottom: 20px;
8960 }
8961 .ideditor .modal-section h4 {
8962     padding-bottom: 0;
8963 }
8964 .ideditor .modal-section.buttons {
8965     text-align: center;
8966 }
8967
8968 .ideditor .modal-section.buttons button {
8969     min-width: 130px;
8970 }
8971
8972 .ideditor .modal-section.buttons .action {
8973     display: inline-block;
8974     margin: 0 10px;
8975 }
8976
8977 .ideditor .save-section .buttons {
8978     display: -webkit-box;
8979     display: -ms-flexbox;
8980     display: flex;
8981     -ms-flex-wrap: wrap;
8982         flex-wrap: wrap;
8983     -ms-flex-pack: distribute;
8984         justify-content: space-around;
8985 }
8986
8987 .ideditor .save-section .buttons .action,
8988 .ideditor .save-section .buttons .secondary-action {
8989     width: 45%;
8990     margin: 10px auto;
8991     text-align: center;
8992     vertical-align: middle;
8993 }
8994
8995 .ideditor .loading-modal {
8996     text-align: center;
8997 }
8998 .ideditor .modal-actions {
8999     display: -webkit-box;
9000     display: -ms-flexbox;
9001     display: flex;
9002 }
9003 .ideditor .modal-actions button {
9004     color: #7092ff;
9005     border-bottom: 1px solid #ccc;
9006     border-radius: 0;
9007     min-height: 160px;
9008     text-align: center;
9009     width: 100%;
9010 }
9011
9012 .ideditor .logo-small {
9013     height: 40px;
9014     width: 40px;
9015     margin: auto;
9016 }
9017
9018 .ideditor .logo {
9019     height: 100px;
9020     width: 100%;
9021     max-width: 100px;
9022     margin: auto;
9023 }
9024
9025 .ideditor .modal-actions > :first-child {
9026     border-right: 1px solid #ccc;
9027 }
9028
9029 .ideditor .modal-section:last-child {
9030     border-bottom: 0;
9031 }
9032
9033 /* Restore Modal
9034 ------------------------------------------------------- */
9035 .ideditor .modal-actions .logo-restore {
9036     color: #7092ff;
9037 }
9038 .ideditor .modal-actions .logo-reset {
9039     color: #e06c5e;
9040 }
9041
9042 /* Success Screen / Community Index
9043 ------------------------------------------------------- */
9044 .ideditor .save-success.body {
9045     overflow-y: scroll;
9046     overflow-x: hidden;
9047 }
9048
9049 .ideditor .save-success .link-out {
9050     margin: 0px 5px;
9051     white-space: nowrap;
9052 }
9053
9054 .ideditor .save-summary,
9055 .ideditor .save-communityLinks {
9056     padding: 0px 20px 15px 20px;
9057 }
9058
9059 .ideditor .save-communityLinks {
9060     border-top: 1px solid #ccc;
9061 }
9062
9063 .ideditor .save-success table,
9064 .ideditor .save-success p {
9065     margin-top: 15px;
9066 }
9067 .ideditor .save-success h3 {
9068     font-size: 14px;
9069     margin-top: 15px;
9070     line-height: 1.5;
9071     padding-bottom: 0;
9072 }
9073 .ideditor .save-success td {
9074     vertical-align: top;
9075 }
9076 .ideditor .save-success td.cell-icon {
9077     width: 40px;
9078 }
9079 .ideditor .save-success td.cell-detail {
9080     padding: 0 10px;
9081 }
9082 .ideditor .save-success td.community-detail {
9083     padding-bottom: 15px;
9084 }
9085 .ideditor .save-success .community-table h3 {
9086     margin: 0;
9087 }
9088
9089 .ideditor .summary-view-on-osm,
9090 .ideditor .community-name {
9091     font-size: 14px;
9092     font-weight: bold;
9093 }
9094 .ideditor .community-languages {
9095     margin-top: 5px;
9096     font-style: italic;
9097 }
9098 .ideditor .community-languages:only-child {
9099     margin-top: 0;
9100 }
9101
9102 .ideditor .community-detail a.hide-toggle,
9103 .ideditor .community-detail a:visited.hide-toggle {
9104     font-size: 12px;
9105     font-weight: normal;
9106     padding-bottom: 0;
9107 }
9108 .ideditor .community-detail .hide-toggle svg.icon.pre-text {
9109     width: 12px;
9110     height: 15px;
9111 }
9112
9113 .ideditor .community-events {
9114     margin-top: 5px;
9115 }
9116
9117 .ideditor .community-event,
9118 .ideditor .community-more {
9119     background-color: #efefef;
9120     padding: 8px;
9121     border-radius: 4px;
9122     margin-bottom: 5px;
9123 }
9124
9125 .ideditor .community-event-name {
9126     font-size: 14px;
9127     font-weight: bold;
9128 }
9129 .ideditor .community-event-when {
9130     font-weight: bold;
9131 }
9132
9133 .ideditor .community-missing {
9134     padding: 10px;
9135     text-align: center;
9136 }
9137
9138
9139 /* Splash Modal
9140 ------------------------------------------------------- */
9141 .ideditor .modal-actions .logo-walkthrough,
9142 .ideditor .modal-actions .logo-features {
9143     color: #7092ff;
9144 }
9145
9146 .ideditor .modal-splash .section-preferences-third-party {
9147     margin-top: 20px;
9148 }
9149
9150 .ideditor .modal-splash .section-preferences-third-party .privacy-link {
9151     display: none;
9152 }
9153
9154
9155 /* Shortcuts Modal
9156 ------------------------------------------------------- */
9157 .ideditor .modal-shortcuts {
9158     width: 90%;
9159     max-width: 1050px;
9160 }
9161
9162 .ideditor .modal-shortcuts .modal-section:last-child {
9163     padding: 10px 15px 20px 15px;
9164     min-height: 275px;
9165 }
9166
9167 .ideditor .modal-shortcuts .tabs-bar {
9168     padding-bottom: 5px;
9169     text-align: center;
9170 }
9171
9172 .ideditor .modal-shortcuts a.tab {
9173     display: inline-block;
9174     padding: 5px 10px;
9175     margin: 0 5px;
9176     cursor: pointer;
9177     color: #666;
9178     font-size: 16px;
9179     font-weight: bold;
9180 }
9181 .ideditor .modal-shortcuts a.tab.active {
9182     color: #7092ff;
9183     border-bottom: 2px solid;
9184 }
9185 .ideditor .modal-shortcuts a.tab:focus,
9186 .ideditor .modal-shortcuts a.tab:active {
9187     color: #597be7;
9188     background-color: #efefef;
9189 }
9190 @media (hover: hover) {
9191     .ideditor .modal-shortcuts a.tab:hover {
9192         color: #597be7;
9193         background-color: #efefef;
9194     }
9195 }
9196
9197 .ideditor .modal-shortcuts .shortcut-tab {
9198     display: -webkit-box;
9199     display: -ms-flexbox;
9200     display: flex;
9201     -webkit-box-orient: horizontal;
9202     -webkit-box-direction: normal;
9203         -ms-flex-flow: row wrap;
9204             flex-flow: row wrap;
9205     -ms-flex-pack: distribute;
9206         justify-content: space-around;
9207 }
9208
9209 .ideditor .modal-shortcuts .shortcut-column {
9210     width: auto;
9211 }
9212
9213 .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
9214     -webkit-box-flex: 1;
9215         -ms-flex: 1 1 100%;
9216             flex: 1 1 100%;
9217     width: 100%;
9218 }
9219
9220 .ideditor .modal-shortcuts td {
9221     padding-bottom: 5px;
9222 }
9223
9224 .ideditor .modal-shortcuts .shortcut-section {
9225     padding: 20px 0 10px 0;
9226 }
9227
9228 .ideditor .modal-shortcuts .shortcut-keys {
9229     padding: 0 10px;
9230     color: #767676;
9231     text-align: right;
9232     white-space: nowrap;
9233 }
9234 .ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
9235     text-align: left;
9236 }
9237
9238 .ideditor .modal-shortcuts .shortcut-keys kbd {
9239     color: #555;
9240 }
9241
9242 .ideditor .modal-shortcuts .shortcut-keys .gesture {
9243     color: #333;
9244     padding: 3px;
9245 }
9246
9247
9248 /* Settings Modals
9249 ------------------------------------------------------- */
9250 .ideditor .settings-modal textarea {
9251     height: 70px;
9252     width: 100%;
9253 }
9254
9255 .ideditor .settings-custom-background .instructions-template {
9256     margin-bottom: 20px;
9257 }
9258 .ideditor .settings-custom-background .instructions-template p {
9259     margin-bottom: 0;
9260 }
9261 .ideditor .settings-custom-background .instructions-template ul {
9262     padding-bottom: 20px;
9263 }
9264 .ideditor .settings-custom-background .instructions-template ul li {
9265     list-style-type: disc;
9266     list-style-position: inside;
9267 }
9268
9269 .ideditor .settings-custom-data .instructions-url {
9270     margin-bottom: 10px;
9271 }
9272 .ideditor .settings-custom-data .field-file,
9273 .ideditor .settings-custom-data .instructions-template {
9274     margin-bottom: 20px;
9275 }
9276
9277
9278 /* Save Mode
9279 ------------------------------------------------------- */
9280 .ideditor a.user-info {
9281     display: inline-block;
9282 }
9283
9284 .ideditor .commit-form {
9285     margin-bottom: 0;
9286 }
9287
9288 .ideditor .user-info img {
9289     float: left;
9290 }
9291
9292 .ideditor .note-save .field-warning,
9293 .ideditor .field-warning {
9294     background: #ffb;
9295     border: 1px solid #ccc;
9296     border-radius: 4px;
9297     padding: 10px;
9298 }
9299
9300 .ideditor .note-save .field-warning:empty,
9301 .ideditor .field-warning:empty {
9302     display: none;
9303 }
9304
9305 .ideditor .changeset-info,
9306 .ideditor .request-review,
9307 .ideditor .commit-info {
9308     margin-bottom: 10px;
9309 }
9310
9311 .ideditor .field-warning {
9312     margin-top: 10px;
9313 }
9314
9315 .ideditor .request-review label {
9316     cursor: pointer;
9317 }
9318
9319 .ideditor .changeset-list {
9320     border: 1px solid #ccc;
9321     border-radius: 4px;
9322     background: #fff;
9323     margin-bottom: 10px;
9324     overflow: hidden;
9325 }
9326
9327 .ideditor .changeset-list li button {
9328     padding: 5px 10px;
9329     width: 100%;
9330     border-radius: 0;
9331     text-align: initial;
9332 }
9333 .ideditor .changeset-list li {
9334     border-top: 1px solid #ccc;
9335 }
9336 .ideditor .changeset-list li:first-child {
9337     border-top: 0;
9338 }
9339 .ideditor .changeset-list .alert {
9340     opacity: 0.5;
9341 }
9342
9343
9344 /* Conflict resolution
9345 ------------------------------------------------------- */
9346 .ideditor .conflicts-help {
9347     padding: 20px;
9348     background-color: #ffffbb;
9349     border-bottom: 1px solid #ccc;
9350 }
9351
9352 .ideditor .conflicts-buttons {
9353     padding: 20px;
9354 }
9355
9356 .ideditor button.conflicts-button {
9357     float: left;
9358 }
9359
9360 .ideditor .conflict-container {
9361     border-bottom: 1px solid #ccc;
9362 }
9363
9364 .ideditor .conflict-description {
9365     padding: 5px 20px;
9366     display: block;
9367 }
9368
9369 .ideditor .conflicts-done {
9370     padding: 20px 20px 0 20px;
9371 }
9372
9373 .ideditor .conflict-detail-container {
9374     padding: 10px 20px;
9375 }
9376
9377 .ideditor .conflict-count {
9378     padding: 10px 20px;
9379 }
9380
9381 .ideditor .conflict-choices {
9382     margin-top: 10px;
9383 }
9384
9385 .ideditor .conflict-nav-buttons {
9386     padding: 10px 0 20px 0;
9387 }
9388
9389 .ideditor .conflict-nav-button {
9390     height: 30px;
9391 }
9392
9393
9394 /* Notices (Zoom in to Edit)
9395 ------------------------------------------------------- */
9396 .ideditor .notice {
9397     position: absolute;
9398     top: 15px;
9399     left: 0;
9400     right: 0;
9401     text-align: center;
9402 }
9403
9404 .ideditor .notice .zoom-to {
9405     margin: auto;
9406     width: 300px;
9407     padding: 20px 5px;
9408     font-size: 150%;
9409     border-radius: 8px;
9410     font-weight: bold;
9411 }
9412
9413 .ideditor .notice .zoom-to:focus,
9414 .ideditor .notice .zoom-to:active {
9415     background: rgba(0,0,0,0.6);
9416 }
9417 @media (hover: hover) {
9418     .ideditor .notice .zoom-to:hover {
9419         background: rgba(0,0,0,0.6);
9420     }
9421 }
9422
9423 .ideditor .notice .zoom-to .icon {
9424     width: 30px;
9425     height: 30px;
9426     vertical-align: middle;
9427     margin-right: 10px;
9428 }
9429 .ideditor[dir='rtl'] .notice .zoom-to .icon {
9430     margin-left: 10px;
9431     margin-right: 0;
9432 }
9433
9434
9435 /* Tooltips
9436 ------------------------------------------------------- */
9437 .ideditor .popover {
9438     position: absolute;
9439     display: none;
9440 }
9441 .ideditor .tooltip {
9442     color: #333;
9443     font-size: 12px;
9444     white-space: initial;
9445 }
9446 .ideditor .tooltip:not(.curtain-tooltip) {
9447     pointer-events: none;
9448 }
9449 .ideditor .popover.in {
9450     z-index: 5000;
9451     height: auto;
9452     display: block;
9453 }
9454 .ideditor .tooltip.in {
9455     opacity: 0.95;
9456 }
9457 .ideditor .popover.top {
9458     margin-top: -4px;
9459 }
9460 .ideditor .popover.right {
9461     margin-left: 4px;
9462 }
9463 .ideditor .popover.bottom {
9464     margin-top: 4px;
9465 }
9466 .ideditor .popover.left {
9467     margin-left: -4px;
9468 }
9469 .ideditor .popover.arrowed.top {
9470     margin-top: -10px;
9471 }
9472 .ideditor .popover.arrowed.right {
9473     margin-left: 10px;
9474 }
9475 .ideditor .popover.arrowed.bottom {
9476     margin-top: 10px;
9477 }
9478 .ideditor .popover.arrowed.left {
9479     margin-left: -10px;
9480 }
9481 .ideditor .bar-button .tooltip.arrowed.bottom {
9482     margin-top: 20px;
9483 }
9484 .ideditor .tooltip.top {
9485     text-align: center;
9486 }
9487 .ideditor .tooltip.right {
9488     text-align: left;
9489 }
9490 .ideditor .tooltip.bottom {
9491     text-align: center;
9492 }
9493 .ideditor .tooltip.left {
9494     text-align: right;
9495 }
9496
9497 .ideditor .popover-inner {
9498     border-radius: inherit;
9499 }
9500
9501 .ideditor .tooltip .popover-inner {
9502     border-radius: 4px;
9503     max-width: 200px;
9504     min-width: 80px;
9505     padding: 10px;
9506     font-weight: normal;
9507     background-color: #fff;
9508 }
9509
9510 .ideditor .popover-arrow {
9511     position: absolute;
9512     width: 0;
9513     height: 0;
9514     border-color: transparent;
9515     border-style: solid;
9516 }
9517 .ideditor .popover.top .popover-arrow {
9518     bottom: -5px;
9519     left: 50%;
9520     margin-left: -5px;
9521     border-top-color: #fff;
9522     border-width: 5px 5px 0;
9523 }
9524 .ideditor .popover.right .popover-arrow {
9525     top: 50%;
9526     left: -5px;
9527     margin-top: -5px;
9528     border-right-color: #fff;
9529     border-width: 5px 5px 5px 0;
9530 }
9531 .ideditor .popover.left .popover-arrow {
9532     top: 50%;
9533     right: -5px;
9534     margin-top: -5px;
9535     border-left-color: #fff;
9536     border-width: 5px 0 5px 5px;
9537 }
9538 .ideditor .popover.bottom .popover-arrow {
9539     top: -5px;
9540     left: 50%;
9541     margin-left: -5px;
9542     border-bottom-color: #fff;
9543     border-width: 0 5px 5px;
9544 }
9545 .ideditor .popover:not(.arrowed) .popover-arrow {
9546     display: none;
9547 }
9548
9549 .ideditor .tooltip-heading {
9550     font-weight: bold;
9551     background: #f6f6f6;
9552     padding: 10px;
9553     margin: -10px -10px 10px -10px;
9554     border-radius: 3px 3px 0 0;
9555     font-size: 14px;
9556 }
9557
9558 .ideditor .keyhint-wrap {
9559     background: #f6f6f6;
9560     padding: 10px;
9561     margin: 10px -10px -10px -10px;
9562     border-radius: 0 0 3px 3px;
9563 }
9564 .ideditor .popover-inner .shortcut {
9565     font-weight: bold;
9566     margin-left: 5px;
9567 }
9568
9569 .ideditor[dir='rtl'] .popover-inner .shortcut {
9570     margin-left: 0;
9571     margin-right: 5px;
9572 }
9573
9574 /* dark tooltips for sidebar / panels */
9575 .ideditor .tooltip.dark.top .popover-arrow,
9576 .ideditor .map-pane .tooltip.top .popover-arrow,
9577 .ideditor .sidebar .tooltip.top .popover-arrow,
9578 .ideditor .modal .tooltip.top .popover-arrow {
9579     border-top-color: #000;
9580 }
9581 .ideditor .tooltip.dark.bottom .popover-arrow,
9582 .ideditor .map-pane .tooltip.bottom .popover-arrow,
9583 .ideditor .sidebar .tooltip.bottom .popover-arrow,
9584 .ideditor .modal .tooltip.bottom .popover-arrow {
9585     border-bottom-color: #000;
9586 }
9587 .ideditor .tooltip.dark.left .popover-arrow,
9588 .ideditor .map-pane .tooltip.left .popover-arrow,
9589 .ideditor .sidebar .tooltip.left .popover-arrow,
9590 .ideditor .modal .tooltip.left .popover-arrow {
9591     border-left-color: #000;
9592 }
9593 .ideditor .tooltip.dark.right .popover-arrow,
9594 .ideditor .map-pane .tooltip.right .popover-arrow,
9595 .ideditor .sidebar .tooltip.right .popover-arrow,
9596 .ideditor .modal .tooltip.right .popover-arrow {
9597     border-right-color: #000;
9598 }
9599 .ideditor .tooltip.dark .popover-inner,
9600 .ideditor .tooltip.dark .tooltip-heading,
9601 .ideditor .tooltip.dark .keyhint-wrap,
9602 .ideditor .map-pane .popover-inner,
9603 .ideditor .map-pane .tooltip-heading,
9604 .ideditor .map-pane .keyhint-wrap,
9605 .ideditor .sidebar .popover-inner,
9606 .ideditor .sidebar .tooltip-heading,
9607 .ideditor .sidebar .keyhint-wrap,
9608 .ideditor .modal .popover-inner {
9609     background: #000;
9610     color: #ccc;
9611 }
9612 .ideditor .tooltip.dark kbd,
9613 .ideditor .map-pane .tooltip kbd,
9614 .ideditor .sidebar .tooltip kbd {
9615     background-color: #666;
9616     border: solid 1px #444;
9617     border-bottom-color: #333;
9618     -webkit-box-shadow: inset 0 -1px 0 #333;
9619             box-shadow: inset 0 -1px 0 #333;
9620     color: #eee;
9621 }
9622
9623 /* Exceptions for tooltip layouts */
9624
9625 /* commit warning tooltips need to be closer */
9626 .ideditor .warning-section .tooltip.top {
9627     margin-top: -5px;
9628 }
9629
9630 .ideditor li:first-of-type .badge .tooltip,
9631 .ideditor li.hide + li.version .badge .tooltip {
9632     left: auto !important;
9633     right: 5px !important;
9634 }
9635 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
9636 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
9637     left: 5px !important;
9638     right: auto !important;
9639 }
9640 .ideditor li:first-of-type .badge .tooltip .popover-arrow,
9641 .ideditor li.hide + li.version .badge .tooltip .popover-arrow {
9642     right: 15px !important;
9643     left: auto !important;
9644 }
9645 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
9646 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
9647     left: 15px !important;
9648     right: auto !important;
9649 }
9650
9651
9652 /* Contextual Edit Menu
9653 ------------------------------------------------------- */
9654 .ideditor .edit-menu {
9655     position: absolute;
9656     display: -webkit-box;
9657     display: -ms-flexbox;
9658     display: flex;
9659     -webkit-box-orient: vertical;
9660     -webkit-box-direction: normal;
9661         -ms-flex-direction: column;
9662             flex-direction: column;
9663     background: #fff;
9664     border-radius: 4px;
9665     /* padding is set in edit_menu.js */
9666 }
9667
9668 .ideditor .edit-menu .tooltip {
9669     width: 200px; /* see also edit_menu.js */
9670 }
9671
9672 .ideditor .edit-menu-item {
9673     display: -webkit-box;
9674     display: -ms-flexbox;
9675     display: flex;
9676     -webkit-box-align: center;
9677         -ms-flex-align: center;
9678             align-items: center;
9679     border-radius: 0;
9680     padding: 0 12px;
9681     /* height is set in edit_menu.js */
9682 }
9683 .ideditor .edit-menu-item .label {
9684     max-width: 120px;
9685     text-align: initial;
9686     line-height: 1.1em;
9687     font-weight: bold;
9688 }
9689 .ideditor[dir='ltr'] .edit-menu-item .label {
9690     margin-left: 8px;
9691 }
9692 .ideditor[dir='rtl'] .edit-menu-item .label {
9693     margin-right: 8px;
9694 }
9695
9696 .ideditor .edit-menu-item use {
9697     pointer-events: none;
9698 }
9699
9700 /* Lasso
9701 ------------------------------------------------------- */
9702 .ideditor .lasso-path {
9703     fill-opacity: 0.3;
9704     stroke: #fff;
9705     stroke-width: 1;
9706     stroke-opacity: 1;
9707     stroke-dasharray: 5, 5;
9708 }
9709
9710
9711 /* Scrollbars
9712  ----------------------------------------------------- */
9713 .ideditor ::-webkit-scrollbar {
9714     height: 10px;
9715     overflow: visible;
9716     width: 10px;
9717     border-left: 1px solid #DDD;
9718 }
9719
9720 .ideditor ::-webkit-scrollbar-track {
9721     background-clip: padding-box;
9722     border: solid transparent;
9723     border-width: 0;
9724 }
9725
9726 .ideditor ::-webkit-scrollbar-thumb {
9727     background-color: rgba(0,0,0,.2);
9728     background-clip: padding-box;
9729     border: solid transparent;
9730     border-width: 3px 3px 3px 4px;
9731     border-radius: 6px;
9732 }
9733 .ideditor ::-webkit-scrollbar-track:active {
9734     background-color: rgba(0,0,0,.05);
9735 }
9736 @media (hover: hover) {
9737     .ideditor ::-webkit-scrollbar-track:hover {
9738         background-color: rgba(0,0,0,.05);
9739     }
9740 }
9741 body {
9742     scrollbar-width: 10px;
9743 }
9744
9745
9746 /* Intro walkthrough
9747  ----------------------------------------------------- */
9748 .ideditor .curtain {
9749     z-index: 1000;
9750     pointer-events: none;
9751     position: absolute;
9752 }
9753
9754 .ideditor .curtain-darkness {
9755     pointer-events: all;
9756     fill-opacity: 0.7;
9757     fill: #222;
9758     fill-rule: evenodd;
9759 }
9760
9761 .ideditor .intro-nav-wrap {
9762     display: -webkit-box;
9763     display: -ms-flexbox;
9764     display: flex;
9765     -webkit-box-orient: horizontal;
9766     -webkit-box-direction: normal;
9767         -ms-flex-direction: row;
9768             flex-direction: row;
9769     position: absolute;
9770     left: 0;
9771     right: 0;
9772     bottom: 30px;
9773     padding: 10px;
9774     z-index: 1001;
9775 }
9776
9777 .ideditor .intro-nav-wrap .intro-nav-wrap-logo {
9778     -webkit-box-flex: 0;
9779         -ms-flex: 0 0 auto;
9780             flex: 0 0 auto;
9781     height: 40px;
9782     width: 40px;
9783     color: #fff;
9784     margin: 0px 20px;
9785     vertical-align: middle;
9786 }
9787
9788 .ideditor .intro-nav-wrap .joined {
9789     -webkit-box-flex: 1;
9790         -ms-flex: 1 1 auto;
9791             flex: 1 1 auto;
9792     display: -webkit-box;
9793     display: -ms-flexbox;
9794     display: flex;
9795     -webkit-box-orient: horizontal;
9796     -webkit-box-direction: normal;
9797         -ms-flex-direction: row;
9798             flex-direction: row;
9799 }
9800
9801 .ideditor .intro-nav-wrap button.chapter {
9802     -webkit-box-flex: 1;
9803         -ms-flex: 1 1 100%;
9804             flex: 1 1 100%;
9805     padding: 0px 5px;
9806     font-weight: bold;
9807 }
9808
9809 .ideditor .intro-nav-wrap button.chapter.next {
9810     -webkit-animation-duration: 1s;
9811             animation-duration: 1s;
9812     -webkit-animation-name: pulse;
9813             animation-name: pulse;
9814     -webkit-animation-iteration-count: infinite;
9815             animation-iteration-count: infinite;
9816     -webkit-animation-direction: alternate;
9817             animation-direction: alternate;
9818 }
9819 @-webkit-keyframes pulse {
9820     from  { background: #7092ff; }
9821     to    { background: #c6d4ff; }
9822 }
9823 @keyframes pulse {
9824     from  { background: #7092ff; }
9825     to    { background: #c6d4ff; }
9826 }
9827
9828 .ideditor .intro-nav-wrap button.chapter.finished {
9829     background: #8cd05f;
9830 }
9831
9832 .ideditor .intro-nav-wrap button.chapter .status {
9833     display: none;
9834 }
9835
9836 .ideditor .intro-nav-wrap button.chapter.finished .status {
9837     display: inline-block;
9838 }
9839
9840 .ideditor .curtain-tooltip {
9841     z-index: 1002;
9842 }
9843
9844 .ideditor .curtain-tooltip.tooltip.in {
9845     opacity: 1;
9846 }
9847 .ideditor .curtain-tooltip.tooltip {
9848     text-align: left;
9849 }
9850 .ideditor[dir='rtl'] .curtain-tooltip.tooltip {
9851     text-align: right;
9852 }
9853
9854 .ideditor .curtain-tooltip .popover-inner {
9855     font-size: 15px;
9856     position: relative;
9857     padding: 20px;
9858 }
9859
9860 .ideditor .curtain-tooltip .popover-inner .button-section,
9861 .ideditor .curtain-tooltip .popover-inner .instruction {
9862     font-weight: bold;
9863     display: block;
9864     border-top: 1px solid #ccc;
9865     margin-top: 10px;
9866     margin-left: -20px;
9867     margin-right: -20px;
9868     padding: 10px 20px 0 20px;
9869 }
9870
9871 .ideditor .curtain-tooltip .popover-inner .button-section button {
9872     width: 66.6666%;
9873 }
9874
9875 .ideditor .curtain-tooltip .popover-inner .instruction:only-child {
9876     border: 0;
9877     padding: 0;
9878     margin: 0;
9879 }
9880
9881 .ideditor .curtain-tooltip .popover-inner .icon.pre-text {
9882     vertical-align: text-top;
9883     margin-right: 0;
9884     margin-left: 0;
9885     display: inline-block;
9886 }
9887
9888 .ideditor .curtain-tooltip.intro-points-describe,
9889 .ideditor .curtain-tooltip.intro-lines-name_road {
9890     top: 133px !important;
9891 }
9892
9893 .ideditor .tooltip-illustration {
9894     height: 80px;
9895     width: 200px;
9896     margin-left: -20px;
9897     margin-top: -10px;
9898 }
9899 .ideditor[dir='rtl'] .tooltip-illustration {
9900     margin-left: auto;
9901     margin-right: -20px;
9902 }
9903
9904 .ideditor .curtain-tooltip.intro-mouse {
9905     -webkit-user-select: none;
9906        -moz-user-select: none;
9907         -ms-user-select: none;
9908             user-select: none;
9909 }
9910
9911 .ideditor .curtain-tooltip.intro-mouse .counter {
9912     position: absolute;
9913     display: block;
9914     top: 50px;
9915     width: 100%;
9916     text-align: center;
9917     font-weight: bold;
9918     font-size: 14px;
9919     z-index: 1003;
9920 }
9921
9922 .ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
9923     fill: rgba(112, 146, 255, 0);
9924     color: rgba(112, 146, 255, 0);
9925 }
9926 .ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
9927     fill: rgba(112, 146, 255, 1);
9928 }
9929 .ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
9930     color: rgba(112, 146, 255, 1);
9931 }
9932
9933 .ideditor .huge-modal-button {
9934     width: 100%;
9935     padding: 20px;
9936 }
9937
9938 .ideditor .huge-modal-button .illustration {
9939     height: 100px;
9940     width: 100px;
9941     color: #7092ff;
9942 }