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 .ideditor .form-field-input-semicombo input.raw-value,
5090 .ideditor .form-field-input-multicombo input.raw-value {
5091     font-family: monospace;
5092 }
5093 .ideditor .form-field-input-combo input.known-value,
5094 .ideditor .form-field-input-semicombo input.known-value,
5095 .ideditor .form-field-input-multicombo input.known-value {
5096     color: #7092ff;
5097 }
5098
5099 .ideditor .form-field-input-multicombo ul.chiplist {
5100     padding: 5px 8px 5px 8px;
5101     background: #fff;
5102     display: block;
5103     border-radius: 0 0 4px 4px;
5104     width: 100%;
5105 }
5106
5107 .ideditor .form-field-input-multicombo li {
5108     display: -webkit-inline-box;
5109     display: -ms-inline-flexbox;
5110     display: inline-flex;
5111     -webkit-box-orient: horizontal;
5112     -webkit-box-direction: normal;
5113         -ms-flex-flow: row nowrap;
5114             flex-flow: row nowrap;
5115     -webkit-box-align: center;
5116         -ms-flex-align: center;
5117             align-items: center;
5118     margin-bottom: 3px;
5119     margin-top: 3px;
5120     border-radius: 4px;
5121 }
5122 .ideditor[dir='ltr'] .form-field-input-multicombo li {
5123     margin-right: 6px;
5124 }
5125 .ideditor[dir='rtl'] .form-field-input-multicombo li {
5126     margin-left: 6px;
5127 }
5128
5129 .ideditor .form-field-input-multicombo li.chip {
5130     background-color: #eff2f7;
5131     border: 1px solid #ccd5e3;
5132     max-width: 100%;
5133     color: #7092ff;
5134 }
5135 .ideditor .form-field-input-multicombo li.chip.negated span {
5136     text-decoration: line-through;
5137 }
5138 .ideditor .form-field-input-multicombo li.chip input {
5139     width: 1em;
5140 }
5141 .ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
5142     padding: 2px 0px 2px 5px;
5143 }
5144 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
5145     padding: 2px 5px 2px 0px;
5146 }
5147 .ideditor .form-field-input-multicombo li.chip.draggable {
5148     cursor: -webkit-grab;
5149     cursor: grab;
5150 }
5151 .ideditor .form-field-input-multicombo li.chip.dragging {
5152     opacity: 0.75;
5153     z-index: 3000;
5154     cursor: -webkit-grabbing;
5155     cursor: grabbing;
5156 }
5157 .ideditor .form-field-input-multicombo li.chip.raw-value {
5158     font-family: monospace;
5159     color: #333;
5160 }
5161 .ideditor .form-field-input-multicombo li.mixed {
5162     border-color: #eff2f7;
5163     color: #888;
5164     font-style: italic;
5165 }
5166
5167 .ideditor .form-field-input-multicombo li.chip > span {
5168     display: block;
5169     -webkit-box-flex: 1;
5170         -ms-flex: 1 1 auto;
5171             flex: 1 1 auto;
5172     overflow: hidden;
5173     word-wrap: break-word;
5174 }
5175
5176 .ideditor .form-field-input-multicombo a {
5177     font-family: Arial, Helvetica, sans-serif !important;
5178     font-size: 16px !important;
5179     padding: 0px 5px 0px 5px;
5180     margin: 0;
5181     cursor: pointer;
5182     color: #a6b4ce;
5183     display: block;
5184     text-align: center;
5185     -webkit-box-flex: 0;
5186         -ms-flex: 0 0 auto;
5187             flex: 0 0 auto;
5188 }
5189
5190 .ideditor .form-field-input-multicombo .input-wrap {
5191     border: 1px solid #ddd;
5192     width: 180px;
5193 }
5194 .ideditor .form-field-input-multicombo input {
5195     border: none;
5196     width: 100%;
5197 }
5198
5199 .ideditor .form-field-input-multicombo input:focus {
5200     border-radius: 4px !important;
5201 }
5202
5203 .ideditor .form-field-input-multicombo .full-line-chips li.chip {
5204     width: 100%;
5205 }
5206 .ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
5207     width: auto;
5208 }
5209
5210 .ideditor .form-field-input-combo .tag-value-icon,
5211 .ideditor .form-field-input-semicombo .input-wrap .tag-value-icon,
5212 .ideditor .form-field-input-multicombo .input-wrap .tag-value-icon {
5213     display: inline-block;
5214     position: relative;
5215     height: 24px;
5216     width: 30px;
5217     margin-right: -30px;
5218     -ms-flex-item-align: center;
5219         align-self: center;
5220     vertical-align: middle;
5221     z-index: 1;
5222     padding-left: 11px;
5223 }
5224 .ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon,
5225 .ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon,
5226 .ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon  {
5227     margin-right: 0;
5228     margin-left: -30px;
5229     padding-left: 0;
5230     padding-right: 11px;
5231 }
5232 .ideditor .tag-value-icon .icon {
5233     width: 21px;
5234     height: 21px;
5235     margin: auto;
5236 }
5237 .ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input,
5238 .ideditor[dir='ltr'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
5239 .ideditor[dir='ltr'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
5240     padding-left: 40px;
5241 }
5242 .ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input,
5243 .ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
5244 .ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
5245     padding-right: 40px;
5246 }
5247 .ideditor .combobox-option .tag-value-icon {
5248     display: inline-block;
5249     width: 28px;
5250 }
5251 .ideditor .form-field-input-multicombo li.chip .tag-value-icon .icon {
5252     margin: 0;
5253     margin-right: 6px;
5254     display: inline-block;
5255     vertical-align: center;
5256 }
5257 .ideditor[dir='rtl'] .form-field-input-multicombo li.chip .tag-value-icon .icon {
5258     margin-right: 6px;
5259     margin-left: 0;
5260 }
5261
5262
5263 /* Field - Text / Numeric
5264 ------------------------------------------------------- */
5265 .ideditor .form-field-input-text > input:only-child,
5266 .ideditor .form-field-input-tel > input:only-of-type,
5267 .ideditor .form-field-input-email > input:only-of-type,
5268 .ideditor .form-field-input-url > input:only-child {
5269     border-radius: 0 0 4px 4px;
5270 }
5271 .ideditor .form-field-input-text > input:not(:only-child),
5272 .ideditor .form-field-input-url > input:not(:only-child) {
5273     border-radius: 0 0 0 4px;
5274 }
5275 .ideditor .form-field-input-number > input:only-of-type {
5276     border-radius: 0 0 0 4px;
5277 }
5278 .ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
5279     border-radius: 0 0 4px 0;
5280 }
5281 .ideditor .form-field-input-number > button:last-of-type {
5282     border-radius: 0 0 4px 0;
5283 }
5284 .ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
5285     border-radius: 0 0 0 4px;
5286 }
5287
5288 .ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
5289 .ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
5290 .ideditor[dir='ltr'] .form-field-input-identifier > button {
5291     border-bottom-right-radius: 4px;
5292 }
5293 .ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
5294 .ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
5295 .ideditor[dir='rtl'] .form-field-input-identifier > button {
5296     border-bottom-left-radius: 4px;
5297 }
5298
5299 /* draw the up/down on the buttons */
5300 .ideditor .form-field-input-number button.decrement::after,
5301 .ideditor .form-field-input-number button.increment::after {
5302     content: "";
5303     height: 0; width: 0;
5304     position: absolute;
5305     left: 0; right: 0; bottom: 0; top: 0;
5306     margin: auto;
5307 }
5308 .ideditor .form-field-input-number button.decrement::after {
5309     border-top: 5px solid #ccc;
5310     border-left: 5px solid transparent;
5311     border-right: 5px solid transparent;
5312 }
5313 .ideditor .form-field-input-number button.increment::after {
5314     border-bottom: 5px solid #ccc;
5315     border-left: 5px solid transparent;
5316     border-right: 5px solid transparent;
5317 }
5318
5319
5320 /* Field - Checkbox
5321 ------------------------------------------------------- */
5322 .ideditor .form-field-input-check {
5323     display: -webkit-box;
5324     display: -ms-flexbox;
5325     display: flex;
5326     -webkit-box-align: center;
5327         -ms-flex-align: center;
5328             align-items: center;
5329     background: #fff;
5330     padding: 5px 10px;
5331     color: #7092ff;
5332     border: 1px solid #ccc;
5333     border-top: 0;
5334     cursor: pointer;
5335 }
5336 .ideditor .form-field-input-check > input[type="checkbox"] {
5337     -webkit-box-flex: 0;
5338         -ms-flex: 0 1 auto;
5339             flex: 0 1 auto;
5340     margin-top: 0;
5341 }
5342 .ideditor .form-field-input-check > span {
5343     -webkit-box-flex: 1;
5344         -ms-flex: 1 1 auto;
5345             flex: 1 1 auto;
5346 }
5347 .ideditor .form-field-input-check > span.mixed {
5348     font-style: italic;
5349 }
5350 .ideditor .form-field-input-check > .reverser {
5351     -webkit-box-flex: 0;
5352         -ms-flex: 0 1 auto;
5353             flex: 0 1 auto;
5354     background-color: #eff2f7;
5355     border: 1px solid #ccd5e3;
5356     border-radius: 2px;
5357     padding: 0px 8px;
5358     color: inherit;
5359 }
5360 .ideditor[dir='ltr'] .form-field-input-check > .reverser {
5361     padding-right: 2px;
5362 }
5363 .ideditor[dir='rtl'] .form-field-input-check > .reverser {
5364     padding-left: 2px;
5365 }
5366 .ideditor .form-field-input-check > .reverser:active,
5367 .ideditor .form-field-input-check > .reverser:focus {
5368     background: #e3e8ef;
5369 }
5370 @media (hover: hover) {
5371     .ideditor .form-field-input-check > .reverser:hover {
5372         background: #e3e8ef;
5373     }
5374 }
5375 .ideditor .form-field-input-check > .reverser.hide {
5376     display: none;
5377 }
5378 .ideditor .form-field-input-check:active,
5379 .ideditor .form-field-input-check:focus {
5380     background: #f1f1f1;
5381 }
5382 @media (hover: hover) {
5383     .ideditor .form-field-input-check:hover {
5384         background: #f1f1f1;
5385     }
5386 }
5387 .ideditor .form-field-input-check .set {
5388     color: inherit;
5389 }
5390 .ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
5391     opacity: .5;
5392 }
5393
5394
5395 /* Field - Radio button
5396 ------------------------------------------------------- */
5397 .ideditor .form-field-input-radio {
5398     -webkit-box-flex: 1;
5399         -ms-flex: 1 1 auto;
5400             flex: 1 1 auto;
5401     display: -webkit-box;
5402     display: -ms-flexbox;
5403     display: flex;
5404     -webkit-box-orient: horizontal;
5405     -webkit-box-direction: normal;
5406         -ms-flex-flow: row wrap;
5407             flex-flow: row wrap;
5408 }
5409 .ideditor .form-field-input-radio > label {
5410     -webkit-box-flex: 1;
5411         -ms-flex: 1 1 auto;
5412             flex: 1 1 auto;
5413     display: -webkit-box;
5414     display: -ms-flexbox;
5415     display: flex;
5416     -webkit-box-orient: horizontal;
5417     -webkit-box-direction: normal;
5418         -ms-flex-flow: row nowrap;
5419             flex-flow: row nowrap;
5420     -webkit-box-align: center;
5421         -ms-flex-align: center;
5422             align-items: center;
5423     width: 100%;
5424     padding: 5px 10px;
5425     background-color: #fff;
5426     color: #7092ff;
5427     cursor: pointer;
5428 }
5429 .ideditor .form-field-input-radio > label.mixed {
5430     font-style: italic;
5431 }
5432 .ideditor .form-field-input-radio > label:last-child {
5433     border-radius: 0 0 4px 4px;
5434 }
5435 .ideditor .form-field-input-radio > label:active,
5436 .ideditor .form-field-input-radio > label:focus {
5437     background-color: #ececec;
5438 }
5439 @media (hover: hover) {
5440     .ideditor .form-field-input-radio > label:hover {
5441         background-color: #ececec;
5442     }
5443 }
5444 .ideditor .form-field-input-radio > label.active {
5445     background-color: #e8ebff;
5446 }
5447 .ideditor .form-field-input-radio > label:not(:last-of-type) {
5448     border-bottom: 1px solid #ccc;
5449 }
5450 .ideditor .form-field-input-radio > label > input[type="radio"] {
5451     -webkit-box-flex: 0;
5452         -ms-flex: 0 1 auto;
5453             flex: 0 1 auto;
5454 }
5455 .ideditor .form-field-input-radio > label > span {
5456     -webkit-box-flex: 1;
5457         -ms-flex: 1 1 auto;
5458             flex: 1 1 auto;
5459     overflow: hidden;
5460     white-space: nowrap;
5461     -o-text-overflow: ellipsis;
5462        text-overflow: ellipsis;
5463 }
5464
5465 /* Hide placeholder for radio buttons if another is active, or not in hover state */
5466 .ideditor .form-field-input-radio label.active ~ .placeholder,
5467 .ideditor .form-field-input-radio .placeholder {
5468     padding: 0;
5469     opacity: 0;
5470     width: 0;
5471     height: 0;
5472     display: block;
5473     overflow: hidden;
5474 }
5475
5476
5477 /* Field - roadheight and roadspeed
5478 ------------------------------------------------------- */
5479 .ideditor .form-field-input-roadheight input.roadheight-number,
5480 .ideditor .form-field-input-roadheight input.roadheight-secondary-number,
5481 .ideditor .form-field-input-roadspeed input.roadspeed-number {
5482     -ms-flex-preferred-size: 0;
5483         flex-basis: 0;
5484 }
5485 .ideditor .form-field-input-roadheight input.roadheight-unit,
5486 .ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
5487     -webkit-box-flex: 0;
5488         -ms-flex: 0 1 auto;
5489             flex: 0 1 auto;
5490     width: 60px;
5491 }
5492 .ideditor .form-field-input-roadspeed input.roadspeed-unit {
5493     -webkit-box-flex: 0;
5494         -ms-flex: 0 1 auto;
5495             flex: 0 1 auto;
5496     width: 80px;
5497 }
5498 .ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
5499 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
5500     border-radius: 0 0 0 4px;
5501 }
5502 .ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
5503 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
5504     border-radius: 0 0 4px 0;
5505 }
5506 .ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
5507 .ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
5508     border-left: 0;
5509     border-radius: 0 0 4px 0;
5510 }
5511 .ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
5512 .ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
5513     border-right: 0;
5514     border-radius: 0 0 0 4px;
5515 }
5516
5517
5518 /* Field - Localized Name
5519 ------------------------------------------------------- */
5520 .ideditor .form-field-input-localized > input.localized-main {
5521     border-radius: 0 0 0 4px;
5522 }
5523 .ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
5524     border-radius: 0 0 4px 0;
5525 }
5526 .ideditor .form-field-input-localized > button.localized-add {
5527     border-radius: 0 0 4px 0;
5528 }
5529 .ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
5530     border-radius: 0 0 0 4px;
5531 }
5532
5533 .ideditor .form-field-input-localized button.localized-add.disabled,
5534 .ideditor .form-field-input-localized input.localized-main.disabled,
5535 .ideditor .form-field-input-localized input.localized-lang.disabled,
5536 .ideditor .form-field-input-localized input.localized-value.disabled {
5537     color: #777;
5538     background-color: #eee;
5539     cursor: not-allowed;
5540 }
5541
5542 /* nested subfields for name in different languages */
5543 .ideditor .localized-multilingual {
5544     padding: 0 10px;
5545     -ms-flex-preferred-size: 100%;
5546         flex-basis: 100%;
5547 }
5548 .ideditor .localized-multilingual .entry {
5549     position: relative;
5550     overflow: hidden;
5551 }
5552
5553 /* draws a little line connecting the multilingual field up to the name field */
5554 .ideditor .localized-multilingual .entry::before {
5555     content: "";
5556     display: block;
5557     position: absolute;
5558     background: #ccc;
5559     height: 11px;
5560     width: 1px;
5561     left: 0;
5562     right: 0;
5563     top: -11px;
5564     margin: auto;
5565 }
5566
5567 .ideditor .localized-multilingual .entry .localized-lang {
5568     border-radius: 0;
5569     border-top-width: 0;
5570     width: 100%;
5571 }
5572 .ideditor .localized-multilingual .entry .localized-value {
5573     border-top-width: 0;
5574     border-radius: 0 0 4px 4px;
5575     width: 100%;
5576 }
5577
5578
5579 /* Field - Address
5580 ------------------------------------------------------- */
5581 .ideditor .form-field-input-address {
5582     -webkit-box-flex: 1;
5583         -ms-flex: 1 1 auto;
5584             flex: 1 1 auto;
5585     display: -webkit-box;
5586     display: -ms-flexbox;
5587     display: flex;
5588     -webkit-box-orient: horizontal;
5589     -webkit-box-direction: normal;
5590         -ms-flex-flow: row wrap;
5591             flex-flow: row wrap;
5592     border: 1px solid #ccc;
5593     border-top: 0px;
5594 }
5595
5596 .ideditor .addr-row {
5597     -webkit-box-flex: 1;
5598         -ms-flex: 1 1 auto;
5599             flex: 1 1 auto;
5600     display: -webkit-box;
5601     display: -ms-flexbox;
5602     display: flex;
5603     width: 100%;
5604 }
5605
5606 .ideditor .addr-row > input {
5607     -webkit-box-flex: 1;
5608         -ms-flex: 1 1 auto;
5609             flex: 1 1 auto;
5610     border-radius: 0;
5611     border-right: 0;
5612     border-bottom: 0;
5613 }
5614 .ideditor[dir='rtl'] .addr-row input {
5615     border-right: 1px solid #ccc;
5616     border-left: 0;
5617 }
5618
5619 .ideditor .addr-row:first-of-type input {
5620     border-top: 0;
5621 }
5622 .ideditor .addr-row input:first-of-type {
5623     border-left: 0;
5624 }
5625 .ideditor[dir='rtl'] .addr-row input:first-of-type {
5626     border-right: 0;
5627 }
5628 .ideditor .addr-row:last-of-type input:first-of-type {
5629     border-radius: 0 0 0 4px;
5630 }
5631 .ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
5632     border-radius: 0 0 4px 0;
5633 }
5634 .ideditor .addr-row:last-of-type input:last-of-type {
5635     border-radius: 0 0 4px 0;
5636 }
5637 .ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
5638     border-radius: 0 0 0 4px;
5639 }
5640 .ideditor .combobox-address-street-place .combobox-option.address-street,
5641 .ideditor .combobox-address-street-place .combobox-option.address-place {
5642     padding-right: 20px;
5643 }
5644 .ideditor .combobox-address-street-place .combobox-option.address-street::after,
5645 .ideditor .combobox-address-street-place .combobox-option.address-place::after {
5646     position: absolute;
5647     right: 2px;
5648     opacity: 0.4;
5649 }
5650 .ideditor .combobox-address-street-place .combobox-option.address-place::after {
5651     content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPg0KICAgIDxwYXRoIGQ9Ik0xMCwzIEM2LjY4NiwzIDQsNS42MTIgNCw4LjgzMyBDNCwxMi4wNTUgMTAsMTcgMTAsMTcgQzEwLDE3IDE2LDEyLjA1NSAxNiw4LjgzMyBDMTYsNS42MTIgMTMuMzE0LDMgMTAsMyB6IE0xMC4xODcsNi41IEMxMS41MTMsNi41IDEyLjU4Nyw3LjU0NSAxMi41ODcsOC44MzMgQzEyLjU4NywxMC4xMjIgMTEuNTEzLDExLjE2NyAxMC4xODcsMTEuMTY3IEM4Ljg2MiwxMS4xNjcgNy43ODcsMTAuMTIyIDcuNzg3LDguODMzIEM3Ljc4Nyw3LjU0NSA4Ljg2Miw2LjUgMTAuMTg3LDYuNSB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4NCjwvc3ZnPg==);
5652 }
5653
5654
5655 /* Field - Wikipedia
5656 ------------------------------------------------------- */
5657 .ideditor .form-field-input-wikipedia {
5658     display: -webkit-box;
5659     display: -ms-flexbox;
5660     display: flex;
5661     -webkit-box-orient: horizontal;
5662     -webkit-box-direction: normal;
5663         -ms-flex-flow: row wrap;
5664             flex-flow: row wrap;
5665     -webkit-box-flex: 1;
5666         -ms-flex: 1 1 auto;
5667             flex: 1 1 auto;
5668 }
5669
5670 .ideditor .wiki-lang-container,
5671 .ideditor .wiki-title-container {
5672     display: -webkit-box;
5673     display: -ms-flexbox;
5674     display: flex;
5675     -webkit-box-orient: horizontal;
5676     -webkit-box-direction: normal;
5677         -ms-flex-flow: row nowrap;
5678             flex-flow: row nowrap;
5679     -webkit-box-flex: 1;
5680         -ms-flex: 1 1 auto;
5681             flex: 1 1 auto;
5682     width: 100%;
5683 }
5684
5685 .ideditor .wiki-lang-container > input.wiki-lang,
5686 .ideditor .wiki-title-container > input.wiki-title {
5687     -webkit-box-flex: 1;
5688         -ms-flex: 1 1 auto;
5689             flex: 1 1 auto;
5690     border-top: 0;
5691     border-radius: 0;
5692 }
5693 .ideditor .wiki-title-container > input.wiki-title {
5694     border-radius: 0 0 0 4px;
5695 }
5696 .ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
5697     border-radius: 0 0 4px 0;
5698 }
5699 .ideditor .wiki-title-container > button.wiki-link,
5700 .ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5701     border-radius: 0 0 4px 0;
5702 }
5703 .ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
5704 .ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
5705     border-radius: 0 0 0 4px;
5706 }
5707
5708
5709 /* Field - Restriction Editor
5710 ------------------------------------------------------- */
5711 .ideditor .form-field-input-restrictions {
5712     display: block;
5713     border: 1px solid #ccc;
5714     border-top: 0;
5715     border-radius: 0 0 4px 4px;
5716 }
5717
5718 .ideditor .form-field-input-restrictions .restriction-controls-container {
5719     background-color: #fff;
5720     width: 100%;
5721     padding: 5px;
5722     border-top: 1px solid #ccc;
5723     border-radius: 0 0 4px 4px;
5724 }
5725
5726 .ideditor .restriction-controls-container .restriction-controls {
5727     display: table;
5728     -webkit-user-select: none;
5729        -moz-user-select: none;
5730         -ms-user-select: none;
5731             user-select: none;
5732 }
5733
5734 .ideditor .restriction-controls .restriction-control {
5735     display: table-row;
5736     padding: 5px 10px;
5737     height: 25px;
5738 }
5739
5740 .ideditor .restriction-control input,
5741 .ideditor .restriction-control > span {
5742     display: table-cell;
5743     text-align: start;
5744     padding: 0px 5px;
5745 }
5746
5747 .ideditor .restriction-control > span.restriction-control-label {
5748     text-align: end;
5749 }
5750
5751 .ideditor .restriction-control input {
5752     width: 60px;
5753     padding: 0;
5754     margin: 0px 5px;
5755     vertical-align: middle;
5756 }
5757
5758 .ideditor .form-field-input-restrictions .restriction-container {
5759     position: relative;
5760     height: 370px;
5761 }
5762 /* zero width space, so container takes up space */
5763 .ideditor .form-field-input-restrictions .restriction-container:after {
5764     content: '\200b';
5765 }
5766
5767 .ideditor .form-field-input-restrictions svg.surface {
5768     width: 100%;
5769     height: 100%;
5770 }
5771
5772 .ideditor .restriction-container .restriction-help {
5773     z-index: 1;
5774     position: absolute;
5775     top: 0;
5776     left: 0;
5777     right: 0;
5778     padding: 2px 6px;
5779     background-color: rgba(255, 255, 255, .8);
5780     color: #888;
5781     text-align: center;
5782     pointer-events: none;
5783     -webkit-user-select: none;
5784        -moz-user-select: none;
5785         -ms-user-select: none;
5786             user-select: none;
5787 }
5788
5789 .ideditor .restriction-help span {
5790     margin: 2px;
5791 }
5792
5793 .ideditor .restriction-help .qualifier {
5794     color: #666;
5795     font-weight: bold;
5796 }
5797 .ideditor .restriction-help .qualifier.allow {
5798     color: #8b5;
5799 }
5800 .ideditor .restriction-help .qualifier.restrict {
5801     color: #d53;
5802 }
5803 .ideditor .restriction-help .qualifier.only {
5804     color: #78f;
5805 }
5806
5807
5808 /* Field - Changeset Comment
5809 ------------------------------------------------------- */
5810 .ideditor .form-field-comment:not(.present) #preset-input-comment {
5811     border-color: rgb(230, 100, 100);
5812 }
5813 .ideditor .form-field-comment:not(.present) .field-label {
5814     border-color: rgb(230, 100, 100);
5815     background: rgba(230, 100, 100, 0.2);
5816 }
5817 .ideditor .form-field-comment:not(.present) button {
5818     border-color: rgb(230, 100, 100);
5819 }
5820
5821
5822 /* Field - Combobox
5823 ------------------------------------------------------- */
5824 .ideditor[dir='ltr'] textarea.combobox-input,
5825 .ideditor[dir='ltr'] input.combobox-input {
5826     /* leave room for the caret */
5827     padding-right: 20px;
5828 }
5829 .ideditor[dir='rtl'] textarea.combobox-input,
5830 .ideditor[dir='rtl'] input.combobox-input {
5831     padding-left: 20px;
5832 }
5833
5834 .ideditor div.combobox {
5835     z-index: 9999;
5836     display: none;
5837     -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
5838             box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
5839     margin-top: -1px;
5840     background: #fff;
5841     max-height: 245px;
5842     overflow-y: auto;
5843     overflow-x: hidden;
5844     border: 1px solid #ccc;
5845     border-radius: 0 0 4px 4px;
5846 }
5847
5848 .ideditor .combobox a {
5849     display: block;
5850     padding: 5px 10px;
5851     border-top: 1px solid #ccc;
5852     -o-text-overflow: ellipsis;
5853        text-overflow: ellipsis;
5854     white-space: nowrap;
5855     overflow: hidden;
5856 }
5857
5858 .ideditor .combobox a.selected,
5859 .ideditor .combobox a:active,
5860 .ideditor .combobox a:focus {
5861     background: #ececec;
5862 }
5863 @media (hover: hover) {
5864     .ideditor .combobox a:hover {
5865         background: #ececec;
5866     }
5867 }
5868
5869 .ideditor .combobox a:first-child {
5870     border-top: 0;
5871     padding: 4px 10px;
5872 }
5873
5874 .ideditor .combobox-caret {
5875     display: inline-block;
5876     position: relative;
5877     height: 5px;
5878     width: 30px !important;
5879     margin-left: -30px;
5880     -ms-flex-item-align: center;
5881         align-self: center;
5882     vertical-align: middle;
5883     cursor: pointer;
5884 }
5885 .ideditor[dir='rtl'] .combobox-caret {
5886   margin-left: 0;
5887   margin-right: -30px;
5888 }
5889
5890 .ideditor .combobox-caret::after {
5891     content: "";
5892     height: 0; width: 0;
5893     position: absolute;
5894     left: 0; right: 0; bottom: 0; top: 0;
5895     margin: auto;
5896     border-top: 5px solid #ccc;
5897     border-left: 5px solid transparent;
5898     border-right: 5px solid transparent;
5899 }
5900
5901 .ideditor .combobox .combobox-option.raw-option {
5902     font-family: monospace;
5903     color: #333;
5904 }
5905
5906 .ideditor .form-field-input-wrap {
5907     position: relative;
5908 }
5909
5910 .ideditor .form-field-input-wrap span.length-indicator-wrap {
5911     visibility: hidden;
5912     position: absolute;
5913     top: -5px;
5914     left: 0;
5915     right: 0;
5916 }
5917
5918 .ideditor .form-field-input-wrap input:focus + span.length-indicator-wrap,
5919 .ideditor .form-field-input-wrap textarea:focus + span.length-indicator-wrap,
5920 .ideditor .form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap,
5921 .ideditor .form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap {
5922     visibility: visible;
5923 }
5924
5925 .ideditor .form-field-input-wrap span.length-indicator {
5926     display: block;
5927     left: 0;
5928     right: 0;
5929     height: 4px;
5930     background-color: #7092ff;
5931     border-right-style: solid;
5932     border-right-color: lightgray;
5933 }
5934
5935 .ideditor .form-field-input-wrap span.length-indicator.limit-reached {
5936     border-right-color: red;
5937 }
5938
5939 .ideditor .tooltip.max-length-warning {
5940     z-index: 10;
5941 }
5942
5943 /* Field Help
5944 ------------------------------------------------------- */
5945 .ideditor .field-help-body {
5946     display: block;
5947     position: absolute;
5948     top: 0;
5949     left: 20px;
5950     right: 20px;
5951     margin: 5px;
5952     padding: 8px;
5953     border: 1px solid #ccc;
5954     border-top: 0;
5955     border-radius: 0 0 4px 4px;
5956     z-index: 20;
5957     background: rgba(255,255,255,0.95);
5958     -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5959             box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
5960 }
5961
5962 .ideditor .field-help-title h2 {
5963     padding: 10px;
5964     margin-bottom: 0px;
5965     font-size: 17px;
5966 }
5967 .ideditor .field-help-title button {
5968     width: 45px;
5969     height: 55px;
5970     border-radius: 0;
5971 }
5972
5973 .ideditor .field-help-nav {
5974     font-size: 13px;
5975     font-weight: bold;
5976     margin-bottom: 10px;
5977 }
5978 .ideditor .field-help-nav-item {
5979     display: inline-block;
5980     padding: 5px 10px;
5981     cursor: pointer;
5982     color: #666;
5983 }
5984 .ideditor .field-help-nav-item.active {
5985     color: #7092ff;
5986     border-bottom: 2px solid;
5987 }
5988 .ideditor .field-help-nav-item:active,
5989 .ideditor .field-help-nav-item:focus {
5990     color: #597be7;
5991     background-color: #efefef;
5992 }
5993 @media (hover: hover) {
5994     .ideditor .field-help-nav-item:hover {
5995         color: #597be7;
5996         background-color: #efefef;
5997     }
5998 }
5999
6000 .ideditor .field-help-content {
6001     padding: 10px;
6002     overflow-y: auto;
6003     overflow-x: hidden;
6004 }
6005 .ideditor .field-help-content h3 {
6006     font-size: 12px;
6007     margin-bottom: 5px;
6008 }
6009 .ideditor .field-help-content p {
6010     margin-bottom: 15px;
6011 }
6012 .ideditor .field-help-content ul li {
6013     list-style: inside;
6014     margin-bottom: 5px;
6015 }
6016
6017 .ideditor .field-help-content .field-help-image {
6018     width: 100%;
6019     margin-bottom: 15px;
6020 }
6021
6022 .ideditor .field-help-content svg.turn {
6023     width: 40px;
6024     height: 20px;
6025 }
6026 .ideditor .field-help-content svg.shadow {
6027     opacity: 0.7;
6028     width: 60px;
6029     height: 20px;
6030 }
6031 .ideditor .field-help-content svg.from {
6032     color: #777;
6033 }
6034 .ideditor .field-help-content svg.allow {
6035     color: #5b3;
6036 }
6037 .ideditor .field-help-content svg.restrict {
6038     color: #d53;
6039 }
6040 .ideditor .field-help-content svg.only {
6041     color: #68f;
6042 }
6043
6044 .ideditor .field-help-content p.from_shadow,
6045 .ideditor .field-help-content p.allow_shadow,
6046 .ideditor .field-help-content p.restrict_shadow,
6047 .ideditor .field-help-content p.allow_turn,
6048 .ideditor .field-help-content p.restrict_turn {
6049     margin-bottom: 5px;
6050 }
6051
6052
6053 /* More Fields dropdown
6054 ------------------------------------------------------- */
6055 .ideditor .more-fields {
6056     margin-top: 10px;
6057     font-weight: bold;
6058 }
6059
6060 .ideditor .more-fields label {
6061     display: -webkit-box;
6062     display: -ms-flexbox;
6063     display: flex;
6064     -webkit-box-orient: horizontal;
6065     -webkit-box-direction: normal;
6066         -ms-flex-flow: row nowrap;
6067             flex-flow: row nowrap;
6068     -webkit-box-pack: justify;
6069         -ms-flex-pack: justify;
6070             justify-content: space-between;
6071     -webkit-box-align: center;
6072         -ms-flex-align: center;
6073             align-items: center;
6074 }
6075
6076 .ideditor .more-fields input {
6077     margin-left: 10px;
6078     -webkit-box-flex: 1;
6079         -ms-flex: 1 1 auto;
6080             flex: 1 1 auto;
6081 }
6082 .ideditor[dir='rtl'] .more-fields input {
6083     margin-left: auto;
6084     margin-right: 10px;
6085 }
6086
6087 .ideditor .form-field-input-wrap .label {
6088     background: #f6f6f6;
6089     padding: 5px 10px;
6090 }
6091
6092
6093 /* Raw Tag Editor
6094 ------------------------------------------------------- */
6095 .ideditor .raw-tag-options {
6096     display: -webkit-box;
6097     display: -ms-flexbox;
6098     display: flex;
6099     -webkit-box-orient: horizontal;
6100     -webkit-box-direction: normal;
6101         -ms-flex-flow: row nowrap;
6102             flex-flow: row nowrap;
6103     -webkit-box-pack: end;
6104         -ms-flex-pack: end;
6105             justify-content: flex-end;
6106     margin-top: -28px;
6107 }
6108 .ideditor button.raw-tag-option {
6109     -webkit-box-flex: 0;
6110         -ms-flex: 0 0 auto;
6111             flex: 0 0 auto;
6112     padding: 3px;
6113     background: #aaa;
6114     color: #eee;
6115     margin: 0 3px;
6116 }
6117 .ideditor button.raw-tag-option:focus,
6118 .ideditor button.raw-tag-option.active {
6119     color: #fff;
6120     background: #597be7;
6121 }
6122 @media (hover: hover) {
6123     .ideditor button.raw-tag-option:hover {
6124         color: #fff;
6125         background: #597be7;
6126     }
6127 }
6128 .ideditor button.raw-tag-option.selected {
6129     color: #fff;
6130     background: #7092ff;
6131 }
6132 .ideditor button.raw-tag-option svg.icon {
6133     width: 14px;
6134     height: 14px;
6135     display: block;
6136 }
6137 .ideditor[dir='ltr'] button.raw-tag-option-list {
6138     -webkit-transform: scaleX(-1);
6139         -ms-transform: scaleX(-1);
6140             transform: scaleX(-1);
6141     -webkit-filter: FlipH;
6142             filter: FlipH;
6143     -ms-filter: "FlipH";
6144 }
6145
6146
6147 .ideditor .tag-text {
6148     width: 100%;
6149     height: 100%;
6150     min-height: 32px;
6151     font-family: monospace;
6152     white-space: pre;
6153 }
6154
6155 .ideditor .tag-text,
6156 .ideditor .tag-list {
6157     margin-top: 10px;
6158 }
6159 .ideditor .tag-row {
6160     width: 100%;
6161     position: relative;
6162 }
6163 .ideditor .tag-row .inner-wrap {
6164     display: -webkit-box;
6165     display: -ms-flexbox;
6166     display: flex;
6167     -webkit-box-orient: horizontal;
6168     -webkit-box-direction: normal;
6169         -ms-flex-flow: row nowrap;
6170             flex-flow: row nowrap;
6171     width: 100%;
6172     position: relative;
6173 }
6174 .ideditor .tag-row .key-wrap,
6175 .ideditor .tag-row .value-wrap {
6176     -webkit-box-flex: 1;
6177         -ms-flex: 1 1 50%;
6178             flex: 1 1 50%;
6179 }
6180
6181 .ideditor .tag-text.readonly,
6182 .ideditor .tag-row.readonly,
6183 .ideditor .tag-row.readonly input.key,
6184 .ideditor .tag-row.readonly input.value,
6185 .ideditor .tag-row.readonly button.remove {
6186     color: #777;
6187     background-color: #eee;
6188     cursor: not-allowed;
6189 }
6190
6191 .ideditor .tag-row input {
6192     border: 0;
6193     border-radius: 0;
6194     border-bottom: 1px solid #ccc;
6195     border-left: 1px solid #ccc;
6196     width: 100%;
6197 }
6198 .ideditor[dir='rtl'] .tag-row input {
6199     border-left: none;
6200     border-right: 1px solid #ccc;
6201 }
6202
6203
6204 .ideditor .tag-row input.key {
6205     font-weight: bold;
6206     background-color: #f6f6f6;
6207 }
6208
6209 .ideditor .tag-row input.value {
6210     border-right: 1px solid #ccc;
6211 }
6212 .ideditor[dir='rtl'] .tag-row input.value {
6213     border-left: 1px solid #ccc;
6214 }
6215
6216 .ideditor .tag-row:first-child input.key {
6217     border-top: 1px solid #ccc;
6218     border-top-left-radius: 4px;
6219 }
6220 .ideditor[dir='rtl'] .tag-row:first-child input.key {
6221     border-top-left-radius: 0;
6222     border-top-right-radius: 4px;
6223 }
6224
6225 .ideditor .tag-row:first-child input.value {
6226     border-top: 1px solid #ccc;
6227 }
6228 .ideditor .tag-row button {
6229     -webkit-box-flex: 0;
6230         -ms-flex: 0 0 auto;
6231             flex: 0 0 auto;
6232     width: 32px;
6233     border: 1px solid #ccc;
6234     border-top-width: 0;
6235     border-left-width: 0;
6236 }
6237 .ideditor[dir='rtl'] .tag-row button {
6238     border-left-width: 1px;
6239     border-right-width: 0;
6240 }
6241
6242 .ideditor .tag-row button:active,
6243 .ideditor .tag-row button:focus {
6244     background: #f1f1f1;
6245 }
6246 @media (hover: hover) {
6247     .ideditor .tag-row button:hover {
6248         background: #f1f1f1;
6249     }
6250 }
6251 .ideditor .tag-row button .icon {
6252     opacity: .5;
6253 }
6254 .ideditor .tag-row:first-child button {
6255     border-top-width: 1px;
6256 }
6257
6258 .ideditor .tag-row:first-child .tag-reference-button {
6259     border-top-right-radius: 4px;
6260 }
6261 .ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
6262     border-top-left-radius: 4px;
6263     border-top-right-radius: 0;
6264 }
6265
6266 .ideditor .tag-row:last-child .tag-reference-button {
6267     border-bottom-right-radius: 4px;
6268 }
6269 .ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
6270     border-bottom-left-radius: 4px;
6271     border-bottom-right-radius: 0;
6272 }
6273
6274 .ideditor .tag-row .tag-reference-button {
6275     border-radius: 0;
6276 }
6277 .ideditor[dir='rtl'] .tag-row .tag-reference-button {
6278     border-left-width: 1px;
6279     border-right-width: 0;
6280 }
6281
6282 /* Tag reference */
6283 .ideditor .tag-reference-loading {
6284     background-color: #f5f5f5;
6285 }
6286 .ideditor .tag-reference-loading .icon {
6287     background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
6288     background-position: 0 0;
6289 }
6290
6291 .ideditor .tag-reference-body {
6292     -webkit-box-flex: 1;
6293         -ms-flex: 1 1 auto;
6294             flex: 1 1 auto;
6295     width: 100%;
6296     overflow: hidden;
6297     display: none;
6298     padding-top: 10px;
6299 }
6300 .ideditor .tag-reference-body.expanded {
6301     padding-bottom: 10px;
6302     display: inline-block;
6303 }
6304 .ideditor .tag-reference-description {
6305
6306 }
6307 .ideditor .tag-reference-link {
6308     display: block;
6309 }
6310
6311 .ideditor img.tag-reference-wiki-image {
6312     float: right;
6313     width: 33.3333%;
6314     border-radius: 4px;
6315     margin: 0 0 0 5px;
6316 }
6317 .ideditor[dir='rtl'] img.tag-reference-wiki-image {
6318     float: left;
6319     margin: 0 5px 0 0;
6320 }
6321
6322 .ideditor .preset-list .tag-reference-body {
6323     position: relative;
6324     width: 100%;
6325 }
6326 .ideditor .raw-tag-editor .tag-reference-body {
6327     width: 100%;
6328 }
6329 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
6330     background: #f6f6f6;
6331     color: #333;
6332 }
6333 .ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
6334     border-bottom: 1px solid #ccc;
6335 }
6336 .ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
6337     border-top: 1px solid #ccc;
6338 }
6339
6340
6341 /* Raw Member / Membership Editor
6342 ------------------------------------------------------- */
6343 .ideditor .section-raw-member-editor .member-list:empty,
6344 .ideditor .section-raw-membership-editor .member-list:empty {
6345     display: none;
6346 }
6347
6348 .ideditor .section-raw-member-editor .member-list,
6349 .ideditor .section-raw-membership-editor .member-list {
6350     position: relative; /* required for drag-and-drop */
6351     padding-top: 5px;
6352 }
6353 .ideditor .section-raw-member-editor .member-list li,
6354 .ideditor .section-raw-membership-editor .member-list li {
6355     position: relative;
6356     border-radius: 4px;
6357     margin: 0;
6358     padding-bottom: 10px;
6359 }
6360 .ideditor .section-raw-member-editor .member-row .member-entity-name,
6361 .ideditor .section-raw-membership-editor .member-row .member-entity-name {
6362     font-weight: normal;
6363     padding-left: 10px;
6364 }
6365
6366 .ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
6367 .ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
6368     padding-left:0;
6369     padding-right: 10px;
6370 }
6371
6372 .ideditor .form-field-input-member > input.member-role {
6373     border-radius: 0 0 4px 4px;
6374 }
6375
6376 .ideditor .member-row-new .member-entity-input {
6377     -webkit-box-flex: 1;
6378         -ms-flex: 1 1 100%;
6379             flex: 1 1 100%;
6380     border-radius: 4px 4px 0 0;
6381     border: 0;
6382 }
6383
6384 .ideditor .section-raw-member-editor .member-row.dragging {
6385     opacity: 0.75;
6386     z-index: 3000;
6387     /*
6388     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
6389     */
6390 }
6391
6392 /* add tag, add relation buttons */
6393 .ideditor .add-row {
6394     display: -webkit-box;
6395     display: -ms-flexbox;
6396     display: flex;
6397     width: 100%;
6398     -webkit-box-orient: horizontal;
6399     -webkit-box-direction: normal;
6400         -ms-flex-flow: row nowrap;
6401             flex-flow: row nowrap;
6402 }
6403 .ideditor .add-row .add-tag,
6404 .ideditor .add-row .add-relation,
6405 .ideditor .add-row .space-value {
6406     -webkit-box-flex: 1;
6407         -ms-flex: 1 1 50%;
6408             flex: 1 1 50%;
6409 }
6410 .ideditor .add-row .space-buttons {
6411     -webkit-box-flex: 0;
6412         -ms-flex: 0 0 62px;
6413             flex: 0 0 62px;
6414 }
6415 .ideditor .add-row button {
6416     padding: 5px;
6417     background: rgba(0,0,0,.5);
6418 }
6419 .ideditor .add-row button:focus,
6420 .ideditor .add-row button:active {
6421     background: rgba(0,0,0,.8);
6422 }
6423 @media (hover: hover) {
6424     .ideditor .add-row button:hover {
6425         background: rgba(0,0,0,.8);
6426     }
6427 }
6428
6429 .ideditor .add-tag {
6430     border-radius: 0 0 4px 4px;
6431 }
6432 .ideditor .add-relation {
6433     margin-top: 10px;
6434     border-radius: 4px;
6435 }
6436
6437
6438 /* OSM Note / QA Editors
6439 ------------------------------------------------------- */
6440 .ideditor .note-header,
6441 .ideditor .qa-header {
6442     background-color: #f6f6f6;
6443     border-radius: 5px;
6444     border: 1px solid #ccc;
6445     display: -webkit-box;
6446     display: -ms-flexbox;
6447     display: flex;
6448     -webkit-box-orient: horizontal;
6449     -webkit-box-direction: normal;
6450         -ms-flex-flow: row nowrap;
6451             flex-flow: row nowrap;
6452     -webkit-box-align: center;
6453         -ms-flex-align: center;
6454             align-items: center;
6455 }
6456
6457 .ideditor .note-header-icon,
6458 .ideditor .qa-header-icon {
6459     background-color: #fff;
6460     padding: 10px;
6461     -webkit-box-flex: 0;
6462         -ms-flex: 0 0 auto;
6463             flex: 0 0 auto;
6464     position: relative;
6465     width: 60px;
6466     height: 60px;
6467     border-right: 1px solid #ccc;
6468     border-radius: 5px 0 0 5px;
6469 }
6470 .ideditor[dir='rtl'] .note-header-icon,
6471 .ideditor[dir='rtl'] .qa-header-icon {
6472     border-right: unset;
6473     border-left: 1px solid #ccc;
6474     border-radius: 0 5px 5px 0;
6475 }
6476
6477 .ideditor .note-header-icon .icon-wrap,
6478 .ideditor .qa-header-icon .icon-wrap {
6479     position: absolute;
6480     top: 0px;
6481 }
6482 .ideditor .preset-icon-28 {
6483     position: absolute;
6484     top: 16px;
6485     left: 16px;
6486     margin: auto;
6487 }
6488 .ideditor .preset-icon-28 .icon {
6489     width: 28px;
6490     height: 28px;
6491 }
6492
6493 .ideditor .note-header-label,
6494 .ideditor .qa-header-label {
6495     background-color: #f6f6f6;
6496     padding: 0 15px;
6497     -webkit-box-flex: 1;
6498         -ms-flex: 1 1 100%;
6499             flex: 1 1 100%;
6500     font-size: 14px;
6501     font-weight: bold;
6502     border-radius: 0 5px 5px 0;
6503 }
6504 .ideditor[dir='rtl'] .note-header-label,
6505 .ideditor[dir='rtl'] .qa-header-label {
6506     border-radius: 5px 0 0 5px;
6507 }
6508
6509 .ideditor .note-category {
6510     margin: 20px 0px;
6511 }
6512
6513 .ideditor .comments-container {
6514     background: #ececec;
6515     padding: 1px 10px;
6516     border-radius: 8px;
6517     margin-top: 20px;
6518 }
6519
6520 .ideditor .comment {
6521     background-color: #fff;
6522     border-radius: 5px;
6523     border: 1px solid #ccc;
6524     margin: 10px auto;
6525     display: -webkit-box;
6526     display: -ms-flexbox;
6527     display: flex;
6528     -webkit-box-orient: horizontal;
6529     -webkit-box-direction: normal;
6530         -ms-flex-flow: row nowrap;
6531             flex-flow: row nowrap;
6532 }
6533 .ideditor .comment-avatar {
6534     padding: 10px;
6535     -webkit-box-flex: 0;
6536         -ms-flex: 0 0 auto;
6537             flex: 0 0 auto;
6538 }
6539 .ideditor .comment-avatar .icon.comment-avatar-icon {
6540     width: 40px;
6541     height: 40px;
6542     -o-object-fit: cover;
6543        object-fit: cover;
6544     border: 1px solid #ccc;
6545     border-radius: 20px;
6546 }
6547 .ideditor .comment-main {
6548     padding: 10px 10px 10px 0;
6549     -webkit-box-flex: 1;
6550         -ms-flex: 1 1 100%;
6551             flex: 1 1 100%;
6552     -webkit-box-orient: vertical;
6553     -webkit-box-direction: normal;
6554         -ms-flex-flow: column nowrap;
6555             flex-flow: column nowrap;
6556     overflow: hidden;
6557     overflow-wrap: break-word;
6558 }
6559 .ideditor[dir='rtl'] .comment-main {
6560     padding: 10px 0 10px 10px;
6561 }
6562
6563 .ideditor .comment-metadata {
6564     -webkit-box-orient: horizontal;
6565     -webkit-box-direction: normal;
6566         -ms-flex-flow: row nowrap;
6567             flex-flow: row nowrap;
6568     -webkit-box-pack: justify;
6569         -ms-flex-pack: justify;
6570             justify-content: space-between;
6571 }
6572 .ideditor .comment-author {
6573     font-weight: bold;
6574     color: #333;
6575 }
6576 .ideditor .comment-date {
6577     color: #aaa;
6578 }
6579 .ideditor .comment-text {
6580     color: #333;
6581     margin-top: 10px;
6582     overflow-y: auto;
6583     max-height: 250px;
6584 }
6585 .ideditor .comment-text::-webkit-scrollbar {
6586     border-left: none;
6587 }
6588
6589 .ideditor .note-save,
6590 .ideditor .qa-save {
6591     padding-top: 20px;
6592 }
6593
6594 .ideditor .qa-details-container {
6595     background: #ececec;
6596     padding: 10px;
6597     margin-top: 20px;
6598     border-radius: 4px;
6599     border: 1px solid #ccc;
6600     display: -webkit-box;
6601     display: -ms-flexbox;
6602     display: flex;
6603     -webkit-box-orient: vertical;
6604     -webkit-box-direction: normal;
6605         -ms-flex-direction: column;
6606             flex-direction: column;
6607 }
6608 .ideditor .qa-details-description-text::first-letter {
6609     text-transform: capitalize;
6610 }
6611 .ideditor[dir='rtl'] .qa-details-description-text::first-letter {
6612     text-transform: none;  /* #5877 */
6613 }
6614 .ideditor .qa-details-subsection h4 {
6615     padding-bottom: 2px;
6616 }
6617 .ideditor .qa-details-subsection:not(:last-child) {
6618     margin-bottom: 10px;
6619 }
6620 .ideditor .qa-details-subsection:empty {
6621     display: none;
6622 }
6623
6624 .ideditor .note-save .new-comment-input,
6625 .ideditor .qa-save .new-comment-input {
6626     width: 100%;
6627     height: 100px;
6628     max-height: 300px;
6629     min-height: 100px;
6630 }
6631
6632 .ideditor .note-save .detail-section,
6633 .ideditor .qa-save .detail-section {
6634     margin: 10px 0;
6635 }
6636
6637 .ideditor .note-report {
6638     float: right;
6639 }
6640
6641
6642 /* Custom Data Editor
6643 ------------------------------------------------------- */
6644 .ideditor .data-header {
6645     background-color: #f6f6f6;
6646     border-radius: 5px;
6647     border: 1px solid #ccc;
6648     display: -webkit-box;
6649     display: -ms-flexbox;
6650     display: flex;
6651     -webkit-box-orient: horizontal;
6652     -webkit-box-direction: normal;
6653         -ms-flex-flow: row nowrap;
6654             flex-flow: row nowrap;
6655     -webkit-box-align: center;
6656         -ms-flex-align: center;
6657             align-items: center;
6658 }
6659
6660 .ideditor .data-header-icon {
6661     background-color: #fff;
6662     padding: 10px;
6663     -webkit-box-flex: 0;
6664         -ms-flex: 0 0 auto;
6665             flex: 0 0 auto;
6666     position: relative;
6667     width: 60px;
6668     height: 60px;
6669     border-right: 1px solid #ccc;
6670     border-radius: 5px 0 0 5px;
6671 }
6672 .ideditor[dir='rtl'] .data-header-icon {
6673     border-right: unset;
6674     border-left: 1px solid #ccc;
6675     border-radius: 0 5px 5px 0;
6676 }
6677
6678 .ideditor .data-header-icon .icon-wrap {
6679     position: absolute;
6680     top: 0px;
6681 }
6682
6683 .ideditor .data-header-label {
6684     background-color: #f6f6f6;
6685     padding: 0 15px;
6686     -webkit-box-flex: 1;
6687         -ms-flex: 1 1 100%;
6688             flex: 1 1 100%;
6689     font-size: 14px;
6690     font-weight: bold;
6691     border-radius: 0 5px 5px 0;
6692 }
6693 .ideditor[dir='rtl'] .data-header-label {
6694     border-radius: 5px 0 0 5px;
6695 }
6696
6697 /* custom data editor - no info/delete buttons */
6698 .ideditor .data-editor.raw-tag-editor .tag-row button {
6699     display: none;
6700 }
6701 .ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
6702 .ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
6703     width: 50%;
6704 }
6705
6706
6707 .ideditor .over-map {
6708     position: relative;
6709     height: 100%;
6710     pointer-events: none;
6711     display: -webkit-box;
6712     display: -ms-flexbox;
6713     display: flex;
6714     -webkit-box-orient: horizontal;
6715     -webkit-box-direction: reverse;
6716         -ms-flex-direction: row-reverse;
6717             flex-direction: row-reverse;
6718     -webkit-box-align: end;
6719         -ms-flex-align: end;
6720             align-items: flex-end;
6721     overflow: hidden;
6722 }
6723 .ideditor .over-map > * {
6724     pointer-events: auto;
6725     z-index: 5;
6726 }
6727 /* offscreen this without hiding it */
6728 .ideditor .over-map .select-trap {
6729     position: absolute;
6730     right: -1000%;
6731     opacity: 0;
6732 }
6733
6734 /* Map Controls
6735 ------------------------------------------------------- */
6736 .ideditor .map-controls-wrap {
6737     position: absolute;
6738     left: 0;
6739     right: 0;
6740     height: 100%;
6741     z-index: 100;
6742     display: block;
6743     overflow-x: hidden;
6744     overflow-y: auto;
6745     pointer-events: none;
6746     -ms-overflow-style: none;
6747     scrollbar-width: none;
6748 }
6749 .ideditor .map-controls-wrap::-webkit-scrollbar {
6750     display: none;
6751 }
6752 .ideditor .map-controls {
6753     right: 0;
6754     top: 0;
6755     width: 40px;
6756     position: absolute;
6757     bottom: 0;
6758     display: -webkit-box;
6759     display: -ms-flexbox;
6760     display: flex;
6761     -webkit-box-orient: vertical;
6762     -webkit-box-direction: normal;
6763         -ms-flex-direction: column;
6764             flex-direction: column;
6765     padding: 5px 0;
6766     pointer-events: none;
6767 }
6768 .ideditor .map-controls:before {
6769     content: '';
6770     display: inline-block;
6771     pointer-events: none;
6772     width: 40px;
6773     height: 100%;
6774     max-height: 70px;
6775     -webkit-box-flex: 0;
6776         -ms-flex: 0 1 auto;
6777             flex: 0 1 auto;
6778 }
6779 .ideditor[dir='rtl'] .map-controls {
6780     left: 0;
6781     right: auto;
6782 }
6783
6784 .ideditor .map-control {
6785     position: relative;
6786     display: -webkit-box;
6787     display: -ms-flexbox;
6788     display: flex;
6789     -webkit-box-orient: vertical;
6790     -webkit-box-direction: normal;
6791         -ms-flex-direction: column;
6792             flex-direction: column;
6793 }
6794 .ideditor .map-control > button {
6795     position: relative;
6796     width: 40px;
6797     height: 40px;
6798     background: rgba(0,0,0,.5);
6799     border-radius: 0;
6800     pointer-events: auto;
6801 }
6802
6803 .ideditor .map-control > button:not(.disabled):focus,
6804 .ideditor .map-control > button:not(.disabled):active {
6805     background: rgba(0, 0, 0, .8);
6806 }
6807 .ideditor .map-control > button.active,
6808 .ideditor .map-control > button.active:active {
6809     background: #7092ff;
6810 }
6811 @media (hover: hover) {
6812     .ideditor .map-control > button:not(.disabled):hover {
6813         background: rgba(0, 0, 0, .8);
6814     }
6815     .ideditor .map-control > button.active:hover {
6816         background: #7092ff;
6817     }
6818 }
6819
6820 .ideditor .map-control > button.disabled .icon {
6821     color: rgba(255, 255, 255, 0.5);
6822 }
6823
6824
6825 /* Fullscreen Button (disabled)
6826 ------------------------------------------------------- */
6827 .ideditor div.full-screen {
6828     /*display: inline-block;*/
6829     width: 40px;
6830     margin-right: 10px;
6831     display: none;
6832 }
6833
6834 .ideditor div.full-screen .tooltip {
6835     min-width: 160px;
6836 }
6837
6838 .ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
6839     width: 40px;
6840     height: 40px;
6841     background: transparent;
6842 }
6843 .ideditor div.full-screen > button:active,
6844 .ideditor div.full-screen > button:focus {
6845     background-color: rgba(0, 0, 0, .8);
6846 }
6847 @media (hover: hover) {
6848     .ideditor div.full-screen > button:hover {
6849         background-color: rgba(0, 0, 0, .8);
6850     }
6851 }
6852
6853
6854 /* Map Controls
6855 ------------------------------------------------------- */
6856
6857 /* Zoom in/out buttons */
6858 .ideditor .zoombuttons > button.zoom-in {
6859     border-radius: 4px 0 0 0;
6860 }
6861 .ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
6862     border-radius: 0 4px 0 0;
6863 }
6864
6865 /* Geolocate button */
6866 .ideditor .geolocate-control {
6867     margin-bottom: 10px;
6868 }
6869 .ideditor .geolocate-control > button {
6870     border-radius: 0 0 0 4px;
6871 }
6872 .ideditor[dir='rtl'] .geolocate-control > button {
6873     border-radius: 0 0 4px 0;
6874 }
6875
6876 /* Zoom to selection button */
6877 .ideditor .zoom-to-selection-control .icon {
6878     width: 22px;
6879     height: 22px;
6880 }
6881
6882
6883 /* Background / Map Data / Help Pane buttons
6884 ------------------------------------------------------- */
6885 .ideditor .background-control > button {
6886     border-radius: 4px 0 0 0;
6887 }
6888 .ideditor[dir='rtl'] .background-control > button {
6889     border-radius: 0 4px 0 0;
6890 }
6891
6892 .ideditor .help-control > button {
6893     border-radius: 0 0 0 4px;
6894 }
6895 .ideditor[dir='rtl'] .help-control > button {
6896     border-radius: 0 0 4px 0;
6897 }
6898
6899
6900 /* Background / Map Data Settings
6901 ------------------------------------------------------- */
6902 .ideditor .imagery-faq {
6903     margin-bottom: 10px;
6904     white-space: nowrap;
6905 }
6906
6907 .ideditor .layer-list, .ideditor .controls-list {
6908     margin-bottom: 10px;
6909     border: 1px solid #ccc;
6910     border-radius: 4px;
6911 }
6912
6913 .ideditor .layer-list > li {
6914     background-color: #fff;
6915     color: #7092ff;
6916     position: relative;
6917     display: -webkit-box;
6918     display: -ms-flexbox;
6919     display: flex;
6920 }
6921
6922 .ideditor .layer-list:empty {
6923     display: none;
6924 }
6925
6926 .ideditor .layer-list > li:first-child {
6927     border-radius: 3px 3px 0 0;
6928 }
6929 .ideditor .layer-list > li:last-child {
6930     border-radius: 0 0 3px 3px;
6931 }
6932 .ideditor .layer-list > li:only-child {
6933     border-radius: 3px;
6934 }
6935 .ideditor .layer-list li:not(:last-child) {
6936     border-bottom: 1px solid #ccc;
6937 }
6938 .ideditor .layer-list li:active {
6939     background-color: #ececec;
6940 }
6941 @media (hover: hover) {
6942     .ideditor .layer-list li:hover {
6943         background-color: #ececec;
6944     }
6945 }
6946
6947 .ideditor .layer-list li.active button,
6948 .ideditor .layer-list li.switch button,
6949 .ideditor .layer-list li.active,
6950 .ideditor .layer-list li.switch {
6951     background: #e8ebff;
6952 }
6953
6954 .ideditor .layer-list li.best > div.best {
6955     padding: 5px;
6956     -webkit-box-flex: 0;
6957         -ms-flex: 0 0 auto;
6958             flex: 0 0 auto;
6959     -ms-flex-item-align: center;
6960         align-self: center;
6961 }
6962
6963 .ideditor[dir='rtl'] .list-item-data-browse svg {
6964     -webkit-transform: rotateY(180deg);
6965             transform: rotateY(180deg);
6966 }
6967
6968 /* make sure tooltip fits in map-control panel */
6969 /* if too wide, placement will be wrong the first time it displays */
6970 .ideditor .layer-list li.best .popover-inner {
6971     max-width: 160px;
6972 }
6973
6974 .ideditor .layer-list label {
6975     padding: 5px 10px;
6976     cursor: pointer;
6977     -webkit-box-flex: 1;
6978         -ms-flex: 1 1 auto;
6979             flex: 1 1 auto;
6980     display: -webkit-box;
6981     display: -ms-flexbox;
6982     display: flex;
6983     -webkit-box-align: center;
6984         -ms-flex-align: center;
6985             align-items: center;
6986     overflow: hidden;
6987 }
6988
6989 .ideditor[dir='ltr'] .layer-list .indented label {
6990     padding-left: 24px;
6991 }
6992 .ideditor[dir='rtl'] .layer-list .indented label {
6993     padding-right: 24px;
6994 }
6995
6996 .ideditor .layer-list label > span {
6997     display: block;
6998     overflow: hidden;
6999     width: calc(100% - 20px); /* Ensures radio input width within flexbox */
7000 }
7001
7002 .ideditor .layer-list label span.localized-text {
7003     line-height: 0.95rem;
7004 }
7005
7006 .ideditor .layer-list input.list-item-input {
7007     height: 2.2em;
7008     padding: 0px 4px;
7009     width: 50%;
7010     min-width: 160px;
7011 }
7012
7013 .ideditor .map-data-pane .layer-list button,
7014 .ideditor .background-pane .layer-list button {
7015     border-left: 1px solid #ccc;
7016     border-radius: 0;
7017     padding-left: 4px;
7018     padding-right: 4px;
7019 }
7020 .ideditor[dir='rtl'] .map-data-pane .layer-list button,
7021 .ideditor[dir='rtl'] .background-pane .layer-list button {
7022     border-left: none;
7023     border-right: 1px solid #ccc;
7024 }
7025
7026 .ideditor .map-data-pane .layer-list button .icon,
7027 .ideditor .background-pane .layer-list button .icon {
7028     opacity: 0.5;
7029 }
7030
7031 .ideditor .map-data-pane .layer-list button:last-of-type,
7032 .ideditor .background-pane .layer-list button:last-of-type {
7033     border-radius: 0 3px 3px 0;
7034 }
7035 .ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
7036 .ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
7037     border-radius: 3px 0 0 3px;
7038 }
7039
7040 .ideditor .map-data-pane .vectortile-container .vectortile-header {
7041     padding-bottom: 5px;
7042 }
7043 .ideditor .map-data-pane .vectortile-container .vectortile-footer {
7044     padding-bottom: 10px;
7045 }
7046
7047
7048 /* Issues
7049 ------------------------------------------------------- */
7050 .ideditor .issue {
7051     overflow: hidden;
7052 }
7053 .ideditor .issue .issue-label,
7054 .ideditor .issue-label .issue-text {
7055     width: 100%;
7056     display: -webkit-box;
7057     display: -ms-flexbox;
7058     display: flex;
7059     -webkit-box-orient: horizontal;
7060     -webkit-box-direction: normal;
7061         -ms-flex-flow: row nowrap;
7062             flex-flow: row nowrap;
7063     cursor: pointer;
7064     text-align: initial;
7065     background: none;
7066 }
7067
7068 .ideditor .issue-text .issue-icon {
7069     -webkit-box-flex: 0;
7070         -ms-flex: 0 0 auto;
7071             flex: 0 0 auto;
7072     padding: 2px 3px;
7073 }
7074 .ideditor .issue-text .issue-message {
7075     -webkit-box-flex: 1;
7076         -ms-flex: 1 1 auto;
7077             flex: 1 1 auto;
7078     padding: 4px 5px;
7079 }
7080 .ideditor .issue-label .issue-autofix {
7081     -webkit-box-flex: 0;
7082         -ms-flex: 0 0 auto;
7083             flex: 0 0 auto;
7084     padding: 5px 8px;
7085 }
7086 .ideditor .issue-label .issue-info-button {
7087     height: unset;
7088     width: 32px;
7089     -webkit-box-flex: 0;
7090         -ms-flex: 0 0 auto;
7091             flex: 0 0 auto;
7092     border-left: 1px solid #ccc;
7093     background-color: rgba(0,0,0,0);
7094 }
7095 .ideditor[dir='rtl'] .issue-label .issue-info-button {
7096     border-left: 0;
7097     border-right: 1px solid #ccc;
7098 }
7099 .ideditor .issue-container .issue-label .issue-info-button .icon {
7100     opacity: 0.5;
7101 }
7102 .ideditor .issue-container.active .issue-label .issue-info-button .icon {
7103     opacity: 0.7;
7104 }
7105 .ideditor .issue-label .issue-info-button:last-child {
7106     border-radius: 0 4px 4px 0;
7107 }
7108 .ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
7109     border-radius: 4px 0 0 4px;
7110 }
7111
7112 .ideditor button.autofix.action {
7113     -webkit-box-flex: 0;
7114         -ms-flex: 0 0 20px;
7115             flex: 0 0 20px;
7116     height: 20px;
7117     width: 20px;
7118     background: #7092ff;
7119     color: #fff;
7120 }
7121 .ideditor button.autofix.action:focus,
7122 .ideditor button.autofix.action:active,
7123 .ideditor button.autofix.action.active {
7124     background: #597be7;
7125 }
7126 @media (hover: hover) {
7127     .ideditor button.autofix.action:hover {
7128         background: #597be7;
7129     }
7130 }
7131
7132 /* fix all */
7133 .ideditor .autofix-all {
7134     display: -webkit-box;
7135     display: -ms-flexbox;
7136     display: flex;
7137     -webkit-box-orient: horizontal;
7138     -webkit-box-direction: normal;
7139         -ms-flex-flow: row nowrap;
7140             flex-flow: row nowrap;
7141     -webkit-box-pack: end;
7142         -ms-flex-pack: end;
7143             justify-content: flex-end;
7144     margin-top: -25px;
7145     padding-bottom: 5px;
7146 }
7147 .ideditor .autofix-all-link-text {
7148     padding: 0;
7149 }
7150 .ideditor .autofix-all-link-icon svg {
7151     margin: 0 9px;
7152     background: currentColor;
7153     border-radius: 4px;
7154 }
7155 .ideditor .autofix-all-link-icon svg use {
7156     color: #fff;
7157 }
7158
7159 /* warning styles */
7160 .ideditor .warnings-list,
7161 .ideditor .warnings-list *,
7162 .ideditor .issue-container.active .issue.severity-warning,
7163 .ideditor .issue-container.active .issue.severity-warning * {
7164     border-color: #fb2;
7165 }
7166
7167 .ideditor .warnings-list .issue.severity-warning .issue-label,
7168 .ideditor .issue.severity-warning .issue-fix-list,
7169 .ideditor .warning-section {
7170     background: #ffc;
7171 }
7172
7173 .ideditor .issue-container.active .issue.severity-warning .issue-label {
7174     background: #ffa;
7175 }
7176
7177 .ideditor .issue.severity-warning .issue-icon {
7178     color: #f90;
7179 }
7180
7181 .ideditor .issue.severity-warning .issue-fix-item button.actionable,
7182 .ideditor .issue-container.active .issue.severity-warning .issue-info-button {
7183     color: #b15500;
7184     fill: #b15500;
7185 }
7186 .ideditor .warnings-list .issue.severity-warning .issue-label:active,
7187 .ideditor .warnings-list .issue.severity-warning .issue-label:focus,
7188 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7189 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
7190     background: #ff8;
7191 }
7192 .ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
7193 .ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
7194 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
7195 .ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
7196     color: #7f3d00;
7197     fill: #7f3d00;
7198 }
7199 @media (hover: hover) {
7200     .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
7201     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
7202         background: #ff8;
7203     }
7204     .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
7205     .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
7206         color: #7f3d00;
7207         fill: #7f3d00;
7208     }
7209 }
7210
7211
7212 /* error styles */
7213 .ideditor .errors-list,
7214 .ideditor .errors-list *,
7215 .ideditor .issue-container.active .issue.severity-error,
7216 .ideditor .issue-container.active .issue.severity-error * {
7217     border-color: #f77;
7218 }
7219
7220 .ideditor .errors-list .issue.severity-error .issue-label,
7221 .ideditor .issue.severity-error .issue-fix-list,
7222 .ideditor .error-section {
7223     background: #ffd6d6;
7224 }
7225
7226 .ideditor .issue-container.active .issue.severity-error .issue-label {
7227     background: #ffc6c6;
7228 }
7229
7230 .ideditor .issue.severity-error .issue-fix-item button.actionable,
7231 .ideditor .issue-container.active .issue.severity-error .issue-info-button {
7232     color: #b91201;
7233     fill: #b91201;
7234 }
7235 .ideditor .issue.severity-error .issue-icon {
7236     color: #dd1400;
7237 }
7238 .ideditor .errors-list .issue.severity-error .issue-label:active,
7239 .ideditor .errors-list .issue.severity-error .issue-label:focus,
7240 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7241 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
7242     background: #ffb6b6;
7243 }
7244 .ideditor .issue.severity-error .issue-fix-item button.actionable:active,
7245 .ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
7246 .ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
7247 .ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
7248     color: #840c00;
7249     fill: #840c00;
7250 }
7251 @media (hover: hover) {
7252     .ideditor .errors-list .issue.severity-error .issue-label:hover,
7253     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
7254         background: #ffb6b6;
7255     }
7256     .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
7257     .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
7258         color: #840c00;
7259         fill: #840c00;
7260     }
7261 }
7262
7263
7264 /* Issues Pane */
7265 .ideditor .issues-options-container {
7266     display: table;
7267 }
7268 .ideditor .issues-option {
7269     display: table-row;
7270 }
7271 .ideditor .issues-option-title {
7272     display: table-cell;
7273     font-weight: bold;
7274     padding-right: 10px;
7275 }
7276 .ideditor[dir='rtl'] .issues-option-title {
7277     padding-right: 0;
7278     padding-left: 10px;
7279 }
7280 .ideditor .issues-option label {
7281     display: table-cell;
7282     padding: 0 10px;
7283     white-space: nowrap;
7284 }
7285
7286 .ideditor .layer-list.issues-list li.issue {
7287     border-color: inherit;    /* override .layer-list styles */
7288     color: inherit;
7289     height: unset;
7290 }
7291
7292 .ideditor .layer-list.issue-rules-list,
7293 .ideditor .layer-list.issues-list,
7294 .ideditor .layer-list.layer-feature-list {
7295     margin-bottom: 0;
7296 }
7297 .ideditor .section-footer {
7298     display: -webkit-box;
7299     display: -ms-flexbox;
7300     display: flex;
7301     -webkit-box-orient: horizontal;
7302     -webkit-box-direction: normal;
7303         -ms-flex-flow: row nowrap;
7304             flex-flow: row nowrap;
7305     -webkit-box-pack: end;
7306         -ms-flex-pack: end;
7307             justify-content: flex-end;
7308     height: 30px;
7309 }
7310 .ideditor .section-footer a {
7311     padding: 5px;
7312 }
7313
7314 .ideditor .section-issues-status .box {
7315     border-radius: 4px;
7316     border: 1px solid #72d979;
7317     background: #c6ffca;
7318     padding: 5px !important;
7319     display: -webkit-box;
7320     display: -ms-flexbox;
7321     display: flex;
7322 }
7323 .ideditor .section-issues-status .icon {
7324     color: #05ac10;
7325 }
7326
7327 .ideditor input.square-degrees-input {
7328     padding: 2px !important; /* important needed for rtl */
7329     width: 3em;
7330     height: 2em;
7331     text-align: center;
7332     background: rgba(0,0,0,0);
7333     color: currentColor;
7334 }
7335
7336
7337 /* Entity Issues List */
7338 .ideditor .section-entity-issues .issue-container .issue {
7339     border-radius: 4px;
7340     border: 1px solid #ccc;
7341     background: #f6f6f6;
7342 }
7343 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
7344 .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
7345 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
7346 .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
7347     background: #f1f1f1;
7348 }
7349 @media (hover: hover) {
7350     .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
7351     .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
7352         background: #f1f1f1;
7353     }
7354 }
7355 .ideditor .section-entity-issues .issue .issue-label .issue-text {
7356     padding-right: 10px;
7357 }
7358 .ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
7359     padding-right: unset;
7360     padding-left: 10px;
7361 }
7362
7363 .ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
7364     font-weight: bold;
7365 }
7366 .ideditor .section-entity-issues .issue-container:not(:last-of-type) {
7367     margin-bottom: 5px;
7368 }
7369 .ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
7370     margin-top: 10px;
7371 }
7372 .ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
7373     margin-bottom: 10px;
7374 }
7375
7376 /* fixes */
7377 .ideditor .section-entity-issues .issue-fix-list {
7378     border-top: 1px solid;
7379     border-color: inherit;
7380 }
7381 .ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
7382     display: none;
7383 }
7384
7385 .ideditor li.issue-fix-item button {
7386     padding: 2px 10px 2px 20px;
7387     background: transparent;
7388     width: 100%;
7389     text-align: initial;
7390 }
7391 .ideditor[dir='rtl'] li.issue-fix-item button {
7392     padding: 2px 20px 2px 10px;
7393 }
7394 .ideditor li.issue-fix-item:first-of-type button {
7395     padding-top: 5px;
7396 }
7397 .ideditor li.issue-fix-item:last-of-type button {
7398     padding-bottom: 5px;
7399 }
7400
7401 .ideditor li.issue-fix-item button .fix-message {
7402     padding: 0 10px;
7403     vertical-align: middle;
7404 }
7405
7406 .ideditor li.issue-fix-item button.actionable {
7407     cursor: pointer;
7408 }
7409 .ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
7410     color: #555;
7411     fill: #555;
7412 }
7413
7414 .ideditor .issue-container:not(.active) ul.issue-fix-list {
7415     display: none;
7416 }
7417 .ideditor .issue-container:not(.active) .issue-info {
7418     display: none;
7419 }
7420
7421 .ideditor .issue-info {
7422     -webkit-box-flex: 1;
7423         -ms-flex: 1 1 auto;
7424             flex: 1 1 auto;
7425     width: 100%;
7426     overflow: hidden;
7427     display: none;
7428     padding: 10px 0;
7429 }
7430 .ideditor .issue-info.expanded {
7431     display: inline-block;
7432 }
7433
7434 .ideditor .issue-info .issue-reference {
7435     margin-bottom: 10px;
7436 }
7437 .ideditor .issue-info .tagDiff-table {
7438     min-width: 60%;
7439     width: unset;
7440     border: 1px solid #ccc;
7441 }
7442 .ideditor .issue-info .tagDiff-row {
7443     border: 1px solid #ccc;
7444 }
7445 .ideditor .issue-info .tagDiff-cell {
7446     padding: 2px 10px;
7447     font-family: monospace;
7448     font-size: 10px;
7449     border: 1px solid #ccc;
7450 }
7451 .ideditor .issue-info .tagDiff-cell-add {
7452     background: #dfd;
7453 }
7454 .ideditor .issue-info .tagDiff-cell-remove {
7455     background: #fdd;
7456 }
7457
7458
7459 /* Background - Display Options Sliders
7460 ------------------------------------------------------- */
7461 .ideditor .display-options-container {
7462     padding: 10px;
7463 }
7464
7465 .ideditor .display-options-container label {
7466     padding-bottom: 0;
7467     padding-top: 10px;
7468 }
7469
7470 .ideditor .display-options-container label span {
7471     font-weight: bold;
7472     margin: 5px;
7473 }
7474
7475 .ideditor .display-control .control-wrap {
7476     display: -webkit-box;
7477     display: -ms-flexbox;
7478     display: flex;
7479     -webkit-box-align: center;
7480         -ms-flex-align: center;
7481             align-items: center;
7482     width: 100%;
7483 }
7484 .ideditor .display-control .display-option-input {
7485     height: 20px;
7486     -webkit-box-flex: 1;
7487         -ms-flex: 1 1 100%;
7488             flex: 1 1 100%;
7489 }
7490
7491 .ideditor .display-control button {
7492     height: 30px;
7493     width: 30px;
7494     margin-left: 5px;
7495     margin-right: 0px;
7496     vertical-align: text-bottom;
7497     border-radius: 4px;
7498     -webkit-box-flex: 0;
7499         -ms-flex: 0 0 auto;
7500             flex: 0 0 auto;
7501 }
7502 .ideditor[dir='rtl'] .display-control button {
7503     margin-left: 0px;
7504     margin-right: 5px;
7505 }
7506
7507
7508 /* Background - Adjust Alignment
7509 ------------------------------------------------------- */
7510 .ideditor .background-pane .nudge-container {
7511     border: 1px solid #ccc;
7512     border-radius: 4px;
7513     padding: 10px;
7514     position: relative;
7515 }
7516
7517 .ideditor .nudge-container .nudge-controls-wrap {
7518     position: relative;
7519     width: 100%;
7520     overflow: hidden;
7521 }
7522
7523 .ideditor .nudge-container .nudge-outer-rect {
7524     background-color: #eee;
7525     border: 1px solid #ccc;
7526     border-radius: 2px;
7527     padding: 20px 0;
7528     display: -webkit-box;
7529     display: -ms-flexbox;
7530     display: flex;
7531     -webkit-box-pack: center;
7532         -ms-flex-pack: center;
7533             justify-content: center;
7534     -webkit-box-align: center;
7535         -ms-flex-align: center;
7536             align-items: center;
7537     margin: 45px;
7538     cursor: move;
7539     /* prevent scrolling pane while dragging on touchscreen */
7540     -ms-touch-action: none;
7541         touch-action: none;
7542     /* disable drag-to-select */
7543     -webkit-user-select: none;
7544        -moz-user-select: none;
7545         -ms-user-select: none;
7546             user-select: none;
7547     position: relative;
7548 }
7549
7550 .ideditor .nudge-container .nudge-inner-rect {
7551     background-color: #fff;
7552     border: 1px solid #ccc;
7553     border-radius: 2px;
7554     width: 65%;
7555     min-height: 20px;
7556 }
7557
7558 .ideditor .nudge-container .nudge::after {
7559     content: '';
7560     display: block;
7561     position: absolute;
7562     margin: auto;
7563     left: 0; right: 0; top: 0; bottom: 0;
7564     height: 0;
7565     width: 0;
7566 }
7567
7568 .ideditor .nudge-container input {
7569     width: 100%;
7570     padding: 2px;
7571     text-align: center;
7572     border: 0;
7573 }
7574
7575 .ideditor .nudge-container input.error {
7576     border: 1px solid #ff7878;
7577     border-radius: 2px;
7578     background: #ffb;
7579 }
7580
7581 .ideditor .nudge-container button {
7582     position: absolute;
7583     height: 40px;
7584     width: 40px;
7585 }
7586 .ideditor .nudge-container button.right,
7587 .ideditor .nudge-container button.left {
7588     top: 0;
7589     bottom: 0;
7590     margin-top: auto;
7591     margin-bottom: auto;
7592     vertical-align: middle;
7593 }
7594 .ideditor .nudge-container button.right {
7595     right: 0;
7596 }
7597 .ideditor .nudge-container button.left {
7598     left: 0;
7599 }
7600 .ideditor .nudge-container button.top,
7601 .ideditor .nudge-container button.bottom {
7602     left: 0;
7603     right: 0;
7604     margin-left: auto;
7605     margin-right: auto;
7606 }
7607 .ideditor .nudge-container button.top {
7608     top: 0;
7609 }
7610 .ideditor .nudge-container button.bottom {
7611     bottom: 0;
7612 }
7613
7614 .ideditor .nudge-container button.nudge-reset {
7615     right: 0;
7616     bottom: 0;
7617 }
7618
7619 .ideditor .nudge-surface {
7620    position: absolute;
7621    z-index: 5000;
7622    left: 0;
7623    top: 0;
7624    width: 100%;
7625    height: 100%;
7626    background-color: transparent;
7627    cursor: move;
7628 }
7629
7630 .ideditor .background-pane .nudge.right::after {
7631     border-top: 5px solid transparent;
7632     border-bottom: 5px solid transparent;
7633     border-left: 5px solid #222;
7634 }
7635
7636 .ideditor .background-pane .nudge.left::after {
7637     border-top: 5px solid transparent;
7638     border-bottom: 5px solid transparent;
7639     border-right: 5px solid #222;
7640 }
7641
7642 .ideditor .background-pane .nudge.top::after {
7643     border-right: 5px solid transparent;
7644     border-left: 5px solid transparent;
7645     border-bottom: 5px solid #222;
7646 }
7647
7648 .ideditor .background-pane .nudge.bottom::after {
7649     border-right: 5px solid transparent;
7650     border-left: 5px solid transparent;
7651     border-top: 5px solid #222;
7652 }
7653
7654
7655 /* Side Panes - Background / Map Data / Help
7656 ------------------------------------------------------- */
7657 .ideditor .map-panes {
7658     -webkit-box-flex: 0;
7659         -ms-flex: 0 1 auto;
7660             flex: 0 1 auto;
7661     position: relative;
7662     height: 100%;
7663     max-width: 100%;
7664 }
7665 .ideditor .map-pane {
7666     position: relative;
7667     top: 0;
7668     width: 400px;
7669     max-width: 100%;
7670     height: 100%;
7671     z-index: 10;
7672     display: -webkit-box;
7673     display: -ms-flexbox;
7674     display: flex;
7675     -webkit-box-orient: vertical;
7676     -webkit-box-direction: normal;
7677         -ms-flex-direction: column;
7678             flex-direction: column;
7679 }
7680
7681 .ideditor .map-pane.help-pane {
7682     width: 600px;
7683 }
7684
7685 .ideditor .pane-heading {
7686     display: -webkit-box;
7687     display: -ms-flexbox;
7688     display: flex;
7689     -webkit-box-orient: horizontal;
7690     -webkit-box-direction: normal;
7691         -ms-flex-flow: row nowrap;
7692             flex-flow: row nowrap;
7693     -webkit-box-pack: justify;
7694         -ms-flex-pack: justify;
7695             justify-content: space-between;
7696     border-bottom: 1px solid #ccc;
7697     -webkit-box-flex: 0;
7698         -ms-flex: 0 0 auto;
7699             flex: 0 0 auto;
7700 }
7701
7702 .ideditor .pane-heading h2 {
7703     margin: 14px 20px;
7704 }
7705
7706 .ideditor .pane-heading button {
7707     width: 40px;
7708     border-radius: 0;
7709 }
7710
7711 .ideditor .pane-content {
7712     height: 100%;
7713     padding: 10px 50px 20px 20px;
7714     overflow-x: hidden;
7715     overflow-y: scroll;
7716     position: relative;
7717 }
7718 .ideditor[dir='rtl'] .pane-content {
7719     padding: 10px 20px 20px 50px;
7720 }
7721
7722 .ideditor .help-pane .pane-content > div {
7723     padding-bottom: 15px;
7724 }
7725
7726
7727 /* Help
7728 ------------------------------------------------------- */
7729 .ideditor .help-pane p {
7730     font-size: 15px;
7731     margin-bottom: 20px;
7732 }
7733
7734 .ideditor .help-pane .left-content .icon.inline,
7735 .ideditor .curtain-tooltip .icon.inline {
7736     margin-right: 0;
7737     margin-left: 0;
7738     height: 1.34em;
7739     width: 1.34em;
7740 }
7741
7742 .ideditor .help-pane .toc {
7743     width: 100%;
7744     max-width: 200px;
7745     float: right;
7746     margin-left: 20px;
7747     margin-bottom: 20px;
7748     padding-left: 5px;
7749 }
7750
7751 .ideditor .help-pane .toc li a,
7752 .ideditor .help-pane .nav a {
7753     display: block;
7754     border: 1px solid #ccc;
7755     padding: 5px 10px;
7756 }
7757
7758 .ideditor .help-pane .toc li a {
7759     border-bottom: 0;
7760 }
7761 .ideditor .help-pane .toc li a:focus,
7762 .ideditor .help-pane .nav a:focus,
7763 .ideditor .help-pane .toc li a:active,
7764 .ideditor .help-pane .nav a:active {
7765     background: #ececec;
7766 }
7767 @media (hover: hover) {
7768     .ideditor .help-pane .toc li a:hover,
7769     .ideditor .help-pane .nav a:hover {
7770         background: #ececec;
7771     }
7772 }
7773
7774 .ideditor .help-pane .toc li a.selected {
7775     background: #e8ebff;
7776 }
7777
7778 .ideditor .help-pane .toc li:first-child a {
7779     border-radius: 4px 4px 0 0;
7780 }
7781
7782 .ideditor .help-pane .toc li:nth-last-child(3) a {
7783     border-bottom: 1px solid #ccc;
7784     border-radius: 0 0 4px 4px
7785 }
7786
7787 .ideditor .help-pane .toc li.shortcuts a,
7788 .ideditor .help-pane .toc li.walkthrough a {
7789     overflow: hidden;
7790     margin-top: 10px;
7791     border-bottom: 1px solid #ccc;
7792     border-radius: 4px;
7793 }
7794
7795 .ideditor .help-pane .toc li.walkthrough a {
7796     text-align: center;
7797 }
7798
7799 .ideditor .help-pane .nav {
7800     position: relative;
7801     padding-bottom: 30px;
7802 }
7803
7804 .ideditor .help-pane .nav a {
7805     float: left;
7806     width: 50%;
7807     text-align: center;
7808 }
7809
7810 .ideditor .help-pane .nav a:first-child {
7811     border-radius: 4px 0 0 4px;
7812 }
7813
7814 .ideditor .help-pane .nav a:last-child:not(:only-child) {
7815     border-radius: 0 4px 4px 0;
7816     border-left: 0;
7817 }
7818
7819 .ideditor .help-pane .nav a:only-child {
7820     width: 100%;
7821     border-radius: 4px;
7822 }
7823
7824
7825 /* Inspector (hover styles)
7826 ------------------------------------------------------- */
7827 .ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
7828 .ideditor .inspector-hover .form-field-input-wrap .label,
7829 .ideditor .inspector-hover .form-field-input-multicombo .chiplist,
7830 .ideditor .inspector-hover .form-field-button,
7831 .ideditor .inspector-hover .structure-extras-wrap,
7832 .ideditor .inspector-hover .comments-container .comment,
7833 .ideditor .inspector-hover button,
7834 .ideditor .inspector-hover input,
7835 .ideditor .inspector-hover textarea,
7836 .ideditor .inspector-hover label {
7837     background: #ececec;
7838 }
7839 .ideditor .inspector-hover .preset-list-button,
7840 .ideditor .inspector-hover .tag-row input {
7841     background: #f6f6f6;
7842 }
7843
7844 .ideditor .inspector-hover a,
7845 .ideditor .inspector-hover .form-field-input-multicombo .chip,
7846 .ideditor .inspector-hover .form-field-input-check span,
7847 .ideditor .inspector-hover .section-entity-issues .issue .icon {
7848     color: #666;
7849 }
7850
7851 .ideditor .inspector-hover .form-field-input-multicombo .chip {
7852     background: #eee;
7853     border: 1px solid #ccc;
7854 }
7855
7856 /* scrollbars only when necessary*/
7857 .ideditor .inspector-hover div {
7858     overflow-x: visible;
7859     overflow-y: auto;
7860 }
7861
7862 /* hide and remove from layout */
7863 .ideditor .inspector-hidden,
7864 .ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
7865 .ideditor .inspector-hover label input[type="checkbox"],
7866 .ideditor .inspector-hover label input[type="radio"],
7867 .ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
7868 .ideditor .inspector-hover .form-field-input-radio label,
7869 .ideditor .inspector-hover .form-field-input-radio label span,
7870 .ideditor .inspector-hover .form-field-input-radio label.remove .icon,
7871 .ideditor .inspector-hover .add-row,
7872 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
7873 .ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
7874     display: none;
7875 }
7876
7877 /* hide but preserve in layout */
7878 .ideditor .inspector-hover .combobox-caret,
7879 .ideditor .inspector-hover .header button,
7880 .ideditor .inspector-hover .quick-links,
7881 .ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
7882 .ideditor .inspector-hover .hide-toggle:before,
7883 .ideditor .inspector-hover .more-fields,
7884 .ideditor .inspector-hover .field-label button,
7885 .ideditor .inspector-hover .tag-row button,
7886 .ideditor .inspector-hover .footer * {
7887     opacity: 0;
7888 }
7889
7890 /* Unstyle the active entity issue on hover */
7891 .ideditor .inspector-hover .section-entity-issues .issue-container.active {
7892     margin-top: 1px;
7893     margin-bottom: 1px;
7894 }
7895 .ideditor .inspector-hover .section-entity-issues .issue-container * {
7896     border-color: #ccc !important;
7897 }
7898 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
7899     border-bottom: 0;
7900 }
7901 .ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
7902     font-weight: normal;
7903 }
7904
7905
7906 /* Styles for raw tag inspector on hover */
7907 .ideditor .inspector-hover .tag-row .key-wrap,
7908 .ideditor .inspector-hover .tag-row .value-wrap {
7909     height: 31px;
7910 }
7911
7912 .ideditor .inspector-hover .tag-row:first-child input.value {
7913     border-top-right-radius: 4px;
7914 }
7915 .ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
7916     border-top-right-radius: 0;
7917     border-top-left-radius: 4px;
7918 }
7919
7920 .ideditor .inspector-hover .tag-row:last-child input.value {
7921     border-bottom-right-radius: 4px;
7922 }
7923 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
7924     border-bottom-right-radius: 0;
7925     border-bottom-left-radius: 4px;
7926 }
7927
7928 .ideditor .inspector-hover .tag-row:last-child input.key {
7929     border-bottom-left-radius: 4px;
7930 }
7931 .ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
7932     border-bottom-left-radius: 0;
7933     border-bottom-right-radius: 4px;
7934 }
7935
7936 .ideditor .inspector-hover .more-fields {
7937     max-height: 0;
7938     margin-bottom: -10px;
7939 }
7940
7941 /* Unstyle button fields */
7942 .ideditor .inspector-hover .form-field-input-radio label.active,
7943 .ideditor .inspector-hover .entity-editor-pane a.hide-toggle {
7944     opacity: 1;
7945     background-color: transparent;
7946     color: #666;
7947     padding-left: 0;
7948     border-width: 0;
7949 }
7950 .ideditor .inspector-hover .form-field-input-radio button.active {
7951     padding-left: 10px;
7952 }
7953
7954 /* Show placeholder on hover for radio buttons */
7955 .ideditor .inspector-hover .form-field-input-radio {
7956     border: 1px solid #ccc;
7957     border-top: 0;
7958     border-radius: 0 0 4px 4px;
7959 }
7960 .ideditor .inspector-hover .form-field-input-radio .placeholder {
7961     opacity: 1;
7962     color: #666;
7963     padding: 5px 10px;
7964     width: 100%;
7965     height: auto;
7966     border: 0;
7967 }
7968 .ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
7969     border: 0;
7970 }
7971
7972
7973 /* Raster Background Tiles
7974 ------------------------------------------------------- */
7975 .ideditor img.tile {
7976     position: absolute;
7977     -webkit-transform-origin: 0 0;
7978         -ms-transform-origin: 0 0;
7979             transform-origin: 0 0;
7980
7981     -webkit-user-select: none;
7982
7983        -moz-user-select: none;
7984
7985         -ms-user-select: none;
7986
7987             user-select: none;
7988
7989     pointer-events: none;
7990
7991     -webkit-user-drag: none;
7992
7993     opacity: 0;
7994
7995     -webkit-transition: opacity 200ms linear;
7996
7997     -o-transition: opacity 200ms linear;
7998
7999     transition: opacity 200ms linear;
8000 }
8001
8002 .ideditor img.tile-loaded {
8003     opacity: 1;
8004 }
8005
8006 .ideditor img.tile-removing {
8007     opacity: 0;
8008 }
8009
8010 .ideditor .tile-label-debug {
8011     font-size: 10px;
8012     background: rgba(0, 0, 0, 0.7);
8013     color: #fff;
8014     position: absolute;
8015     text-align: center;
8016     padding: 5px;
8017     border-radius: 3px;
8018     z-index: 2;
8019     margin-left: -70px;
8020     margin-top: -20px;
8021
8022     -webkit-transform-origin: 0 0;
8023
8024         -ms-transform-origin: 0 0;
8025
8026             transform-origin: 0 0;
8027
8028     -webkit-user-select: none;
8029
8030        -moz-user-select: none;
8031
8032         -ms-user-select: none;
8033
8034             user-select: none;
8035 }
8036
8037 .ideditor img.tile-debug {
8038     outline: 1px solid red;
8039 }
8040
8041
8042 /* Map
8043 ------------------------------------------------------- */
8044 .ideditor .main-map {
8045     position: absolute;
8046     top: 0;
8047     left: 0;
8048     right: 0;
8049     bottom: 0;
8050     overflow: hidden;
8051     height: 100%;
8052     width: 100%;
8053     background: #000;
8054     -webkit-user-select: none;
8055        -moz-user-select: none;
8056         -ms-user-select: none;
8057             user-select: none;
8058     -ms-touch-action: none;
8059         touch-action: none;
8060     -webkit-touch-callout: none;
8061 }
8062 .ideditor .main-map * {
8063     -ms-touch-action: none;
8064         touch-action: none;
8065 }
8066
8067 .ideditor .supersurface {
8068     -webkit-transform-origin: 0 0;
8069         -ms-transform-origin: 0 0;
8070             transform-origin: 0 0;
8071 }
8072
8073 .ideditor .supersurface, .ideditor .layer {
8074     position: absolute;
8075     top: 0;
8076     left: 0;
8077     right: 0;
8078     bottom: 0;
8079 }
8080
8081
8082 /* Map-In-Map
8083 ------------------------------------------------------- */
8084 .ideditor .map-in-map {
8085     position: absolute;
8086     overflow: hidden;
8087     top: 10px;
8088     width: 200px;
8089     height: 150px;
8090     z-index: 2;
8091     background: #000;
8092     border: #aaa 1px solid;
8093     -webkit-box-shadow: 0 0 2em black;
8094             box-shadow: 0 0 2em black;
8095 }
8096 .ideditor[dir='ltr'] .map-in-map {
8097     left: 10px;
8098 }
8099 .ideditor[dir='rtl'] .map-in-map {
8100     right: 10px;
8101 }
8102
8103 .ideditor .map-in-map-tiles {
8104     -webkit-transform-origin: 0 0;
8105         -ms-transform-origin: 0 0;
8106             transform-origin: 0 0;
8107     -webkit-user-select: none;
8108        -moz-user-select: none;
8109         -ms-user-select: none;
8110             user-select: none;
8111 }
8112
8113 .ideditor .map-in-map-viewport,
8114 .ideditor .map-in-map-data {
8115     top: 0;
8116     left: 0;
8117     overflow: hidden;
8118     height: 100%;
8119     width: 100%;
8120 }
8121
8122 .ideditor .map-in-map-viewport {
8123     position: absolute;
8124 }
8125
8126 .ideditor .map-in-map-data {
8127     position: relative;
8128     z-index: 10;
8129 }
8130
8131 .ideditor .map-in-map-bbox {
8132     fill: none;
8133     stroke: rgba(255, 255, 0, 0.75);
8134     stroke-width: 1;
8135     shape-rendering: crispEdges;
8136 }
8137
8138 .ideditor .map-in-map-bbox.thick {
8139     stroke-width: 5;
8140 }
8141
8142
8143 /* Debug Data
8144 ------------------------------------------------------- */
8145 .ideditor .debug {
8146     stroke: currentColor;
8147     fill: none;
8148     stroke-width: 2;
8149 }
8150 .ideditor .map-in-map-data .debug {
8151     stroke-width: 1;
8152 }
8153
8154 .ideditor .nocolor { color: rgba(0, 0, 0, 0); }
8155 .ideditor .red     { color: rgba(255, 0, 0, 0.75); }
8156 .ideditor .green   { color: rgba(0, 255, 0, 0.75); }
8157 .ideditor .blue    { color: rgba(176, 176, 255, 0.75); }
8158 .ideditor .yellow  { color: rgba(255, 255, 0, 0.75); }
8159 .ideditor .cyan    { color: rgba(0, 255, 255, 0.75); }
8160 .ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
8161 .ideditor .orange  { color: rgba(255, 153, 0, 0.75); }
8162 .ideditor .pink    { color: rgba(255, 0, 153, 0.75); }
8163 .ideditor .purple  { color: rgba(153, 0, 255, 0.75); }
8164
8165 .ideditor .debug-legend {
8166     position: absolute;
8167     top: 70px;
8168     right: 80px;
8169     padding: 5px;
8170     border-radius: 4px;
8171     pointer-events: none;
8172 }
8173
8174 .ideditor .debug-legend-item {
8175     padding-right: 5px;
8176 }
8177 .ideditor .debug-legend-item:before {
8178     content: "\25A0";
8179     padding: 0 5px;
8180 }
8181
8182
8183 /* Information Panels
8184 ------------------------------------------------------- */
8185 .ideditor .info-panels {
8186     display: -webkit-box;
8187     display: -ms-flexbox;
8188     display: flex;
8189     -webkit-box-orient: horizontal;
8190     -webkit-box-direction: normal;
8191         -ms-flex-flow: row wrap-reverse;
8192             flex-flow: row wrap-reverse;
8193     -webkit-box-pack: end;
8194         -ms-flex-pack: end;
8195             justify-content: flex-end;
8196     width: 100%;
8197     z-index: 1;
8198     -ms-user-select: element;
8199     pointer-events: none;
8200     overflow: hidden;
8201 }
8202
8203 .ideditor .panel-container h1,
8204 .ideditor .panel-container h2,
8205 .ideditor .panel-container h3,
8206 .ideditor .panel-container h4,
8207 .ideditor .panel-container h5 {
8208     display: inline-block;
8209     margin-bottom: 0;
8210 }
8211
8212 .ideditor .panel-container h1,
8213 .ideditor .panel-container h2,
8214 .ideditor .panel-container h3 {
8215     color: #ff8;
8216 }
8217
8218 .ideditor .panel-container {
8219     -webkit-box-flex: 0;
8220         -ms-flex: 0 0 auto;
8221             flex: 0 0 auto;
8222     margin: 0 2px 2px 0;
8223     border-radius: 4px;
8224     border: 1px solid rgba(0, 0, 0, 0.75);
8225     padding-bottom: 10px;
8226     width: 250px;
8227     max-width: 100%;
8228     pointer-events: auto;
8229 }
8230
8231 .ideditor .panel-container .panel-title {
8232     border-radius: 4px 4px 0 0;
8233 }
8234
8235 .ideditor .panel-title {
8236     padding: 5px 10px;
8237     display: -webkit-box;
8238     display: -ms-flexbox;
8239     display: flex;
8240     -webkit-box-pack: justify;
8241         -ms-flex-pack: justify;
8242             justify-content: space-between;
8243 }
8244
8245 .ideditor .panel-title button.close {
8246     padding: 2px;
8247     background: none;
8248     color: #ddd;
8249 }
8250 .ideditor[dir='rtl'] .panel-title button.close {
8251     float: left;
8252 }
8253 .ideditor .panel-title button.close:focus,
8254 .ideditor .panel-title button.close:active {
8255     color: #fff;
8256 }
8257 @media (hover: hover) {
8258     .ideditor .panel-title button.close:hover {
8259         color: #fff;
8260     }
8261 }
8262 .ideditor .panel-title button.close .icon {
8263     height: 20px;
8264     width: 16px;
8265 }
8266
8267 .ideditor .panel-content {
8268     padding: 5px 10px;
8269     position: relative;
8270 }
8271
8272 .ideditor .panel-content ul:empty {
8273     display: none;
8274 }
8275
8276 .ideditor .panel-content li span:not(.localized-text) {
8277     display: inline-block;
8278     white-space: nowrap;
8279     margin: 0 8px;
8280 }
8281
8282 .ideditor .panel-content .button {
8283     display: inline-block;
8284     background: #7092ff;
8285     border-radius: 2px;
8286     padding: 0 4px;
8287     margin-top: 10px;
8288     margin-right: 10px;
8289     color: #fff;
8290 }
8291 .ideditor[dir='rtl'] .panel-content .button {
8292     margin-right: auto;
8293     margin-left: 10px;
8294 }
8295
8296 .ideditor .panel-content-history .links a {
8297     margin-left: 8px;
8298 }
8299 .ideditor[dir='rtl'] .panel-content-history .links a {
8300     margin-left: auto;
8301     margin-right: 8px;
8302 }
8303 .ideditor .panel-content-history h4 {
8304     padding-bottom: 0;
8305 }
8306 .ideditor .panel-content-location .location-info {
8307     margin-top: 10px;
8308 }
8309
8310
8311 /* Map Footer
8312 ------------------------------------------------------- */
8313 .ideditor .map-footer {
8314     width: 100%;
8315     position: relative;
8316     border-radius: 0;
8317     pointer-events: none;
8318     display: -webkit-box;
8319     display: -ms-flexbox;
8320     display: flex;
8321     -webkit-box-orient: vertical;
8322     -webkit-box-direction: normal;
8323         -ms-flex-direction: column;
8324             flex-direction: column;
8325     -ms-user-select: element;
8326     -webkit-box-flex: 0;
8327         -ms-flex: 0 0 auto;
8328             flex: 0 0 auto;
8329 }
8330
8331 .ideditor .map-footer-bar {
8332     pointer-events: all;
8333     display: block;
8334     height: 2.5em;
8335     position: relative;
8336 }
8337
8338 .ideditor .main-footer-wrap,
8339 .ideditor .flash-wrap {
8340     display: -webkit-box;
8341     display: -ms-flexbox;
8342     display: flex;
8343     -webkit-box-flex: 0;
8344         -ms-flex: 0 0 100%;
8345             flex: 0 0 100%;
8346     -webkit-box-orient: horizontal;
8347     -webkit-box-direction: normal;
8348         -ms-flex-flow: row nowrap;
8349             flex-flow: row nowrap;
8350     -webkit-box-pack: justify;
8351         -ms-flex-pack: justify;
8352             justify-content: space-between;
8353     height: 100%;
8354     position: absolute;
8355     right: 0;
8356     left: 0;
8357 }
8358
8359 .ideditor .footer-show {
8360     bottom: 0px;
8361     -webkit-transition: bottom 75ms linear;
8362     -o-transition: bottom 75ms linear;
8363     transition: bottom 75ms linear;
8364 }
8365
8366 .ideditor .footer-hide {
8367     bottom: -100%;
8368     -webkit-transition: bottom 75ms linear;
8369     -o-transition: bottom 75ms linear;
8370     transition: bottom 75ms linear;
8371 }
8372
8373
8374 /* Attribution
8375 ------------------------------------------------------- */
8376 .ideditor .attribution-wrap {
8377     position: absolute;
8378     bottom: 5px;
8379     left: 5px;
8380     right: 5px;
8381     display: -webkit-box;
8382     display: -ms-flexbox;
8383     display: flex;
8384     -webkit-box-pack: justify;
8385         -ms-flex-pack: justify;
8386             justify-content: space-between;
8387     -webkit-box-align: end;
8388         -ms-flex-align: end;
8389             align-items: flex-end;
8390     z-index: 0;
8391     pointer-events: none;
8392 }
8393
8394 .ideditor .attribution-wrap > * {
8395     pointer-events: auto;
8396 }
8397
8398 .ideditor .attribution-wrap .base-layer-attribution,
8399 .ideditor .attribution-wrap .overlay-layer-attribution {
8400     color: #ccc;
8401     font-size: 10px;
8402 }
8403 .ideditor .attribution-wrap .overlay-layer-attribution {
8404     text-align: right;
8405 }
8406
8407 .ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
8408     content: '; ';
8409 }
8410
8411 .ideditor .attribution-wrap .attribution a,
8412 .ideditor .attribution-wrap .attribution a:visited {
8413     color: #ccf;
8414 }
8415 .ideditor .attribution-wrap .attribution a:focus,
8416 .ideditor .attribution-wrap .attribution a:hover {
8417     color: #aaf;
8418 }
8419 @media (hover: hover) {
8420     .ideditor .attribution-wrap .attribution a:hover {
8421         color: #aaf;
8422     }
8423 }
8424
8425 .ideditor .attribution-wrap .attribution .source-image {
8426     height: 20px;
8427     vertical-align: middle;
8428     border-radius: 3px;
8429 }
8430
8431 .ideditor .attribution-wrap .attribution span {
8432     margin: 0 3px;
8433 }
8434
8435
8436 /* Footer - Flash messages
8437 ------------------------------------------------------- */
8438 .ideditor .flash-content {
8439     display: -webkit-box;
8440     display: -ms-flexbox;
8441     display: flex;
8442     -webkit-box-flex: 1;
8443         -ms-flex: 1 0 auto;
8444             flex: 1 0 auto;
8445     -webkit-box-orient: horizontal;
8446     -webkit-box-direction: normal;
8447         -ms-flex-flow: row nowrap;
8448             flex-flow: row nowrap;
8449     -webkit-box-align: center;
8450         -ms-flex-align: center;
8451             align-items: center;
8452     padding: 2px;
8453 }
8454
8455 .ideditor .flash-icon {
8456     -webkit-box-flex: 0;
8457         -ms-flex: 0 0 auto;
8458             flex: 0 0 auto;
8459     width: 20px;
8460     height: 20px;
8461     margin: 0 8px;
8462 }
8463
8464 .ideditor .flash-icon circle {
8465     fill: #eee;
8466 }
8467 .ideditor .flash-icon.disabled circle {
8468     cursor: auto;
8469     fill: rgba(255,255,255,0.7);
8470 }
8471
8472 .ideditor .flash-icon use {
8473     color: #222;
8474 }
8475 .ideditor .flash-icon.disabled use,
8476 .ideditor .flash-icon.operation.disabled use {
8477     fill: rgba(32,32,32,0.7);
8478     color: rgba(40,40,40,0.7);
8479 }
8480
8481 .ideditor .flash-text {
8482     -webkit-box-flex: 1;
8483         -ms-flex: 1 1 auto;
8484             flex: 1 1 auto;
8485 }
8486
8487 /* Scale bar
8488 ------------------------------------------------------- */
8489 .ideditor .map-footer-bar .scale-block {
8490     vertical-align: bottom;
8491     width: 250px;
8492     -webkit-box-flex: 0;
8493         -ms-flex: 0 0 auto;
8494             flex: 0 0 auto;
8495     -webkit-user-select: none;
8496        -moz-user-select: none;
8497         -ms-user-select: none;
8498             user-select: none;
8499     height: 30px;
8500     -ms-flex-item-align: center;
8501         align-self: center;
8502 }
8503
8504 .ideditor .scale-block .scale {
8505     height: 100%;
8506     width: 100%;
8507     cursor: pointer;
8508     display: block;
8509 }
8510 .ideditor[dir='rtl'] .scale-block .scale {
8511     -webkit-transform: scaleX(-1);
8512         -ms-transform: scaleX(-1);
8513             transform: scaleX(-1);
8514 }
8515
8516 .ideditor .scale-block .scale-text {
8517     display: inline-block;
8518     position: absolute;
8519     color: #ccc;
8520     top: 0.45em;
8521 }
8522
8523 .ideditor .scale-block .scale path {
8524     fill: none;
8525     stroke: #ccc;
8526     stroke-width: 1;
8527     shape-rendering: crispEdges;
8528 }
8529
8530 /* Footer - About, Source Switcher
8531 ------------------------------------------------------- */
8532 .ideditor .map-footer-bar .info-block {
8533     -webkit-box-flex: 1;
8534         -ms-flex: 1 1 100%;
8535             flex: 1 1 100%;
8536     overflow: hidden;
8537 }
8538
8539 .ideditor .map-footer-list {
8540     display: -webkit-box;
8541     display: -ms-flexbox;
8542     display: flex;
8543     -webkit-box-orient: horizontal;
8544     -webkit-box-direction: normal;
8545         -ms-flex-flow: row nowrap;
8546             flex-flow: row nowrap;
8547     height: 100%;
8548     -webkit-box-pack: end;
8549         -ms-flex-pack: end;
8550             justify-content: flex-end;
8551 }
8552
8553 .ideditor .map-footer-list li {
8554     height: 100%;
8555     display: -webkit-box;
8556     display: -ms-flexbox;
8557     display: flex;
8558     -webkit-box-align: center;
8559         -ms-flex-align: center;
8560             align-items: center;
8561     white-space: nowrap;
8562     padding: 5px;
8563 }
8564 .ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
8565     border-right: 1px solid rgba(255,255,255,.5);
8566 }
8567 .ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
8568     border-left: 1px solid rgba(255,255,255,.5);
8569 }
8570 .ideditor .map-footer-list li:empty {
8571     display: none;
8572 }
8573
8574 .ideditor .map-footer-list a.chip {
8575     padding: 1px 4px 1px 4px;
8576     border-radius: 2px;
8577     color: #eee;
8578 }
8579 .ideditor .map-footer-list a.chip .icon {
8580     width: 14px;
8581     height: 14px;
8582     margin-top: -2px;
8583 }
8584 .ideditor .map-footer-list a.chip span.count {
8585     margin: 0 3px;
8586 }
8587
8588 .ideditor .source-switch a.chip.live {
8589     background: #d32232;
8590     color: #fff;
8591 }
8592
8593 .ideditor .feature-warning a.chip {
8594     background: #1e90ff;
8595 }
8596
8597 .ideditor .issues-info a.chip.resolved-count {
8598     background: #15911E;
8599 }
8600 .ideditor .issues-info a.chip.warnings-count {
8601     background: #DF8500;
8602 }
8603 .ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
8604     margin-right: 5px;
8605 }
8606 .ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
8607     margin-left: 5px;
8608 }
8609
8610 .ideditor .user-list a:not(:last-child):after {
8611     content: ', ';
8612 }
8613
8614 .ideditor .api-status {
8615     text-align: right;
8616     padding: 1px 10px;
8617     color: #eee;
8618     -webkit-box-flex: 1;
8619         -ms-flex: 1 1 auto;
8620             flex: 1 1 auto;
8621 }
8622 .ideditor[dir='rtl'] .api-status {
8623     text-align: left;
8624 }
8625 .ideditor .api-status:empty {
8626     display: none;
8627 }
8628
8629 .ideditor .api-status.offline,
8630 .ideditor .api-status.readonly,
8631 .ideditor .api-status.error {
8632     background: #a22;
8633 }
8634
8635 .ideditor .api-status a {
8636     text-decoration: underline;
8637     color: #ccc;
8638     pointer-events: all;
8639 }
8640 .ideditor .api-status a:focus,
8641 .ideditor .api-status a:active {
8642     color: inherit;
8643 }
8644 @media (hover: hover) {
8645     .ideditor .api-status a:hover {
8646         color: inherit;
8647     }
8648 }
8649
8650 .ideditor .local-storage-full {
8651     display: block;
8652     width: 100%;
8653 }
8654
8655 /* Notification Badges
8656 ------------------------------------------------------- */
8657 /* For an icon (e.g. new version) */
8658 .ideditor .badge {
8659     display: -webkit-inline-box;
8660     display: -ms-inline-flexbox;
8661     display: inline-flex;
8662     background: #d32232;
8663     width: 21px;
8664     height: 21px;
8665     border-radius: 50%;
8666     -webkit-box-align: center;
8667         -ms-flex-align: center;
8668             align-items: center;
8669     -webkit-box-pack: center;
8670         -ms-flex-pack: center;
8671             justify-content: center;
8672 }
8673 .ideditor[dir='ltr'] .badge {
8674     margin-left: 6px;
8675 }
8676 .ideditor[dir='rtl'] .badge {
8677     margin-right: 6px;
8678 }
8679 .ideditor .badge .icon {
8680     vertical-align: baseline;
8681     width: 11px;
8682     height: 11px;
8683     color: #fff;
8684     -webkit-box-flex: 0;
8685         -ms-flex: 0 0 auto;
8686             flex: 0 0 auto;
8687 }
8688
8689 /* For text (e.g. upcoming events) */
8690 .ideditor .badge-text {
8691     display: inline-block;
8692     color: #fff;
8693     text-align: center;
8694     width: 16px;
8695     height: 16px;
8696     font-size: 10px;
8697     font-weight: bold;
8698     margin-left: 5px;
8699     background: #f00;
8700     border-radius: 9px;
8701 }
8702 .ideditor[dir='rtl'] .badge-text {
8703     margin-left: 0;
8704     margin-right: 5px;
8705 }
8706
8707
8708 /* Modals / Prompts
8709 ------------------------------------------------------- */
8710 .ideditor .modal {
8711     top: 5%;
8712     max-height: 90%;
8713     position: relative;
8714     border-radius: 3px;
8715     overflow: hidden;
8716     margin: auto;
8717     z-index: 50;
8718     width: 80%;
8719     min-width: 200px;
8720     max-width: 550px;
8721     display: -webkit-box;
8722     display: -ms-flexbox;
8723     display: flex;
8724     -webkit-box-orient: vertical;
8725     -webkit-box-direction: normal;
8726         -ms-flex-direction: column;
8727             flex-direction: column;
8728 }
8729
8730 .ideditor .modal .content {
8731     overflow-x: hidden;
8732     overflow-y: auto;
8733 }
8734
8735 .ideditor .modal .loader {
8736     margin-bottom: 10px;
8737 }
8738 .ideditor .modal .description {
8739     text-align: center;
8740 }
8741
8742 .ideditor .shaded {
8743     z-index: 5000;
8744     position: absolute;
8745     top: 0;
8746     bottom: 0;
8747     left: 0;
8748     right: 0;
8749     overflow: auto;
8750 }
8751 .ideditor .shaded:before {
8752     content:'';
8753     background: rgba(0,0,0,0.5);
8754     position: absolute;
8755     left: 0px; right: 0px; top: 0px; bottom: 0px;
8756 }
8757
8758 .ideditor .modal-section {
8759     padding: 20px;
8760     border-bottom: 1px solid #ccc;
8761 }
8762 .ideditor .modal-section p:not(:last-of-type) {
8763     padding-bottom: 20px;
8764 }
8765 .ideditor .modal-section h4 {
8766     padding-bottom: 0;
8767 }
8768 .ideditor .modal-section.buttons {
8769     text-align: center;
8770 }
8771
8772 .ideditor .modal-section.buttons button {
8773     min-width: 130px;
8774 }
8775
8776 .ideditor .modal-section.buttons .action {
8777     display: inline-block;
8778     margin: 0 10px;
8779 }
8780
8781 .ideditor .save-section .buttons {
8782     display: -webkit-box;
8783     display: -ms-flexbox;
8784     display: flex;
8785     -ms-flex-wrap: wrap;
8786         flex-wrap: wrap;
8787     -ms-flex-pack: distribute;
8788         justify-content: space-around;
8789 }
8790
8791 .ideditor .save-section .buttons .action,
8792 .ideditor .save-section .buttons .secondary-action {
8793     width: 45%;
8794     margin: 10px auto;
8795     text-align: center;
8796     vertical-align: middle;
8797 }
8798
8799 .ideditor .loading-modal {
8800     text-align: center;
8801 }
8802 .ideditor .modal-actions {
8803     display: -webkit-box;
8804     display: -ms-flexbox;
8805     display: flex;
8806 }
8807 .ideditor .modal-actions button {
8808     color: #7092ff;
8809     border-bottom: 1px solid #ccc;
8810     border-radius: 0;
8811     min-height: 160px;
8812     text-align: center;
8813     width: 100%;
8814 }
8815
8816 .ideditor .logo-small {
8817     height: 40px;
8818     width: 40px;
8819     margin: auto;
8820 }
8821
8822 .ideditor .logo {
8823     height: 100px;
8824     width: 100%;
8825     max-width: 100px;
8826     margin: auto;
8827 }
8828
8829 .ideditor .modal-actions > :first-child {
8830     border-right: 1px solid #ccc;
8831 }
8832
8833 .ideditor .modal-section:last-child {
8834     border-bottom: 0;
8835 }
8836
8837 /* Restore Modal
8838 ------------------------------------------------------- */
8839 .ideditor .modal-actions .logo-restore {
8840     color: #7092ff;
8841 }
8842 .ideditor .modal-actions .logo-reset {
8843     color: #e06c5e;
8844 }
8845
8846 /* Success Screen / Community Index
8847 ------------------------------------------------------- */
8848 .ideditor .save-success.body {
8849     overflow-y: scroll;
8850     overflow-x: hidden;
8851 }
8852
8853 .ideditor .save-success .link-out {
8854     margin: 0px 5px;
8855     white-space: nowrap;
8856 }
8857
8858 .ideditor .save-summary,
8859 .ideditor .save-communityLinks {
8860     padding: 0px 20px 15px 20px;
8861 }
8862
8863 .ideditor .save-communityLinks {
8864     border-top: 1px solid #ccc;
8865 }
8866
8867 .ideditor .save-success table,
8868 .ideditor .save-success p {
8869     margin-top: 15px;
8870 }
8871 .ideditor .save-success h3 {
8872     font-size: 14px;
8873     margin-top: 15px;
8874     line-height: 1.5;
8875     padding-bottom: 0;
8876 }
8877 .ideditor .save-success td {
8878     vertical-align: top;
8879 }
8880 .ideditor .save-success td.cell-icon {
8881     width: 40px;
8882 }
8883 .ideditor .save-success td.cell-detail {
8884     padding: 0 10px;
8885 }
8886 .ideditor .save-success td.community-detail {
8887     padding-bottom: 15px;
8888 }
8889 .ideditor .save-success .community-table h3 {
8890     margin: 0;
8891 }
8892
8893 .ideditor .summary-view-on-osm,
8894 .ideditor .community-name {
8895     font-size: 14px;
8896     font-weight: bold;
8897 }
8898 .ideditor .community-languages {
8899     margin-top: 5px;
8900     font-style: italic;
8901 }
8902 .ideditor .community-languages:only-child {
8903     margin-top: 0;
8904 }
8905
8906 .ideditor .community-detail a.hide-toggle,
8907 .ideditor .community-detail a:visited.hide-toggle {
8908     font-size: 12px;
8909     font-weight: normal;
8910     padding-bottom: 0;
8911 }
8912 .ideditor .community-detail .hide-toggle svg.icon.pre-text {
8913     width: 12px;
8914     height: 15px;
8915 }
8916
8917 .ideditor .community-events {
8918     margin-top: 5px;
8919 }
8920
8921 .ideditor .community-event,
8922 .ideditor .community-more {
8923     background-color: #efefef;
8924     padding: 8px;
8925     border-radius: 4px;
8926     margin-bottom: 5px;
8927 }
8928
8929 .ideditor .community-event-name {
8930     font-size: 14px;
8931     font-weight: bold;
8932 }
8933 .ideditor .community-event-when {
8934     font-weight: bold;
8935 }
8936
8937 .ideditor .community-missing {
8938     padding: 10px;
8939     text-align: center;
8940 }
8941
8942
8943 /* Splash Modal
8944 ------------------------------------------------------- */
8945 .ideditor .modal-actions .logo-walkthrough,
8946 .ideditor .modal-actions .logo-features {
8947     color: #7092ff;
8948 }
8949
8950 .ideditor .modal-splash .section-preferences-third-party {
8951     margin-top: 20px;
8952 }
8953
8954 .ideditor .modal-splash .section-preferences-third-party .privacy-link {
8955     display: none;
8956 }
8957
8958
8959 /* Shortcuts Modal
8960 ------------------------------------------------------- */
8961 .ideditor .modal-shortcuts {
8962     width: 90%;
8963     max-width: 1050px;
8964 }
8965
8966 .ideditor .modal-shortcuts .modal-section:last-child {
8967     padding: 10px 15px 20px 15px;
8968     min-height: 275px;
8969 }
8970
8971 .ideditor .modal-shortcuts .tabs-bar {
8972     padding-bottom: 5px;
8973     text-align: center;
8974 }
8975
8976 .ideditor .modal-shortcuts a.tab {
8977     display: inline-block;
8978     padding: 5px 10px;
8979     margin: 0 5px;
8980     cursor: pointer;
8981     color: #666;
8982     font-size: 16px;
8983     font-weight: bold;
8984 }
8985 .ideditor .modal-shortcuts a.tab.active {
8986     color: #7092ff;
8987     border-bottom: 2px solid;
8988 }
8989 .ideditor .modal-shortcuts a.tab:focus,
8990 .ideditor .modal-shortcuts a.tab:active {
8991     color: #597be7;
8992     background-color: #efefef;
8993 }
8994 @media (hover: hover) {
8995     .ideditor .modal-shortcuts a.tab:hover {
8996         color: #597be7;
8997         background-color: #efefef;
8998     }
8999 }
9000
9001 .ideditor .modal-shortcuts .shortcut-tab {
9002     display: -webkit-box;
9003     display: -ms-flexbox;
9004     display: flex;
9005     -webkit-box-orient: horizontal;
9006     -webkit-box-direction: normal;
9007         -ms-flex-flow: row wrap;
9008             flex-flow: row wrap;
9009     -ms-flex-pack: distribute;
9010         justify-content: space-around;
9011 }
9012
9013 .ideditor .modal-shortcuts .shortcut-column {
9014     width: auto;
9015 }
9016
9017 .ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
9018     -webkit-box-flex: 1;
9019         -ms-flex: 1 1 100%;
9020             flex: 1 1 100%;
9021     width: 100%;
9022 }
9023
9024 .ideditor .modal-shortcuts td {
9025     padding-bottom: 5px;
9026 }
9027
9028 .ideditor .modal-shortcuts .shortcut-section {
9029     padding: 20px 0 10px 0;
9030 }
9031
9032 .ideditor .modal-shortcuts .shortcut-keys {
9033     padding: 0 10px;
9034     color: #767676;
9035     text-align: right;
9036     white-space: nowrap;
9037 }
9038 .ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
9039     text-align: left;
9040 }
9041
9042 .ideditor .modal-shortcuts .shortcut-keys kbd {
9043     color: #555;
9044 }
9045
9046 .ideditor .modal-shortcuts .shortcut-keys .gesture {
9047     color: #333;
9048     padding: 3px;
9049 }
9050
9051
9052 /* Settings Modals
9053 ------------------------------------------------------- */
9054 .ideditor .settings-modal textarea {
9055     height: 70px;
9056     width: 100%;
9057 }
9058
9059 .ideditor .settings-custom-background .instructions-template {
9060     margin-bottom: 20px;
9061 }
9062 .ideditor .settings-custom-background .instructions-template p {
9063     margin-bottom: 0;
9064 }
9065 .ideditor .settings-custom-background .instructions-template ul {
9066     padding-bottom: 20px;
9067 }
9068 .ideditor .settings-custom-background .instructions-template ul li {
9069     list-style-type: disc;
9070     list-style-position: inside;
9071 }
9072
9073 .ideditor .settings-custom-data .instructions-url {
9074     margin-bottom: 10px;
9075 }
9076 .ideditor .settings-custom-data .field-file,
9077 .ideditor .settings-custom-data .instructions-template {
9078     margin-bottom: 20px;
9079 }
9080
9081
9082 /* Save Mode
9083 ------------------------------------------------------- */
9084 .ideditor a.user-info {
9085     display: inline-block;
9086 }
9087
9088 .ideditor .commit-form {
9089     margin-bottom: 0;
9090 }
9091
9092 .ideditor .user-info img {
9093     float: left;
9094 }
9095
9096 .ideditor .note-save .field-warning,
9097 .ideditor .field-warning {
9098     background: #ffb;
9099     border: 1px solid #ccc;
9100     border-radius: 4px;
9101     padding: 10px;
9102 }
9103
9104 .ideditor .note-save .field-warning:empty,
9105 .ideditor .field-warning:empty {
9106     display: none;
9107 }
9108
9109 .ideditor .changeset-info,
9110 .ideditor .request-review,
9111 .ideditor .commit-info {
9112     margin-bottom: 10px;
9113 }
9114
9115 .ideditor .field-warning {
9116     margin-top: 10px;
9117 }
9118
9119 .ideditor .request-review label {
9120     cursor: pointer;
9121 }
9122
9123 .ideditor .changeset-list {
9124     border: 1px solid #ccc;
9125     border-radius: 4px;
9126     background: #fff;
9127     margin-bottom: 10px;
9128     overflow: hidden;
9129 }
9130
9131 .ideditor .changeset-list li button {
9132     padding: 5px 10px;
9133     width: 100%;
9134     border-radius: 0;
9135     text-align: initial;
9136 }
9137 .ideditor .changeset-list li {
9138     border-top: 1px solid #ccc;
9139 }
9140 .ideditor .changeset-list li:first-child {
9141     border-top: 0;
9142 }
9143 .ideditor .changeset-list .alert {
9144     opacity: 0.5;
9145 }
9146
9147
9148 /* Conflict resolution
9149 ------------------------------------------------------- */
9150 .ideditor .conflicts-help {
9151     padding: 20px;
9152     background-color: #ffffbb;
9153     border-bottom: 1px solid #ccc;
9154 }
9155
9156 .ideditor .conflicts-buttons {
9157     padding: 20px;
9158 }
9159
9160 .ideditor button.conflicts-button {
9161     float: left;
9162 }
9163
9164 .ideditor .conflict-container {
9165     border-bottom: 1px solid #ccc;
9166 }
9167
9168 .ideditor .conflict-description {
9169     padding: 5px 20px;
9170     display: block;
9171 }
9172
9173 .ideditor .conflicts-done {
9174     padding: 20px 20px 0 20px;
9175 }
9176
9177 .ideditor .conflict-detail-container {
9178     padding: 10px 20px;
9179 }
9180
9181 .ideditor .conflict-count {
9182     padding: 10px 20px;
9183 }
9184
9185 .ideditor .conflict-choices {
9186     margin-top: 10px;
9187 }
9188
9189 .ideditor .conflict-nav-buttons {
9190     padding: 10px 0 20px 0;
9191 }
9192
9193 .ideditor .conflict-nav-button {
9194     height: 30px;
9195 }
9196
9197
9198 /* Notices (Zoom in to Edit)
9199 ------------------------------------------------------- */
9200 .ideditor .notice {
9201     position: absolute;
9202     top: 15px;
9203     left: 0;
9204     right: 0;
9205     text-align: center;
9206 }
9207
9208 .ideditor .notice .zoom-to {
9209     margin: auto;
9210     width: 300px;
9211     padding: 20px 5px;
9212     font-size: 150%;
9213     border-radius: 8px;
9214     font-weight: bold;
9215 }
9216
9217 .ideditor .notice .zoom-to:focus,
9218 .ideditor .notice .zoom-to:active {
9219     background: rgba(0,0,0,0.6);
9220 }
9221 @media (hover: hover) {
9222     .ideditor .notice .zoom-to:hover {
9223         background: rgba(0,0,0,0.6);
9224     }
9225 }
9226
9227 .ideditor .notice .zoom-to .icon {
9228     width: 30px;
9229     height: 30px;
9230     vertical-align: middle;
9231     margin-right: 10px;
9232 }
9233 .ideditor[dir='rtl'] .notice .zoom-to .icon {
9234     margin-left: 10px;
9235     margin-right: 0;
9236 }
9237
9238
9239 /* Tooltips
9240 ------------------------------------------------------- */
9241 .ideditor .popover {
9242     position: absolute;
9243     display: none;
9244 }
9245 .ideditor .tooltip {
9246     color: #333;
9247     font-size: 12px;
9248     white-space: initial;
9249 }
9250 .ideditor .tooltip:not(.curtain-tooltip) {
9251     pointer-events: none;
9252 }
9253 .ideditor .popover.in {
9254     z-index: 5000;
9255     height: auto;
9256     display: block;
9257 }
9258 .ideditor .tooltip.in {
9259     opacity: 0.95;
9260 }
9261 .ideditor .popover.top {
9262     margin-top: -4px;
9263 }
9264 .ideditor .popover.right {
9265     margin-left: 4px;
9266 }
9267 .ideditor .popover.bottom {
9268     margin-top: 4px;
9269 }
9270 .ideditor .popover.left {
9271     margin-left: -4px;
9272 }
9273 .ideditor .popover.arrowed.top {
9274     margin-top: -10px;
9275 }
9276 .ideditor .popover.arrowed.right {
9277     margin-left: 10px;
9278 }
9279 .ideditor .popover.arrowed.bottom {
9280     margin-top: 10px;
9281 }
9282 .ideditor .popover.arrowed.left {
9283     margin-left: -10px;
9284 }
9285 .ideditor .bar-button .tooltip.arrowed.bottom {
9286     margin-top: 20px;
9287 }
9288 .ideditor .tooltip.top {
9289     text-align: center;
9290 }
9291 .ideditor .tooltip.right {
9292     text-align: left;
9293 }
9294 .ideditor .tooltip.bottom {
9295     text-align: center;
9296 }
9297 .ideditor .tooltip.left {
9298     text-align: right;
9299 }
9300
9301 .ideditor .popover-inner {
9302     border-radius: inherit;
9303 }
9304
9305 .ideditor .tooltip .popover-inner {
9306     border-radius: 4px;
9307     max-width: 200px;
9308     min-width: 80px;
9309     padding: 10px;
9310     font-weight: normal;
9311     background-color: #fff;
9312 }
9313
9314 .ideditor .popover-arrow {
9315     position: absolute;
9316     width: 0;
9317     height: 0;
9318     border-color: transparent;
9319     border-style: solid;
9320 }
9321 .ideditor .popover.top .popover-arrow {
9322     bottom: -5px;
9323     left: 50%;
9324     margin-left: -5px;
9325     border-top-color: #fff;
9326     border-width: 5px 5px 0;
9327 }
9328 .ideditor .popover.right .popover-arrow {
9329     top: 50%;
9330     left: -5px;
9331     margin-top: -5px;
9332     border-right-color: #fff;
9333     border-width: 5px 5px 5px 0;
9334 }
9335 .ideditor .popover.left .popover-arrow {
9336     top: 50%;
9337     right: -5px;
9338     margin-top: -5px;
9339     border-left-color: #fff;
9340     border-width: 5px 0 5px 5px;
9341 }
9342 .ideditor .popover.bottom .popover-arrow {
9343     top: -5px;
9344     left: 50%;
9345     margin-left: -5px;
9346     border-bottom-color: #fff;
9347     border-width: 0 5px 5px;
9348 }
9349 .ideditor .popover:not(.arrowed) .popover-arrow {
9350     display: none;
9351 }
9352
9353 .ideditor .tooltip-heading {
9354     font-weight: bold;
9355     background: #f6f6f6;
9356     padding: 10px;
9357     margin: -10px -10px 10px -10px;
9358     border-radius: 3px 3px 0 0;
9359     font-size: 14px;
9360 }
9361
9362 .ideditor .keyhint-wrap {
9363     background: #f6f6f6;
9364     padding: 10px;
9365     margin: 10px -10px -10px -10px;
9366     border-radius: 0 0 3px 3px;
9367 }
9368 .ideditor .popover-inner .shortcut {
9369     font-weight: bold;
9370     margin-left: 5px;
9371 }
9372
9373 .ideditor[dir='rtl'] .popover-inner .shortcut {
9374     margin-left: 0;
9375     margin-right: 5px;
9376 }
9377
9378 /* dark tooltips for sidebar / panels */
9379 .ideditor .tooltip.dark.top .popover-arrow,
9380 .ideditor .map-pane .tooltip.top .popover-arrow,
9381 .ideditor .sidebar .tooltip.top .popover-arrow,
9382 .ideditor .modal .tooltip.top .popover-arrow {
9383     border-top-color: #000;
9384 }
9385 .ideditor .tooltip.dark.bottom .popover-arrow,
9386 .ideditor .map-pane .tooltip.bottom .popover-arrow,
9387 .ideditor .sidebar .tooltip.bottom .popover-arrow,
9388 .ideditor .modal .tooltip.bottom .popover-arrow {
9389     border-bottom-color: #000;
9390 }
9391 .ideditor .tooltip.dark.left .popover-arrow,
9392 .ideditor .map-pane .tooltip.left .popover-arrow,
9393 .ideditor .sidebar .tooltip.left .popover-arrow,
9394 .ideditor .modal .tooltip.left .popover-arrow {
9395     border-left-color: #000;
9396 }
9397 .ideditor .tooltip.dark.right .popover-arrow,
9398 .ideditor .map-pane .tooltip.right .popover-arrow,
9399 .ideditor .sidebar .tooltip.right .popover-arrow,
9400 .ideditor .modal .tooltip.right .popover-arrow {
9401     border-right-color: #000;
9402 }
9403 .ideditor .tooltip.dark .popover-inner,
9404 .ideditor .tooltip.dark .tooltip-heading,
9405 .ideditor .tooltip.dark .keyhint-wrap,
9406 .ideditor .map-pane .popover-inner,
9407 .ideditor .map-pane .tooltip-heading,
9408 .ideditor .map-pane .keyhint-wrap,
9409 .ideditor .sidebar .popover-inner,
9410 .ideditor .sidebar .tooltip-heading,
9411 .ideditor .sidebar .keyhint-wrap,
9412 .ideditor .modal .popover-inner {
9413     background: #000;
9414     color: #ccc;
9415 }
9416 .ideditor .tooltip.dark kbd,
9417 .ideditor .map-pane .tooltip kbd,
9418 .ideditor .sidebar .tooltip kbd {
9419     background-color: #666;
9420     border: solid 1px #444;
9421     border-bottom-color: #333;
9422     -webkit-box-shadow: inset 0 -1px 0 #333;
9423             box-shadow: inset 0 -1px 0 #333;
9424     color: #eee;
9425 }
9426
9427 /* Exceptions for tooltip layouts */
9428
9429 /* commit warning tooltips need to be closer */
9430 .ideditor .warning-section .tooltip.top {
9431     margin-top: -5px;
9432 }
9433
9434 .ideditor li:first-of-type .badge .tooltip,
9435 .ideditor li.hide + li.version .badge .tooltip {
9436     left: auto !important;
9437     right: 5px !important;
9438 }
9439 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
9440 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
9441     left: 5px !important;
9442     right: auto !important;
9443 }
9444 .ideditor li:first-of-type .badge .tooltip .popover-arrow,
9445 .ideditor li.hide + li.version .badge .tooltip .popover-arrow {
9446     right: 15px !important;
9447     left: auto !important;
9448 }
9449 .ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
9450 .ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
9451     left: 15px !important;
9452     right: auto !important;
9453 }
9454
9455
9456 /* Contextual Edit Menu
9457 ------------------------------------------------------- */
9458 .ideditor .edit-menu {
9459     position: absolute;
9460     display: -webkit-box;
9461     display: -ms-flexbox;
9462     display: flex;
9463     -webkit-box-orient: vertical;
9464     -webkit-box-direction: normal;
9465         -ms-flex-direction: column;
9466             flex-direction: column;
9467     background: #fff;
9468     border-radius: 4px;
9469     /* padding is set in edit_menu.js */
9470 }
9471
9472 .ideditor .edit-menu .tooltip {
9473     width: 200px; /* see also edit_menu.js */
9474 }
9475
9476 .ideditor .edit-menu-item {
9477     display: -webkit-box;
9478     display: -ms-flexbox;
9479     display: flex;
9480     -webkit-box-align: center;
9481         -ms-flex-align: center;
9482             align-items: center;
9483     border-radius: 0;
9484     padding: 0 12px;
9485     /* height is set in edit_menu.js */
9486 }
9487 .ideditor .edit-menu-item .label {
9488     max-width: 120px;
9489     text-align: initial;
9490     line-height: 1.1em;
9491     font-weight: bold;
9492 }
9493 .ideditor[dir='ltr'] .edit-menu-item .label {
9494     margin-left: 8px;
9495 }
9496 .ideditor[dir='rtl'] .edit-menu-item .label {
9497     margin-right: 8px;
9498 }
9499
9500 .ideditor .edit-menu-item use {
9501     pointer-events: none;
9502 }
9503
9504 /* Lasso
9505 ------------------------------------------------------- */
9506 .ideditor .lasso-path {
9507     fill-opacity: 0.3;
9508     stroke: #fff;
9509     stroke-width: 1;
9510     stroke-opacity: 1;
9511     stroke-dasharray: 5, 5;
9512 }
9513
9514
9515 /* Scrollbars
9516  ----------------------------------------------------- */
9517 .ideditor ::-webkit-scrollbar {
9518     height: 20px;
9519     overflow: visible;
9520     width: 10px;
9521     border-left: 1px solid #DDD;
9522 }
9523
9524 .ideditor ::-webkit-scrollbar-track {
9525     background-clip: padding-box;
9526     border: solid transparent;
9527     border-width: 0;
9528 }
9529
9530 .ideditor ::-webkit-scrollbar-thumb {
9531     background-color: rgba(0,0,0,.2);
9532     background-clip: padding-box;
9533     border: solid transparent;
9534     border-width: 3px 3px 3px 4px;
9535     border-radius: 6px;
9536 }
9537 .ideditor ::-webkit-scrollbar-track:active {
9538     background-color: rgba(0,0,0,.05);
9539 }
9540 @media (hover: hover) {
9541     .ideditor ::-webkit-scrollbar-track:hover {
9542         background-color: rgba(0,0,0,.05);
9543     }
9544 }
9545
9546
9547 /* Intro walkthrough
9548  ----------------------------------------------------- */
9549 .ideditor .curtain {
9550     z-index: 1000;
9551     pointer-events: none;
9552     position: absolute;
9553 }
9554
9555 .ideditor .curtain-darkness {
9556     pointer-events: all;
9557     fill-opacity: 0.7;
9558     fill: #222;
9559     fill-rule: evenodd;
9560 }
9561
9562 .ideditor .intro-nav-wrap {
9563     display: -webkit-box;
9564     display: -ms-flexbox;
9565     display: flex;
9566     -webkit-box-orient: horizontal;
9567     -webkit-box-direction: normal;
9568         -ms-flex-direction: row;
9569             flex-direction: row;
9570     position: absolute;
9571     left: 0;
9572     right: 0;
9573     bottom: 30px;
9574     padding: 10px;
9575     z-index: 1001;
9576 }
9577
9578 .ideditor .intro-nav-wrap .intro-nav-wrap-logo {
9579     -webkit-box-flex: 0;
9580         -ms-flex: 0 0 auto;
9581             flex: 0 0 auto;
9582     height: 40px;
9583     width: 40px;
9584     color: #fff;
9585     margin: 0px 20px;
9586     vertical-align: middle;
9587 }
9588
9589 .ideditor .intro-nav-wrap .joined {
9590     -webkit-box-flex: 1;
9591         -ms-flex: 1 1 auto;
9592             flex: 1 1 auto;
9593     display: -webkit-box;
9594     display: -ms-flexbox;
9595     display: flex;
9596     -webkit-box-orient: horizontal;
9597     -webkit-box-direction: normal;
9598         -ms-flex-direction: row;
9599             flex-direction: row;
9600 }
9601
9602 .ideditor .intro-nav-wrap button.chapter {
9603     -webkit-box-flex: 1;
9604         -ms-flex: 1 1 100%;
9605             flex: 1 1 100%;
9606     padding: 0px 5px;
9607     font-weight: bold;
9608 }
9609
9610 .ideditor .intro-nav-wrap button.chapter.next {
9611     -webkit-animation-duration: 1s;
9612             animation-duration: 1s;
9613     -webkit-animation-name: pulse;
9614             animation-name: pulse;
9615     -webkit-animation-iteration-count: infinite;
9616             animation-iteration-count: infinite;
9617     -webkit-animation-direction: alternate;
9618             animation-direction: alternate;
9619 }
9620 @-webkit-keyframes pulse {
9621     from  { background: #7092ff; }
9622     to    { background: #c6d4ff; }
9623 }
9624 @keyframes pulse {
9625     from  { background: #7092ff; }
9626     to    { background: #c6d4ff; }
9627 }
9628
9629 .ideditor .intro-nav-wrap button.chapter.finished {
9630     background: #8cd05f;
9631 }
9632
9633 .ideditor .intro-nav-wrap button.chapter .status {
9634     display: none;
9635 }
9636
9637 .ideditor .intro-nav-wrap button.chapter.finished .status {
9638     display: inline-block;
9639 }
9640
9641 .ideditor .curtain-tooltip {
9642     z-index: 1002;
9643 }
9644
9645 .ideditor .curtain-tooltip.tooltip.in {
9646     opacity: 1;
9647 }
9648 .ideditor .curtain-tooltip.tooltip {
9649     text-align: left;
9650 }
9651 .ideditor[dir='rtl'] .curtain-tooltip.tooltip {
9652     text-align: right;
9653 }
9654
9655 .ideditor .curtain-tooltip .popover-inner {
9656     font-size: 15px;
9657     position: relative;
9658     padding: 20px;
9659 }
9660
9661 .ideditor .curtain-tooltip .popover-inner .button-section,
9662 .ideditor .curtain-tooltip .popover-inner .instruction {
9663     font-weight: bold;
9664     display: block;
9665     border-top: 1px solid #ccc;
9666     margin-top: 10px;
9667     margin-left: -20px;
9668     margin-right: -20px;
9669     padding: 10px 20px 0 20px;
9670 }
9671
9672 .ideditor .curtain-tooltip .popover-inner .button-section button {
9673     width: 66.6666%;
9674 }
9675
9676 .ideditor .curtain-tooltip .popover-inner .instruction:only-child {
9677     border: 0;
9678     padding: 0;
9679     margin: 0;
9680 }
9681
9682 .ideditor .curtain-tooltip .popover-inner .icon.pre-text {
9683     vertical-align: text-top;
9684     margin-right: 0;
9685     margin-left: 0;
9686     display: inline-block;
9687 }
9688
9689 .ideditor .curtain-tooltip.intro-points-describe,
9690 .ideditor .curtain-tooltip.intro-lines-name_road {
9691     top: 133px !important;
9692 }
9693
9694 .ideditor .tooltip-illustration {
9695     height: 80px;
9696     width: 200px;
9697     margin-left: -20px;
9698     margin-top: -10px;
9699 }
9700 .ideditor[dir='rtl'] .tooltip-illustration {
9701     margin-left: auto;
9702     margin-right: -20px;
9703 }
9704
9705 .ideditor .curtain-tooltip.intro-mouse {
9706     -webkit-user-select: none;
9707        -moz-user-select: none;
9708         -ms-user-select: none;
9709             user-select: none;
9710 }
9711
9712 .ideditor .curtain-tooltip.intro-mouse .counter {
9713     position: absolute;
9714     display: block;
9715     top: 50px;
9716     width: 100%;
9717     text-align: center;
9718     font-weight: bold;
9719     font-size: 14px;
9720     z-index: 1003;
9721 }
9722
9723 .ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
9724     fill: rgba(112, 146, 255, 0);
9725     color: rgba(112, 146, 255, 0);
9726 }
9727 .ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
9728     fill: rgba(112, 146, 255, 1);
9729 }
9730 .ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
9731     color: rgba(112, 146, 255, 1);
9732 }
9733
9734 .ideditor .huge-modal-button {
9735     width: 100%;
9736     padding: 20px;
9737 }
9738
9739 .ideditor .huge-modal-button .illustration {
9740     height: 100px;
9741     width: 100px;
9742     color: #7092ff;
9743 }