vendor/assets/iD/iD.css.erb

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