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