/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

.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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
.ideditor article, .ideditor aside, .ideditor details, .ideditor figcaption, .ideditor figure, .ideditor footer, .ideditor header, .ideditor hgroup, .ideditor menu, .ideditor nav, .ideditor section {
	display: block;
}
.ideditor ol, .ideditor ul {
	list-style: none;
}
.ideditor blockquote, .ideditor q {
	quotes: none;
}
.ideditor blockquote:before, .ideditor blockquote:after, .ideditor q:before, .ideditor q:after {
	content: '';
	content: none;
}
.ideditor table {
	border-collapse: collapse;
	border-spacing: 0;
}
.ideditor a { text-decoration: none;}
/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */

.ideditor button,
.ideditor input,
.ideditor select,
.ideditor textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
    padding: 0;
}

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

.ideditor button,
.ideditor input {
    line-height: inherit;
	letter-spacing: inherit;
}

/* Hide default number spinner controls */
.ideditor input[type="number"]::-webkit-inner-spin-button,
.ideditor input[type="number"]::-webkit-outer-spin-button {
	display: none;
}
.ideditor input[type=number] {
    -moz-appearance: textfield;
}

/*
 * 1. Corrects inability to style clickable `input` types in iOS.
 * 2. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */

.ideditor button,
.ideditor input[type="button"],
.ideditor input[type="reset"],
.ideditor input[type="submit"] {
    -webkit-appearance: button; /* 1 */
    cursor: pointer; /* 2 */
}

/*
 * Re-set default cursor for disabled elements.
 */

.ideditor button[disabled],
.ideditor input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */

.ideditor input[type="checkbox"],
.ideditor input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

.ideditor input[type="search"] {
    -webkit-appearance: none; /* 1 */
    box-sizing: border-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

.ideditor input[type="search"]::-webkit-search-cancel-button,
.ideditor input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 4+.
 */

.ideditor button::-moz-focus-inner,
.ideditor input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.ideditor .cf:before,
.ideditor .cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.ideditor .cf:after {
    clear: both;
}
.ideditor {
    color-scheme: light;
    --bg-color: #fff; /* ~Bootstrap .bg-body */
    --bg-color-2: #f6f6f6; /* ~Bootstrap .bg-body-tertiary */
    --bg-color-3: #ececec; /* ~Bootstrap .bg-body-secondary */
    --active-bg-color: #f1f1f1; /* in the middle between --bg-color-2 and --bg-color-3 */
    --transparent-bg-color: #fffc;
    --transparent-button-color: #fff4;
    --border-color: #ccc; /* ~Bootstrap .border-secondary-subtle */
    --transparent-border-color: #cccccc94; /* --border-color with alpha value to match rgba(0, 0, 0, .1) over --bg-color-2 */
    --border-color-2: #ddd; /* mix 66% of --border-color with white */
    --outset-color: #fcfcfc; /* brighter than --border-color with white */
    --shadow-color: #bbb; /* mix 91.5% of --border-color with black */
    --text-color: #333;
    --link-color: #7092ff;
    --link-focus-color: #597be7;
    --muted-text-color: #aaa;
    --transparent-text-color: #2223;
    --transparent-text-emphasis-color: #0007;
    --passive-bg-color: #cccccc; /* = --border-color */
    --passive-text-color: #888;
    --widget-color: #222;
    --widget-bg-color: #eee;
    --nested-bg-color: #eff2f7;
    --nested-highlight-color: #e3e8ef;
    --nested-border-color: #ccd5e3;
    --selected-bg-color: #e8ebff;
    --dark-tooltip-text-color: #fff;
    --dark-tooltip-bg-color: #444;

    --bg-filter: none;
    --mix-blend-mode: normal;
    --bg-blend-mode: normal;

    --valid-bg-color: #cfc;
    --valid-label-color: #afa;
    --valid-highlight-color: #8f8;
    --valid-border-color: #2f2;
    --valid-text-color: #0b0;
    --valid-highlight-text-color: #080;
    --valid-icon-color: #0f0;

    --suggestion-bg-color: #cef;
    --suggestion-label-color: #adf;
    --suggestion-highlight-color: #8cf;
    --suggestion-border-color: #29f;
    --suggestion-text-color: #05b;
    --suggestion-highlight-text-color: #038;
    --suggestion-icon-color: #07f;

    --warning-bg-color: #ffc; /* mix 60% of --warning-label-color with white */
    --warning-label-color: #ffa;
    --warning-highlight-color: #ff8; /* ~saturate(1.5) of --warning-label-color */
    --warning-border-color: #fb2;
    --warning-text-color: #b15500;
    --warning-highlight-text-color: #7f3d00;
    --warning-icon-color: #f90;

    --error-bg-color: #fcc;
    --error-label-color: #faa;
    --error-highlight-color: #f88;
    --error-border-color: #f22;
    --error-text-color: #a00;
    --error-highlight-text-color: #800;
    --error-icon-color: #f00;
}

.ideditor.theme-dark {
        color-scheme: dark;
        --bg-color: #212529;
        --bg-color-2: #2b3035;
        --bg-color-3: #343a40;
        --active-bg-color: #30353b;
        --passive-bg-color: #41464b;
        --transparent-bg-color: #111c;
        --transparent-button-color: #3338;
        --border-color: #41464b;
        --transparent-border-color: #41464b94;
        --border-color-2: #32363b;
        --outset-color: #54595d;
        --shadow-color: #3b4045;
        --text-color: #dee2e6;
        --link-color: #7b92db;
        --link-focus-color: #7e9cff;
        --muted-text-color: #6e7276;
        --transparent-text-color: #eee3;
        --transparent-text-emphasis-color: #fff7;
        --widget-color: #e9ecef;
        --widget-bg-color: #31373c;
        --nested-bg-color: #2d2e33;
        --nested-highlight-color: #33363b;
        --nested-border-color: #3e434e;
        --selected-bg-color: #3b3c49;
        --dark-tooltip-text-color: #ccc;
        --dark-tooltip-bg-color: #000;

        --bg-filter: invert();
        --mix-blend-mode: screen;
        --bg-blend-mode: difference;

        --valid-bg-color: #030;
        --valid-label-color: #050;
        --valid-highlight-color: #060;
        --valid-border-color: #080;
        --valid-text-color: #3e3;
        --valid-highlight-text-color: #6e6;

        --suggestion-bg-color: #023;
        --suggestion-label-color: #047;
        --suggestion-highlight-color: #036;
        --suggestion-border-color: #06d;
        --suggestion-text-color: #38e;
        --suggestion-highlight-text-color: #6ae;

        --warning-bg-color: #332701;
        --warning-label-color: #554102;
        --warning-highlight-color: #5f4100;
        --warning-border-color: #7e3b00;
        --warning-text-color: #e98c38;
        --warning-highlight-text-color: #f0ac71;

        --error-bg-color: #300;
        --error-label-color: #500;
        --error-highlight-color: #600;
        --error-border-color: #800;
        --error-text-color: #e33;
        --error-highlight-text-color: #e66;
    }

@media (prefers-color-scheme: dark) {
    .ideditor:not(.theme-light) {
        color-scheme: dark;
        --bg-color: #212529;
        --bg-color-2: #2b3035;
        --bg-color-3: #343a40;
        --active-bg-color: #30353b;
        --passive-bg-color: #41464b;
        --transparent-bg-color: #111c;
        --transparent-button-color: #3338;
        --border-color: #41464b;
        --transparent-border-color: #41464b94;
        --border-color-2: #32363b;
        --outset-color: #54595d;
        --shadow-color: #3b4045;
        --text-color: #dee2e6;
        --link-color: #7b92db;
        --link-focus-color: #7e9cff;
        --muted-text-color: #6e7276;
        --transparent-text-color: #eee3;
        --transparent-text-emphasis-color: #fff7;
        --widget-color: #e9ecef;
        --widget-bg-color: #31373c;
        --nested-bg-color: #2d2e33;
        --nested-highlight-color: #33363b;
        --nested-border-color: #3e434e;
        --selected-bg-color: #3b3c49;
        --dark-tooltip-text-color: #ccc;
        --dark-tooltip-bg-color: #000;

        --bg-filter: invert();
        --mix-blend-mode: screen;
        --bg-blend-mode: difference;

        --valid-bg-color: #030;
        --valid-label-color: #050;
        --valid-highlight-color: #060;
        --valid-border-color: #080;
        --valid-text-color: #3e3;
        --valid-highlight-text-color: #6e6;

        --suggestion-bg-color: #023;
        --suggestion-label-color: #047;
        --suggestion-highlight-color: #036;
        --suggestion-border-color: #06d;
        --suggestion-text-color: #38e;
        --suggestion-highlight-text-color: #6ae;

        --warning-bg-color: #332701;
        --warning-label-color: #554102;
        --warning-highlight-color: #5f4100;
        --warning-border-color: #7e3b00;
        --warning-text-color: #e98c38;
        --warning-highlight-text-color: #f0ac71;

        --error-bg-color: #300;
        --error-label-color: #500;
        --error-highlight-color: #600;
        --error-border-color: #800;
        --error-text-color: #e33;
        --error-highlight-text-color: #e66;
    }
}
/* base styles */
.ideditor {
    background-color: var(--bg-color);
}

.ideditor .layer-osm path {
    fill: none;
}

/* IE/Edge needs these overrides for markers to show up */
.ideditor .layer-osm path.oneway-marker-path          { fill: #000; }
.ideditor .layer-osm path.sided-marker-natural-path   { fill: rgb(170, 170, 170); }
.ideditor .layer-osm path.sided-marker-coastline-path { fill: #77dede; }
.ideditor .layer-osm path.sided-marker-barrier-path   { fill: #ddd; }
.ideditor .layer-osm path.sided-marker-man_made-path  { fill: #fff; }

/* IE/Edge rule for <use> marker style */
.ideditor .layer-osm path.viewfield-marker-path {
    fill: #333;
    fill-opacity: 0.75;
    stroke: #fff;
    stroke-width: 0.5px;
    stroke-opacity: 0.75;
}
.ideditor .fill-wireframe .layer-osm path.viewfield-marker-path {   /* IE/Edge rule for <use> marker style */
    fill: none;
}

/* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
.ideditor .layer-osm use.icon path { fill: #333; }                       /* FF svg Maki icons */
.ideditor .layer-osm .turn use path { fill: #000; }                      /* FF turn restriction icons */
.ideditor #turn-only-shape2, .ideditor #turn-only-u-shape2 { fill: #7092ff; }      /* FF turn-only, turn-only-u */
.ideditor #turn-no-shape2, .ideditor #turn-no-u-shape2     { fill: #e06d5f; }      /* FF turn-no, turn-no-u */
.ideditor #turn-yes-shape2, .ideditor #turn-yes-u-shape2   { fill: #8cd05f; }      /* FF turn-yes, turn-yes-u */


/* No interactivity except what we specifically allow */
.ideditor .data-layer.osm *,
.ideditor .data-layer.notes * {
    pointer-events: none;
}

.ideditor .lasso .main-map {
    pointer-events: visibleStroke;
}


/* `.target` objects are interactive */
/* They can be picked up, clicked, hovered, or things can connect to them */
.ideditor .qaItem.target,
.ideditor .note.target,
.ideditor .node.target,
.ideditor .turn .target {
    pointer-events: fill;
    fill-opacity: 0.8;
    fill: currentColor;
    stroke: none;
}

.ideditor .way.target {
    pointer-events: stroke;
    fill: none;
    stroke-width: 12;
    stroke-opacity: 0.8;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ideditor[pointer='pen'] .way.target {
    stroke-width: 18;
}
.ideditor[pointer='touch'] .way.target {
    stroke-width: 32;
}
.ideditor[pointer='touch'] .node.vertex.target {
    pointer-events: painted;
    stroke: currentColor;
    stroke-width: 10;
}

/* `.target-nope` objects are explicitly forbidden to join to */
.ideditor .surface:not(.nope-disabled) .node.target.target-nope,
.ideditor .surface:not(.nope-disabled) .way.target.target-nope {
    cursor: not-allowed;
}


/* `.active` objects (currently being drawn or dragged) are not interactive */
/* This is important to allow the events to drop through to whatever is */
/* below them on the map, so you can still hover and connect to other things. */
.ideditor .layer-osm .active {
    pointer-events: none !important;
}

/* points, notes & QA */

/* points, notes, markers */
.ideditor g.qaItem .stroke,
.ideditor g.note .stroke {
    stroke: #222;
    stroke-width: 1;
    fill: #222;
    opacity: 0.6;
}

.ideditor g.qaItem.active .stroke,
.ideditor g.note.active .stroke {
    stroke: #222;
    stroke-width: 1;
    fill: #222;
    opacity: 0.8;
}

.ideditor g.point .stroke {
    stroke: #444;
    stroke-width: 1;
    fill: #fff;
}


.ideditor g.qaItem .shadow,
.ideditor g.point .shadow,
.ideditor g.note .shadow {
    fill: none;
    stroke: #f6634f;
    stroke-width: 16;
    stroke-opacity: 0;
}

.ideditor g.qaItem.hover:not(.selected) .shadow,
.ideditor g.note.hover:not(.selected) .shadow,
.ideditor g.point.related:not(.selected) .shadow,
.ideditor g.point.hover:not(.selected) .shadow {
    stroke-opacity: 0.5;
}

.ideditor g.qaItem.selected .shadow,
.ideditor g.note.selected .shadow,
.ideditor g.point.selected .shadow {
    stroke-opacity: 0.7;
}

/* g.note ellipse.stroke, */
.ideditor g.point ellipse.stroke {
    display: none;
}
.ideditor.mode-drag-note g.note.active ellipse.stroke,
.ideditor.mode-drag-node g.point.active ellipse.stroke {
    display: block;
}


/* vertices and midpoints */
.ideditor g.vertex .fill {
    fill: #000;
}
.ideditor g.vertex .stroke {
    stroke: #666;
    stroke-width: 1;
    fill: white;
}
.ideditor g.vertex.shared .stroke {
    fill: #bbb;
}
.ideditor g.midpoint .fill {
    fill: #eee;
    stroke: #444;
    stroke-opacity: .6;
    opacity: .7;
}

.ideditor g.vertex .shadow,
.ideditor g.midpoint .shadow {
    stroke-width: 6;
    fill: #f6634f;
    fill-opacity: 0;
}

.ideditor g.vertex.related:not(.selected) .shadow,
.ideditor g.vertex.hover:not(.selected) .shadow,
.ideditor g.midpoint.related:not(.selected) .shadow,
.ideditor g.midpoint.hover:not(.selected) .shadow {
    fill-opacity: 0.5;
}

.ideditor g.vertex.selected .shadow {
    fill-opacity: 0.7;
}


/* lines */
.ideditor .preset-icon .icon.iD-other-line {
    color: #989898;
}
.ideditor .preset-icon-container path.line.casing {
    stroke: #afafaf;
}

.ideditor path.line {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ideditor path.stroke {
    stroke: #000;
    stroke-width: 4;
}

.ideditor path.shadow {
    stroke: #f6634f;
    stroke-width: 16;
    stroke-opacity: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ideditor path.shadow.related:not(.selected),
.ideditor path.shadow.hover:not(.selected) {
    stroke-opacity: 0.4;
}

.ideditor path.shadow.selected {
    stroke-opacity: 0.7;
}

.ideditor path.line.stroke {
    stroke: #fff;
    stroke-width: 2;
}


/* Labels / Markers */
.ideditor text {
    font-size: 10px;
    color: #222;
    opacity: 1;
}

.ideditor .oneway .textpath.tag-waterway {
    fill: #002F35;
}

.ideditor .onewaygroup path.oneway,
.ideditor .viewfieldgroup path.viewfield,
.ideditor .sidedgroup path.sided {
    stroke-width: 6px;
}

.ideditor text.arealabel-halo,
.ideditor text.linelabel-halo,
.ideditor text.pointlabel-halo,
.ideditor text.arealabel,
.ideditor text.linelabel,
.ideditor text.pointlabel {
    dominant-baseline: middle;
    text-anchor: middle;
    font-size: 12px;
    font-weight: bold;
    fill: #333;
    transition: opacity 100ms linear;
}

.ideditor .labels-group.halo text {
    opacity: 0.7;
    stroke: #fff;
    stroke-width: 5px;
    stroke-miterlimit: 1;
}

.ideditor text.nolabel {
    opacity: 0 !important;
}
.ideditor text.point {
    font-size: 10px;
}

.ideditor .icon.areaicon-halo {
    opacity: 0.6;
    stroke: #999;
    stroke-width: 2px;
    stroke-miterlimit: 1;
}
.ideditor .icon.areaicon {
    fill: #222;
    opacity: 0.8;
}


/* Wikidata-tagged */
.ideditor g.point.tag-wikidata path.stroke,
.ideditor g.vertex.tag-wikidata circle.stroke {
    stroke-width: 2px;
    stroke: #666;
    fill: #eee;
}
.ideditor g.point.tag-wikidata .icon,
.ideditor g.vertex.tag-wikidata .icon {
    color: #666;
}

/* Selected Members */
.ideditor g.vertex.selected-member .shadow,
.ideditor g.point.selected-member .shadow,
.ideditor path.shadow.selected-member {
    stroke-opacity: 0.95;
    stroke: #FFDE70;
}

/* Highlighting */
.ideditor g.point.highlighted .shadow,
.ideditor path.shadow.highlighted {
    stroke-opacity: 0.95;
    stroke: #7092ff;
}
.ideditor g.vertex.highlighted .shadow {
    stroke-width: 7;
    stroke-opacity: 0.95;
    stroke: #7092ff;
}

/* Turn Restrictions */
.ideditor .points-group.turns g.turn rect,
.ideditor .points-group.turns g.turn circle {
    fill: none;
}

/* Turn restriction paths and vertices */
.ideditor .surface.tr .way.target,
.ideditor .surface.tr path.shadow.selected,
.ideditor .surface.tr path.shadow.related {
    stroke-width: 25px;
}

.ideditor .surface.tr path.shadow.selected,
.ideditor .surface.tr path.shadow.related,
.ideditor .surface.tr g.vertex.selected .shadow,
.ideditor .surface.tr g.vertex.related .shadow {
    stroke-opacity: 0.7;
    stroke: #777;
}
.ideditor .surface.tr path.shadow.related.allow,
.ideditor .surface.tr g.vertex.related.allow .shadow {
    stroke: #5b3;
}
.ideditor .surface.tr path.shadow.related.restrict,
.ideditor .surface.tr g.vertex.related.restrict .shadow {
    stroke: #d53;
}
.ideditor .surface.tr path.shadow.related.only,
.ideditor .surface.tr g.vertex.related.only .shadow {
    stroke: #68f;
}

/* Auxiliary temporary geometries for operations, e.g. reflect axis indicator */
.ideditor g.auxiliary path.reflect-axis {
    stroke: #7092ff;
    stroke-width: 3;
    stroke-dasharray: 8, 4;
    stroke-linecap: round;
    pointer-events: none;
}
.ideditor g.auxiliary path.preview {
    stroke: #ccc;
    stroke-width: 2;
    stroke-dasharray: 8, 4;
}

/* Visual Diffs
------------------
`highlight-edited` - visual diff activated
`added` - entity was created by the user
`moved` - node has different coordinates
`geometry-edited` - way has different nodes
`segment-edited` - one or both adjacents nodes moved
`retagged` - some tagging change has occurred
*/

/* Vertex visual diffs */
.ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow,
.ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow,
.ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
    fill-opacity: 0.8;
}
.ideditor .highlight-edited g.points g.node.vertex.added > circle.shadow {
    fill: rgb(133, 255, 103);
}
.ideditor .highlight-edited g.points g.node.vertex.retagged > circle.shadow {
    fill: #fcde5a;
}
.ideditor .highlight-edited g.points g.node.vertex.moved > circle.shadow {
    fill: rgb(255, 126, 46);
}

/* Point visual diffs */
.ideditor .highlight-edited g.points g.node.point.added > path.shadow,
.ideditor .highlight-edited g.points g.node.point.retagged > path.shadow,
.ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
    stroke-opacity: 0.8;
    stroke-width: 10;
}
.ideditor .highlight-edited g.points g.node.point.added > path.shadow {
    stroke: rgb(133, 255, 103);
}
.ideditor .highlight-edited g.points g.node.point.retagged > path.shadow {
    stroke: #fcde5a;
}
.ideditor .highlight-edited g.points g.node.point.moved > path.shadow {
    stroke: rgb(255, 126, 46);
}

/* Line/area segment visual diffs
- segments are rendered on top of the ways for convenience and to differentiate
  them from entire line diffs, so make them thin
*/
.ideditor .highlight-edited g.lines > path.line.segment-edited,
.ideditor .highlight-edited g.areas > path.area.segment-edited {
    stroke: rgb(255, 126, 46);
    stroke-dasharray: 10, 3;
    stroke-width: 1.5 !important;
    stroke-opacity: 1;
}

/* Entire line/area visual diffs */
.ideditor .highlight-edited path.line.shadow.added,
.ideditor .highlight-edited path.line.shadow.retagged,
.ideditor .highlight-edited path.line.shadow.geometry-edited,
.ideditor .highlight-edited path.area.shadow.added,
.ideditor .highlight-edited path.area.shadow.retagged,
.ideditor .highlight-edited path.area.shadow.geometry-edited {
    stroke-opacity: 0.6;
}
.ideditor .highlight-edited.fill-wireframe path.line.shadow.added,
.ideditor .highlight-edited.fill-wireframe path.line.shadow.retagged,
.ideditor .highlight-edited.fill-wireframe path.line.shadow.geometry-edited,
.ideditor .highlight-edited.fill-wireframe path.area.shadow.added,
.ideditor .highlight-edited.fill-wireframe path.area.shadow.retagged,
.ideditor .highlight-edited.fill-wireframe path.area.shadow.geometry-edited {
    stroke-width: 3;
}
.ideditor .highlight-edited path.line.shadow.added,
.ideditor .highlight-edited path.area.shadow.added {
    stroke: rgb(133, 255, 103);
}
.ideditor .highlight-edited path.area.shadow.retagged,
.ideditor .highlight-edited path.line.shadow.retagged {
    stroke: #fcde5a;
}
.ideditor .highlight-edited path.line.shadow.geometry-edited,
.ideditor .highlight-edited path.area.shadow.geometry-edited {
    stroke: rgb(255, 126, 46);
}

/* Default - light gray */
.ideditor path.area.stroke {
    stroke: rgb(170, 170, 170);
    stroke-width: 1;
}
.ideditor path.area.fill {
    stroke-width: 0;
    stroke: rgba(255, 255, 255, 0.3);
    fill: rgba(255, 255, 255, 0.3);
    fill-rule: evenodd;
}
.ideditor .preset-icon-fill path.fill {
    stroke: rgb(170, 170, 170);
    fill: rgba(170, 170, 170, 0.3);
}

.ideditor path.shadow.old-multipolygon,
.ideditor path.stroke.old-multipolygon {
    stroke-dasharray: 100, 5;
    stroke-linecap: butt;
}


/* Green things */
.ideditor path.stroke.tag-barrier-hedge,
.ideditor path.stroke.tag-landuse-flowerbed,
.ideditor path.stroke.tag-landuse-forest,
.ideditor path.stroke.tag-landuse-grass,
.ideditor path.stroke.tag-landuse-recreation_ground,
.ideditor path.stroke.tag-landuse-village_green,
.ideditor path.stroke.tag-leisure-garden,
.ideditor path.stroke.tag-leisure-golf_course,
.ideditor path.stroke.tag-leisure-nature_reserve,
.ideditor path.stroke.tag-leisure-park,
.ideditor path.stroke.tag-leisure-pitch,
.ideditor path.stroke.tag-leisure-track,
.ideditor path.stroke.tag-natural,
.ideditor path.stroke.tag-natural-wood,
.ideditor path.stroke.tag-golf-tee,
.ideditor path.stroke.tag-golf-fairway,
.ideditor path.stroke.tag-golf-rough,
.ideditor path.stroke.tag-golf-green {
    stroke: rgb(140, 208, 95);
}
.ideditor path.fill.tag-barrier-hedge,
.ideditor path.fill.tag-landuse-flowerbed,
.ideditor path.fill.tag-landuse-forest,
.ideditor path.fill.tag-landuse-grass,
.ideditor path.fill.tag-landuse-recreation_ground,
.ideditor path.fill.tag-landuse-village_green,
.ideditor path.fill.tag-leisure-garden,
.ideditor path.fill.tag-leisure-golf_course,
.ideditor path.fill.tag-leisure-nature_reserve,
.ideditor path.fill.tag-leisure-park,
.ideditor path.fill.tag-leisure-pitch,
.ideditor path.fill.tag-leisure-track,
.ideditor path.fill.tag-natural,
.ideditor path.fill.tag-natural-wood,
.ideditor path.fill.tag-golf-tee,
.ideditor path.fill.tag-golf-fairway,
.ideditor path.fill.tag-golf-rough,
.ideditor path.fill.tag-golf-green {
    stroke: rgba(140, 208, 95, 0.3);
    fill: rgba(140, 208, 95, 0.3);
}
.ideditor .pattern-color-forest,
.ideditor .pattern-color-forest_broadleaved,
.ideditor .pattern-color-forest_needleleaved,
.ideditor .pattern-color-forest_leafless,
.ideditor .pattern-color-wood,
.ideditor .pattern-color-grass {
    fill: rgba(140, 208, 95, 0.3);
}


/* Blue things */
.ideditor path.stroke.tag-amenity-fountain,
.ideditor path.fill.tag-landuse-basin,
.ideditor path.stroke.tag-leisure-swimming_pool,
.ideditor path.stroke.tag-natural-bay,
.ideditor path.stroke.tag-natural-strait,
.ideditor path.stroke.tag-natural-water {
    stroke: rgb(119, 211, 222);
}
.ideditor path.fill.tag-amenity-fountain,
.ideditor path.fill.tag-landuse-basin,
.ideditor path.fill.tag-leisure-swimming_pool,
.ideditor path.fill.tag-natural-bay,
.ideditor path.fill.tag-natural-strait,
.ideditor path.fill.tag-natural-water {
    stroke: rgba(119, 211, 222, 0.3);
    fill: rgba(119, 211, 222, 0.3);
}
.ideditor .pattern-color-waves,
.ideditor .pattern-color-water_standing,
.ideditor .pattern-color-pond {
    fill: rgba(119, 211, 222, 0.3);
}


/* Yellow things */
.ideditor path.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
.ideditor path.stroke.tag-leisure-pitch.tag-sport-baseball,
.ideditor path.stroke.tag-leisure-pitch.tag-sport-softball,
.ideditor path.stroke.tag-leisure-track,
.ideditor path.stroke.tag-natural-beach,
.ideditor path.stroke.tag-natural-sand,
.ideditor path.stroke.tag-natural-scrub,
.ideditor path.stroke.tag-amenity-childcare,
.ideditor path.stroke.tag-amenity-kindergarten,
.ideditor path.stroke.tag-amenity-school,
.ideditor path.stroke.tag-amenity-college,
.ideditor path.stroke.tag-amenity-university,
.ideditor path.stroke.tag-amenity-research_institute {
    stroke: rgba(255, 255, 148, 0.75);
}
.ideditor path.fill.tag-leisure-pitch.tag-sport-beachvolleyball,
.ideditor path.fill.tag-leisure-pitch.tag-sport-baseball,
.ideditor path.fill.tag-leisure-pitch.tag-sport-softball,
.ideditor path.fill.tag-leisure-track,
.ideditor path.fill.tag-natural-beach,
.ideditor path.fill.tag-natural-sand,
.ideditor path.fill.tag-natural-scrub,
.ideditor path.fill.tag-amenity-childcare,
.ideditor path.fill.tag-amenity-kindergarten,
.ideditor path.fill.tag-amenity-school,
.ideditor path.fill.tag-amenity-college,
.ideditor path.fill.tag-amenity-university,
.ideditor path.fill.tag-amenity-research_institute {
    stroke: rgba(255, 255, 148, 0.25);
    fill: rgba(255, 255, 148, 0.25);
}
.ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-beachvolleyball,
.ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-baseball,
.ideditor .preset-icon-fill path.area.stroke.tag-leisure-pitch.tag-sport-softball,
.ideditor .preset-icon-fill path.area.stroke.tag-leisure-track,
.ideditor .preset-icon-fill path.area.stroke.tag-natural-beach,
.ideditor .preset-icon-fill path.area.stroke.tag-natural-sand,
.ideditor .preset-icon-fill path.area.stroke.tag-natural-scrub,
.ideditor .preset-icon-fill path.area.stroke.tag-amenity-childcare,
.ideditor .preset-icon-fill path.area.stroke.tag-amenity-kindergarten,
.ideditor .preset-icon-fill path.area.stroke.tag-amenity-school,
.ideditor .preset-icon-fill path.area.stroke.tag-amenity-college,
.ideditor .preset-icon-fill path.area.stroke.tag-amenity-university,
.ideditor .preset-icon-fill path.area.stroke.tag-amenity-research_institute {
    stroke: rgb(232, 232, 0);
}
.ideditor .pattern-color-beach,
.ideditor .pattern-color-sand,
.ideditor .pattern-color-scrub {
    fill: rgba(255, 255, 148, 0.2);
}


/* Gold things */
.ideditor path.stroke.tag-landuse-residential,
.ideditor path.stroke.tag-status-construction {
    stroke: rgb(196, 189, 25);
}
.ideditor path.fill.tag-landuse-residential,
.ideditor path.fill.tag-status-construction {
    stroke: rgba(196, 189, 25, 0.3);
    fill: rgba(196, 189, 25, 0.3);
}
.ideditor .pattern-color-construction {
    fill: rgba(196, 189, 25, 0.3);
}


/* Formerly orange things.
   Fotoshi fork: shifted to slate with the buildings so Fotoshi orange
   stays the only warm mark on the map (design system, section 07). */
.ideditor path.stroke.tag-landuse-retail,
.ideditor path.stroke.tag-landuse-commercial,
.ideditor path.stroke.tag-landuse-landfill,
.ideditor path.stroke.tag-military,
.ideditor path.stroke.tag-landuse-military {
    stroke: rgb(91, 120, 147);
}
.ideditor path.fill.tag-landuse-retail,
.ideditor path.fill.tag-landuse-commercial,
.ideditor path.fill.tag-landuse-landfill,
.ideditor path.fill.tag-military,
.ideditor path.fill.tag-landuse-military {
    stroke: rgba(91, 120, 147, 0.3);
    fill: rgba(91, 120, 147, 0.3);
}
.ideditor .pattern-color-landfill {
    fill: rgba(91, 120, 147, 0.3);
}


/* Pink things */
.ideditor path.stroke.tag-landuse-industrial,
.ideditor path.stroke.tag-power-plant {
    stroke: rgb(228, 164, 245);
}
.ideditor path.fill.tag-landuse-industrial,
.ideditor path.fill.tag-power-plant {
    stroke: rgba(228, 164, 245, 0.3);
    fill: rgba(228, 164, 245, 0.3);
}


/* Teal things */
.ideditor path.stroke.tag-natural-wetland {
    stroke: rgb(153, 225, 170);
}
.ideditor path.fill.tag-natural-wetland {
    stroke: rgba(153, 225, 170, 0.3);
    fill: rgba(153, 225, 170, 0.3);
}
.ideditor .preset-icon-fill path.area.fill.tag-natural-wetland {
    fill: rgba(153, 225, 170, 0.2);
}
.ideditor .pattern-color-wetland,
.ideditor .pattern-color-wetland_marsh,
.ideditor .pattern-color-wetland_swamp,
.ideditor .pattern-color-wetland_bog,
.ideditor .pattern-color-wetland_reedbed {
    fill: rgba(153, 225, 170, 0.3);
}


/* Light Green things */
.ideditor path.stroke.tag-landuse-cemetery,
.ideditor path.stroke.tag-landuse-farmland,
.ideditor path.stroke.tag-landuse-grass.tag-golf-green,
.ideditor path.stroke.tag-landuse-meadow,
.ideditor path.stroke.tag-landuse-orchard,
.ideditor path.stroke.tag-landuse-vineyard {
    stroke: rgb(191, 232, 63);
}
.ideditor path.fill.tag-landuse-cemetery,
.ideditor path.fill.tag-landuse-farmland,
.ideditor path.fill.tag-landuse-grass.tag-golf-green,
.ideditor path.fill.tag-landuse-meadow,
.ideditor path.fill.tag-landuse-orchard,
.ideditor path.fill.tag-landuse-vineyard {
    stroke: rgba(191, 232, 63, 0.3);
    fill: rgba(191, 232, 63, 0.3);
}
.ideditor .preset-icon-fill path.area.fill.tag-landuse-cemetery,
.ideditor .preset-icon-fill path.area.fill.tag-landuse-farmland,
.ideditor .preset-icon-fill path.area.fill.tag-landuse-grass.tag-golf-green,
.ideditor .preset-icon-fill path.area.fill.tag-landuse-meadow,
.ideditor .preset-icon-fill path.area.fill.tag-landuse-orchard,
.ideditor .preset-icon-fill path.area.fill.tag-landuse-vineyard {
    fill: rgba(191, 232, 63, 0.4);
}
.ideditor .pattern-color-cemetery,
.ideditor .pattern-color-cemetery_buddhist,
.ideditor .pattern-color-cemetery_christian,
.ideditor .pattern-color-cemetery_jewish,
.ideditor .pattern-color-cemetery_muslim,
.ideditor .pattern-color-farmland,
.ideditor .pattern-color-golf_green,
.ideditor .pattern-color-meadow,
.ideditor .pattern-color-orchard,
.ideditor .pattern-color-vineyard {
    fill: rgba(191, 232, 63, 0.3);
}


/* Tan things */
.ideditor path.stroke.tag-landuse-farmyard,
.ideditor path.stroke.tag-leisure-horse_riding {
    stroke: rgb(245, 220, 186);
}
.ideditor path.fill.tag-landuse-farmyard,
.ideditor path.fill.tag-leisure-horse_riding {
    stroke: rgba(245, 220, 186, 0.3);
    fill: rgba(245, 220, 186, 0.3);
}
.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard
.preset-icon-fill path.area.stroke.tag-leisure-horse_riding {
    stroke: rgb(226, 177, 111);
}
.ideditor .pattern-color-farmyard {
    fill: rgba(245, 220, 186, 0.3);
}


/* Dark Gray things */
.ideditor path.stroke.tag-amenity-parking,
.ideditor path.stroke.tag-landuse-railway,
.ideditor path.stroke.tag-landuse-quarry,
.ideditor path.stroke.tag-leisure-pitch.tag-sport-basketball,
.ideditor path.stroke.tag-leisure-pitch.tag-sport-skateboard,
.ideditor path.stroke.tag-man_made-adit,
.ideditor path.stroke.tag-man_made-groyne,
.ideditor path.stroke.tag-man_made-breakwater,
.ideditor path.stroke.tag-natural-bare_rock,
.ideditor path.stroke.tag-natural-cave_entrance,
.ideditor path.stroke.tag-natural-cliff,
.ideditor path.stroke.tag-natural-rock,
.ideditor path.stroke.tag-natural-scree,
.ideditor path.stroke.tag-natural-stone,
.ideditor path.stroke.tag-natural-shingle,
.ideditor path.stroke.tag-waterway-dam,
.ideditor path.stroke.tag-waterway-weir {
    stroke: rgb(170, 170, 170);
}
.ideditor path.fill.tag-amenity-parking,
.ideditor path.fill.tag-landuse-railway,
.ideditor path.fill.tag-landuse-quarry,
.ideditor path.fill.tag-leisure-pitch.tag-sport-basketball,
.ideditor path.fill.tag-leisure-pitch.tag-sport-skateboard,
.ideditor path.fill.tag-man_made-adit,
.ideditor path.fill.tag-man_made-groyne,
.ideditor path.fill.tag-man_made-breakwater,
.ideditor path.fill.tag-natural-bare_rock,
.ideditor path.fill.tag-natural-cliff,
.ideditor path.fill.tag-natural-cave_entrance,
.ideditor path.fill.tag-natural-rock,
.ideditor path.fill.tag-natural-scree,
.ideditor path.fill.tag-natural-stone,
.ideditor path.fill.tag-natural-shingle,
.ideditor path.fill.tag-waterway-dam,
.ideditor path.fill.tag-waterway-weir {
    stroke: rgba(140, 140, 140, 0.5);
    fill: rgba(140, 140, 140, 0.5);
}
.ideditor .pattern-color-quarry {
    fill: rgba(140, 140, 140, 0.5);
}


/* Light gray overrides */
.ideditor path.stroke.tag-natural-cave_entrance,
.ideditor path.stroke.tag-natural-glacier {
    stroke: rgb(170, 170, 170);
}
.ideditor path.fill.tag-natural-cave_entrance,
.ideditor path.fill.tag-natural-glacier {
    stroke: rgba(255, 255, 255, 0.3);
    fill: rgba(255, 255, 255, 0.3);
}
.ideditor .preset-icon-fill path.fill.tag-natural-cave_entrance,
.ideditor .preset-icon-fill path.fill.tag-natural-glacier {
    stroke: rgb(170, 170, 170);
    fill: rgba(170, 170, 170, 0.3);
}
.ideditor preset-icon-container


.preset-icon .icon.tag-highway.other-line {
    color: #fff;
    fill: #777;
}
.ideditor path.line.casing.tag-highway {
    stroke: #444;
}
.ideditor path.line.stroke.tag-highway {
    stroke: #ccc;
}

/* wide highways */
.ideditor path.line.shadow.tag-highway {
    stroke-width: 20;
}
.ideditor path.line.casing.tag-highway {
    stroke-width: 10;
}
.ideditor path.line.stroke.tag-highway {
    stroke-width: 8;
}
.ideditor .low-zoom path.line.shadow.tag-highway {
    stroke-width: 16;
}
.ideditor .low-zoom path.line.casing.tag-highway {
    stroke-width: 7;
}
.ideditor .low-zoom path.line.stroke.tag-highway {
    stroke-width: 5;
}

.ideditor .preset-icon .icon.tag-highway-motorway,
.ideditor .preset-icon .icon.tag-highway-motorway_link {
    color: #CF2081;
    fill: #70372f;
}
.ideditor path.line.stroke.tag-highway-motorway,
.ideditor path.line.stroke.tag-highway-motorway_link,
.ideditor path.line.stroke.tag-motorway {
    stroke: #CF2081;
}
.ideditor path.line.casing.tag-highway-motorway,
.ideditor path.line.casing.tag-highway-motorway_link,
.ideditor path.line.casing.tag-motorway {
    stroke: #70372f;
}

.ideditor .preset-icon .icon.tag-highway-trunk,
.ideditor .preset-icon .icon.tag-highway-trunk_link {
    color: #DD2F22;
    fill: #70372f;
}
.ideditor path.line.stroke.tag-highway-trunk,
.ideditor path.line.stroke.tag-highway-trunk_link,
.ideditor path.line.stroke.tag-trunk {
    stroke: #DD2F22;
}
.ideditor path.line.casing.tag-highway-trunk,
.ideditor path.line.casing.tag-highway-trunk_link,
.ideditor path.line.casing.tag-trunk {
    stroke: #70372f;
}

.ideditor .preset-icon .icon.tag-highway-primary,
.ideditor .preset-icon .icon.tag-highway-primary_link {
    color: #F99806;
    fill: #70372f;
}
.ideditor path.line.stroke.tag-highway-primary,
.ideditor path.line.stroke.tag-highway-primary_link,
.ideditor path.line.stroke.tag-primary {
    stroke: #F99806;
}
.ideditor path.line.casing.tag-highway-primary,
.ideditor path.line.casing.tag-highway-primary_link,
.ideditor path.line.casing.tag-primary {
    stroke: #70372f;
}

.ideditor .preset-icon .icon.tag-highway-secondary,
.ideditor .preset-icon .icon.tag-highway-secondary_link {
    color: #F3F312;
    fill: #70372f;
}
.ideditor path.line.stroke.tag-highway-secondary,
.ideditor path.line.stroke.tag-highway-secondary_link,
.ideditor path.line.stroke.tag-secondary {
    stroke: #F3F312;
}
.ideditor path.line.casing.tag-highway-secondary,
.ideditor path.line.casing.tag-highway-secondary_link,
.ideditor path.line.casing.tag-secondary {
    stroke: #70372f;
}

.ideditor .preset-icon .icon.tag-highway-tertiary,
.ideditor .preset-icon .icon.tag-highway-tertiary_link {
    color: #FFF9B3;
    fill: #70372f;
}
.ideditor path.line.stroke.tag-highway-tertiary,
.ideditor path.line.stroke.tag-highway-tertiary_link,
.ideditor path.line.stroke.tag-tertiary {
    stroke: #FFF9B3;
}
.ideditor path.line.casing.tag-highway-tertiary,
.ideditor path.line.casing.tag-highway-tertiary_link,
.ideditor path.line.casing.tag-tertiary {
    stroke: #70372f;
}

.ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway,
.ideditor .legacy-carto .preset-icon .icon.tag-highway-motorway_link {
    color: #58a9ed;
    fill: #2c5476;
}
.ideditor .legacy-carto path.line.stroke.tag-highway-motorway,
.ideditor .legacy-carto path.line.stroke.tag-highway-motorway_link,
.ideditor .legacy-carto path.line.stroke.tag-motorway {
    stroke: #58a9ed;
}
.ideditor .legacy-carto path.line.casing.tag-highway-motorway,
.ideditor .legacy-carto path.line.casing.tag-highway-motorway_link,
.ideditor .legacy-carto path.line.casing.tag-motorway {
    stroke: #2c5476;
}

.ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk,
.ideditor .legacy-carto .preset-icon .icon.tag-highway-trunk_link {
    color: #8cd05f;
    fill: #46682f;
}
.ideditor .legacy-carto path.line.stroke.tag-highway-trunk,
.ideditor .legacy-carto path.line.stroke.tag-highway-trunk_link,
.ideditor .legacy-carto path.line.stroke.tag-trunk {
    stroke: #8cd05f;
}
.ideditor .legacy-carto path.line.casing.tag-highway-trunk,
.ideditor .legacy-carto path.line.casing.tag-highway-trunk_link,
.ideditor .legacy-carto path.line.casing.tag-trunk {
    stroke: #46682f;
}

.ideditor .legacy-carto .preset-icon .icon.tag-highway-primary,
.ideditor .legacy-carto .preset-icon .icon.tag-highway-primary_link {
    color: #e06d5f;
    fill: #70372f;
}
.ideditor .legacy-carto path.line.stroke.tag-highway-primary,
.ideditor .legacy-carto path.line.stroke.tag-highway-primary_link,
.ideditor .legacy-carto path.line.stroke.tag-primary {
    stroke: #e06d5f;
}
.ideditor .legacy-carto path.line.casing.tag-highway-primary,
.ideditor .legacy-carto path.line.casing.tag-highway-primary_link,
.ideditor .legacy-carto path.line.casing.tag-primary {
    stroke: #70372f;
}

.ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary,
.ideditor .legacy-carto .preset-icon .icon.tag-highway-secondary_link {
    color: #eab056;
    fill: #75582b;
}
.ideditor .legacy-carto path.line.stroke.tag-highway-secondary,
.ideditor .legacy-carto path.line.stroke.tag-highway-secondary_link,
.ideditor .legacy-carto path.line.stroke.tag-secondary {
    stroke: #eab056;
}
.ideditor .legacy-carto path.line.casing.tag-highway-secondary,
.ideditor .legacy-carto path.line.casing.tag-highway-secondary_link,
.ideditor .legacy-carto path.line.casing.tag-secondary {
    stroke: #75582b;
}

.ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary,
.ideditor .legacy-carto .preset-icon .icon.tag-highway-tertiary_link {
    color: #ffff7e;
    fill: #7f7f3f;
}
.ideditor .legacy-carto path.line.stroke.tag-highway-tertiary,
.ideditor .legacy-carto path.line.stroke.tag-highway-tertiary_link,
.ideditor .legacy-carto path.line.stroke.tag-tertiary {
    stroke: #ffff7e;
}
.ideditor .legacy-carto path.line.casing.tag-highway-tertiary,
.ideditor .legacy-carto path.line.casing.tag-highway-tertiary_link,
.ideditor .legacy-carto path.line.casing.tag-tertiary {
    stroke: #7f7f3f;
}

.ideditor .preset-icon .icon.tag-highway-residential {
    color: #fff;
    fill: #444;
}
.ideditor path.line.stroke.tag-highway-residential,
.ideditor path.line.stroke.tag-residential {
    stroke: #fff;
}
.ideditor path.line.casing.tag-highway-residential,
.ideditor path.line.casing.tag-residential {
    stroke: #444;
}

.ideditor .preset-icon .icon.tag-highway-unclassified {
    color: #dca;
    fill: #444;
}
.ideditor path.line.stroke.tag-highway-unclassified,
.ideditor path.line.stroke.tag-unclassified {
    stroke: #dca;
}
.ideditor path.line.casing.tag-highway-unclassified,
.ideditor path.line.casing.tag-unclassified {
    stroke: #444;
}


/* narrow highways */
.ideditor path.line.shadow.tag-highway-living_street,
.ideditor path.line.shadow.tag-highway-bus_guideway,
.ideditor path.line.shadow.tag-highway-service,
.ideditor path.line.shadow.tag-highway-track,
.ideditor path.line.shadow.tag-highway-road,
.ideditor path.line.shadow.tag-highway-motorway_link,
.ideditor path.line.shadow.tag-highway-trunk_link,
.ideditor path.line.shadow.tag-highway-primary_link,
.ideditor path.line.shadow.tag-highway-secondary_link,
.ideditor path.line.shadow.tag-highway-tertiary_link {
    stroke-width: 16;
}
.ideditor path.line.casing.tag-highway-living_street,
.ideditor path.line.casing.tag-highway-bus_guideway,
.ideditor path.line.casing.tag-highway-service,
.ideditor path.line.casing.tag-highway-track,
.ideditor path.line.casing.tag-highway-road,
.ideditor path.line.casing.tag-highway-motorway_link,
.ideditor path.line.casing.tag-highway-trunk_link,
.ideditor path.line.casing.tag-highway-primary_link,
.ideditor path.line.casing.tag-highway-secondary_link,
.ideditor path.line.casing.tag-highway-tertiary_link {
    stroke-width: 7;
}
.ideditor path.line.stroke.tag-highway-living_street,
.ideditor path.line.stroke.tag-highway-bus_guideway,
.ideditor path.line.stroke.tag-highway-service,
.ideditor path.line.stroke.tag-highway-track,
.ideditor path.line.stroke.tag-highway-road,
.ideditor path.line.stroke.tag-highway-motorway_link,
.ideditor path.line.stroke.tag-highway-trunk_link,
.ideditor path.line.stroke.tag-highway-primary_link,
.ideditor path.line.stroke.tag-highway-secondary_link,
.ideditor path.line.stroke.tag-highway-tertiary_link {
    stroke-width: 5;
}
.ideditor path.line.casing.tag-highway-service.tag-service-driveway {
    stroke-width: 6.25;
}
.ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
    stroke-width: 4.25;
}

.ideditor path.line.shadow.tag-highway-path,
.ideditor path.line.shadow.tag-highway-footway,
.ideditor path.line.shadow.tag-highway-cycleway,
.ideditor path.line.shadow.tag-highway-bridleway,
.ideditor path.line.shadow.tag-highway-corridor,
.ideditor path.line.shadow.tag-highway-ladder,
.ideditor path.line.shadow.tag-highway-via_ferrata,
.ideditor path.line.shadow.tag-highway-steps {
    stroke-width: 16;
}
.ideditor path.line.casing.tag-highway-path,
.ideditor path.line.casing.tag-highway-footway,
.ideditor path.line.casing.tag-highway-cycleway,
.ideditor path.line.casing.tag-highway-bridleway,
.ideditor path.line.casing.tag-highway-corridor,
.ideditor path.line.casing.tag-highway-ladder,
.ideditor path.line.casing.tag-highway-via_ferrata,
.ideditor path.line.casing.tag-highway-steps {
    stroke-width: 5;
}
.ideditor path.line.stroke.tag-highway-path,
.ideditor path.line.stroke.tag-highway-footway,
.ideditor path.line.stroke.tag-highway-cycleway,
.ideditor path.line.stroke.tag-highway-bridleway,
.ideditor path.line.stroke.tag-highway-corridor,
.ideditor path.line.stroke.tag-highway-ladder,
.ideditor path.line.stroke.tag-highway-via_ferrata,
.ideditor path.line.stroke.tag-highway-steps {
    stroke-width: 3;
}

.ideditor .low-zoom path.line.shadow.tag-highway-living_street,
.ideditor .low-zoom path.line.shadow.tag-highway-bus_guideway,
.ideditor .low-zoom path.line.shadow.tag-highway-service,
.ideditor .low-zoom path.line.shadow.tag-highway-track,
.ideditor .low-zoom path.line.shadow.tag-highway-road,
.ideditor .low-zoom path.line.shadow.tag-highway-motorway_link,
.ideditor .low-zoom path.line.shadow.tag-highway-trunk_link,
.ideditor .low-zoom path.line.shadow.tag-highway-primary_link,
.ideditor .low-zoom path.line.shadow.tag-highway-secondary_link,
.ideditor .low-zoom path.line.shadow.tag-highway-tertiary_link {
    stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-highway-living_street,
.ideditor .low-zoom path.line.casing.tag-highway-bus_guideway,
.ideditor .low-zoom path.line.casing.tag-highway-service,
.ideditor .low-zoom path.line.casing.tag-highway-track,
.ideditor .low-zoom path.line.casing.tag-highway-road,
.ideditor .low-zoom path.line.casing.tag-highway-motorway_link,
.ideditor .low-zoom path.line.casing.tag-highway-trunk_link,
.ideditor .low-zoom path.line.casing.tag-highway-primary_link,
.ideditor .low-zoom path.line.casing.tag-highway-secondary_link,
.ideditor .low-zoom path.line.casing.tag-highway-tertiary_link {
    stroke-width: 5;
}
.ideditor .low-zoom path.line.stroke.tag-highway-living_street,
.ideditor .low-zoom path.line.stroke.tag-highway-bus_guideway,
.ideditor .low-zoom path.line.stroke.tag-highway-service,
.ideditor .low-zoom path.line.stroke.tag-highway-track,
.ideditor .low-zoom path.line.stroke.tag-highway-road,
.ideditor .low-zoom path.line.stroke.tag-highway-motorway_link,
.ideditor .low-zoom path.line.stroke.tag-highway-trunk_link,
.ideditor .low-zoom path.line.stroke.tag-highway-primary_link,
.ideditor .low-zoom path.line.stroke.tag-highway-secondary_link,
.ideditor .low-zoom path.line.stroke.tag-highway-tertiary_link {
    stroke-width: 3;
}
.ideditor .low-zoom  path.line.casing.tag-highway-service.tag-service-driveway {
    stroke-width: 4.25;
}
.ideditor .low-zoom  path.line.stroke.tag-highway-service.tag-service-driveway {
    stroke-width: 2.25;
}

.ideditor .low-zoom path.line.shadow.tag-highway-path,
.ideditor .low-zoom path.line.shadow.tag-highway-footway,
.ideditor .low-zoom path.line.shadow.tag-highway-cycleway,
.ideditor .low-zoom path.line.shadow.tag-highway-bridleway,
.ideditor .low-zoom path.line.shadow.tag-highway-corridor,
.ideditor .low-zoom path.line.shadow.tag-highway-ladder,
.ideditor .low-zoom path.line.shadow.tag-highway-via_ferrata,
.ideditor .low-zoom path.line.shadow.tag-highway-steps {
    stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-highway-path,
.ideditor .low-zoom path.line.casing.tag-highway-footway,
.ideditor .low-zoom path.line.casing.tag-highway-cycleway,
.ideditor .low-zoom path.line.casing.tag-highway-bridleway,
.ideditor .low-zoom path.line.casing.tag-highway-corridor,
.ideditor .low-zoom path.line.casing.tag-highway-ladder,
.ideditor .low-zoom path.line.casing.tag-highway-via_ferrata,
.ideditor .low-zoom path.line.casing.tag-highway-steps {
    stroke-width: 3;
}
.ideditor .low-zoom path.line.stroke.tag-highway-path,
.ideditor .low-zoom path.line.stroke.tag-highway-footway,
.ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
.ideditor .low-zoom path.line.stroke.tag-highway-bridleway,
.ideditor .low-zoom path.line.stroke.tag-highway-corridor,
.ideditor .low-zoom path.line.stroke.tag-highway-ladder,
.ideditor .low-zoom path.line.stroke.tag-highway-via_ferrata,
.ideditor .low-zoom path.line.stroke.tag-highway-steps {
    stroke-width: 1;
}

/* living streets */
.ideditor .preset-icon .icon.tag-highway-living-street {
    color: #bbb;
    fill: #ddd;
}
.ideditor path.line.stroke.tag-highway-living_street,
.ideditor path.line.stroke.tag-living_street {
    stroke: #ccc;
}
.ideditor path.line.casing.tag-highway-living_street,
.ideditor path.line.casing.tag-living_street {
    stroke: #fff;
}

/* corridors */
.ideditor .preset-icon .icon.tag-highway-corridor {
    color: #8cd05f;
    fill: #fff;
}
.ideditor path.line.stroke.tag-highway-corridor,
.ideditor path.line.stroke.tag-corridor {
    stroke: #fff;
    stroke-dasharray: 2, 8;
}
.ideditor .low-zoom path.line.stroke.tag-highway-corridor,
.ideditor .low-zoom path.line.stroke.tag-corridor {
    stroke-dasharray: 1, 4;
}
.ideditor path.line.casing.tag-highway-corridor,
.ideditor path.line.casing.tag-corridor {
    stroke: #8cd05f;
    stroke-linecap: round;
    stroke-dasharray: none;
}

/* pedestrian streets */
.ideditor .preset-icon .icon.tag-highway-pedestrian {
    color: #988;
}
.ideditor path.line.stroke.tag-highway-pedestrian,
.ideditor path.line.stroke.tag-pedestrian {
    stroke: #fff;
    stroke-width: 3.5;
    stroke-dasharray: 6, 6;
    stroke-linecap: butt;
}
.ideditor path.line.stroke.tag-highway-pedestrian.tag-oneway,
.ideditor path.line.stroke.tag-pedestrian.tag-oneway {
    stroke-dasharray: 6, 6, 6, 18;
    stroke-dashoffset: 9;
}
.ideditor .low-zoom path.line.stroke.tag-highway-pedestrian,
.ideditor .low-zoom path.line.stroke.tag-pedestrian {
    stroke-width: 2;
    stroke-dasharray: 4, 4;
}
.ideditor path.line.casing.tag-highway-pedestrian,
.ideditor path.line.casing.tag-pedestrian {
    stroke: #988;
    stroke-linecap: round;
    stroke-dasharray: none;
}
.ideditor .preset-icon-container path.line.stroke.tag-highway-pedestrian {
    stroke-dasharray: 12, 12;
}

/* unknown roads */
.ideditor .preset-icon .icon.tag-highway-road {
    color: #9e9e9e;
    fill: #666;
}
.ideditor path.line.stroke.tag-highway-road,
.ideditor path.line.stroke.tag-road {
    stroke: #9e9e9e;
}
.ideditor path.line.casing.tag-highway-road,
.ideditor path.line.casing.tag-road {
    stroke: #666;
}

/* service roads */
.ideditor path.line.stroke.tag-highway-service {
    stroke: #fff;
}
.ideditor path.line.casing.tag-highway-service {
    stroke: #666;
}

/* special service roads and bus guideways */
/* with `service=* tag`  (e.g. parking_aisle, alley, drive-through) */
.ideditor path.line.stroke.tag-highway-bus_guideway,
.ideditor path.line.stroke.tag-highway-service.tag-service {
    stroke: #dca;
}
.ideditor path.line.casing.tag-highway-bus_guideway,
.ideditor path.line.casing.tag-highway-service.tag-service {
    stroke: #666;
}

.ideditor path.line.stroke.tag-highway-service.tag-service-parking_aisle {
    stroke: #cccac7;
}
.ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
    stroke: #fff6e4;
}
.ideditor path.line.stroke.tag-highway-service.tag-service-emergency_access {
    stroke: #ddb2aa;
}

/* unmaintained track roads */
.ideditor path.line.stroke.tag-highway-track,
.ideditor path.line.stroke.tag-track {
    stroke: #c5b59f;
}
.ideditor path.line.casing.tag-highway-track,
.ideditor path.line.casing.tag-track {
    stroke: #746f6f;
}

/* paths */
.ideditor path.line.stroke.tag-highway-path,
.ideditor path.line.stroke.tag-highway-footway,
.ideditor path.line.stroke.tag-highway-cycleway,
.ideditor path.line.stroke.tag-highway-bridleway {
    stroke-linecap: butt;
    stroke-dasharray: 6, 6;
}
.ideditor path.line.stroke.tag-highway-path.tag-oneway,
.ideditor path.line.stroke.tag-highway-footway.tag-oneway,
.ideditor path.line.stroke.tag-highway-cycleway.tag-oneway,
.ideditor path.line.stroke.tag-highway-bridleway.tag-oneway {
    stroke-dasharray: 6, 6, 6, 18;
    stroke-dashoffset: 9;
}
.ideditor .low-zoom path.line.stroke.tag-highway-path,
.ideditor .low-zoom path.line.stroke.tag-highway-footway,
.ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
.ideditor .low-zoom path.line.stroke.tag-highway-bridleway {
    stroke-linecap: butt;
    stroke-dasharray: 3, 3;
}

/* style for features that should have highway=footway but don't yet */
.ideditor path.line.stroke.tag-crossing,
.ideditor path.line.stroke.tag-footway-access_aisle,
.ideditor path.line.stroke.tag-public_transport-platform,
.ideditor path.line.stroke.tag-highway-platform,
.ideditor path.line.stroke.tag-railway-platform,
.ideditor path.line.stroke.tag-railway-platform_edge,
.ideditor path.line.stroke.tag-man_made-pier {
    stroke: #dca;
}

.ideditor path.line.casing.tag-highway-path,
.ideditor path.line.casing.tag-highway-footway.tag-public_transport-platform,
.ideditor path.line.casing.tag-highway-footway.tag-man_made-pier,
.ideditor path.line.casing.tag-highway.tag-crossing,
.ideditor path.line.casing.tag-highway.tag-footway-access_aisle {
    stroke: #dca;
    stroke-linecap: round;
    stroke-dasharray: none;
}
.ideditor path.line.casing.tag-highway-footway,
.ideditor path.line.casing.tag-highway-cycleway,
.ideditor path.line.casing.tag-highway-bridleway {
    stroke: #fff;
    stroke-linecap: round;
    stroke-dasharray: none;
}

.ideditor .preset-icon .icon.tag-highway-path,
.ideditor .preset-icon .icon.tag-highway-footway.tag-public_transport-platform,
.ideditor .preset-icon .icon.tag-highway-footway.tag-man_made-pier {
    color: #988;
    fill: #dca;
}
.ideditor path.line.stroke.tag-highway-path {
    stroke: #988;
}
.ideditor path.line.stroke.tag-highway-path.tag-bridge-boardwalk {
    stroke: #dca;
}

/* footways */
.ideditor .preset-icon .icon.tag-route-foot,
.ideditor .preset-icon .icon.tag-route-hiking,
.ideditor .preset-icon .icon.tag-highway-footway {
    color: #988;
    fill: #fff;
}
.ideditor path.line.stroke.tag-highway-footway,
.ideditor path.line.stroke.tag-highway-bus_stop,
.ideditor .preset-icon-container path.casing.tag-highway-footway {
    stroke: #988;
}
.ideditor .preset-icon .icon.tag-highway-footway.tag-footway-sidewalk {
    color: #d4b4b4;
}
.ideditor path.stroke.tag-highway-footway.tag-footway-sidewalk,
.ideditor .preset-icon-container path.casing.tag-highway-footway.tag-footway-sidewalk {
    stroke: #d4b4b4;
}
.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) {
    stroke: #fff;
}

/* cycleways */
.ideditor .preset-icon .icon.tag-route-bicycle,
.ideditor .preset-icon .icon.tag-highway-cycleway {
    color: #58a9ed;
    fill: #fff;
}
.ideditor path.line.stroke.tag-highway-cycleway,
.ideditor .preset-icon-container path.casing.tag-highway-cycleway {
    stroke: #58a9ed;
}
.ideditor .preset-icon-container path.stroke.tag-highway-cycleway:not(.tag-crossing) {
    stroke: #fff;
}

/* shared paths */
.ideditor path.line.casing.tag-highway-cycleway.tag-foot-designated:not(.tag-crossing),
.ideditor path.line.casing.tag-highway-path.tag-bicycle-designated.tag-foot-designated:not(.tag-crossing) {
    stroke: #fff;
}
.ideditor .preset-icon .icon.tag-highway-cycleway.tag-foot-designated,
.ideditor .preset-icon .icon.tag-highway-path.tag-bicycle-designated.tag-foot-designated {
    color: #b458ed;
    fill: #fff;
}
.ideditor path.line.stroke.tag-highway-cycleway.tag-foot-designated,
.ideditor path.line.stroke.tag-highway-path.tag-bicycle-designated.tag-foot-designated,
.ideditor .preset-icon-container path.casing.tag-highway-cycleway.tag-foot-designated,
.ideditor .preset-icon-container path.casing.tag-highway-path.tag-bicycle-designated.tag-foot-designated {
    stroke: #b458ed;
}
.ideditor .preset-icon-container path.stroke.tag-highway-cycleway.tag-foot-designated:not(.tag-crossing),
.ideditor .preset-icon-container path.stroke.tag-highway-path.tag-bicycle-designated.tag-foot-designated:not(.tag-crossing) {
    stroke: #fff;
}

/* bridleways */
.ideditor .preset-icon .icon.tag-route-horse,
.ideditor .preset-icon .icon.tag-highway-bridleway {
    color: #e06d5f;
    fill: #fff;
}
.ideditor path.line.stroke.tag-highway-bridleway,
.ideditor .preset-icon-container path.casing.tag-highway-bridleway {
    stroke: #e06d5f;
}
.ideditor .preset-icon-container path.stroke.tag-highway-bridleway {
    stroke: #fff;
}

/* racetracks */
.ideditor .preset-icon .icon.tag-leisure-track {
    color: rgb(229, 184, 43);
}
.ideditor path.line.stroke.tag-leisure-track,
.ideditor .preset-icon-container path.casing.tag-highway.tag-leisure-track {
    stroke: rgb(229, 184, 43);
}
.ideditor .preset-icon-container path.line.stroke.tag-highway.tag-leisure-track {
    stroke: #fff;
}

/* steps */
.ideditor .preset-icon .icon.tag-highway-ladder {
    color: #6f1f1f;
    fill: #fff;
}
.ideditor .preset-icon .icon.tag-highway-steps {
    color: #81d25c;
    fill: #fff;
}
.ideditor path.line.stroke.tag-highway-steps,
.ideditor path.line.stroke.tag-highway-ladder {
    stroke-linecap: butt;
    stroke-dasharray: 3, 3;
}
.ideditor .low-zoom path.line.stroke.tag-highway-steps,
.ideditor .low-zoom path.line.stroke.tag-highway-ladder {
    stroke-dasharray: 2, 2;
}
.ideditor path.line.casing.tag-highway-steps,
.ideditor path.line.casing.tag-highway-ladder {
    stroke: #fff;
    stroke-linecap: round;
    stroke-dasharray: none;
}
.ideditor path.line.stroke.tag-highway-ladder,
.ideditor .preset-icon-container path.line.casing.tag-highway-ladder {
    stroke: #6f1f1f;
}
.ideditor path.line.stroke.tag-highway-steps,
.ideditor .preset-icon-container path.line.casing.tag-highway-steps {
    stroke: #81d25c;
}
.ideditor .preset-icon-container path.line.stroke.tag-highway-steps,
.ideditor .preset-icon-container path.line.stroke.tag-highway-ladder {
    stroke: #fff;
}

.ideditor path.line.casing.tag-highway-via_ferrata {
    stroke: none;
}

.ideditor path.line.stroke.tag-highway-via_ferrata {
    stroke-width: 5;
    stroke: #6f1f1f;
    stroke-linecap: round;
    stroke-dasharray: 0, 9;
}

/* crossings */
.ideditor path.line.stroke.tag-highway.tag-crossing-unmarked {
    stroke-dasharray: 6, 4;
}
.ideditor path.line.stroke.tag-highway.tag-crossing-unmarked.tag-oneway {
    stroke-dasharray: 6, 4, 6, 20;
    stroke-dashoffset: 8;
}
.ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-unmarked {
    stroke-dasharray: 3, 2;
}
.ideditor path.line.stroke.tag-highway.tag-crossing-marked {
    stroke-dasharray: 6, 3;
}
.ideditor .low-zoom path.line.stroke.tag-highway.tag-crossing-marked {
    stroke-dasharray: 3, 1.5;
}
.ideditor path.line.stroke.tag-highway-footway.tag-crossing-marked {
    stroke: #4c4444;
}
.ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-marked {
    color: #4c4444;
}
.ideditor path.line.stroke.tag-highway-footway.tag-crossing-unmarked {
    stroke: #776a6a;
}
.ideditor .preset-icon .icon.tag-highway-footway.tag-crossing-unmarked {
    color: #776a6a;
}
.ideditor path.line.stroke.tag-highway-cycleway.tag-crossing-marked {
    stroke: #446077;
}
.ideditor .preset-icon .icon.tag-highway-cycleway.tag-crossing-marked {
    color: #446077;
}

.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
    stroke-dasharray: 4, 2;
    stroke: #4c4444;
}
.ideditor .low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle,
.ideditor .preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle {
    stroke-dasharray: 2.5, 1.5;
}
.ideditor .preset-icon .icon.tag-highway.tag-footway-access_aisle {
    color: #4c4444;
}


/* highway midpoints */
.ideditor g.midpoint.tag-highway-corridor .fill,
.ideditor g.midpoint.tag-highway-steps .fill,
.ideditor g.midpoint.tag-highway-ladder .fill,
.ideditor g.midpoint.tag-highway-path .fill,
.ideditor g.midpoint.tag-highway-footway .fill,
.ideditor g.midpoint.tag-highway-cycleway .fill,
.ideditor g.midpoint.tag-highway-bridleway .fill {
    fill: #fff;
    stroke: #333;
    stroke-opacity: .8;
    opacity: .8;
}
/* aeroways */

/* areas */
.ideditor path.area.stroke.tag-aeroway,
.ideditor .low-zoom path.area.stroke.tag-aeroway {
    stroke: #fff;
    stroke-dasharray: none;
    stroke-width: 1;
}
.ideditor path.area.fill.tag-aeroway-runway {
    stroke: rgba(0, 0, 0, 0.6);
    fill: rgba(0, 0, 0, 0.6);
}

/* lines */
/* narrow aeroways (taxiway) */
.ideditor path.line.shadow.tag-aeroway-taxiway,
.ideditor path.line.shadow.tag-taxiway {
    stroke-width: 16;
}
.ideditor path.line.casing.tag-aeroway-taxiway,
.ideditor path.line.casing.tag-taxiway {
    stroke: #666;
    stroke-width: 7;
}
.ideditor path.line.stroke.tag-aeroway-taxiway,
.ideditor path.line.stroke.tag-taxiway {
    stroke: #ff0;
    stroke-width: 5;
}
.ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway,
.ideditor .low-zoom path.line.shadow.tag-taxiway {
    stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-aeroway-taxiway,
.ideditor .low-zoom path.line.casing.tag-taxiway {
    stroke-width: 5;
}
.ideditor .low-zoom path.line.stroke.tag-aeroway-taxiway,
.ideditor .low-zoom path.line.stroke.tag-taxiway {
    stroke-width: 3;
}

/* wide aeroways (runway) */
.ideditor .preset-icon .icon.tag-aeroway-runway,
.ideditor .preset-icon .icon.tag-runway {
    color: #444;
    fill: #000;
}
.ideditor path.line.shadow.tag-aeroway-runway {
    stroke-width: 20;
}
.ideditor path.line.casing.tag-aeroway-runway {
    stroke-width: 10;
    stroke: #000;
    stroke-linecap: square;
}
.ideditor path.line.stroke.tag-aeroway-runway {
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-dasharray: 24, 48;
    stroke-dashoffset: -7;
}
.ideditor .low-zoom path.line.shadow.tag-aeroway-runway {
    stroke-width: 16;
}
.ideditor .low-zoom path.line.casing.tag-aeroway-runway {
    stroke-width: 7;
}
.ideditor .low-zoom path.line.stroke.tag-aeroway-runway {
    stroke-width: 2;
    stroke-dasharray: 12, 24;
}
.ideditor .preset-icon-container path.line.stroke.tag-aeroway-runway {
    stroke-dasharray: 0, 14, 8, 14;
}
/* railways */

/* defaults */
.ideditor .preset-icon .icon.tag-railway.other-line {
    color: #fff;
    fill: #777;
}
.ideditor .preset-icon .icon.tag-railway {
    color: #555;
}

/* lines */
/* narrow widths */
.ideditor path.line.shadow.tag-railway {
    stroke-width: 16;
}
.ideditor path.line.casing.tag-railway {
    stroke-width: 7;
}
.ideditor path.line.stroke.tag-railway {
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-dasharray: 10,8;
}
.ideditor path.line.stroke.tag-railway.tag-oneway {
    stroke-dasharray: 10, 26;
    stroke-dashoffset: 5;
}
.ideditor .low-zoom path.line.shadow.tag-railway {
    stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-railway {
    stroke-width: 5;
}
.ideditor .low-zoom path.line.stroke.tag-railway {
    stroke-width: 2;
    stroke-dasharray: 6, 6;
}
.ideditor .preset-icon-container path.line.stroke.tag-railway:not(.tag-status),
.ideditor .preset-icon-container path.line.stroke.tag-railway.tag-status-disused {
    stroke-dasharray: 6;
}

.ideditor path.line.casing.tag-railway.tag-railway-platform_edge,
.ideditor path.line.casing.tag-railway.tag-railway-platform {
    stroke-width: 0;
}
.ideditor path.line.stroke.tag-railway.tag-railway-platform_edge,
.ideditor path.line.stroke.tag-railway.tag-railway-platform {
    stroke-dasharray: none;
}

/* styles */
.ideditor path.line.casing.tag-railway {
    stroke: #555;
}
.ideditor path.line.stroke.tag-railway {
    stroke: #eee;
}

.ideditor .preset-icon .icon.tag-railway.tag-status {
    color: #999;
}
.ideditor path.line.casing.tag-railway.tag-status {
    stroke: #999;
}
.ideditor path.line.stroke.tag-railway.tag-status:not(.tag-service) {
    stroke: #eee;
}
.ideditor .preset-icon .icon.tag-railway.tag-status-disused {
    color: #808080;
}
.ideditor path.line.casing.tag-railway.tag-status-disused {
    stroke: #808080;
}

.ideditor path.line.casing.tag-railway-subway {
    stroke: #222;
}
.ideditor path.line.stroke.tag-railway-subway {
    stroke: #bbb;
}

/* railways with `service=* tag` (e.g. sidings, crossovers, etc.) */
.ideditor path.line.stroke.tag-railway.tag-service {
    stroke: #dca;
}
.ideditor path.line.casing.tag-railway.tag-service {
    stroke: #666;
}/* waterways */

/* defaults */
.ideditor .preset-icon .icon.tag-waterway.other-line {
    color: #7dd;
    fill: #7dd;
}
.ideditor .preset-icon .icon.tag-type-waterway:not(.tag-waterway-dam),
.ideditor .preset-icon .icon.tag-waterway:not(.tag-waterway-dam) {
    color: #7dd;
    fill: #fff;
}


/* areas */
.ideditor path.area.stroke.tag-waterway-dock,
.ideditor path.area.stroke.tag-waterway-boatyard,
.ideditor path.area.stroke.tag-waterway-fuel {
    stroke: white;
    stroke-width: 1;
}
.ideditor path.area.casing.tag-waterway-dock,
.ideditor path.area.casing.tag-waterway-boatyard,
.ideditor path.area.casing.tag-waterway-fuel {
    stroke: none;
}
.ideditor path.area.fill.tag-waterway-dock,
.ideditor path.area.fill.tag-waterway-boatyard,
.ideditor path.area.fill.tag-waterway-fuel {
    stroke: rgba(255, 255, 255, 0.3);
    fill: rgba(255, 255, 255, 0.3);
}

/* lines */
.ideditor path.line.fill.tag-waterway:not(.tag-waterway-dam) {
    stroke: rgba(119, 211, 222, 0.3);
    fill: rgba(119, 211, 222, 0.3);
}
.ideditor path.line.casing.tag-waterway:not(.tag-waterway-dam) {
    stroke: #444;
}
.ideditor path.line.stroke.tag-waterway:not(.tag-waterway-dam) {
    stroke: #7dd;
}


/* narrow waterways (default) */
.ideditor path.line.shadow.tag-waterway {
    stroke-width: 16;
}
.ideditor path.line.casing.tag-waterway {
    stroke-width: 7;
}
.ideditor path.line.stroke.tag-waterway {
    stroke-width: 5;
}

.ideditor .low-zoom path.line.shadow.tag-waterway {
    stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-waterway {
    stroke-width: 5;
}
.ideditor .low-zoom path.line.stroke.tag-waterway {
    stroke-width: 3;
}


/* wide waterways (river) */
.ideditor path.line.shadow.tag-waterway-river,
.ideditor path.line.shadow.tag-waterway-flowline {
    stroke-width: 20;
}
.ideditor path.line.casing.tag-waterway-river,
.ideditor path.line.casing.tag-waterway-flowline {
    stroke-width: 10;
}
.ideditor path.line.stroke.tag-waterway-river,
.ideditor path.line.stroke.tag-waterway-flowline {
    stroke-width: 8;
}

.ideditor .low-zoom path.line.shadow.tag-waterway-river,
.ideditor .low-zoom path.line.shadow.tag-waterway-flowline {
    stroke-width: 16;
}
.ideditor .low-zoom path.line.casing.tag-waterway-river,
.ideditor .low-zoom path.line.casing.tag-waterway-flowline {
    stroke-width: 7;
}
.ideditor .low-zoom path.line.stroke.tag-waterway-river,
.ideditor .low-zoom path.line.stroke.tag-waterway-flowline {
    stroke-width: 5;
}

.ideditor path.line.stroke.tag-waterway-flowline {
    stroke-opacity: 0.5;
}
.ideditor path.line.casing.tag-waterway-flowline {
    display: none;
}


/* ditch */
.ideditor .preset-icon .icon.tag-waterway-ditch {
    color: #39a;
}
.ideditor path.line.stroke.tag-waterway-ditch {
    stroke: #39a;
}

/* narrow width miscellaneous things */
.ideditor path.line.shadow.tag-aerialway,
.ideditor path.line.shadow.tag-attraction-summer_toboggan,
.ideditor path.line.shadow.tag-attraction-water_slide,
.ideditor path.line.shadow.tag-golf-cartpath,
.ideditor path.line.shadow.tag-man_made-pipeline,
.ideditor path.line.shadow.tag-natural-tree_row,
.ideditor path.line.shadow.tag-roller_coaster-track,
.ideditor path.line.shadow.tag-roller_coaster-support,
.ideditor path.line.shadow.tag-piste {
    stroke-width: 16;
}
.ideditor path.line.casing.tag-aerialway,
.ideditor path.line.casing.tag-attraction-summer_toboggan,
.ideditor path.line.casing.tag-attraction-water_slide,
.ideditor path.line.casing.tag-golf-cartpath,
.ideditor path.line.casing.tag-man_made-pipeline,
.ideditor path.line.casing.tag-natural-tree_row,
.ideditor path.line.casing.tag-roller_coaster-track,
.ideditor path.line.casing.tag-roller_coaster-support,
.ideditor path.line.casing.tag-piste {
    stroke-width: 7;
}
.ideditor path.line.stroke.tag-aerialway,
.ideditor path.line.stroke.tag-attraction-summer_toboggan,
.ideditor path.line.stroke.tag-attraction-water_slide,
.ideditor path.line.stroke.tag-golf-cartpath,
.ideditor path.line.stroke.tag-man_made-pipeline,
.ideditor path.line.stroke.tag-natural-tree_row,
.ideditor path.line.stroke.tag-roller_coaster-track,
.ideditor path.line.stroke.tag-roller_coaster-support,
.ideditor path.line.stroke.tag-piste {
    stroke-width: 5;
}

.ideditor .low-zoom path.line.shadow.tag-aerialway,
.ideditor .low-zoom path.line.shadow.tag-attraction-summer_toboggan,
.ideditor .low-zoom path.line.shadow.tag-attraction-water_slide,
.ideditor .low-zoom path.line.shadow.tag-golf-cartpath,
.ideditor .low-zoom path.line.shadow.tag-man_made-pipeline,
.ideditor .low-zoom path.line.shadow.tag-natural-tree_row,
.ideditor .low-zoom path.line.shadow.tag-roller_coaster-track,
.ideditor .low-zoom path.line.shadow.tag-roller_coaster-support,
.ideditor .low-zoom path.line.shadow.tag-piste {
    stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-aerialway,
.ideditor .low-zoom path.line.casing.tag-attraction-summer_toboggan,
.ideditor .low-zoom path.line.casing.tag-attraction-water_slide,
.ideditor .low-zoom path.line.casing.tag-golf-cartpath,
.ideditor .low-zoom path.line.casing.tag-man_made-pipeline,
.ideditor .low-zoom path.line.casing.tag-natural-tree_row,
.ideditor .low-zoom path.line.casing.tag-roller_coaster-track,
.ideditor .low-zoom path.line.casing.tag-roller_coaster-support,
.ideditor .low-zoom path.line.casing.tag-piste {
    stroke-width: 5;
}
.ideditor .low-zoom path.line.stroke.tag-aerialway,
.ideditor .low-zoom path.line.stroke.tag-attraction-summer_toboggan,
.ideditor .low-zoom path.line.stroke.tag-attraction-water_slide,
.ideditor .low-zoom path.line.stroke.tag-golf-cartpath,
.ideditor .low-zoom path.line.stroke.tag-man_made-pipeline,
.ideditor .low-zoom path.line.stroke.tag-natural-tree_row,
.ideditor .low-zoom path.line.stroke.tag-roller_coaster-track,
.ideditor .low-zoom path.line.stroke.tag-roller_coaster-support,
.ideditor .low-zoom path.line.stroke.tag-piste {
    stroke-width: 3;
}


/* ferry routes  */
.ideditor .preset-icon .icon.tag-route-ferry {
    color: #58a9ed;
    fill: #fff;
}
.ideditor path.line.shadow.tag-route-ferry {
    stroke-width: 16;
}
.ideditor path.line.stroke.tag-route-ferry {
    stroke: #58a9ed;
    stroke-width: 3;
    stroke-linecap: butt;
    stroke-dasharray: 12,8;
}
.ideditor .low-zoom path.line.shadow.tag-route-ferry {
    stroke-width: 12;
}
.ideditor .low-zoom path.line.stroke.tag-route-ferry,
.ideditor .preset-icon-container path.line.stroke.tag-route-ferry {
    stroke-width: 2;
    stroke-dasharray: 6,4;
}
.ideditor path.line.casing.tag-route-ferry {
    stroke: none;
}


/* aerialways */
.ideditor path.line.stroke.tag-aerialway {
    stroke: #c55;
}
.ideditor path.line.casing.tag-aerialway {
    stroke: #444;
}


/* pistes */
.ideditor path.line.stroke.tag-piste {
    stroke: #a9d;
}
.ideditor path.line.casing.tag-piste {
    stroke: #444;
}

/* climbing routes */
.ideditor path.line.stroke.tag-climbing-route {
    stroke: #6f1f1f;
    stroke-linecap: round;
    stroke-dasharray: 0, 7;
    stroke-width: 3;
}

/* Attractions */
.ideditor path.line.stroke.tag-attraction-summer_toboggan {
    stroke: #9e9e9e;
}
.ideditor path.line.casing.tag-attraction-summer_toboggan {
    stroke: #666;
}

.ideditor path.line.stroke.tag-attraction-water_slide {
    stroke: #aae0cb;
}
.ideditor path.line.casing.tag-attraction-water_slide {
    stroke: #3d6c71;
}

.ideditor path.line.stroke.tag-roller_coaster-track {
    stroke: #dddddd;
    stroke-width: 3;
    stroke-dasharray: 5, 1;
    stroke-linecap: butt;
}
.ideditor path.line.casing.tag-roller_coaster-track {
    stroke: #707070;
}

.ideditor path.line.stroke.tag-roller_coaster-support {
    stroke: #707070;
}
.ideditor path.line.casing.tag-roller_coaster-support {
    visibility: hidden;
}


/* golf cartpaths (like service roads) */
.ideditor .preset-icon .icon.tag-golf-cartpath {
    color: #dca;
    fill: #666;
}
.ideditor path.line.stroke.tag-golf-cartpath {
    stroke: #dca;
}
.ideditor path.line.casing.tag-golf-cartpath {
    stroke: #666;
}


/* power and pipeline */
.ideditor .preset-icon .icon.tag-man_made-pipeline,
.ideditor .preset-icon .icon.tag-power {
    color: #939393;
    fill: #939393;
}


/* power */
.ideditor path.line.stroke.tag-power {
    stroke: #939393;
    stroke-width: 2;
}
.ideditor path.line.casing.tag-power {
    stroke: none;
}


/* pipeline */
.ideditor path.line.stroke.tag-man_made-pipeline {
    stroke: #cbd0d8;
    stroke-linecap: butt;
    stroke-dasharray: 80, 1.25;
}
.ideditor path.line.casing.tag-man_made-pipeline {
    stroke: #666;
}
.ideditor .low-zoom path.line.stroke.tag-man_made-pipeline {
    stroke-dasharray: 40, 1;
}
.ideditor .preset-icon-container path.line.stroke.tag-man_made-pipeline {
    stroke-dasharray: 19, 1;
}


/* boundaries */
.ideditor path.line.stroke.tag-boundary {
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-dasharray: 20, 5, 5, 5;
}
.ideditor path.line.casing.tag-boundary {
    stroke: #82b5fe;
    stroke-width: 6;
}

.ideditor path.line.casing.tag-boundary-protected_area,
.ideditor path.line.casing.tag-boundary-national_park {
    stroke: #b0e298;
}


/* barriers and similar */
.ideditor path.line.stroke.tag-barrier:not(.tag-barrier-hedge):not(.tag-waterway) {
    stroke: #ddd;
}
.ideditor .preset-icon-container path.line.stroke.tag-barrier:not(.tag-barrier-hedge) {
    stroke: rgb(170, 170, 170);
}
.ideditor path.line.casing.tag-natural,
.ideditor path.line.casing.tag-barrier:not(.tag-waterway),
.ideditor path.line.casing.tag-man_made-groyne,
.ideditor path.line.casing.tag-man_made-breakwater {
    stroke: none;
}
.ideditor path.line.stroke.tag-barrier:not(.tag-waterway),
.ideditor path.line.stroke.tag-man_made-groyne,
.ideditor path.line.stroke.tag-man_made-breakwater {
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-dasharray: 15, 5, 1, 5;
}
.ideditor .low-zoom path.line.stroke.tag-barrier:not(.tag-waterway),
.ideditor .low-zoom path.line.stroke.tag-man_made-groyne,
.ideditor .low-zoom path.line.stroke.tag-man_made-breakwater {
    stroke-width: 2px;
    stroke-linecap: butt;
    stroke-dasharray: 8, 2, 2, 2;
}
.ideditor .preset-icon-container path.line.stroke.tag-barrier,
.ideditor .preset-icon-container path.line.stroke.tag-man_made-groyne,
.ideditor .preset-icon-container path.line.stroke.tag-man_made-breakwater {
    stroke-dasharray: 1, 4, 6, 4;
}
.ideditor path.line.stroke.tag-barrier.tag-barrier-wall,
.ideditor path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
.ideditor path.line.stroke.tag-barrier.tag-barrier-city_wall {
    stroke-linecap: butt;
    stroke-dasharray: 16, 3, 9, 3;
}
.ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-wall,
.ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
.ideditor .low-zoom path.line.stroke.tag-barrier.tag-barrier-city_wall,
.ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-wall,
.ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-retaining_wall,
.ideditor .preset-icon-container path.line.stroke.tag-barrier.tag-barrier-city_wall {
    stroke-dasharray: 8, 1, 4, 1;
}


/* bridges */
.ideditor path.line.casing.tag-bridge {
    stroke-opacity: 0.6;
    stroke: #000 !important;
    stroke-width: 16;
    stroke-linecap: butt;
    stroke-dasharray: none;
}
.ideditor path.line.shadow.tag-bridge {
    stroke-width: 24;
}
.ideditor .low-zoom path.line.shadow.tag-bridge {
    stroke-width: 16;
}
.ideditor .low-zoom path.line.casing.tag-bridge {
    stroke-width: 10;
}

.ideditor path.line.shadow.tag-railway.tag-bridge,
.ideditor path.line.shadow.tag-highway-living_street.tag-bridge,
.ideditor path.line.shadow.tag-highway-path.tag-bridge,
.ideditor path.line.shadow.tag-highway-corridor.tag-bridge,
.ideditor path.line.shadow.tag-highway-pedestrian.tag-bridge,
.ideditor path.line.shadow.tag-highway-service.tag-bridge,
.ideditor path.line.shadow.tag-highway-track.tag-bridge,
.ideditor path.line.shadow.tag-highway-steps.tag-bridge,
.ideditor path.line.shadow.tag-highway-ladder.tag-bridge,
.ideditor path.line.shadow.tag-highway-footway.tag-bridge,
.ideditor path.line.shadow.tag-highway-cycleway.tag-bridge,
.ideditor path.line.shadow.tag-highway-bridleway.tag-bridge {
    stroke-width: 18;
}
.ideditor path.line.casing.tag-railway.tag-bridge,
.ideditor path.line.casing.tag-highway-living_street.tag-bridge,
.ideditor path.line.casing.tag-highway-path.tag-bridge,
.ideditor path.line.casing.tag-highway-corridor.tag-bridge,
.ideditor path.line.casing.tag-highway-pedestrian.tag-bridge,
.ideditor path.line.casing.tag-highway-service.tag-bridge,
.ideditor path.line.casing.tag-highway-track.tag-bridge,
.ideditor path.line.casing.tag-highway-steps.tag-bridge,
.ideditor path.line.casing.tag-highway-ladder.tag-bridge,
.ideditor path.line.casing.tag-highway-footway.tag-bridge,
.ideditor path.line.casing.tag-highway-cycleway.tag-bridge,
.ideditor path.line.casing.tag-highway-bridleway.tag-bridge {
    stroke-width: 10;
}

.ideditor .low-zoom path.line.shadow.tag-railway.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-living_street.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-path.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-corridor.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-pedestrian.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-service.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-track.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-steps.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-ladder.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-footway.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge {
    stroke-width: 14;
}
.ideditor .low-zoom path.line.casing.tag-railway.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-living_street.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-path.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-corridor.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-pedestrian.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-service.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-track.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-steps.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-ladder.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-footway.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge {
    stroke-width: 6;
}


/* tunnels */
.ideditor path.line.stroke.tag-tunnel,
.ideditor path.line.stroke.tag-location-underground,
.ideditor path.line.stroke.tag-location-underwater {
    stroke-opacity: 0.3;
}
.ideditor path.line.casing.tag-tunnel,
.ideditor path.line.casing.tag-location-underground,
.ideditor path.line.casing.tag-location-underwater {
    stroke-opacity: 0.5;
    stroke-linecap: butt;
    stroke-dasharray: none;
}


/* embankments / cuttings */
.ideditor path.line.shadow.tag-embankment,
.ideditor path.line.shadow.tag-cutting {
    stroke-width: 28;
}
.ideditor path.line.casing.tag-embankment,
.ideditor path.line.casing.tag-cutting {
    stroke-opacity: 0.5;
    stroke: #000;
    stroke-width: 22;
    stroke-dasharray: 2, 4;
    stroke-linecap: butt;
}

.ideditor .low-zoom path.line.shadow.tag-embankment,
.ideditor .low-zoom path.line.shadow.tag-cutting {
    stroke-width: 14;
}
.ideditor .low-zoom path.line.casing.tag-embankment,
.ideditor .low-zoom path.line.casing.tag-cutting {
    stroke-width: 10;
}


/* Surface - unpaved */
.ideditor path.line.casing.tag-unpaved {
    stroke: #ccc;
    stroke-linecap: butt;
    stroke-dasharray: 4, 4;
}
.ideditor .low-zoom path.line.casing.tag-unpaved {
    stroke-dasharray: 3, 3;
}
.ideditor path.line.casing.tag-bridge.tag-unpaved {
    stroke: #000;
}
/* Surface - semipaved */
.ideditor path.line.casing.tag-semipaved {
    stroke-linecap: butt;
    stroke-dasharray: 6, 2;
}
.ideditor .low-zoom path.line.casing.tag-semipaved {
    stroke-dasharray: 5, 2;
}
.ideditor path.line.casing.tag-bridge.tag-semipaved {
    stroke: #000;
}


/* Status (e.g. proposed, abandoned) */
.ideditor path.area.stroke.tag-status:not(.tag-status-disused),
.ideditor path.line.stroke.tag-status:not(.tag-status-disused),
.ideditor path.area.casing.tag-status:not(.tag-status-disused),
.ideditor path.line.casing.tag-status:not(.tag-status-disused) {
    stroke-linecap: butt;
    stroke-dasharray: 7, 3;
}
.ideditor .low-zoom path.area.stroke.tag-status:not(.tag-status-disused),
.ideditor .low-zoom path.line.stroke.tag-status:not(.tag-status-disused),
.ideditor .low-zoom path.area.casing.tag-status:not(.tag-status-disused),
.ideditor .low-zoom path.line.casing.tag-status:not(.tag-status-disused) {
    stroke-dasharray: 5, 2;
}

/* Road Closed Status */
.ideditor .preset-icon .icon.tag-highway.tag-status-construction {
    color: #fc6c14;
    fill: #fff;
}
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction {
    stroke-width: 20;
}
.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction {
    stroke-width: 10;
    stroke-linecap: butt;
    stroke-dasharray: none
}
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction {
    stroke-width: 8;
    stroke-linecap: butt;
    stroke-dasharray: 10, 10;
}
.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction,
.ideditor .preset-icon-container path.line.stroke.tag-highway.tag-status.tag-status-construction {
    stroke: #fff;
}
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction,
.ideditor .preset-icon-container path.line.casing.tag-highway.tag-status.tag-status-construction {
    stroke: #fc6c14;
}
.ideditor .low-zoom path.line.shadow.tag-highway.tag-status.tag-status-construction {
    stroke-width: 16;
}
.ideditor .low-zoom path.line.casing.tag-highway.tag-status.tag-status-construction {
    stroke-width: 7;
}
.ideditor .low-zoom path.line.stroke.tag-highway.tag-status.tag-status-construction {
    stroke-width: 5;
    stroke-dasharray: 8, 8;
}

/** Closed Paths */
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-path,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
    stroke-width: 15;
}
.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-path,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
    stroke-width: 5;
    stroke-linecap: butt;
    stroke-dasharray: none
}
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-path,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
    stroke-width: 4;
    stroke-linecap: butt;
    stroke-dasharray: 10, 10;
}

/** Proposed Paths */
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
    stroke-width: 15;
}
.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
    stroke-width: 4.5;
}
.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-path,
.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-footway,
.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-cycleway,
.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-bridleway,
.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-steps,
.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-ladder {
    stroke-width: 10;
}
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
    stroke-width: 3;
}

/* Buildings.
   Fotoshi fork: slate #5B7893 instead of iD's warm red — the red sat ~7°
   from Fotoshi orange, so photographed and un-photographed polygons read
   as the same mark. Cool slate is the hue furthest from orange, leaving
   orange as the only warm mark on the map (design system, section 07). */
.ideditor path.stroke.tag-building {
    stroke: rgb(91, 120, 147);
}
.ideditor path.fill.tag-building {
    stroke: rgba(91, 120, 147, 0.2);
    fill: rgba(91, 120, 147, 0.2);
}
/* Cursors */

.ideditor .nope,
.ideditor .nope * {
    cursor: not-allowed !important;
}

.ideditor .map-in-map,
.ideditor .main-map {
    cursor: auto; /* Opera */
    cursor: url(img/cursor/grab.png) 9 9, auto; /* FF */
}

.ideditor.mode-browse .point,
.ideditor.mode-select .point,
.ideditor.mode-select-data .point,
.ideditor.mode-select-error .point,
.ideditor.mode-select-note .point {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor/select-point.png), pointer; /* FF */
}

.ideditor.mode-browse .vertex,
.ideditor.mode-select .vertex,
.ideditor.mode-select-data .vertex,
.ideditor.mode-select-error .vertex,
.ideditor.mode-select-note .vertex {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor/select-vertex.png), pointer; /* FF */
}

.ideditor.mode-browse .line,
.ideditor.mode-select .line,
.ideditor.mode-select-data .line,
.ideditor.mode-select-error .line,
.ideditor.mode-select-note .line {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor/select-line.png), pointer; /* FF */
}

.ideditor.mode-browse .area,
.ideditor.mode-select .area,
.ideditor.mode-select-data .area,
.ideditor.mode-select-error .area,
.ideditor.mode-select-note .area {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor/select-area.png), pointer; /* FF */
}

.ideditor.mode-browse .midpoint,
.ideditor.mode-select .midpoint,
.ideditor.mode-select-data .midpoint,
.ideditor.mode-select-error .midpoint,
.ideditor.mode-select-note .midpoint {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor/select-split.png), pointer; /* FF */
}

.ideditor.mode-select .behavior-multiselect .point,
.ideditor.mode-select .behavior-multiselect .vertex,
.ideditor.mode-select .behavior-multiselect .line,
.ideditor.mode-select .behavior-multiselect .area {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor/select-add.png), pointer; /* FF */
}

.ideditor.mode-select .behavior-multiselect .selected {
    cursor: pointer; /* Opera */
    cursor: url(img/cursor/select-remove.png), pointer; /* FF */
}

.ideditor.mode-add-preset .main-map,
.ideditor.mode-draw-line .main-map,
.ideditor.mode-draw-area .main-map,
.ideditor.mode-add-line  .main-map,
.ideditor.mode-add-area  .main-map,
.ideditor.mode-drag-node .main-map,
.ideditor.mode-drag-note .main-map {
    cursor: crosshair; /* Opera */
    cursor: url(img/cursor/draw.png) 9 9, crosshair; /* FF */
}

.ideditor.mode-draw-line .way.target,
.ideditor.mode-draw-area .way.target,
.ideditor.mode-add-line  .way.target,
.ideditor.mode-add-area  .way.target,
.ideditor.mode-drag-node .way.target {
    cursor: crosshair; /* Opera */
    cursor: url(img/cursor/draw-connect-line.png) 9 9, crosshair; /* FF */
}

.ideditor.mode-draw-line .vertex.target,
.ideditor.mode-draw-area .vertex.target,
.ideditor.mode-add-line  .vertex.target,
.ideditor.mode-add-area  .vertex.target,
.ideditor.mode-drag-node .vertex.target {
    cursor: crosshair; /* Opera */
    cursor: url(img/cursor/draw-connect-vertex.png) 9 9, crosshair; /* FF */
}

.ideditor.mode-add-point .main-map,
.ideditor.mode-add-note .main-map,
.ideditor.mode-browse.lasso .main-map,
.ideditor.mode-browse.lasso .way,
.ideditor.mode-browse.lasso .vertex,
.ideditor.mode-browse.lasso .midpoint,
.ideditor.mode-select.lasso .main-map,
.ideditor.mode-select.lasso .way,
.ideditor.mode-select.lasso .vertex,
.ideditor.mode-select.lasso .midpoint {
    cursor: crosshair; /* Opera */
    cursor: url(img/cursor/draw.png) 9 9, crosshair; /* FF */
}

.ideditor.mode-browse .note,
.ideditor.mode-select .note,
.ideditor.mode-select-data .note,
.ideditor.mode-select-error .note,
.ideditor.mode-select-note .note {
    cursor: pointer;
}

.ideditor.mode-browse .qaItem,
.ideditor.mode-select .qaItem,
.ideditor.mode-select-data .qaItem,
.ideditor.mode-select-error .qaItem,
.ideditor.mode-select-note .qaItem {
    cursor: pointer;
}

/* turn restriction editor */
.ideditor .turn rect,
.ideditor .turn circle {
    cursor: pointer;
}
/* legend */
.ideditor li.list-item-photos.active:after {
    display: block;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    width: 8px;
}
.ideditor[dir='rtl'] li.list-item-photos.active:after {
    right: auto;
    left: 0;
}

/* photo viewer div */
.ideditor .photoviewer {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 10px;
    width: 330px;
    height: 250px;
    padding: 5px;
    background-color: var(--bg-color);
}
.ideditor[dir='ltr'] .photoviewer {
    margin-left: 10px;
    margin-right: 2px;
}
.ideditor[dir='rtl'] .photoviewer {
    margin-right: 10px;
    margin-left: 2px;
}

@media screen and (min-width: 1600px) {
    .ideditor .photoviewer {
        width: 490px;
        height: 370px;
    }
}

.ideditor .photoviewer button.thumb-hide {
    border-radius: 0;
    padding: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 50;
}

.ideditor .photoviewer button.set-photo-from-viewer {
    border-radius: 0;
    padding: 5px;
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 50;
}

.ideditor .photoviewer button.resize-handle-xy {
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 49;
    cursor: nesw-resize;
    height: 25px;
    width: 25px;
}

.ideditor .photoviewer button.resize-handle-x {
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 48;
    cursor: ew-resize;
    height: auto;
    width: 6px;
}

.ideditor .photoviewer button.resize-handle-y {
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 48;
    cursor: ns-resize;
    height: 6px;
    width: 100%;
}


.ideditor .photo-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ideditor .photo-wrapper .photo-attribution {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    font-size: 10px;
    text-align: right;
    line-height: 150%;
    padding: 4px 8px;
    z-index: 10;
}
.ideditor .photo-attribution-dual {
    display: flex;
    justify-content: space-between;
}

.ideditor .photo-attribution a,
.ideditor .photo-attribution a:visited,
.ideditor .photo-attribution span {
    padding: 4px 2px;
    color: #fff;
    text-wrap: nowrap;
}

/* markers and sequences */
.ideditor .viewfield-group {
    pointer-events: none;
}
.ideditor.mode-browse .viewfield-group,
.ideditor.mode-select .viewfield-group,
.ideditor.mode-select-data .viewfield-group,
.ideditor.mode-select-error .viewfield-group,
.ideditor.mode-select-note .viewfield-group {
    pointer-events: visible;
    cursor: pointer;
}

.ideditor .viewfield-group circle {
    stroke: #555;
    stroke-width: 1;
    stroke-opacity: 0.4;
    fill-opacity: 0.4;
}
.ideditor .viewfield-group .viewfield {
    stroke-width: 0;
    stroke: #222;
    fill-opacity: 0.4;
}
.ideditor .viewfield-group.highlighted circle {
    stroke: #222;
    stroke-opacity: 0.9;
    fill-opacity: 0.9;
}
.ideditor .viewfield-group.highlighted .viewfield {
    stroke-width: 1;
    fill-opacity: 0.8;
}
.ideditor .viewfield-group.hovered circle {
    fill: #eebb00;
    stroke: #222;
    stroke-width: 2;
    stroke-opacity: 0.9;
    fill-opacity: 0.9;
}
.ideditor .viewfield-group.hovered .viewfield {
    fill: #eebb00;
    stroke: #222;
    stroke-width: 1;
    fill-opacity: 0.8;
}
.ideditor .viewfield-group.currentView circle {
    fill: #ffee00;
    stroke: #222;
    stroke-width: 2;
    stroke-opacity: 1;
    fill-opacity: 1;
}
.ideditor .viewfield-group.currentView .viewfield {
    fill: #ffee00;
    stroke: #222;
    stroke-width: 1;
    stroke-opacity: 1;
    fill-opacity: 0.9;
}


.ideditor .viewfield-group.currentView .viewfield-scale {
    transform: scale(2,2);
}

.ideditor .sequence {
    fill: none;
    stroke-width: 2;
    stroke-opacity: 0.6;
}
.ideditor .sequence.highlighted,
.ideditor .sequence.currentView {
    stroke-width: 4;
    stroke-opacity: 1;
}


/* Streetside Image Layer */
.ideditor li.list-item-photos.list-item-streetside.active:after {
    background-color: #0fffc4;
}
.ideditor .layer-streetside-images {
    pointer-events: none;
}
.ideditor .layer-streetside-images .viewfield-group * {
    fill: #0fffc4;
}
.ideditor .layer-streetside-images .sequence {
    stroke: #0fffc4;
    stroke-opacity: 0.85;  /* bump opacity - only one per road */
}

/* Vegbilder Image Layer */
.ideditor li.list-item-photos.list-item-vegbilder.active:after {
    background-color: #ed1c2e;
}
.ideditor .layer-vegbilder {
    pointer-events: none;
}
.ideditor .layer-vegbilder .viewfield-group * {
    fill: #ed1c2e;
}
.ideditor .layer-vegbilder .sequence {
    stroke: #ed1c2e;
    stroke-opacity: 0.85;  /* bump opacity - only one per road */
}


/* Mapillary Image Layer */
.ideditor li.list-item-photos.list-item-mapillary.active:after {
    background-color: #55ff22;
}
.ideditor .layer-mapillary {
    pointer-events: none;
}
.ideditor .layer-mapillary .viewfield-group * {
    fill: #55ff22;
}
.ideditor .layer-mapillary .sequence {
    stroke: #55ff22;
}


/* Mapillary Traffic Signs and Map Features Layers */
.ideditor .layer-mapillary-detections {
    pointer-events: none;
}
.ideditor .layer-mapillary-detections .icon-detected {
    outline: 2px solid transparent;
    pointer-events: visible;
    cursor: pointer;
    opacity: 0.75;
}
.ideditor .layer-mapillary-detections .icon-detected rect {
    fill: none;
}
.ideditor .layer-mapillary-detections .icon-detected:active {
    opacity: 1;
}
.ideditor .layer-mapillary-detections .icon-detected:active rect {
    outline: 3px solid rgba(255, 238, 0, 0.6);
}
@media (hover: hover) {
    .ideditor .layer-mapillary-detections .icon-detected:hover {
        opacity: 1;
    }
    .ideditor .layer-mapillary-detections .icon-detected:hover rect {
        outline: 3px solid rgba(255, 238, 0, 0.6);
    }
}
.ideditor .layer-mapillary-detections .icon-detected.currentView {
    opacity: 1;
}
.ideditor .layer-mapillary-detections .icon-detected.currentView rect {
    outline: 3px solid rgba(255, 238, 0, 1);
}


/* KartaView Image Layer */
.ideditor li.list-item-photos.list-item-kartaview.active:after {
    background-color: #20c4ff;
}
.ideditor .layer-kartaview {
    pointer-events: none;
}
.ideditor .layer-kartaview .viewfield-group * {
    fill: #20c4ff;
}
.ideditor .layer-kartaview .sequence {
    stroke: #20c4ff;
}


/* Mapilio Image Layer */
.ideditor li.list-item-photos.list-item-mapilio.active:after {
    background-color: #0056f1;
}
.ideditor .layer-mapilio {
    pointer-events: none;
}
.ideditor .layer-mapilio .viewfield-group * {
    fill: #0056f1;
}
.ideditor .layer-mapilio .viewfield-group:not(.currentView):not(.hovered) * {
    stroke: #ffffff;
    stroke-opacity: .6;
    fill-opacity: .6;
}
.ideditor .layer-mapilio .sequence {
    stroke: #0056f1;
}
.ideditor .photo-controls-mapilio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.ideditor .photo-controls-mapilio button {
    padding:0 6px;
    pointer-events: initial;
}
.ideditor .mapilio-wrapper {
    position: relative;
    background-color: #000;
    background-image: url(img/loader-black.gif);
    background-position: center;
    background-repeat: no-repeat;
}
.ideditor #ideditor-viewer-mapilio-simple-wrap {
    height: 100%;
}
.ideditor #ideditor-viewer-mapilio-simple {
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}
.ideditor #ideditor-viewer-mapilio-simple img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
}

/* panoramax Image Layer */
.ideditor li.list-item-photos.list-item-panoramax.active:after {
    background-color: #ff6f00;
}
.ideditor .layer-panoramax {
    pointer-events: none;
}
.ideditor .layer-panoramax .viewfield-group * {
    fill: #ff6f00;
    stroke: #ffffff;
    stroke-opacity: .6;
    fill-opacity: .6;
}
.ideditor .layer-panoramax .sequence {
    stroke: #ff6f00;
}
.ideditor .photo-controls-panoramax {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.ideditor .photo-controls-panoramax button {
    padding:0 6px;
    pointer-events: initial;
}

.ideditor label.panoramax-hd {
    float: left;
    cursor: pointer;
}
.ideditor .panoramax-hd span {
    margin-top: 2px;
}
.ideditor .panoramax-hd input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0 2px;
}

.ideditor .slider-wrap {
    display: inline-block;
    width: 100%;
}

.ideditor .date-slider-label {
    display: flex;
    justify-content: space-between;
}

.ideditor .list-option-date-slider {
    width: 100%;
}

.ideditor .yearSliderSpan{
    padding: 2px;
}


.ideditor .list-item-date-slider label{
    display: block !important;
}

/* Streetside Viewer (pannellum) */
.ideditor .ms-wrapper .photo-attribution {
    line-height: 1.1em;
    padding: 4px 2px;
}
.ideditor .ms-wrapper .photo-attribution .image-link {
    display: block;
}
.ideditor .ms-wrapper .photo-attribution .attribution-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
}
.ideditor .ms-wrapper .photo-attribution .image-view-link {
    text-align: left;
    margin: 0 5px;
}
.ideditor .ms-wrapper .photo-attribution .image-report-link {
    text-align: right;
}

.ideditor .ms-wrapper .photo-attribution a:active {
    color: #0fffc4;
}
@media (hover: hover) {
    .ideditor .ms-wrapper .photo-attribution a:hover {
        color: #0fffc4;
    }
}

.ideditor .ms-wrapper .pnlm-compass.pnlm-control,
.ideditor .vegbilder-wrapper  .pnlm-compass.pnlm-control,
.ideditor .panoramax-wrapper  .pnlm-compass.pnlm-control {
    width: 26px;
    height: 26px;
    left: 4px;
    top: 60px;
    background-size: contain;
    background-repeat: no-repeat no-repeat;
}

.ideditor label.streetside-hires {
    cursor: pointer;
}
.ideditor .streetside-hires span {
    margin-top: 2px;
}
.ideditor .streetside-hires input[type="checkbox"] {
    float: left;
    width: 12px;
    height: 12px;
    margin: 0 5px;
}

.ideditor .pnlm-zoom-controls {
    margin-top: 6px;
}


/* Mapillary viewer */
.ideditor #ideditor-mly .domRenderer .TagSymbol {
    font-size: 10px;
    background-color: rgba(0,0,0,0.4);
    padding: 0 4px;
    border-radius: 4px;
    top: -25px;
}

.ideditor .mly-wrapper .mapillary-attribution-container {
    display: flex;
    align-items: center;
}

.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-icon-container {
    display: flex;
    align-items: center;
}

.ideditor .mapillary-attribution-image-container {
  height: auto;
}

.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-username {
    padding: 0px 8px 0 6px;
}

.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-date {
    margin-right: 6px;
}

/* KartaView viewer */
.ideditor .kartaview-wrapper {
    position: relative;
    background-color: #000;
    background-image: url(img/loader-black.gif);
    background-position: center;
    background-repeat: no-repeat;
}

.ideditor .kartaview-wrapper img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -o-object-fit: cover;
       object-fit: cover;
}

.ideditor .kartaview-wrapper .photo-attribution a:active {
    color: #20c4ff;
}
@media (hover: hover) {
    .ideditor .kartaview-wrapper .photo-attribution a:hover {
        color: #20c4ff;
    }
}

.ideditor .kartaview-image-wrap {
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}

.ideditor .panoramax-wrapper .photo-attribution a:active {
    color: #ff6f00;
}

@media (hover: hover) {
    .ideditor .panoramax-wrapper .photo-attribution a:hover {
        color: #ff6f00;
    }
}

/* Fotoshi photo layer
   Tokens from the Fotoshi app theme. Solid stroke = data already in OSM,
   dashed = not in OSM yet; that one rule carries the whole distinction. */
.ideditor {
    --fotoshi-orange: #F24E1E;
    --fotoshi-osm-marker: #EF7310;
    --fotoshi-selected: #159447;
    --fotoshi-photo-selected: #159447;
    --fotoshi-photo-selected-deep: #4F8B4E;
    --fotoshi-label-highlight: #FFD400;
    --fotoshi-osm-fill: #4A4742;
    --fotoshi-overture: #3a7afb;
    /* Fotoshi chrome follows iD's active light/dark UI theme.  The map
       symbology tokens above remain provider-specific; these are only used
       by the HUD, legend, sidebar thumbnails, and photo card. */
    --fotoshi-ink: var(--text-color);
    --fotoshi-ink-2: var(--passive-text-color);
    --fotoshi-ink-3: var(--muted-text-color);
    --fotoshi-blush: var(--active-bg-color);
    --fotoshi-divider: var(--border-color);
    --fotoshi-stage: #151515;
    --fotoshi-shadow: 0 4px 10px rgba(0,0,0,0.25);
    --fotoshi-card-shadow: 0 -2px 12px rgba(0,0,0,0.18), 0 18px 42px rgba(0,0,0,0.32);
    --fotoshi-font: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ideditor li.list-item-photos.list-item-fotoshi.active:after,
.ideditor li.list-item-photos.list-item-fotoshi-existing.active:after,
.ideditor li.list-item-photos.list-item-fotoshi-new.active:after {
    background-color: #F24E1E;
}

/* ---- map symbology ---- */

.ideditor .layer-fotoshi {
    --fotoshi-orange: #FF6E00;
    --fotoshi-osm-marker: #FF6E00;
    transition: opacity 250ms linear;
}
.ideditor .layer-fotoshi .fotoshi-mark,
.ideditor .layer-fotoshi .fotoshi-cluster {
    cursor: pointer;
}

/* photographed lines and polygons: the overlay stroke follows the matched
   OSM geometry while the preset fill stays untouched. */
.ideditor .layer-fotoshi .fotoshi-halo {
    pointer-events: none;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: stroke-width 120ms linear;
}
.ideditor .layer-fotoshi .fotoshi-photo-casing {
    stroke: #FFFFFF;
    stroke-width: 6px;
}
.ideditor .layer-fotoshi .fotoshi-photo-stroke {
    stroke: var(--fotoshi-orange);
    stroke-width: 2.5px;
}
.ideditor .layer-fotoshi .fotoshi-photo-stroke[data-kind='osm'],
.ideditor .layer-fotoshi .fotoshi-photo-stroke[data-kind='osm-unloaded'] {
    pointer-events: stroke;
}
.ideditor .layer-fotoshi .fotoshi-photo-hit {
    fill: transparent;
    stroke: transparent;
    stroke-width: 18px;
    /* Outline band only, like iD's own area fills. Catching the whole
       interior swallowed clicks on every feature inside a matched area. */
    pointer-events: stroke;
}
/* solid = already in OSM, dashed = not yet — same rule as everywhere */
.ideditor .layer-fotoshi .fotoshi-photo-stroke:not([data-kind='osm']):not([data-kind='osm-unloaded']) {
    stroke-dasharray: 7 5;
}
.ideditor .layer-fotoshi .fotoshi-photo-casing.hovered {
    stroke-width: 8px;
}
.ideditor .layer-fotoshi .fotoshi-photo-stroke.hovered {
    stroke-width: 3px;
}
.ideditor .layer-fotoshi .fotoshi-photo-stroke.currentView {
    stroke: var(--fotoshi-photo-selected-deep);
}

/* dimmed peers: while Unmapped only is on, non-matching polygons drop
   back (building fill 30% -> 12%, strokes to 40%) rather than the
   highlight shouting louder */
.ideditor.fotoshi-unmapped-only .layer-osm path.area.fill,
.ideditor.fotoshi-unmapped-only .layer-osm path.area.stroke {
    opacity: 0.4;
}

/* camera markers rest hidden so the map shows one mark per place;
   hovering a place or opening its photo reveals its capture points and cones */
.ideditor .layer-fotoshi .fotoshi-cone,
.ideditor .layer-fotoshi .fotoshi-dot,
.ideditor .layer-fotoshi .fotoshi-fuzzy-dot {
    display: none;
}
.ideditor .layer-fotoshi .fotoshi-cone.hovered,
.ideditor .layer-fotoshi .fotoshi-cone.placeActive,
.ideditor .layer-fotoshi .fotoshi-cone.currentView,
.ideditor .layer-fotoshi .fotoshi-dot.hovered,
.ideditor .layer-fotoshi .fotoshi-dot.placeActive,
.ideditor .layer-fotoshi .fotoshi-dot.currentView,
.ideditor .layer-fotoshi .fotoshi-fuzzy-dot.hovered,
.ideditor .layer-fotoshi .fotoshi-fuzzy-dot.placeActive,
.ideditor .layer-fotoshi .fotoshi-fuzzy-dot.currentView {
    display: block;
}
.ideditor .layer-fotoshi .fotoshi-fuzzy-dot {
    pointer-events: none;
}
.ideditor .layer-fotoshi .fotoshi-fuzzy-glow {
    fill: #FFFFFF;
    fill-opacity: 0.24;
    stroke: none;
}
.ideditor .layer-fotoshi .fotoshi-fuzzy-core {
    fill: var(--fotoshi-orange);
    stroke: none;
}
.ideditor .layer-fotoshi .fotoshi-fuzzy-dot.currentView .fotoshi-fuzzy-glow {
    fill: var(--fotoshi-photo-selected);
    fill-opacity: 0.28;
    stroke: none;
}
.ideditor .layer-fotoshi .fotoshi-fuzzy-dot.currentView .fotoshi-fuzzy-core {
    fill: var(--fotoshi-photo-selected);
    stroke: none;
}
.ideditor .layer-fotoshi .fotoshi-cone.sameLocationPeer,
.ideditor .layer-fotoshi .fotoshi-dot.sameLocationPeer {
    display: none;
}

/* capture dot */
.ideditor .layer-fotoshi .fotoshi-capture-dot {
    fill: var(--fotoshi-orange);
    stroke: #FFFFFF;
    stroke-width: 2px;
    transition: r 120ms linear, stroke-width 120ms linear;
}
.ideditor .layer-fotoshi .fotoshi-dot-hit {
    fill: transparent;
    stroke: none;
}
.ideditor .layer-fotoshi .fotoshi-dot.hovered .fotoshi-capture-dot {
    r: 8px;
    stroke-width: 3px;
}
.ideditor .layer-fotoshi .fotoshi-dot.currentView .fotoshi-capture-dot {
    r: 6px;
    fill: var(--fotoshi-photo-selected);
    stroke: var(--fotoshi-photo-selected);
    stroke-width: 2px;
}

/* no-heading halo: dashed ring instead of a cone */
.ideditor .layer-fotoshi .fotoshi-no-heading-ring {
    display: none;
    fill: none;
    stroke: var(--fotoshi-orange);
    stroke-width: 2px;
    stroke-dasharray: 2 4;
    opacity: 0.55;
}
.ideditor .layer-fotoshi .fotoshi-no-heading .fotoshi-no-heading-ring {
    display: block;
}

/* cone: flat fill plus an even contour, never a gradient fade */
.ideditor .layer-fotoshi .fotoshi-cone path {
    fill: var(--fotoshi-orange);
    fill-opacity: 0.24;
    stroke: var(--fotoshi-orange);
    stroke-width: 2px;
    stroke-linejoin: round;
    transition: fill-opacity 120ms linear, transform 120ms linear;
}
.ideditor .layer-fotoshi .fotoshi-cone.hovered path {
    fill-opacity: 0.42;
    stroke: #FFFFFF;
}
.ideditor .layer-fotoshi .fotoshi-cone.currentView path {
    fill: var(--fotoshi-photo-selected);
    fill-opacity: 0.12;
    stroke: var(--fotoshi-photo-selected-deep);
    transform: scale(1.2); /* 26px -> 31px, scaled about the apex */
}

/* subject rings */
.ideditor .layer-fotoshi .fotoshi-subject-ring {
    fill: #FFFFFF;
    fill-opacity: 0.92;
    stroke: var(--fotoshi-orange);
    stroke-width: 3px;
    /* circle -> rounded square when a place becomes mapped */
    transition: x 200ms linear, y 200ms linear, width 200ms linear,
                height 200ms linear, rx 200ms linear;
}
.ideditor .layer-fotoshi .fotoshi-subject-osm-marker {
    display: none;
    fill: var(--fotoshi-osm-marker);
    stroke: var(--fotoshi-orange);
    stroke-width: 2px;
    pointer-events: all;
}
@media (prefers-reduced-motion: reduce) {
    .ideditor .layer-fotoshi .fotoshi-subject-ring {
        transition: none;
    }
}
.ideditor .layer-fotoshi .fotoshi-subject-icon {
    fill: var(--fotoshi-orange);
    color: var(--fotoshi-orange);
    pointer-events: none;
}
.ideditor .layer-fotoshi .fotoshi-subject-badge {
    display: none;
    pointer-events: none;
}
.ideditor .layer-fotoshi .fotoshi-subject-badge circle {
    fill: var(--fotoshi-orange);
    stroke: none;
    stroke-width: 0;
}
.ideditor .layer-fotoshi .fotoshi-subject-badge path {
    stroke: #FFFFFF;
    stroke-width: 2px;
    stroke-linecap: round;
}

/* dashed = not in OSM yet */
/* Existing OSM points use the same marker path and coordinate transform as
   iD's native point renderer. The native marker remains underneath and is
   fully covered by this overlay. */
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm-unloaded'] .fotoshi-subject-ring {
    display: none;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm'] .fotoshi-subject-osm-marker,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm-unloaded'] .fotoshi-subject-osm-marker {
    display: block;
    fill: var(--fotoshi-label-highlight);
    stroke: var(--fotoshi-orange);
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm-unloaded'] .fotoshi-subject-icon {
    display: block;
    fill: #333;
    color: #333;
}

/* W toggles iD into wireframe mode, where even standalone points use the
   small tagged-vertex circle. Mirror that shape for mapped Fotoshi points. */
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm'][data-fotoshi-shape='vertex'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm-unloaded'][data-fotoshi-shape='vertex'] .fotoshi-subject-ring {
    display: block;
    fill: var(--fotoshi-orange);
    fill-opacity: 1;
    stroke: #FFFFFF;
    stroke-width: 1px;
    stroke-dasharray: none;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm'][data-fotoshi-shape='vertex'] .fotoshi-subject-osm-marker,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm-unloaded'][data-fotoshi-shape='vertex'] .fotoshi-subject-osm-marker {
    display: none;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm'][data-fotoshi-shape='vertex'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm-unloaded'][data-fotoshi-shape='vertex'] .fotoshi-subject-icon {
    display: block;
    fill: #FFFFFF;
    color: #FFFFFF;
}

/* A node that is part of a way has no standalone iD pin. Keep the
   Fotoshi circle for it instead of inventing one. */
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm'][data-entity-geometry='vertex'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm-unloaded'][data-entity-geometry='vertex'] .fotoshi-subject-ring {
    display: block;
    fill: var(--fotoshi-label-highlight);
    fill-opacity: 1;
    stroke: var(--fotoshi-orange);
    stroke-width: 2px;
    stroke-dasharray: none;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm'][data-entity-geometry='vertex'] .fotoshi-subject-osm-marker,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm-unloaded'][data-entity-geometry='vertex'] .fotoshi-subject-osm-marker {
    display: none;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm'][data-entity-geometry='vertex'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='osm-unloaded'][data-entity-geometry='vertex'] .fotoshi-subject-icon {
    display: block;
    fill: #333;
    color: #333;
}

/* Ways and areas are represented by their actual geometry only. */
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='line'],
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='area'],
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-way'],
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-relation'] {
    display: none;
    pointer-events: none;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='line'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='line'] .fotoshi-subject-osm-marker,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='line'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='line'] .fotoshi-subject-badge,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='area'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='area'] .fotoshi-subject-osm-marker,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='area'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='area'] .fotoshi-subject-badge,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-way'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-way'] .fotoshi-subject-osm-marker,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-way'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-way'] .fotoshi-subject-badge,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-relation'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-relation'] .fotoshi-subject-osm-marker,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-relation'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject[data-entity-geometry='linked-relation'] .fotoshi-subject-badge {
    display: none;
}

.ideditor .layer-fotoshi .fotoshi-subject[data-kind='fotoshi'] .fotoshi-subject-ring {
    stroke: var(--fotoshi-orange);
    stroke-dasharray: 7 5;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='fotoshi'] .fotoshi-subject-badge {
    display: block;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='fotoshi'] .fotoshi-subject-badge circle {
    fill: var(--fotoshi-orange);
    stroke: none;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='fotoshi'] .fotoshi-subject-badge path {
    stroke: #FFFFFF;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='overture'] .fotoshi-subject-badge {
    display: block;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='overture'] .fotoshi-subject-ring {
    stroke: var(--fotoshi-overture);
    stroke-dasharray: 7 5;
    fill: #FFFFFF;
    fill-opacity: 0.92;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='overture'] .fotoshi-subject-badge circle {
    fill: var(--fotoshi-overture);
    stroke: none;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='overture'] .fotoshi-subject-badge path {
    stroke: #FFFFFF;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='none'] .fotoshi-subject-ring {
    stroke: var(--fotoshi-overture);
    stroke-dasharray: 7 5;
    fill: none;
    fill-opacity: 0;
}
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='overture'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject[data-kind='none'] .fotoshi-subject-icon {
    fill: var(--fotoshi-overture);
    color: var(--fotoshi-overture);
}

/* While a place's photo is open, its ring, cone and dot are status
   display, not buttons — clicking them again would only reopen what is
   already open. Letting clicks pass through means the OSM feature
   underneath (e.g. a point just created from this photo) stays
   selectable while the card is up. */
.ideditor .layer-fotoshi .fotoshi-subject.currentView,
.ideditor .layer-fotoshi .fotoshi-cone.currentView,
.ideditor .layer-fotoshi .fotoshi-dot.currentView {
    pointer-events: none;
}

/* one-shot pulse when a place has just been added to the map */
@keyframes fotoshi-ring-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.ideditor .layer-fotoshi .fotoshi-subject.fotoshi-just-added .fotoshi-subject-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: fotoshi-ring-pulse 600ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}
@media (prefers-reduced-motion: reduce) {
    .ideditor .layer-fotoshi .fotoshi-subject.fotoshi-just-added .fotoshi-subject-ring {
        animation: none;
    }
}

/* selected place: keep the orange dash/icon and plus over a green fill */
.ideditor .layer-fotoshi .fotoshi-subject.currentView .fotoshi-subject-ring {
    stroke: var(--fotoshi-orange);
    stroke-dasharray: 7 5;
    fill: var(--fotoshi-selected);
    fill-opacity: 0.62;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='fotoshi'] .fotoshi-subject-ring {
    stroke: var(--fotoshi-orange);
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView .fotoshi-subject-icon {
    display: block;
    fill: var(--fotoshi-orange);
    color: var(--fotoshi-orange);
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView .fotoshi-subject-badge circle {
    stroke: var(--fotoshi-selected);
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView .fotoshi-subject-badge path {
    stroke: var(--fotoshi-selected);
}

/* A mapped place keeps the same pin geometry when its photo is open. The
   selected state must not turn it into a dashed candidate marker. */
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm-unloaded'] .fotoshi-subject-ring {
    display: none;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm'] .fotoshi-subject-osm-marker,
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm-unloaded'] .fotoshi-subject-osm-marker {
    display: block;
    fill: var(--fotoshi-selected);
    stroke: #FFFFFF;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm-unloaded'] .fotoshi-subject-icon {
    display: block;
    fill: #333;
    color: #333;
}

/* A mapped way vertex keeps its circular shape, with the same orange/white
   color semantics as the mapped point marker. */
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm'][data-entity-geometry='vertex'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm-unloaded'][data-entity-geometry='vertex'] .fotoshi-subject-ring {
    display: block;
    fill: var(--fotoshi-selected);
    fill-opacity: 1;
    stroke: #FFFFFF;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm'][data-entity-geometry='vertex'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm-unloaded'][data-entity-geometry='vertex'] .fotoshi-subject-icon {
    display: block;
    fill: #FFFFFF;
    color: #FFFFFF;
}

.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm'][data-fotoshi-shape='vertex'] .fotoshi-subject-ring,
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm-unloaded'][data-fotoshi-shape='vertex'] .fotoshi-subject-ring {
    display: block;
    fill: var(--fotoshi-selected);
    fill-opacity: 1;
    stroke: #FFFFFF;
    stroke-width: 1px;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm'][data-fotoshi-shape='vertex'] .fotoshi-subject-osm-marker,
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm-unloaded'][data-fotoshi-shape='vertex'] .fotoshi-subject-osm-marker {
    display: none;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm'][data-fotoshi-shape='vertex'] .fotoshi-subject-icon,
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='osm-unloaded'][data-fotoshi-shape='vertex'] .fotoshi-subject-icon {
    display: block;
    fill: #FFFFFF;
    color: #FFFFFF;
}

/* Overture remains a blue source marker when selected; the selected green
   fill communicates focus without changing its source identity. */
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='overture'] .fotoshi-subject-ring {
    stroke: var(--fotoshi-overture);
    stroke-dasharray: 7 5;
    fill: var(--fotoshi-selected);
    fill-opacity: 0.62;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='overture'] .fotoshi-subject-icon {
    fill: var(--fotoshi-overture);
    color: var(--fotoshi-overture);
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='overture'] .fotoshi-subject-badge circle {
    fill: var(--fotoshi-selected);
    stroke: none;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='overture'] .fotoshi-subject-badge path {
    stroke: #FFFFFF;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='fotoshi'] .fotoshi-subject-badge circle {
    fill: var(--fotoshi-selected);
    stroke: none;
}
.ideditor .layer-fotoshi .fotoshi-subject.currentView[data-kind='fotoshi'] .fotoshi-subject-badge path {
    stroke: #FFFFFF;
}

/* Existing OSM line and area highlights keep the yellow source highlight used
   by their labels. Their underlying iD geometry stays visible and untouched. */
.ideditor .layer-fotoshi .fotoshi-photo-stroke.currentView[data-kind='osm'],
.ideditor .layer-fotoshi .fotoshi-photo-stroke.currentView[data-kind='osm-unloaded'] {
    stroke: var(--fotoshi-label-highlight);
}

/* Mapped Fotoshi ways keep the yellow source highlight used by their labels.
   Areas get a filled treatment below so the editor's building fill is easy to
   distinguish from the photographed boundary. */
.ideditor .layer-fotoshi .fotoshi-photo-stroke[data-kind='osm'][data-geometry='line'],
.ideditor .layer-fotoshi .fotoshi-photo-stroke[data-kind='osm-unloaded'][data-geometry='line'],
.ideditor .layer-fotoshi .fotoshi-photo-stroke[data-kind='osm'][data-geometry='linked-way'],
.ideditor .layer-fotoshi .fotoshi-photo-stroke[data-kind='osm-unloaded'][data-geometry='linked-way'] {
    stroke: var(--fotoshi-label-highlight);
    stroke-width: 5px;
    stroke-dasharray: none;
}

/* A photographed OSM building/area is an orange filled overlay with a solid
   yellow edge. Keep the transparent hit path for selection. */
.ideditor .layer-fotoshi .fotoshi-photo-casing[data-kind='osm'][data-geometry='area'],
.ideditor .layer-fotoshi .fotoshi-photo-casing[data-kind='osm-unloaded'][data-geometry='area'] {
    display: block;
    fill: var(--fotoshi-orange);
    fill-opacity: 0.34;
    stroke: var(--fotoshi-label-highlight);
    stroke-width: 4px;
}
.ideditor .layer-fotoshi .fotoshi-photo-casing[data-kind='osm'][data-geometry='line'],
.ideditor .layer-fotoshi .fotoshi-photo-casing[data-kind='osm-unloaded'][data-geometry='line'],
.ideditor .layer-fotoshi .fotoshi-photo-casing[data-kind='osm'][data-geometry='linked-way'],
.ideditor .layer-fotoshi .fotoshi-photo-casing[data-kind='osm-unloaded'][data-geometry='linked-way'] {
    display: block;
    fill: none;
    stroke: var(--fotoshi-label-highlight);
    stroke-width: 8px;
    stroke-opacity: 0.42;
}
.ideditor .layer-fotoshi .fotoshi-photo-stroke[data-kind='osm'][data-geometry='area'],
.ideditor .layer-fotoshi .fotoshi-photo-stroke[data-kind='osm-unloaded'][data-geometry='area'] {
    stroke: var(--fotoshi-label-highlight);
    stroke-dasharray: none;
}

/* clusters, below z16 */
.ideditor .layer-fotoshi .fotoshi-cluster circle {
    fill: var(--fotoshi-orange);
    stroke: #FFFFFF;
    stroke-width: 2px;
}
.ideditor .layer-fotoshi .fotoshi-cluster text {
    fill: #FFFFFF;
    font-family: var(--fotoshi-font);
    font-size: 15px;
    font-weight: 600;
    text-anchor: middle;
    pointer-events: none;
}

/* ---- floating chrome: chips and legend ---- */

.ideditor .fotoshi-hud {
    pointer-events: none;
}
.ideditor .fotoshi-hud.hide {
    display: none;
}
.ideditor .fotoshi-chips {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    z-index: 100;
    pointer-events: none;
}
.ideditor .fotoshi-chip {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    background: var(--bg-color-2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--fotoshi-shadow);
    font-family: var(--fotoshi-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--fotoshi-ink);
}
.ideditor .fotoshi-chip-icon {
    display: flex;
    align-items: center;
}
.ideditor .fotoshi-chip-value {
    color: var(--fotoshi-ink-3);
    border-left: 1px solid var(--fotoshi-divider);
    padding-left: 8px;
}
.ideditor button.fotoshi-chip {
    cursor: pointer;
}
.ideditor .fotoshi-kbd {
    padding: 1px 6px;
    transition: opacity 120ms linear;
    border: 1px solid var(--fotoshi-divider);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--fotoshi-ink-3);
}
/* the queue keys are live while a photo card is open; dim the hints
   when they are not, so the chips never promise a dead shortcut */
.ideditor:not(:has(.photoviewer.fotoshi-card:not(.hide))) .fotoshi-kbd {
    opacity: 0.4;
}
.ideditor button.fotoshi-chip:hover {
    background: var(--fotoshi-blush);
}
.ideditor button.fotoshi-chip.active {
    background: var(--fotoshi-blush);
    color: var(--fotoshi-orange);
    box-shadow: var(--fotoshi-shadow), inset 0 0 0 2px var(--fotoshi-orange);
}

/* transient note under the chips */
.ideditor .fotoshi-toast {
    position: absolute;
    top: 60px;
    left: 10px;
    max-width: 320px;
    padding: 10px 14px;
    background: var(--bg-color-2);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--fotoshi-orange);
    border-radius: 8px;
    box-shadow: var(--fotoshi-shadow);
    font-family: var(--fotoshi-font);
    font-size: 13px;
    line-height: 18px;
    color: var(--fotoshi-ink);
    pointer-events: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 600ms linear, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 100;
}
.ideditor .fotoshi-toast.fade-out {
    opacity: 0;
    transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
    .ideditor .fotoshi-toast {
        transition: opacity 600ms linear;
        transform: none;
    }
    .ideditor .fotoshi-toast.fade-out {
        transform: none;
    }
}

.ideditor .fotoshi-legend {
    /* left side of the map, clear of the map-data sidebar and panes on
       the right; the photo card overlays it while a photo is open */
    position: absolute;
    bottom: 40px;
    left: 10px;
    width: 304px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-color-2);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--fotoshi-shadow);
    font-family: var(--fotoshi-font);
    pointer-events: auto;
    z-index: 100;
}
/* The photo card occupies the same lower-left workspace.  Hide the legend
   while it is open so the card has a clean edge and the map attribution stays
   readable underneath. */
.ideditor .over-map:has(.photoviewer.fotoshi-card:not(.hide)) .fotoshi-legend {
    display: none;
}
.ideditor .fotoshi-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fotoshi-ink-3);
}
.ideditor button.fotoshi-legend-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--fotoshi-ink-3);
    cursor: pointer;
}
.ideditor button.fotoshi-legend-info:hover,
.ideditor .fotoshi-legend.collapsed button.fotoshi-legend-info:hover {
    background: var(--fotoshi-blush);
    color: var(--fotoshi-orange);
}

/* With the copy hidden, the expanded legend is a compact key; collapsed it
   is only the info button, sitting in the corner as a small round chip. */
.ideditor .fotoshi-legend.collapsed {
    width: auto;
    padding: 6px;
    border-radius: 999px;
}
.ideditor .fotoshi-legend.collapsed .fotoshi-legend-title,
.ideditor .fotoshi-legend.collapsed .fotoshi-legend-row {
    display: none;
}
.ideditor .fotoshi-legend.collapsed button.fotoshi-legend-info {
    width: 24px;
    height: 24px;
    background: transparent;
    color: var(--fotoshi-orange);
}
.ideditor .fotoshi-legend-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 13px;
    color: var(--fotoshi-ink);
}
.ideditor .fotoshi-legend-row.emphasis .fotoshi-legend-label {
    font-weight: 500; /* the row people look for */
}
.ideditor .fotoshi-legend-swatch {
    display: flex;
    align-items: center;
    width: 30px;
}
.ideditor .fotoshi-legend-count {
    color: var(--fotoshi-ink-3);
}
.ideditor .fotoshi-legend-count:not(:empty)::before {
    content: '· ';
}

/* ---- Fotoshi photos in the entity editor sidebar ---- */

.ideditor .fotoshi-sidebar-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 10px 10px;
}
.ideditor button.fotoshi-sidebar-photo {
    width: 58px;
    height: 58px;
    padding: 0;
    border: 2px solid var(--fotoshi-divider);
    border-radius: 6px;
    overflow: hidden;
    background: var(--fotoshi-divider);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 120ms linear, border-color 120ms linear,
                box-shadow 120ms linear;
}
.ideditor button.fotoshi-sidebar-photo:hover {
    opacity: 1;
}
/* the photo currently open in the viewer */
.ideditor button.fotoshi-sidebar-photo.active {
    border-color: var(--fotoshi-orange);
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(242, 78, 30, 0.22);
}
.ideditor button.fotoshi-sidebar-photo:disabled {
    border-color: var(--fotoshi-divider);
    cursor: default;
}
@media (prefers-reduced-motion: reduce) {
    .ideditor button.fotoshi-sidebar-photo {
        transition: none;
    }
}
.ideditor button.fotoshi-sidebar-photo img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.ideditor .fotoshi-sidebar-photo-missing {
    font-size: 16px;
    font-weight: 600;
    color: var(--fotoshi-ink-3);
}
.ideditor .fotoshi-sidebar-note {
    flex: 1 0 100%;
    font-size: 11px;
    line-height: 15px;
    color: var(--fotoshi-ink-3);
}

/* ---- photo card (restyles .photoviewer while a Fotoshi photo is open) ---- */

.ideditor .photoviewer.fotoshi-card {
    /* line up with the legend's bottom edge and clear the map attribution */
    z-index: 110;
    width: 380px !important;
    height: auto !important;
    padding: 0;
    margin-left: 16px;
    margin-bottom: 40px;
    max-height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-color-2);
    box-shadow: var(--fotoshi-card-shadow);
}
.ideditor .photoviewer.fotoshi-card button.thumb-hide,
.ideditor .photoviewer.fotoshi-card button.resize-handle-xy,
.ideditor .photoviewer.fotoshi-card button.resize-handle-x,
.ideditor .photoviewer.fotoshi-card button.resize-handle-y {
    display: none;
}

/* enlarged view: the stage grows and letterboxes the full photo */
.ideditor .photoviewer.fotoshi-card.fotoshi-expanded {
    width: min(880px, calc(100vw - 420px)) !important;
    /* Keep the enlarged card below the top HUD, with a small breathing gap. */
    max-height: calc(100% - 100px);
}
.ideditor .photoviewer.fotoshi-expanded .fotoshi-stage {
    width: 100%;
    height: min(62vh, 580px);
}
.ideditor .photoviewer.fotoshi-expanded .fotoshi-image {
    -o-object-fit: contain;
       object-fit: contain;
}
.ideditor .photo-wrapper.fotoshi-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: auto;
    background: var(--bg-color-2);
    color: var(--fotoshi-ink);
    font-family: var(--fotoshi-font);
}

.ideditor .fotoshi-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 380px;
    height: 254px;
    background: var(--fotoshi-stage);
    overflow: hidden;
}

/* Provider-local OCR. Text stays editable; no automatic tag changes. */
.ideditor .fotoshi-stage [hidden] { display: none !important; }
/* The extractor lives below the photo count in the card heading. */
.ideditor .fotoshi-heading { position: relative; padding-bottom: 12px; }
.ideditor .fotoshi-heading .fotoshi-subtitle { padding-right: 42px; }
.ideditor .fotoshi-ocr-toggle { position: absolute; top: 24px; right: 0; width: 30px; height: 30px; border-radius: 7px; padding: 5px; background: var(--fotoshi-orange); color: #fff; }
.ideditor .fotoshi-ocr-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ideditor .fotoshi-ocr-toggle[aria-pressed="true"] { outline: 2px solid var(--fotoshi-ink); outline-offset: 2px; }
.ideditor .fotoshi-ocr-layer { position: absolute; inset: 0; z-index: 5; cursor: crosshair; touch-action: none; }
.ideditor .fotoshi-ocr-selection { position: absolute; border: 2px solid #ffad92; background: rgba(255,173,146,.12); box-shadow: 0 0 0 2000px rgba(0,0,0,.2); pointer-events: none; }
.ideditor .fotoshi-ocr-hint { position: absolute; bottom: 8px; left: 10px; right: 10px; z-index: 8; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: rgba(24,24,24,.88); color: white; font-size: 11px; }
.ideditor .fotoshi-ocr-hint button { color: #ffbc9e; background: transparent; font-size: 11px; }
.ideditor .fotoshi-stage .fotoshi-ocr-panel { position: absolute; inset: 0; z-index: 9; padding: 14px; display: flex; flex-direction: column; background: var(--bg-color-2); color: var(--fotoshi-ink); text-align: left; }
.ideditor .fotoshi-ocr-header, .ideditor .fotoshi-ocr-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ideditor .fotoshi-ocr-header strong { font-size: 13px; }
.ideditor .fotoshi-ocr-dismiss { font-size: 22px; line-height: 1; color: var(--fotoshi-ink); background: transparent; }
.ideditor .fotoshi-ocr-status { margin: 6px 0 10px; font-size: 11px; color: var(--fotoshi-ink-2); }
.ideditor .fotoshi-stage .fotoshi-ocr-text { width: 100%; flex: 1; min-height: 50px; resize: none; border: 1px solid var(--fotoshi-divider); border-radius: 6px; padding: 10px; background: var(--bg-color); color: var(--fotoshi-ink); font: 13px/1.6 sans-serif; box-sizing: border-box; }
.ideditor .fotoshi-ocr-actions { margin-top: 10px; }
.ideditor .fotoshi-ocr-actions button { border-radius: 6px; padding: 7px 12px; font-size: 12px; background: var(--bg-color-3); color: var(--fotoshi-ink); }
.ideditor .fotoshi-ocr-actions .fotoshi-ocr-copy { background: var(--fotoshi-orange); color: #fff; font-weight: 600; }
.ideditor .fotoshi-ocr-copy:disabled { opacity: .5; }
.ideditor .fotoshi-ocr-active .fotoshi-filmstrip { visibility: hidden; }
.ideditor .fotoshi-ocr-active > button.fotoshi-capsule, .ideditor .fotoshi-ocr-active .fotoshi-attribution { z-index: 8; }
.ideditor .fotoshi-photo-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
    z-index: 1;
}
.ideditor .fotoshi-photo-frame.zoomed {
    cursor: grab;
}
.ideditor .fotoshi-photo-frame.zoomed.grabbing {
    cursor: grabbing;
}
.ideditor .fotoshi-zoom {
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    will-change: transform;
}
.ideditor .fotoshi-image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0;
    transform: scale(1.018);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
}
/* the cached thumbnail, blurred, holding the frame until the photo
   arrives — a picture of the right thing beats a black rectangle */
.ideditor .fotoshi-image-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    filter: blur(8px);
    transform: scale(1.08);
    opacity: 1;
    transition: opacity 320ms linear;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
}
.ideditor .fotoshi-image-preview.faded {
    opacity: 0;
}
.ideditor .fotoshi-image-preview.hide {
    display: none;
}
/* the white spinner in the overlay capsule, so it stays legible over
   a bright photo as well as a dark one */
.ideditor .fotoshi-stage-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(21, 21, 21, 0.78);
    border-radius: 999px;
    z-index: 2;
    pointer-events: none;
}
.ideditor .fotoshi-stage-spinner.hide {
    display: none;
}
.ideditor .fotoshi-image.fotoshi-revealed {
    opacity: 1;
    transform: scale(1);
    transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ideditor .fotoshi-image.hide {
    display: none;
}
.ideditor .fotoshi-image-unavailable {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 13px;
}
.ideditor .fotoshi-image-unavailable.hide {
    display: none;
}

/* overlays: solid capsules at 78% black, never gradient scrims */
.ideditor .fotoshi-capsule {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(21,21,21,0.78);
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    z-index: 2;
}
.ideditor button.fotoshi-expand {
    top: 10px;
    right: 48px;
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
}
.ideditor button.fotoshi-minimize {
    display: none;
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
}
.ideditor button.fotoshi-expand .icon,
.ideditor button.fotoshi-minimize .icon {
    width: 16px;
    height: 16px;
    fill: #FFFFFF;
}
.ideditor .photoviewer.fotoshi-expanded button.fotoshi-expand {
    display: none;
}
.ideditor .photoviewer.fotoshi-expanded button.fotoshi-minimize {
    display: flex;
}
.ideditor button.fotoshi-close {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
}
.ideditor button.fotoshi-close .icon {
    width: 16px;
    height: 16px;
    fill: #FFFFFF;
}
.ideditor button.fotoshi-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    cursor: pointer;
}
.ideditor button.fotoshi-nav-prev {
    left: 10px;
}
.ideditor button.fotoshi-nav-next {
    right: 10px;
}
.ideditor button.fotoshi-nav:disabled {
    opacity: 0.4;
    cursor: default;
}
.ideditor button.fotoshi-nav.hide {
    display: none;
}
.ideditor .fotoshi-filmstrip {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    max-width: calc(100% - 20px);
    overflow-x: auto;
    scrollbar-width: none;
    z-index: 2;
}
.ideditor .fotoshi-filmstrip::-webkit-scrollbar {
    display: none;
}
/* edge fades hint at clipped cells when the strip overflows */
.ideditor .fotoshi-filmstrip.scrollable {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.ideditor .fotoshi-cell {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 6px;
    overflow: hidden;
    opacity: 0.82;
    background: var(--fotoshi-stage);
    cursor: pointer;
}
.ideditor .fotoshi-cell.active {
    border-color: var(--fotoshi-photo-selected);
    opacity: 1;
}
.ideditor .fotoshi-cell img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.ideditor .fotoshi-attribution {
    /* top left — the slot the facing capsule vacated — so the
       filmstrip owns the full bottom edge at any photo count */
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 16px;
    color: #FFFFFF;
    max-width: calc(100% - 20px);
    flex-wrap: wrap;
}
.ideditor .fotoshi-attribution a {
    color: #FFFFFF;
    text-decoration: none;
}
.ideditor .fotoshi-attribution a:hover,
.ideditor .fotoshi-attribution a:focus {
    text-decoration: underline;
}
.ideditor .fotoshi-attribution .hide {
    display: none;
}
.ideditor .fotoshi-attribution.hide {
    display: none;
}
/* card body */
.ideditor .fotoshi-body {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    gap: 14px;
    padding: 16px;
}
.ideditor .fotoshi-association {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ideditor .fotoshi-tile {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fotoshi-orange);
    border-radius: 8px;
    background: var(--fotoshi-blush);
}
.ideditor .fotoshi-tile-icon {
    width: 22px;
    height: 22px;
    fill: var(--fotoshi-orange);
    color: var(--fotoshi-orange);
}
.ideditor .fotoshi-tile-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    background: var(--fotoshi-orange);
    border: 2px solid var(--bg-color-2);
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.ideditor .fotoshi-tile-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ideditor .fotoshi-body[data-kind='fotoshi'] .fotoshi-tile {
    border-style: dashed;
}
.ideditor .fotoshi-body[data-kind='fotoshi'] .fotoshi-tile-badge {
    display: flex;
    background: var(--fotoshi-selected);
    border-color: var(--bg-color-2);
    color: #FFFFFF;
}
.ideditor .fotoshi-body[data-kind='overture'] .fotoshi-tile-badge {
    display: flex;
    background: var(--fotoshi-selected);
    border-color: var(--bg-color-2);
    color: #FFFFFF;
}
.ideditor .fotoshi-body[data-kind='overture'] .fotoshi-tile,
.ideditor .fotoshi-body[data-kind='none'] .fotoshi-tile {
    border-style: dashed;
    border-color: var(--fotoshi-overture);
    background: var(--bg-color);
}
.ideditor .fotoshi-body[data-kind='overture'] .fotoshi-tile-icon,
.ideditor .fotoshi-body[data-kind='none'] .fotoshi-tile-icon {
    fill: var(--fotoshi-overture);
    color: var(--fotoshi-overture);
}
.ideditor .fotoshi-heading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
.ideditor .fotoshi-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ideditor .fotoshi-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--fotoshi-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ideditor .fotoshi-photo-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    /* The camera/count is an action cue, so keep it at iD's primary text
       contrast even while subtitles use the quieter passive tone. */
    color: var(--fotoshi-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}
.ideditor .fotoshi-photo-count.hide {
    display: none;
}
.ideditor .fotoshi-photo-count-icon {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor;
    color: currentColor;
}
.ideditor .fotoshi-subtitle {
    font-size: 12px;
    line-height: 16px;
    color: var(--fotoshi-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line;
}
.ideditor .fotoshi-body[data-kind='fotoshi'] .fotoshi-subtitle,
.ideditor .fotoshi-body[data-kind='overture'] .fotoshi-subtitle {
    overflow: visible;
    text-overflow: clip;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ideditor .fotoshi-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Fotoshi action buttons stay flat, with no drop shadow or ripple. */
.ideditor .fotoshi-button {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: var(--fotoshi-font);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 30ms linear;
}
.ideditor .fotoshi-button-solid {
    background: var(--fotoshi-orange);
    border: none;
    color: #FFFFFF;
}
.ideditor .fotoshi-button-solid:hover {
    background: #E04517;
}
.ideditor .fotoshi-button-solid:active {
    transform: translateY(4px);
}
.ideditor .fotoshi-button-outline {
    background: var(--bg-color);
    border: 2px solid var(--fotoshi-orange);
    color: var(--fotoshi-orange);
}
.ideditor .fotoshi-button-outline:hover {
    background: var(--fotoshi-blush);
}
.ideditor .fotoshi-button-outline:active {
    transform: translateY(4px);
}
/* armed: waiting for the mapper to pick a feature on the map */
.ideditor .fotoshi-button-outline.active {
    background: var(--fotoshi-blush);
}

/* Add to OSM and Link side by side */
.ideditor .fotoshi-card-actions.fotoshi-actions-row {
    flex-direction: row;
    align-items: stretch;
}
/* The two mapping actions share the row evenly. */
.ideditor .fotoshi-card-actions.fotoshi-actions-row .fotoshi-button {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    white-space: nowrap;
}
.ideditor .fotoshi-button-solid:disabled {
    opacity: 0.45;
    cursor: default;
}
.ideditor button.fotoshi-button-icon,
.ideditor button.fotoshi-button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
}

/* while picking, the map is a target */
.ideditor.fotoshi-link-picking .main-map .surface {
    cursor: crosshair;
}
.ideditor .fotoshi-note {
    font-size: 12px;
    line-height: 16px;
    color: var(--fotoshi-ink-3);
}

/* Fotoshi loading spinner — ligne claire (fotoshi_design/components/
   spinner). An inked bead travelling a drawn ring; the bead is a fill
   stroke over a wider ink stroke on the same circle. */
.ideditor .fs-spinner {
    display: block;
    animation: fs-rotate 1600ms linear infinite;
}
.ideditor .fs-spinner .fs-track,
.ideditor .fs-spinner .fs-bead-ink {
    stroke: var(--fs-ink, currentColor);
}
.ideditor .fs-spinner .fs-bead-fill {
    stroke: var(--fs-fill, var(--fs-ink, currentColor));
}
.ideditor .fs-spinner .fs-bead-ink,
.ideditor .fs-spinner .fs-bead-fill {
    animation: fs-breathe 900ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes fs-rotate {
    to { transform: rotate(360deg); }
}
@keyframes fs-breathe {
    from { stroke-dasharray: 15.08 211.12; }
    to { stroke-dasharray: 157.08 69.12; }
}
@media (prefers-reduced-motion: reduce) {
    .ideditor .fs-spinner {
        animation-duration: 4000ms;
    }
    .ideditor .fs-spinner .fs-bead-ink,
    .ideditor .fs-spinner .fs-bead-fill {
        animation: none;
        stroke-dasharray: 88 138.19;
    }
}
.ideditor .fotoshi-button-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .ideditor .fotoshi-image,
    .ideditor .fotoshi-image.fotoshi-revealed {
        transition: none;
        transform: none;
    }
    .ideditor .layer-fotoshi .fotoshi-cone path,
    .ideditor .layer-fotoshi .fotoshi-capture-dot,
    .ideditor .layer-fotoshi .fotoshi-halo,
    .ideditor .fotoshi-button {
        transition: none;
    }
}

.ideditor .photo-wrapper {
    position: relative;
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
}

.ideditor .photo-wrapper.show-loader {
    background-image: url(img/loader-black.gif);
}

.ideditor .photoviewer .plane-frame {
    height: 100%;
    width: 100%;
    transform-origin: 0 0;
}

.ideditor .photoviewer .plane-frame > img.plane-photo {
    cursor: grab;
}
.ideditor .photoviewer .plane-frame.grabbing > img.plane-photo {
    cursor: grabbing;
}
/* override pannellum's custom cursors to use browser defaults */
.ideditor .pnlm-grab {
    cursor: grab !important;
}
.ideditor .pnlm-grabbing {
    cursor: grabbing !important;
}

/* photo-controls (step forward, back, rotate) */
.ideditor .photo-controls-wrap {
    text-align: center;
    position: absolute;
    top: 10px;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

.ideditor .photo-controls {
    display: inline-block;
    z-index: 10;
    pointer-events: initial;
}

.ideditor .photo-controls button,
.ideditor .photo-controls button:focus {
    height: 18px;
    width: 18px;
    line-height: 18px;
    background: rgba(0,0,0,0.65);
    color: #eee;
    border-radius: 0;
}
.ideditor .photo-controls button:first-of-type {
    border-radius: 3px 0 0 3px;
}
.ideditor .photo-controls button:last-of-type {
    border-radius: 0 3px 3px 0;
}
.ideditor .photo-controls button:active {
    background: rgba(0,0,0,0.85);
    color: #fff;
}
@media (hover: hover) {
    .ideditor .photo-controls button:hover {
        background: rgba(0,0,0,0.85);
        color: #fff;
    }
}

/* local georeferenced photos */
.ideditor .layer-local-photos {
    pointer-events: none;
}
.ideditor .layer-local-photos .viewfield-group * {
    fill: #ed00d9;
}
.ideditor .local-photos {
    display: flex;
}
.ideditor .local-photos > div {
    width: 50%;
}
.ideditor .local-photos > div:first-child {
    margin-right: 20px;
}

.ideditor .list-local-photos {
    max-height: 40vh;
    overflow-y: scroll;
    overflow-x: auto;
    /* workaround for something like "overflow-x: visible"
       see https://stackoverflow.com/a/39554003 */
    margin-left: -100px;
    padding-left: 100px;
    margin-top: -20px;
    padding-top: 20px;
    min-height: 100px;
}
.ideditor .list-local-photos::-webkit-scrollbar {
    border-left: none;
}
.ideditor .list-local-photos li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    height: 30px;
}
.ideditor .list-local-photos span.filename {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
    padding-left: 8px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.ideditor .list-local-photos li:first-child span.filename {
    border-top: 1px solid #ccc;
    border-top-left-radius: 4px;
}
.ideditor .list-local-photos li:first-child button {
    border-top: 1px solid #ccc;
}
.ideditor .list-local-photos li:first-child button.remove {
    border-top-right-radius: 4px;
}
.ideditor .list-local-photos li:last-child span.filename {
    border-bottom-left-radius: 4px;
}
.ideditor .list-local-photos li:last-child button.remove {
    border-bottom-right-radius: 4px;
}
.ideditor .list-local-photos li.invalid button.zoom-to-data {
    display: none;
}
.ideditor .list-local-photos li button.no-geolocation {
    display: none;
}
.ideditor .list-local-photos li.invalid button.no-geolocation {
    display: block;
    color: red;
}
.ideditor .list-local-photos .placeholder div {
    display: block;
    height: 40px;
    width: 40px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(img/loader-black.gif);
    filter: invert(1);
}
.ideditor .local-photos label.button {
    background: var(--link-color);
    color: #fff;
    font-weight: bold;
    padding: 10px 25px;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
}

.ideditor .photo-controls-local {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.ideditor .photo-controls-local button {
    padding:0 6px;
    pointer-events: initial;
}

.ideditor .photo-controls-local button:disabled {
    background: rgba(255,255,255,.25);
}

/* OSM Notes and QA Layers */

.ideditor .qa-header-icon .qaItem-fill,
.ideditor .layer-osmose .qaItem .qaItem-fill {
    stroke: #333;
    stroke-width: 1.3px;  /* NOTE: likely a better way to scale the icon stroke */
}

.ideditor .note-header-icon .note-fill,
.ideditor .layer-notes .note .note-fill {
    color: #f30;
    stroke: #333;
    stroke-width: 40px;
}
.ideditor .note-header-icon.new .note-fill,
.ideditor .layer-notes .note.new .note-fill {
    color: #fe0;
    stroke: #333;
    stroke-width: 40px;
}
.ideditor .note-header-icon.closed .note-fill,
.ideditor .layer-notes .note.closed .note-fill {
    color: #5d0;
    stroke: #333;
    stroke-width: 40px;
}

/* slight adjustments to preset icon for note icons */
.ideditor .note-header-icon .preset-icon-28 {
    top: 18px;
}
.ideditor .note-header-icon .note-icon-annotation {
    position: absolute;
    top: 22px;
    left: 22px;
    margin: auto;
}
.ideditor .note-header-icon .note-icon-annotation .icon {
    width: 15px;
    height: 15px;
}

/* adjustment to center QA icons */
.ideditor .qa-header-icon .preset-icon-28 {
    top: auto;
    left: auto;
}
.ideditor .qa-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom Map Data (geojson, gpx, kml, vector tile) */
.ideditor .layer-mapdata {
    pointer-events: none;
}

.ideditor .layer-mapdata path.shadow {
    pointer-events: stroke;
    stroke: #f6634f;
    stroke-width: 16;
    stroke-opacity: 0;
    fill: none;
}
.ideditor .layer-mapdata path.MultiPoint.shadow,
.ideditor .layer-mapdata path.Point.shadow {
    pointer-events: fill;
    fill: #f6634f;
    fill-opacity: 0;
}
.ideditor .layer-mapdata path.shadow.hover:not(.selected) {
    stroke-opacity: 0.4;
}
.ideditor .layer-mapdata path.shadow.selected {
    stroke-opacity: 0.7;
}

.ideditor .layer-mapdata path.stroke {
    stroke: #ff26d4;
    stroke-width: 2;
    fill: none;
}

.ideditor .layer-mapdata path.fill {
    stroke-width: 0;
    stroke-opacity: 0.3;
    stroke: #ff26d4;
    fill: #ff26d4;
    fill-opacity: 0.3;
    fill-rule: evenodd;
}

.ideditor .layer-mapdata text.label-halo,
.ideditor .layer-mapdata text.label {
    font-size: 10px;
    font-weight: bold;
    dominant-baseline: middle;
}
.ideditor .layer-mapdata text.label {
    fill: #ddd;
}
.ideditor .layer-mapdata text.label.hover,
.ideditor .layer-mapdata text.label.selected {
    fill: #fff;
}
.ideditor .layer-mapdata text.label-halo {
    opacity: 0.7;
    stroke: #000;
    stroke-width: 5px;
    stroke-miterlimit: 1;
}
/* Fill Styles */

.ideditor .low-zoom.fill-wireframe path.stroke,
.ideditor .fill-wireframe path.stroke {
    stroke-width: 1 !important;
    stroke-opacity: 0.5 !important;
    stroke-dasharray: none !important;
    fill: none !important;
}
.ideditor .low-zoom.fill-wireframe .layer-mapdata path.stroke,
.ideditor .fill-wireframe .layer-mapdata path.stroke {
    stroke-width: 2 !important;
    stroke-opacity: 1 !important;
}

.ideditor .low-zoom.fill-wireframe path.shadow,
.ideditor .fill-wireframe path.shadow {
    stroke-width: 12;
}

.ideditor .fill-wireframe path.shadow.related:not(.selected),
.ideditor .fill-wireframe path.shadow.hover:not(.selected) {
    stroke-opacity: 0.4;
}
.ideditor .fill-wireframe path.shadow.selected {
    stroke-opacity: 0.6;
}

.ideditor .fill-wireframe .point,
.ideditor .fill-wireframe .areaicon,
.ideditor .fill-wireframe .areaicon-halo,
.ideditor .fill-wireframe path.casing,
.ideditor .fill-wireframe path.fill,
.ideditor .fill-wireframe path.oneway {
    display: none !important;
}

.ideditor .fill-partial path.area.fill {
    fill-opacity: 0;
    stroke-width: 60px;
    pointer-events: none;
}
.ideditor .fill-partial path.area.fill.tag-building_part {
    stroke-width: 40px;
}
.ideditor .fill-partial path.area.fill.tag-indoor {
    stroke-width: 20px;
}
.ideditor .fill-partial path.area.fill.tag-amenity-parking_space {
    stroke-width: 30px;
}
.ideditor.mode-browse .fill-partial path.area.fill,
.ideditor.mode-select .fill-partial path.area.fill,
.ideditor.mode-select-data .fill-partial path.area.fill,
.ideditor.mode-select-error .fill-partial path.area.fill,
.ideditor.mode-select-note .fill-partial path.area.fill {
    pointer-events: visibleStroke;
}
.ideditor.mode-browse .fill-full path.area.fill,
.ideditor.mode-select .fill-full path.area.fill,
.ideditor.mode-select-data .fill-full path.area.fill,
.ideditor.mode-select-error .fill-full path.area.fill,
.ideditor.mode-select-note .fill-full path.area.fill {
    pointer-events: visibleFill;
}.ideditor svg.preset-icon-category-border path {
    stroke-width: 1;
    stroke: rgb(170, 170, 170);
    fill: rgba(170, 170, 170, 0.3);
}

.ideditor .preset-category-barrier svg.preset-icon-category-border path {
    stroke: rgb(200, 144, 144);
    fill: rgba(200, 144, 144, 0.3);
}

.ideditor .preset-category-building svg.preset-icon-category-border path {
    /* matches the fork's slate building colour on the map */
    stroke: rgb(91, 120, 147);
    fill: rgba(91, 120, 147, 0.3);
}

.ideditor .preset-category-landuse svg.preset-icon-category-border path {
    stroke: rgb(196, 189, 25);
    fill: rgba(196, 189, 25, 0.3);
}

.ideditor .preset-category-natural svg.preset-icon-category-border path,
.ideditor .preset-category-playground svg.preset-icon-category-border path,
.ideditor .preset-category-golf svg.preset-icon-category-border path {
    stroke: rgb(140, 208, 95);
    fill: rgba(140, 208, 95, 0.3);
}

.ideditor .preset-category-water svg.preset-icon-category-border path,
.ideditor .preset-category-waterway svg.preset-icon-category-border path {
    stroke: rgb(119, 211, 222);
    fill: rgba(119, 211, 222, 0.3);
}

.ideditor .preset-category-utility svg.preset-icon-category-border path {
    stroke: rgb(125, 125, 125);
    fill: rgba(219, 219, 125, 0.3);
}

.ideditor .preset-category-path svg.preset-icon-category-border path {
    stroke: rgb(221, 221, 204);
    fill: rgba(221, 221, 204, 0.3);
}

.ideditor .preset-category-road_service svg.preset-icon-category-border path,
.ideditor .preset-category-road_minor svg.preset-icon-category-border path,
.ideditor .preset-category-road_major svg.preset-icon-category-border path {
    stroke: #999;
}

.ideditor .preset-category-rail svg.preset-icon-category-border path {
    stroke: #555;
}
/* Basics
------------------------------------------------------- */
/* the root element of iD */
.ideditor {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;

    /* Establish a local stacking context so all elements within iD are on the
       same layer relative to elements outside iD - #7457.
       https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
    */
    position: relative;
    z-index: 0;

    font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont,
        "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
        "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
        sans-serif;
    color: var(--text-color);

    touch-action: none;
    -ms-user-select: none;
    -ms-content-zooming: none;
}
.ideditor div {
    /* disable pinch-to-zoom of the UI on touch devices */
    touch-action: pan-x pan-y;
}

.ideditor .main-content {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    touch-action: none;
}

.ideditor .main-content.active {
    filter: none !important;
    transition-duration: 200ms;
}

.ideditor .main-content.inactive {
    filter: grayscale(80%) brightness(80%);
    transition-duration: 200ms;
}

.ideditor #ideditor-defs {
    /* Can't be display: none or the clippaths are ignored. */
    position: absolute;
    width: 0;
    height: 0;
}

.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 {
    box-sizing: border-box;
}

.ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

.ideditor ul li {
    list-style: none;
}

.ideditor a,
.ideditor button {
    cursor: pointer;
}

.ideditor h2 {
    font-size: 25px;
    line-height: 1.25;
    font-weight: bold;
    margin-bottom: 20px;
}
.ideditor .header h2 {
    font-size: 20px;
    line-height: 1.25;
    font-weight: bold;
    margin-bottom: 0px;
}

.ideditor h3:last-child,
.ideditor h4:last-child { margin-bottom: 0;}

.ideditor h3 {
    font-size: 16px;
    line-height: 1.25;
    font-weight: bold;
    margin-bottom: 10px;
}
.ideditor h4, .ideditor h5 {
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 10px;
}

.ideditor button:focus,
.ideditor textarea:focus,
.ideditor input[type=text]:focus,
.ideditor input[type=search]:focus,
.ideditor input[type=number]:focus,
.ideditor input[type=url]:focus,
.ideditor input[type=tel]:focus,
.ideditor input[type=email]:focus,
.ideditor input[type=date]:focus {
    outline-color: transparent;
    outline-style: none;
}

.ideditor ::-moz-placeholder {
    color: #aaa;
    opacity: 1; /* Firefox */
}

.ideditor ::placeholder {
    color: #aaa;
    opacity: 1; /* Firefox */
}

.ideditor p {
    font-size: 12px;
    margin: 0;
    padding: 0;
}
.ideditor p:last-child {
    padding-bottom: 0;
}
.ideditor em {
    font-style: italic;
}
.ideditor strong {
    font-weight: bold;
}
.ideditor a,
.ideditor a:visited,
.ideditor a:active {
        color: var(--link-color);
}
.ideditor a:focus {
    color: var(--link-focus-color);
}
@media (hover: hover) {
    .ideditor a:hover {
        color: var(--link-focus-color);
    }
}
.ideditor kbd {
    display: inline-block;
    text-align: center;
    padding: 3px 5px;
    font-size: 11px;
    line-height: 1.3;
    min-width: 0.9em;
    vertical-align: baseline;
    background-color: var(--outset-color);
    border: solid 1px var(--border-color);
    margin: 0 2px;
    border-bottom-color: var(--shadow-color);
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 var(--shadow-color);
}

.ideditor code {
    font-family: ui-monospace, monospace, monospace;
    background: rgba(174, 174, 174, 0.25);
    padding: 1px 2px;
}

/* Forms
------------------------------------------------------- */
.ideditor textarea,
.ideditor input[type=text],
.ideditor input[type=search],
.ideditor input[type=number],
.ideditor input[type=url],
.ideditor input[type=tel],
.ideditor input[type=email],
.ideditor input[type=date] {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0px 10px 0px 10px;
    border-radius: 4px;
    text-overflow: ellipsis;
    overflow: auto;
}
.ideditor input[type=text],
.ideditor input[type=search],
.ideditor input[type=number],
.ideditor input[type=url],
.ideditor input[type=tel],
.ideditor input[type=email],
.ideditor input[type=date],
.ideditor input[type=color] {
    /* need this since line-height interpretation may vary by font or browser */
    height: 2.585em;
}
.ideditor textarea  {
    min-height: 2em;
    padding-top: 5px;
    padding-bottom: 5px;
    resize: vertical;
    font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
        "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
        "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
        sans-serif;
}

.ideditor textarea:active,
.ideditor input:active,
.ideditor textarea:focus,
.ideditor input:focus {
    background-color: var(--active-bg-color);
}

.ideditor textarea.disabled,
.ideditor input.disabled {
    color: var(--passive-text-color);
    background-color: var(--bg-color-3);
    cursor: not-allowed;
}

.ideditor input[type="checkbox"],
.ideditor input[type="radio"] {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    cursor: pointer;
    vertical-align: middle;
}
.ideditor[dir='rtl'] input[type="checkbox"],
.ideditor[dir='rtl'] input[type="radio"] {
    margin-left: 6px;
    margin-right: 0;
}

.ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
    font-style: italic;
}

.ideditor input.mixed::placeholder,
.ideditor textarea.mixed::placeholder {
    font-style: italic;
}

.ideditor[dir='rtl'] input:-moz-placeholder[dir="auto"] {
    /* hard-set rtl for placeholder texts in rtl locales, see
       https://github.com/openstreetmap/iD/pull/11091#issuecomment-2936953197 */
    direction: rtl;
}

.ideditor[dir='rtl'] input:placeholder-shown[dir="auto"] {
    /* hard-set rtl for placeholder texts in rtl locales, see
       https://github.com/openstreetmap/iD/pull/11091#issuecomment-2936953197 */
    direction: rtl;
}

/* keytraps need to be invisible yet not be display:none or visibility:hidden */
.ideditor .keytrap {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

/* tables */
.ideditor table {
    background-color: var(--bg-color);
    border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
}
.ideditor table th {
    text-align: left;
}
.ideditor table.tags, .ideditor table.tags td, .ideditor table.tags th {
    border: 1px solid var(--border-color);
    padding: 4px;
}

.ideditor ::-ms-clear {
   display: none;
}

/* Grid
------------------------------------------------------- */
.ideditor .col6  { float: left; width: 50.0000%; max-width: 600px; }
.ideditor .col12 { float: left; width: 100.0000%; }


/* Utility Classes
------------------------------------------------------- */
.ideditor .fillL {
    background: var(--bg-color);
    color: var(--text-color);
}
.ideditor .fillL2 {
    background: var(--bg-color-2);
    color: var(--text-color);
}
.ideditor .fillL3 {
    background: var(--bg-color-3);
    color: var(--text-color);
}
.ideditor .fillD {
    background: rgba(0,0,0,.5);
    color: #fff;
}
.ideditor .fillD2 {
    background: rgba(0,0,0,.75);
    color: #fff;
}

.ideditor .fl { float: left;}
.ideditor .fr { float: right;}
.ideditor .al { left: 0; }
.ideditor .ar { right: 0; }

.ideditor input.hide,
.ideditor textarea.hide,
.ideditor div.hide,
.ideditor form.hide,
.ideditor button.hide,
.ideditor a.hide,
.ideditor ul.hide,
.ideditor li.hide {
    display: none;
}

.ideditor .deemphasize {
    color: var(--muted-text-color);
}
.ideditor .content {
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
}
.ideditor .loading.loading {
    background-color: #aaa;
    background-blend-mode: var(--bg-blend-mode);
    background-image: url(img/loader_bg.gif);
    background-size: 5px 5px;
}


/* Buttons
------------------------------------------------------- */
.ideditor button {
    text-align: center;
    border: 0;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 12px;
    display: inline-block;
    border-radius: 4px;
}

.ideditor button:focus,
.ideditor button:active,
.ideditor button.hover {
    background-color: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor button:hover {
        background-color: var(--bg-color-3);
    }
}
.ideditor button.active {
    background: var(--link-color);
}
.ideditor button.disabled {
    background-color: var(--transparent-button-color);
    color: var(--transparent-text-emphasis-color);
    cursor: not-allowed;
}
.ideditor button.disabled .icon {
    fill: var(--transparent-text-emphasis-color);
}

.ideditor .joined > * {
    border-radius: 0;
    border-right: 1px solid rgba(0,0,0,.5);
}
.ideditor[dir='rtl'] .joined > * {
    border-left: 1px solid rgba(0,0,0,.5);
    border-right: none;
}

.ideditor .fillL .joined > * {
    border-right: 1px solid var(--bg-color);
}
.ideditor .joined > *:first-child {
    border-radius: 4px 0 0 4px;
}
.ideditor[dir='rtl'] .joined > *:first-child {
    border-radius: 0 4px 4px 0;
}
.ideditor .joined > *:last-child {
    border-right-width: 0;
    border-radius: 0 4px 4px 0;
}
.ideditor[dir='rtl'] .joined > *.bar-button:last-child {
    border-radius: 4px 0 0 4px;
}


/* Action buttons */
.ideditor button.action {
    background: var(--link-color);
    color: #fff;
    font-weight: bold;
}
.ideditor button.action:focus,
.ideditor button.action:active {
    background: var(--link-focus-color);
}
.ideditor button.secondary-action {
    background: var(--bg-color-3);
    font-weight: bold;
}
.ideditor button.secondary-action:focus,
.ideditor button.secondary-action:active {
    background: var(--passive-bg-color);
}

.ideditor button.action.disabled,
.ideditor button[disabled].action {
    background: var(--passive-bg-color);
    color: var(--passive-text-color);
    cursor: not-allowed;
}

.ideditor button.action,
.ideditor button.secondary-action {
    padding: 10px 5px;
}

@media (hover: hover) {
    .ideditor button.action:hover {
        background: var(--link-focus-color);
    }
    .ideditor button.secondary-action:hover {
        background: var(--passive-bg-color);
    }
    .ideditor button.action.disabled:hover,
    .ideditor button[disabled].action:hover {
        background: var(--passive-bg-color);
        color: var(--passive-text-color);
        cursor: not-allowed;
    }
}


/* Icons
------------------------------------------------------- */
.ideditor .icon {
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.ideditor .icon.operation use {
    fill: var(--widget-color);
    color: #79f;
}
.ideditor button.disabled .icon.operation use,
.ideditor .icon.operation.disabled use {
    fill: var(--transparent-text-color);
    color: var(--transparent-text-color);
}

.ideditor .icon.monochrome use {
    fill: currentColor;
}

.ideditor .icon.inline {
    vertical-align: text-top;
    display: inline-block;
    width: 1.17em;
    height: 1.17em;
    margin: 0px 3px;
}

.ideditor .icon.pre-text {
    margin-right: 5px;
}
.ideditor[dir='rtl'] .icon.pre-text {
    margin-left: 5px;
    margin-right: 0;
}

.ideditor .icon.pre-text.user-icon {
    margin-left: 5px;
    margin-right: 5px;
}

.ideditor .icon.light {
    color: #fff;
    fill: currentColor;
}
.ideditor .icon.created {
    color: #00ca07;
}
.ideditor .icon.modified {
    color: #666;
}
.ideditor .icon.deleted {
    color: #ea0000;
}

.ideditor .user-icon {
    max-height: 20px;
    max-width: 20px;
    height: auto;
    width: auto;
    border-radius: 3px;
}

.ideditor .icon-annotation {
    color: #333;
    vertical-align: baseline;
}

.ideditor button.loading .icon {
    background-image: url(img/mini-loader.gif);
    background-position: 0 0;
    background-size: auto;
}


/* Toolbar / Persistent UI Elements
------------------------------------------------------- */
.ideditor .top-toolbar-wrap {
    position: relative;
    z-index: 101;
}
.ideditor .top-toolbar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 10px 0 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    width: 100%;

    /* hide scrollbar but allow scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge */
}
.ideditor .top-toolbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.ideditor .top-toolbar .toolbar-item {
    display: flex;
    flex: 0 1 auto;
    flex-flow: column wrap;
    justify-content: center;
}
.ideditor .top-toolbar .toolbar-item .item-content {
    display: flex;
    flex: 0 1 auto;
    flex-flow: row nowrap;
    justify-content: center;
    height: 40px;
    width: auto;
    margin: 0 5px;
}
.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
    margin-right: 10px;
}
.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
    margin-left: 10px;
}
.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
    padding-right: 5px;
}
.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
    padding-left: 5px;
}
.ideditor .top-toolbar .toolbar-item .item-label {
    text-align: center;
    font-size: 11px;
    white-space: nowrap;
    margin: 1px 2px 2px 2px;
}
.ideditor .top-toolbar .toolbar-item.spacer {
    width: 100%;
    flex-grow: 2;
}
.ideditor .top-toolbar .toolbar-item:first-child {
    justify-content: flex-start;
}
.ideditor .top-toolbar .toolbar-item:last-child {
    justify-content: flex-end;
}
.ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
    display: none;
}
.ideditor button.bar-button {
    flex: 0 0 auto;
    flex-flow: row nowrap;
    align-items: center;
    padding: 0 10px;
    min-width: 30px;
    white-space: nowrap;
    display: flex;
    font-weight: bold;
}
.ideditor button.bar-button .icon {
    flex: 0 0 20px;
}
.ideditor button.bar-button .label {
    flex: 0 1 auto;
    padding: 0 5px;
}

.ideditor button.bar-button.dragging {
    opacity: 0.75;
    z-index: 200;
}
.ideditor button.bar-button.dragging .tooltip {
    display: none;
}
.ideditor button.bar-button.dragging.removing {
    cursor: url(img/cursor/select-remove.png), pointer;
}

.ideditor button.save {
    background-image: linear-gradient(0, var(--accent-color), var(--accent-color));
}
.ideditor button.save .count {
    display: inline-block;
    min-width: 32px;
    text-align: center;
}

.ideditor .help-pane svg.icon.inline.add-note,
.ideditor button.add-note svg.icon {
    height: 15px;
    width: 15px;
    color: rgba(0,0,0,0.25);
    stroke: var(--text-color);
    stroke-width: 60px;
    margin-top: 3px;
}
.ideditor button.add-note svg.icon {
    margin-left: unset;
    margin-right: 4px;
}
.ideditor[dir='rtl'] button.add-note svg.icon {
    margin-left: 4px;
    margin-right: unset;
}
.ideditor .help-pane svg.icon.inline.add-note {
    margin-left: 3px;
    margin-right: 3px;
}

.ideditor .spinner {
    opacity: .5;
    position: absolute;
    right: 4px;
    bottom: 4px;
    height: 20px;
    width: 20px;
}
.ideditor .spinner img {
    height: 100%;
    width: 100%;
    background: transparent;
    border-radius: 100%;
}
.ideditor[dir='rtl'] .spinner img {
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}


.ideditor .top-toolbar.narrow .spinner,
.ideditor .top-toolbar.narrow button.bar-button .label {
    display: none;
}
.ideditor .top-toolbar.narrow button .count {
    border-left-width: 0;
    border-right-width: 0;
}

.ideditor[dir='ltr'] .undo-redo button:first-of-type {
    margin-right: 1px;
}
.ideditor[dir='rtl'] .undo-redo button:first-of-type {
    margin-left: 1px;
}

/* Header for modals / panes
------------------------------------------------------- */
.ideditor .header {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ideditor .header h3 {
    text-align: center;
    margin-bottom: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0;
}

.ideditor .header button,
.ideditor .modal > button {
    border-radius: 0;
    width: 40px;
    text-align: center;
    overflow: hidden;
}

.ideditor .header button {
    position: relative;
    height: 100%;
}

.ideditor .field-help-title button.close,
.ideditor .sidebar .header button.close,
.ideditor .preset-list-pane .header button.preset-choose {
    position: absolute;
    right: 0;
    top: 0;
}
.ideditor[dir='rtl'] .field-help-title button.close,
.ideditor[dir='rtl'] .sidebar .header button.close,
.ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
    left: 0;
    right: auto;
}

.ideditor .entity-editor-pane .header button.preset-choose {
    position: absolute;
    left: 0;
    top: 0;
}
.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-choose {
    left: auto;
    right: 0;
}

.ideditor .preset-choose {
    font-size: 16px;
    line-height: 1.25;
    font-weight: bold;
}

.ideditor .modal > button {
    position: absolute;
    right: 0;
    top: 0;
    height: 59px;
    z-index: 50;
}
.ideditor[dir='rtl'] .modal > button {
    left: 0;
    right: unset;
}

.ideditor .footer {
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0 15px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-color-2);
    width: 100%;
    height: 2.5em;
    z-index: 1;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    display: flex;
}

.ideditor .footer > a {
    justify-content: center;
}

/* Hide/Toggle collapsible sections (aka Disclosure)
------------------------------------------------------- */
.ideditor summary.hide-toggle {
    display: block;
    list-style: none;
    cursor: pointer;
    color: var(--link-color);
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    width: -moz-fit-content;
    width: fit-content;
}
.ideditor details.disclosure-wrap[open] summary.hide-toggle {
    margin-bottom: 10px;
}
.ideditor summary.hide-toggle::-webkit-details-marker {
    display: none;
}
.ideditor .hide-toggle .icon.pre-text {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-top: -3px;
}


/* Sidebar / Inspector
------------------------------------------------------- */
.ideditor .sidebar {
    position: relative;
    float: left;
    height: 100%;
    z-index: 10;
    background: var(--bg-color-2);
    -ms-user-select: element;
    border: 0px solid var(--border-color);
    border-right-width: 1px;
}
.ideditor[dir='rtl'] .sidebar {
    float: right;
    border-right-width: 0px;
    border-left-width: 1px;
}

.ideditor .sidebar-resizer {
    position: absolute;
    top: 0;
    right: -10px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    /* disable drag-to-select */
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.ideditor[dir='rtl'] .sidebar-resizer {
    right: auto;
    left: -6px;
}

.ideditor .sidebar.collapsed > *:not(.sidebar-resizer) {
    display: none;
}
.ideditor .sidebar.collapsed .sidebar-resizer {
    /* make target wider to avoid the user accidentally resizing window */
    width: 10px;
    right: -10px;
}
.ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
    left: -10px;
}

.ideditor .sidebar-component {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

.ideditor .sidebar-component .body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.ideditor .panewrap {
    position: absolute;
    width: 200%;
    height: 100%;
    right: -100%;
}

.ideditor .pane {
    position: absolute;
    width: 50%;
    top: 0;
    bottom: 2.5em;
    display: flex;
    flex-direction: column;
}

.ideditor .pane:first-child {
    left: 0;
}

.ideditor .pane:last-child {
    right: 0;
}
.ideditor .feature-list-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ideditor .inspector-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.ideditor .inspector-hidden {
    display: none;
}

.ideditor .inspector-body {
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    height: 100%;
    flex: 1 1 100%;
}
.ideditor .entity-editor {
    padding: 20px;
}
/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
.ideditor .entity-editor > div:last-child {
    margin-bottom: 150px;
}

.ideditor .sidebar .search-header {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}
.ideditor .sidebar .search-header .icon {
    display: inline-block;
    position: absolute;
    left: 10px;
    height: 100%;
    pointer-events: none;
}
.ideditor[dir='rtl'] .sidebar .search-header .icon {
    left: auto;
    right: 10px;
}

.ideditor .sidebar .search-header input {
    width: 100%;
    padding: 0 10px;
    height: 3em;
    border-radius: 0;
    border-width: 0;
    border-bottom-width: 1px;
    text-indent: 30px;
    font-size: 18px;
    font-weight: bold;
}

.ideditor .section:not(:last-child),
.ideditor .map-pane .section {
    margin-bottom: 30px;
}


/* Feature List / Search Results
------------------------------------------------------- */
.ideditor .feature-list  {
    width: 100%;
}
.ideditor .no-results-item,
.ideditor .feature-list-item {
    width: 100%;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
}
.ideditor .no-results-item {
    padding: 10px;
    font-weight: bold;
}

.ideditor .geocode-item {
    width: 100%;
    max-width: 200px;
    margin: 30px auto;
    min-height: 40px;
}

.ideditor .feature-list-item {
    display: flex;
}
.ideditor .feature-list-item .label {
    text-align: left;
    padding: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1 1 auto;
}
.ideditor[dir='rtl'] .feature-list-item .label {
    text-align: right;
}

.ideditor .feature-list-item .label .icon {
    opacity: .5;
}
.ideditor .feature-list-item .close {
    padding: 10px;

}
.ideditor .feature-list-item .close .icon {
    opacity: 0.5;
}
.ideditor .feature-list-item .entity-type {
    color: var(--link-color);
    font-weight: bold;
}
.ideditor .feature-list-item:active .entity-type,
.ideditor .feature-list-item:focus .entity-type {
    color: var(--link-focus-color);
}
@media (hover: hover) {
    .ideditor .feature-list-item:hover .entity-type {
        color: var(--link-focus-color);
    }
}
.ideditor .feature-list-item .entity-name {
    color: var(--passive-text-color);
    padding-left: 10px;
}
.ideditor[dir='rtl'] .feature-list-item .entity-name {
    padding-left: 0;
    padding-right: 10px;
}
.ideditor .section-selected-features .feature-list {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}
.ideditor .section-selected-features .feature-list-item:last-child {
    border: none;
}
.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Preset List and Icons
------------------------------------------------------- */
.ideditor .preset-list  {
    width: 100%;
    padding: 20px 20px 10px 20px;
}

.ideditor .preset-list-item {
    margin-bottom: 10px;
    position: static;
}

.ideditor .preset-list-button-wrap {
    min-height: 62px;
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.ideditor .preset-list-button {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
    background: var(--bg-color-3);
}

.ideditor .preset-icon-container {
    position: relative;
    width: 60px;
    height: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ideditor .preset-icon-container.small {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}
.ideditor .preset-icon-container img.image-icon {
    width: 50px;
    height: 50px;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 2px;
    z-index: 2;
    visibility: hidden;
}
.ideditor .preset-icon-container.showing-img img.image-icon {
    visibility: visible;
}
.ideditor .preset-icon-container.showing-img *:not(.image-icon) {
    display: none;
}

.ideditor .preset-icon-point-border path {
    stroke: #333;
    stroke-width: 1.2;
    fill: transparent;
}

.ideditor .preset-icon-category-border path {
    stroke: #999;
    stroke-width: 1px;
    fill: transparent;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    vector-effect: non-scaling-stroke;
}

.ideditor .preset-icon-line {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.ideditor .preset-icon-container path {
    cursor: inherit;
}
.ideditor .preset-icon-container circle.vertex {
    fill: #fff;
    stroke: rgba(0, 0, 0, 0.25);
}
.ideditor .preset-icon-fill circle.midpoint {
    fill: transparent;
    stroke: rgba(0, 0, 0, 0.25);
}
/* use a consistent stroke width */
.ideditor .preset-icon-container path.line.stroke {
    stroke-width: 2 !important;
}
.ideditor .preset-icon-container path.line.casing {
    stroke-width: 4 !important;
}

.ideditor .preset-icon-fill {
    margin: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.ideditor .preset-icon-container svg,
.ideditor .preset-icon-container svg > * {
    cursor: inherit !important;
}
.ideditor .preset-icon-fill path.area.stroke {
    fill: transparent;
}

.ideditor .preset-icon-fill-vertex circle {
    stroke-width: 1.5px;
    stroke: var(--text-color);
    fill: var(--bg-color-3);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.ideditor .preset-icon {
    width: 100%;
    height:100%;
    position: absolute;
    z-index: 1;
}
.ideditor .preset-icon .icon {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform: scale(0.48);
}
.ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
    transform: translateY(-7%) scale(0.27);
}
.ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
    transform: translateY(-9%) scale(0.5);
}
.ideditor .preset-icon.framed .icon {
    transform: scale(0.4);
}
.ideditor .preset-icon.framed.line-geom:not(.category) .icon,
.ideditor .preset-icon.framed.route-geom .icon {
    top: 20%;
    transform: translateY(-30%) scale(0.4);
}
.ideditor .preset-icon-iD .icon {
    transform: scale(1);
}
.ideditor .preset-icon-iD.framed .icon {
    transform: scale(0.74);
}
.ideditor .preset-icon-iD.framed.line-geom:not(.category) .icon,
.ideditor .preset-icon-iD.framed.route-geom .icon {
    transform: translateY(-30%) scale(0.74);
}
.ideditor .preset-icon-container.fallback .preset-icon .icon {
    transform: scale(0.5) !important;
}

.ideditor .preset-list-button .label {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    background: var(--bg-color-2);
    text-align: left;
    padding: 5px 10px;
    border-left: 1px solid var(--transparent-border-color);
    flex: 1 1 100%;
    align-self: stretch;
}
.ideditor[dir='rtl'] .preset-list-button .label {
    text-align: right;
    border-left: none;
    border-right: 1px solid var(--transparent-border-color);
}
.ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.ideditor[dir='ltr'] .category .preset-list-button .label {
    border-radius: 0px 4px 4px 0px;
}
.ideditor[dir='rtl'] .category .preset-list-button .label {
    border-radius: 4px 0px 0px 4px;
}

.ideditor .preset-list-item.mixed-types .label {
    font-style: italic;
}

.ideditor button.preset-reset .label.flash-bg {
    animation: flash-bg 750ms;
}
@keyframes flash-bg {
    0% { background-color: var(--bg-color); }
    100% { background-color: var(--bg-color-2); }
}

.ideditor .preset-list-button .label-inner {
    width: 100%;
    line-height: 1.35em;
}
.ideditor .preset-list-button .label-inner .namepart {
    text-overflow: ellipsis;
}
.ideditor .preset-list-button .label-inner .namepart:nth-child(1) {
    font-weight: bold;
}

.ideditor .preset-list-button:focus .label,
.ideditor .preset-list-button:active .label,
.ideditor .preset-list-button.disabled,
.ideditor .preset-list-button.disabled .label {
    background-color: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor .preset-list-button:hover .label {
        background-color: var(--bg-color-3);
    }
}

.ideditor .preset-list-button-wrap button.tag-reference-button {
    width: 32px;
    flex: 0 0 auto;
}
.ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
    background: var(--bg-color-2);
}
.ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
    border-left: 1px solid var(--border-color);
}
.ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
    border-right: 1px solid var(--border-color);
}
.ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
    border-radius: 0 4px 4px 0;
}
.ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
    border-radius: 4px 0 0 4px;
}
.ideditor .preset-list-button-wrap button.tag-reference-button .icon {
    opacity: .5;
}
.ideditor .preset-list-button-wrap .accessory-buttons {
    display: flex;
}


.ideditor .current .preset-list-button,
.ideditor .current .preset-list-button .label {
    background-color: var(--selected-bg-color);
}

.ideditor .category .preset-list-button:after,
.ideditor .category .preset-list-button:before {
    content: "";
    position: absolute;
    top: -5px;
    left: -1px; right: -1px;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    height: 6px;
}

.ideditor .category .preset-list-button:before {
    top: -3px;
}

.ideditor .subgrid .preset-list {
    width: auto;
    padding: 10px;
    margin: 0 -10px;
    border: 0;
    border-radius: 8px;
}
.ideditor .subgrid .preset-list > *:last-child {
    margin-bottom: 0;
}

.ideditor .subgrid .arrow {
    border: solid rgba(0, 0, 0, 0);
    border-width: 10px;
    border-bottom-color: var(--bg-color-3);
    width: 0;
    height: 0;
    margin-left: 50%;
    margin-left: calc(50% - 10px);
}


/* Quick links
------------------------------------------------------- */
.ideditor .quick-links {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    padding: 5px 0 0 0;
}
.ideditor .quick-link {
    margin: 0 5px;
}


/* Entity/Preset Editor
------------------------------------------------------- */
.ideditor .section .grouped-items-area {
    padding: 10px;
    margin: 0 -10px 10px -10px;
    border-radius: 8px;
    background: var(--bg-color-3);
}
.ideditor .section .grouped-items-area:empty {
    display: none;
}

/*
    The parts of a field:
    - `.form-field` is a `div` wraps the entire thing
    - `.field-label` is a `label` that wraps the top part, it contains;
       - `span` classed `label-text`
       - 0..n buttons for "remove", "modified", "tag reference"
    - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
       - usually an `input`
       - sometimes some buttons (translate, increment, decrement)
       - or could just be a `div` with anything really
    - `.tag-reference-body` at the bottom (usually hidden)

   .------------------.                             -
   |  Name        | i |  <- .field-label        |
   +------------------+                               |
   |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
   '------------------'                               |
     tag reference       <- .tag-reference-body      |
                                                    -
*/

.ideditor .form-field {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 10px;
    width: 100%;
    transition: margin-bottom 200ms;
}

.ideditor .form-field.nowrap,
.ideditor .wrap-form-field:last-child .form-field {
    margin-bottom: 0;
}

/* A `label` element that wraps the top section */
.ideditor .field-label {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 100%;
    position: relative;
    font-weight: bold;
    color: var(--text-color);
    background: var(--bg-color-2);
    border: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
.ideditor .field-label .label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    padding: 5px 0 4px 10px;
}
.ideditor[dir='rtl'] .field-label .label-text {
    padding: 5px 10px 4px 0;
}
.ideditor .field-label .label-text {
    white-space: nowrap;
}

.ideditor .label-text .label-textannotation svg.icon {
    margin: 0 8px;
    opacity: 0.5;
    width: 14px;
    height: 14px;
    vertical-align: text-top;
}

.ideditor .field-label button {
    flex: 0 0 auto;
    border-left: 1px solid var(--border-color);
    width: 32px;
    border-radius: 0;
}
.ideditor[dir='rtl'] .field-label button {
    border-left: none;
    border-right: 1px solid var(--border-color);
}
.ideditor .field-label button:not(:hover):not(:active):not(:focus) {
    background: none;
}
.ideditor .field-label .icon {
    opacity: .5;
    fill: var(--text-color);
}

.ideditor .field-label .modified-icon,
.ideditor .field-label .remove-icon,
.ideditor .field-label .remove-icon-multilingual {
    display: none;
}
.ideditor .modified:not(.locked) .field-label .modified-icon,
.ideditor .present:not(.locked) .field-label .remove-icon,
.ideditor .present:not(.locked) .field-label .remove-icon-multilingual {
    display: inline-block;
}

/* A `div` element that wraps the bottom section */
.ideditor .form-field-input-wrap {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    flex: 1 1 auto;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}
.ideditor .nowrap .form-field-input-wrap {
    border-radius: 0;
}


.ideditor .form-field-input-wrap > input,
.ideditor .form-field-input-wrap > label,
.ideditor .form-field-input-wrap > textarea,
.ideditor .form-field-input-wrap > ul.chiplist {
    flex: 1 1 auto;
    border: 1px solid var(--border-color);
    border-top: 0;
    border-radius: 0;
    position: relative;
}
.ideditor .form-field-input-wrap > textarea {
    height: 65px;
    border-radius: 0 0 4px 4px;
}

/* Buttons inside fields */
.ideditor .form-field-button {
    flex: 0 0 auto;
    width: 32px;
    position: relative;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 0;
    border-top-width: 0;
    border-left-width: 0;
    vertical-align: top;
}
.ideditor[dir='rtl'] .form-field-button {
    border-left-width: 1px;
    border-right-width: 0;
}
.ideditor .form-field-button:active,
.ideditor .form-field-button:focus {
    background-color: var(--active-bg-color);
}
@media (hover: hover) {
    .ideditor .form-field-button:hover {
        background-color: var(--active-bg-color);
    }
}
.ideditor .form-field-button .icon {
    fill: var(--text-color);
    opacity: .5;
}
.ideditor .form-field-button.colour-preview {
    border-radius: 0 0 4px 0;
}
.ideditor .form-field-button.colour-preview > div.colour-box {
    border: 3px solid var(--bg-color);
    height: 100%;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    line-height: 20px;
    padding: 1px 0 0 1px;
}
.ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box {
    border-color: var(--bg-color-3);
}
.ideditor .form-field-button.colour-preview:active > div.colour-box,
.ideditor .form-field-button.colour-preview:focus > div.colour-box {
    border-color: var(--active-bg-color);
}
@media (hover: hover) {
    .ideditor .form-field-button.colour-preview:hover > div.colour-box {
        border-color: var(--active-bg-color);
    }
}
.ideditor input.colour-selector {
    visibility: hidden;
    position: absolute;
}
.ideditor input.date-selector {
    visibility: hidden;
    position: absolute;
}


/* round corners of first/last child elements */
.ideditor .form-field-input-wrap > button:last-of-type {
    border-bottom-right-radius: 4px;
}
.ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {
    border-bottom-left-radius: 4px;
}


/* Field - Access, DirectionalCombo
------------------------------------------------------- */
.ideditor .form-field-input-access,
.ideditor .form-field-input-directionalcombo {
    flex: 1 1 auto;
    display: flex;
    flex-flow: row wrap;
}

/* Field - lists with labeled input items
------------------------------------------------------- */
.ideditor .form-field ul.rows {
    flex: 1 1 auto;
    border: 1px solid var(--border-color);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    width: 100%;
}
.ideditor .form-field ul.rows li {
    border-top: 1px solid var(--border-color);
}
.ideditor .form-field ul.rows li:first-child {
    border-top: 0;
}
.ideditor .form-field ul.rows li {
    display: flex;
    flex-flow: row nowrap;
}
.ideditor .form-field ul.rows li.labeled-input > div {
    flex: 1 1 auto;
    width: 100%;
    border-radius: 0;
    line-height: 0.95rem;
}
.ideditor .form-field ul.rows li input {
    border-radius: 0;
    border-width: 0;
    width: 100%;
}
.ideditor .form-field ul.rows li button {
    border-width: 0;
}
.ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
.ideditor[dir='ltr'] .form-field ul.rows li button {
    border-left-width: 1px;
}
.ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
.ideditor[dir='rtl'] .form-field ul.rows li button {
    border-right-width: 1px;
}

/* Field - lists with labeled input items as table
------------------------------------------------------- */
.ideditor .form-field ul.rows.rows-table {
    display: table;
    width: 100%;
}
.ideditor .form-field ul.rows.rows-table li.labeled-input {
    display: table-row;
}
.ideditor .form-field ul.rows.rows-table li.labeled-input > div:first-child {
    display: table-cell;
    width: auto;
    max-width: 170px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ideditor .form-field ul.rows.rows-table li.labeled-input > div:nth-child(2) {
    display: table-cell;
    width: auto;
}


/* Field - Structure
------------------------------------------------------- */
.ideditor .structure-extras-wrap {
    width: 100%;
    padding: 10px 10px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-top: 0px;
    border-radius: 0 0 4px 4px;
}
.ideditor .structure-extras-wrap > ul.rows {
    border: 1px solid var(--border-color);
    border-radius: 4px;
}


/* Field - Combo / Multicombo
------------------------------------------------------- */
.ideditor .form-field-input-combo > input:only-of-type {
    border-radius: 0 0 4px 4px;
    width: 100%;
}
.ideditor .form-field-input-combo.empty-combobox input,
.ideditor .form-field-input-multicombo .empty-combobox input {
    padding-right: 10px;
    padding-left: 10px;
}
.ideditor .form-field-input-combo.empty-combobox .combobox-caret,
.ideditor .form-field-input-multicombo .empty-combobox .combobox-caret {
    display: none;
}

.ideditor .form-field-input-combo input.raw-value,
.ideditor .form-field-input-semicombo input.raw-value,
.ideditor .form-field-input-multicombo input.raw-value {
    font-family: monospace;
}
.ideditor .form-field-input-combo input.known-value,
.ideditor .form-field-input-semicombo input.known-value,
.ideditor .form-field-input-multicombo input.known-value {
    color: var(--link-color);
}

.ideditor .form-field-input-multicombo ul.chiplist {
    padding: 5px 8px 5px 8px;
    background: var(--bg-color);
    display: block;
    border-radius: 0 0 4px 4px;
    width: 100%;
}

.ideditor .form-field-input-multicombo li {
    display: inline-flex;
    flex-flow: row nowrap;
    margin-bottom: 3px;
    margin-top: 3px;
    border-radius: 4px;
}
.ideditor[dir='ltr'] .form-field-input-multicombo li {
    margin-right: 6px;
}
.ideditor[dir='rtl'] .form-field-input-multicombo li {
    margin-left: 6px;
}

.ideditor .form-field-input-multicombo li.chip {
    background-color: var(--nested-bg-color);
    border: 1px solid var(--nested-border-color);
    max-width: 100%;
    color: var(--link-color);
}
.ideditor .form-field-input-multicombo li.chip.negated span {
    text-decoration: line-through;
}
.ideditor .form-field-input-multicombo li.chip input {
    width: 1em;
    height: 11px;
    margin-top: 7px;
}
.ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
    padding: 2px 0px 2px 5px;
}
.ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
    padding: 2px 5px 2px 0px;
}
.ideditor .form-field-input-multicombo li.chip.draggable {
    cursor: grab;
}
.ideditor .form-field-input-multicombo li.chip.dragging {
    opacity: 0.75;
    z-index: 3000;
    cursor: grabbing;
}
.ideditor .form-field-input-multicombo li.chip.raw-value {
    font-family: monospace;
    color: var(--text-color);
}
.ideditor .form-field-input-multicombo li.mixed {
    border-color: var(--nested-bg-color);
    color: var(--passive-text-color);
    font-style: italic;
}

.ideditor .form-field-input-multicombo li.chip > span {
    display: block;
    flex: 1 1 auto;
    overflow: hidden;
    word-wrap: break-word;
    margin-top: 4px;
}

.ideditor .form-field-input-multicombo a,
.ideditor .form-field-input-multicombo button {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    padding: 0px 5px 0px 5px;
    margin: 0;
    cursor: pointer;
    color: var(--muted-text-color);
    display: block;
    text-align: center;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
}

.ideditor .form-field-input-multicombo li.chip .field_buttons {
    display: inline-block;
    text-align: right;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.ideditor .form-field-input-multicombo li.chip .field_buttons a {
    display: block;
    float: right;
    margin-top: -2px;
    margin-bottom: -2px;
}

.ideditor[dir='rtl'] .form-field-input-multicombo li.chip .field_buttons a {
    float: left;
}

.ideditor .form-field-input-multicombo li.chip .field_buttons button {
    display: inline-block;
    margin-right: -4px;
    margin-top: -4px;
    margin-bottom: -2px;
    margin-left: -2px;
}

.ideditor .form-field-input-multicombo li.chip .field_buttons button:hover {
    background-color: transparent;
}

.ideditor .form-field-input-multicombo .input-wrap {
    border: 1px solid var(--border-color-2);
    width: auto;
    max-width: 100%;
}
.ideditor .form-field-input-multicombo input {
    border: none;
}
.ideditor .form-field-input-multicombo input.combobox-input {
    max-width: 100%;
    min-width: 180px;
    field-sizing: content;
}

.ideditor .form-field-input-multicombo input:focus {
    border-radius: 4px !important;
}

.ideditor .form-field-input-multicombo .full-line-chips li.chip {
    width: 100%;
}
.ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
    width: auto;
}

.ideditor .form-field-input-combo .tag-value-icon,
.ideditor .form-field-input-semicombo .input-wrap .tag-value-icon,
.ideditor .form-field-input-multicombo .input-wrap .tag-value-icon {
    display: inline-block;
    position: relative;
    height: 24px;
    width: 30px;
    margin-right: -30px;
    align-self: center;
    vertical-align: middle;
    z-index: 1;
    padding-left: 11px;
}
.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon,
.ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon,
.ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon  {
    margin-right: 0;
    margin-left: -30px;
    padding-left: 0;
    padding-right: 11px;
}
.ideditor .combobox-address-street-place .combobox-option,
.ideditor .combobox-option.has-icon {
    display: flex;
    align-items: center;
}
.ideditor .combobox-option.has-icon .combobox-option-label {
    display: flex;
    align-items: center;
}
.ideditor .tag-value-icon .icon {
    width: 21px;
    height: 21px;
    margin: auto;
}
.ideditor .tag-value-icon .emoji {
    font-size: 24px;
    line-height: 24px;
}
.ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input,
.ideditor[dir='ltr'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
.ideditor[dir='ltr'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
    padding-left: 40px;
}
.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input,
.ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
.ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
    padding-right: 40px;
}
.ideditor .combobox-option .tag-value-icon {
    display: inline-block;
    width: 28px;
}
.ideditor .form-field-input-multicombo li.chip .tag-value-icon .icon {
    margin: 0;
    margin-right: 6px;
    display: inline-block;
    vertical-align: center;
}
.ideditor[dir='rtl'] .form-field-input-multicombo li.chip .tag-value-icon .icon {
    margin-right: 6px;
    margin-left: 0;
}


/* Field - Text / Numeric
------------------------------------------------------- */
.ideditor .form-field-input-text > input:only-child,
.ideditor .form-field-input-tel > input:only-of-type,
.ideditor .form-field-input-email > input:only-of-type,
.ideditor .form-field-input-url > input:only-child {
    border-radius: 0 0 4px 4px;
}
.ideditor .form-field-input-text > input:not(:only-child),
.ideditor .form-field-input-url > input:not(:only-child) {
    border-radius: 0 0 0 4px;
}
.ideditor .form-field-input-number > input:only-of-type {
    border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
    border-radius: 0 0 4px 0;
}
.ideditor .form-field-input-number > button:last-of-type {
    border-radius: 0 0 4px 0;
}
.ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
    border-radius: 0 0 0 4px;
}

.ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
.ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
.ideditor[dir='ltr'] .form-field-input-identifier > button {
    border-bottom-right-radius: 4px;
}
.ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
.ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
.ideditor[dir='rtl'] .form-field-input-identifier > button {
    border-bottom-left-radius: 4px;
}

/* draw the up/down on the buttons */
.ideditor .form-field-input-number button.decrement::after,
.ideditor .form-field-input-number button.increment::after {
    content: "";
    height: 0; width: 0;
    position: absolute;
    left: 0; right: 0; bottom: 0; top: 0;
    margin: auto;
}
.ideditor .form-field-input-number button.decrement::after {
    border-top: 5px solid var(--border-color);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.ideditor .form-field-input-number button.increment::after {
    border-bottom: 5px solid var(--border-color);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}


/* Field - Checkbox
------------------------------------------------------- */
.ideditor .form-field-input-check {
    display: flex;
    align-items: center;
    background: var(--bg-color);
    padding: 5px 10px;
    color: var(--link-color);
    border: 1px solid var(--border-color);
    border-top: 0;
    cursor: pointer;
}
.ideditor .form-field-input-check > input[type="checkbox"] {
    flex: 0 1 auto;
    margin-top: 0;
}
.ideditor .form-field-input-check > span {
    flex: 1 1 auto;
}
.ideditor .form-field-input-check > span.mixed {
    font-style: italic;
}
.ideditor .form-field-input-check > .reverser {
    flex: 0 1 auto;
    background-color: var(--nested-bg-color);
    border: 1px solid var(--nested-border-color);
    border-radius: 2px;
    padding: 0px 8px;
    color: inherit;
}
.ideditor[dir='ltr'] .form-field-input-check > .reverser {
    padding-right: 2px;
}
.ideditor[dir='rtl'] .form-field-input-check > .reverser {
    padding-left: 2px;
}
.ideditor .form-field-input-check > .reverser:active,
.ideditor .form-field-input-check > .reverser:focus {
    background: var(--nested-highlight-color);
}
@media (hover: hover) {
    .ideditor .form-field-input-check > .reverser:hover {
        background: var(--nested-highlight-color);
    }
}
.ideditor .form-field-input-check > .reverser.hide {
    display: none;
}
.ideditor .form-field-input-check:active,
.ideditor .form-field-input-check:focus {
    background: var(--active-bg-color);
}
@media (hover: hover) {
    .ideditor .form-field-input-check:hover {
        background: var(--active-bg-color);
    }
}
.ideditor .form-field-input-check .set {
    color: inherit;
}
.ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
    opacity: .5;
}


/* Field - Radio button
------------------------------------------------------- */
.ideditor .form-field-input-radio {
    flex: 1 1 auto;
    display: flex;
    flex-flow: row wrap;
}
.ideditor .form-field-input-radio > label {
    flex: 1 1 auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    padding: 5px 10px;
    background-color: var(--bg-color);
    color: var(--link-color);
    cursor: pointer;
}
.ideditor .form-field-input-radio > label.mixed {
    font-style: italic;
}
.ideditor .form-field-input-radio > label:last-child {
    border-radius: 0 0 4px 4px;
}
.ideditor .form-field-input-radio > label:active,
.ideditor .form-field-input-radio > label:focus {
    background-color: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor .form-field-input-radio > label:hover {
        background-color: var(--bg-color-3);
    }
}
.ideditor .form-field-input-radio > label.active {
    background-color: var(--selected-bg-color);
}
.ideditor .form-field-input-radio > label:not(:last-of-type) {
    border-bottom: 1px solid var(--border-color);
}
.ideditor .form-field-input-radio > label > input[type="radio"] {
    flex: 0 1 auto;
}
.ideditor .form-field-input-radio > label > span {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Hide placeholder for radio buttons if another is active, or not in hover state */
.ideditor .form-field-input-radio label.active ~ .placeholder,
.ideditor .form-field-input-radio .placeholder {
    padding: 0;
    opacity: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
}


/* Field - roadheight and roadspeed
------------------------------------------------------- */
.ideditor .form-field-input-roadheight input.roadheight-number,
.ideditor .form-field-input-roadheight input.roadheight-secondary-number,
.ideditor .form-field-input-roadspeed input.roadspeed-number {
    flex-basis: 0;
    width: 0;
}
.ideditor .form-field-input-roadheight input.roadheight-unit,
.ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
    flex: 0 1 auto;
    width: 60px;
}
.ideditor .form-field-input-roadspeed input.roadspeed-unit {
    flex: 0 1 auto;
    width: 80px;
}
.ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
.ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
    border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
.ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
    border-radius: 0 0 4px 0;
}
.ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
.ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
    border-left: 0;
    border-radius: 0 0 4px 0;
}
.ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
.ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
    border-right: 0;
    border-radius: 0 0 0 4px;
}


/* Field - Localized Name
------------------------------------------------------- */
.ideditor .form-field-input-localized > input.localized-main {
    border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
    border-radius: 0 0 4px 0;
}
.ideditor .form-field-input-localized > button.localized-add {
    border-radius: 0 0 4px 0;
}
.ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
    border-radius: 0 0 0 4px;
}

.ideditor .form-field-input-localized button.localized-add.disabled,
.ideditor .form-field-input-localized input.localized-main.disabled,
.ideditor .form-field-input-localized input.localized-lang.disabled,
.ideditor .form-field-input-localized input.localized-value.disabled {
    color: var(--passive-text-color);
    background-color: var(--bg-color-3);
    cursor: not-allowed;
}

/* nested subfields for name in different languages */
.ideditor .localized-multilingual {
    padding: 0 10px;
    flex-basis: 100%;
}
.ideditor .localized-multilingual .entry {
    position: relative;
    overflow: hidden;
}

/* draws a little line connecting the multilingual field up to the name field */
.ideditor .localized-multilingual .entry::before {
    content: "";
    display: block;
    position: absolute;
    background: var(--border-color);
    height: 11px;
    width: 1px;
    left: 0;
    right: 0;
    top: -11px;
    margin: auto;
}

.ideditor .localized-multilingual .entry .localized-lang {
    border-radius: 0;
    border-top-width: 0;
    width: 100%;
}
.ideditor .localized-multilingual .entry .localized-value {
    border-top-width: 0;
    border-radius: 0 0 4px 4px;
    width: 100%;
}


/* Field - Address
------------------------------------------------------- */
.ideditor .form-field-input-address {
    flex: 1 1 auto;
    display: flex;
    flex-flow: row wrap;
    border: 1px solid var(--border-color);
    border-top: 0px;
}

.ideditor .addr-row {
    flex: 1 1 auto;
    display: flex;
    width: 100%;
}

.ideditor .addr-row > input {
    flex: 1 1 auto;
    border-radius: 0;
    border-right: 0;
    border-bottom: 0;
}
.ideditor[dir='rtl'] .addr-row input {
    border-right: 1px solid var(--border-color);
    border-left: 0;
}

.ideditor .addr-row:first-of-type input {
    border-top: 0;
}
.ideditor .addr-row input:first-of-type {
    border-left: 0;
}
.ideditor[dir='rtl'] .addr-row input:first-of-type {
    border-right: 0;
}
.ideditor .addr-row:last-of-type input:first-of-type {
    border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
    border-radius: 0 0 4px 0;
}
.ideditor .addr-row:last-of-type input:last-of-type {
    border-radius: 0 0 4px 0;
}
.ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
    border-radius: 0 0 0 4px;
}
.ideditor .combobox-address-street-place .combobox-option.address-street,
.ideditor .combobox-address-street-place .combobox-option.address-place {
    padding-right: 20px;
}
.ideditor .combobox-address-street-place .combobox-option.address-street::after,
.ideditor .combobox-address-street-place .combobox-option.address-place::after {
    position: absolute;
    right: 2px;
    opacity: 0.4;
}
.ideditor .combobox-address-street-place .combobox-option.address-place::after {
    content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPg0KICAgIDxwYXRoIGQ9Ik0xMCwzIEM2LjY4NiwzIDQsNS42MTIgNCw4LjgzMyBDNCwxMi4wNTUgMTAsMTcgMTAsMTcgQzEwLDE3IDE2LDEyLjA1NSAxNiw4LjgzMyBDMTYsNS42MTIgMTMuMzE0LDMgMTAsMyB6IE0xMC4xODcsNi41IEMxMS41MTMsNi41IDEyLjU4Nyw3LjU0NSAxMi41ODcsOC44MzMgQzEyLjU4NywxMC4xMjIgMTEuNTEzLDExLjE2NyAxMC4xODcsMTEuMTY3IEM4Ljg2MiwxMS4xNjcgNy43ODcsMTAuMTIyIDcuNzg3LDguODMzIEM3Ljc4Nyw3LjU0NSA4Ljg2Miw2LjUgMTAuMTg3LDYuNSB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4NCjwvc3ZnPg==);
}


/* Field - Wikipedia
------------------------------------------------------- */
.ideditor .form-field-input-wikipedia {
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 auto;
}

.ideditor .wiki-lang-container,
.ideditor .wiki-title-container {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 auto;
    width: 100%;
}

.ideditor .wiki-lang-container > input.wiki-lang,
.ideditor .wiki-title-container > input.wiki-title {
    flex: 1 1 auto;
    border-top: 0;
    border-radius: 0;
}
.ideditor .wiki-title-container > input.wiki-title {
    border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
    border-radius: 0 0 4px 0;
}
.ideditor .wiki-title-container > button.wiki-link,
.ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
    border-radius: 0 0 4px 0;
}
.ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
.ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
    border-radius: 0 0 0 4px;
}


/* Field - Restriction Editor
------------------------------------------------------- */
.ideditor .form-field-input-restrictions {
    display: block;
    border: 1px solid var(--passive-bg-color);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.ideditor .form-field-input-restrictions .restriction-controls-container {
    background-color: var(--bg-color);
    width: 100%;
    padding: 5px;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 4px 4px;
}

.ideditor .restriction-controls-container .restriction-controls {
    display: table;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.ideditor .restriction-controls .restriction-control {
    display: table-row;
    padding: 5px 10px;
    height: 25px;
}

.ideditor .restriction-control input,
.ideditor .restriction-control > span {
    display: table-cell;
    text-align: start;
    padding: 0px 5px;
}

.ideditor .restriction-control > span.restriction-control-label {
    text-align: end;
}

.ideditor .restriction-control input {
    width: 60px;
    padding: 0;
    margin: 0px 5px;
    vertical-align: middle;
}

.ideditor .form-field-input-restrictions .restriction-container {
    position: relative;
    color: #333;
    height: 370px;
}
/* zero width space, so container takes up space */
.ideditor .form-field-input-restrictions .restriction-container:after {
    content: '\200b';
}

.ideditor .form-field-input-restrictions svg.surface {
    width: 100%;
    height: 100%;
}

.ideditor .restriction-container .restriction-help {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 2px 6px;
    background-color: var(--transparent-bg-color);
    color: var(--passive-text-color);
    text-align: center;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.ideditor .restriction-help .qualifier {
    margin: 2px;
    color: #666;
    font-weight: bold;
}
.ideditor .restriction-help .qualifier.allow {
    color: #8b5;
}
.ideditor .restriction-help .qualifier.restrict {
    color: #d53;
}
.ideditor .restriction-help .qualifier.only {
    color: #78f;
}


/* Field - Changeset Comment
------------------------------------------------------- */
.ideditor .form-field-comment:not(.present) textarea {
    border-color: rgb(160, 160, 160);
}
.ideditor .form-field-comment:not(.present) .field-label {
    border-color: rgb(160, 160, 160);
    background-color: rgba(160, 160, 160, 0.2);
}
.ideditor .form-field-comment:not(.present) button {
    border-color: rgb(160, 160, 160);
}


/* Field - Combobox
------------------------------------------------------- */
.ideditor[dir='ltr'] textarea.combobox-input,
.ideditor[dir='ltr'] input.combobox-input {
    /* leave room for the caret */
    padding-right: 20px;
}
.ideditor[dir='rtl'] textarea.combobox-input,
.ideditor[dir='rtl'] input.combobox-input {
    padding-left: 20px;
}

.ideditor div.combobox {
    z-index: 9999;
    display: none;
    box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
    margin-top: -1px;
    background: var(--bg-color);
    max-height: 245px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--border-color);
    border-radius: 0 0 4px 4px;
}
.ideditor div.combobox:has(.has-description) {
    max-height: 400px;
}

.ideditor .combobox a {
    display: block;
    padding: 5px 10px;
    border-top: 1px solid var(--border-color);
    line-height: 0.95rem;
    break: all;
}

.ideditor .combobox a.selected,
.ideditor .combobox a:active,
.ideditor .combobox a:focus {
    background: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor .combobox a:hover {
        background: var(--bg-color-3);
    }
}

.ideditor .combobox a:first-child {
    border-top: 0;
    padding: 4px 10px;
}

.ideditor .combobox-caret {
    display: inline-block;
    position: relative;
    height: 5px;
    width: 30px !important;
    margin-left: -30px;
    align-self: center;
    vertical-align: middle;
    cursor: pointer;
}
.ideditor[dir='rtl'] .combobox-caret {
  margin-left: 0;
  margin-right: -30px;
}

.ideditor .combobox-caret::after {
    content: "";
    height: 0; width: 0;
    position: absolute;
    left: 0; right: 0; bottom: 0; top: 0;
    margin: auto;
    border-top: 5px solid var(--border-color);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.ideditor .combobox .combobox-option.has-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ideditor .combobox .combobox-option-description {
    font-size: 11px;
    line-height: 1.3;
    opacity: 0.7;
    white-space: normal;
    padding-top: 2px;
}
.ideditor .combobox .combobox-option.raw-option {
    font-family: monospace;
    color: var(--text-color);
}

.ideditor .combobox .combobox-option.virtual-option {
    font-style: italic;
    color: var(--text-color);
}

.ideditor .form-field-input-wrap {
    position: relative;
}

.ideditor .form-field-input-wrap span.length-indicator-wrap {
    visibility: hidden;
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
}

.ideditor .form-field-input-wrap input:focus + span.length-indicator-wrap,
.ideditor .form-field-input-wrap textarea:focus + span.length-indicator-wrap,
.ideditor .form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap,
.ideditor .form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap {
    visibility: visible;
}

.ideditor .form-field-input-wrap span.length-indicator {
    display: block;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--link-color);
    border-right-style: solid;
    border-right-color: lightgray;
}

.ideditor .form-field-input-wrap span.length-indicator.limit-reached {
    border-right-color: red;
}

.ideditor .tooltip.max-length-warning {
    z-index: 10;
}

/* Field Help
------------------------------------------------------- */
.ideditor .field-help-body {
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    margin: 5px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    z-index: 20;
    background: var(--transparent-bg-color);
    box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
}

.ideditor .field-help-title h2 {
    padding: 10px;
    margin-bottom: 0px;
    font-size: 17px;
}
.ideditor .field-help-title button {
    width: 45px;
    height: 45px;
    border-radius: 0 5px 0 0;
}

.ideditor .field-help-nav {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
}
.ideditor .field-help-nav-item {
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--text-color);
}
.ideditor .field-help-nav-item.active {
    color: var(--link-color);
    border-bottom: 2px solid;
}
.ideditor .field-help-nav-item:active,
.ideditor .field-help-nav-item:focus {
    color: var(--link-focus-color);
    background-color: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor .field-help-nav-item:hover {
        color: var(--link-focus-color);
        background-color: var(--bg-color-3);
    }
}

.ideditor .field-help-content {
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ideditor .field-help-content h3 {
    font-size: 12px;
    margin-bottom: 5px;
}
.ideditor .field-help-content p {
    margin-bottom: 15px;
}
.ideditor .field-help-content ul li {
    list-style: inside;
    margin-bottom: 5px;
}

.ideditor .field-help-content .field-help-image {
    width: 100%;
    margin-bottom: 15px;
}

.ideditor .field-help-content svg.turn {
    width: 40px;
    height: 20px;
}
.ideditor .field-help-content svg.shadow {
    opacity: 0.7;
    width: 60px;
    height: 20px;
}
.ideditor .field-help-content svg.from {
    color: #777;
}
.ideditor .field-help-content svg.allow {
    color: #5b3;
}
.ideditor .field-help-content svg.restrict {
    color: #d53;
}
.ideditor .field-help-content svg.only {
    color: #68f;
}

.ideditor .field-help-content p.from_shadow,
.ideditor .field-help-content p.allow_shadow,
.ideditor .field-help-content p.restrict_shadow,
.ideditor .field-help-content p.allow_turn,
.ideditor .field-help-content p.restrict_turn {
    margin-bottom: 5px;
}


/* More Fields dropdown
------------------------------------------------------- */
.ideditor .more-fields {
    margin-top: 10px;
    font-weight: bold;
}

.ideditor .more-fields label {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.ideditor .more-fields input {
    margin-left: 10px;
    flex: 1 1 auto;
}
.ideditor[dir='rtl'] .more-fields input {
    margin-left: auto;
    margin-right: 10px;
}

.ideditor .form-field-input-wrap .label {
    background: var(--bg-color-2);
    padding: 5px 10px;
}


/* Raw Tag Editor
------------------------------------------------------- */
.ideditor .raw-tag-options {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    margin-top: -28px;
}
.ideditor button.raw-tag-option {
    flex: 0 0 auto;
    padding: 3px;
    background: var(--muted-text-color);
    color: var(--bg-color-3);
    margin: 0 3px;
}
.ideditor button.raw-tag-option:focus,
.ideditor button.raw-tag-option.active {
    color: var(--bg-color);
    background: var(--link-focus-color);
}
@media (hover: hover) {
    .ideditor button.raw-tag-option:hover {
        color: var(--bg-color);
        background: var(--link-focus-color);
    }
}
.ideditor button.raw-tag-option.selected {
    color: var(--bg-color);
    background: var(--link-color);
}
.ideditor button.raw-tag-option svg.icon {
    width: 14px;
    height: 14px;
    display: block;
}
.ideditor[dir='ltr'] button.raw-tag-option-list {
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}


.ideditor .tag-text {
    width: 100%;
    height: 100%;
    min-height: 32px;
    font-family: monospace;
    white-space: pre;
}

.ideditor .tag-text,
.ideditor .tag-list {
    margin-top: 10px;
}
.ideditor .tag-row {
    width: 100%;
    position: relative;
}
.ideditor .tag-row .inner-wrap {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    position: relative;
}
.ideditor .tag-row .key-wrap,
.ideditor .tag-row .value-wrap {
    flex: 1 1 50%;
}

.ideditor .tag-text.readonly,
.ideditor .tag-row.readonly,
.ideditor .tag-row.readonly input.key,
.ideditor .tag-row.readonly input.value,
.ideditor .tag-row.readonly button.remove {
    color: var(--passive-text-color);
    background-color: var(--bg-color-3);
    cursor: not-allowed;
}

.ideditor .tag-row input {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    width: 100%;
}
.ideditor[dir='rtl'] .tag-row input {
    border-left: none;
    border-right: 1px solid var(--border-color);
}


.ideditor .tag-row input.key {
    font-weight: bold;
    background-color: var(--bg-color-2);
}

.ideditor .tag-row input.value {
    border-right: 1px solid var(--border-color);
}
.ideditor[dir='rtl'] .tag-row input.value {
    border-left: 1px solid var(--border-color);
}

.ideditor .tag-row:first-child input.key {
    border-top: 1px solid var(--border-color);
    border-top-left-radius: 4px;
}
.ideditor[dir='rtl'] .tag-row:first-child input.key {
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
}

.ideditor .tag-row:first-child input.value {
    border-top: 1px solid var(--border-color);
}
.ideditor .tag-row button {
    flex: 0 0 auto;
    width: 32px;
    border: 1px solid var(--border-color);
    border-top-width: 0;
    border-left-width: 0;
}
.ideditor[dir='rtl'] .tag-row button {
    border-left-width: 1px;
    border-right-width: 0;
}

.ideditor .tag-row button:active,
.ideditor .tag-row button:focus {
    background: var(--active-bg-color);
}
@media (hover: hover) {
    .ideditor .tag-row button:hover {
        background: var(--active-bg-color);
    }
}
.ideditor .tag-row button .icon {
    opacity: .5;
}
.ideditor .tag-row:first-child button {
    border-top-width: 1px;
}

.ideditor .tag-row:first-child .tag-reference-button {
    border-top-right-radius: 4px;
}
.ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
    border-top-left-radius: 4px;
    border-top-right-radius: 0;
}

.ideditor .tag-row:last-child .tag-reference-button {
    border-bottom-right-radius: 4px;
}
.ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0;
}

.ideditor .tag-row .tag-reference-button {
    border-radius: 0;
}
.ideditor[dir='rtl'] .tag-row .tag-reference-button {
    border-left-width: 1px;
    border-right-width: 0;
}

/* Tag reference */
.ideditor .tag-reference-loading {
    background-color: var(--bg-color-2);
}
.ideditor .tag-reference-loading .icon {
    background-image: url(img/mini-loader.gif);
    background-position: 0 0;
}

.ideditor .tag-reference-body {
    flex: 1 1 auto;
    width: 100%;
    overflow: hidden;
    display: none;
    padding-top: 10px;
}
.ideditor .tag-reference-body.expanded {
    padding-bottom: 10px;
    padding-left: 10px;
    display: block;
}
.ideditor[dir='rtl'] .tag-reference-body.expanded {
    padding-left: 0;
    padding-right: 10px;
}
.ideditor .tag-reference-link {
    display: block;
}
.ideditor .tag-reference-link .icon:first-child {
    margin-left: 0;
}

.ideditor img.tag-reference-wiki-image {
    float: right;
    width: 33.3333%;
    border-radius: 4px;
    margin: 0 0 0 5px;
}
.ideditor[dir='rtl'] img.tag-reference-wiki-image {
    float: left;
    margin: 0 5px 0 0;
}

.ideditor .preset-list .tag-reference-body {
    position: relative;
    width: 100%;
}
.ideditor .raw-tag-editor .tag-reference-body {
    width: 100%;
}
.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
    background: var(--bg-color-2);
    color: var(--text-color);
}
.ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
    border-bottom: 1px solid var(--border-color);
}
.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
    border-top: 1px solid var(--border-color);
}


/* Raw Member / Membership Editor
------------------------------------------------------- */
.ideditor .section-raw-member-editor .member-list:empty,
.ideditor .section-raw-membership-editor .member-list:empty {
    display: none;
}

.ideditor .section-raw-member-editor .member-list,
.ideditor .section-raw-membership-editor .member-list {
    position: relative; /* required for drag-and-drop */
    padding-top: 5px;
}
.ideditor .section-raw-member-editor .member-list li,
.ideditor .section-raw-membership-editor .member-list li {
    position: relative;
    border-radius: 4px;
    margin: 0;
    padding-bottom: 10px;
}
/* only the raw-member-editor is reorederable, not the raw-membership-editor */
.ideditor .section-raw-member-editor .member-row .label-text { cursor: grab; }
.ideditor .section-raw-member-editor .member-row .label-text:active { cursor: grabbing; }

.ideditor .section-raw-member-editor .member-row .member-entity-name,
.ideditor .section-raw-membership-editor .member-row .member-entity-name {
    font-weight: normal;
    padding-left: 10px;
}

.ideditor .combobox-parent-relation .has-colour::before {
    display: inline-block;
    content: '';
    margin-left: 2px;
    margin-right: 5px;
    border-style: solid;
    border-width: 4px;
    border-radius: 4px;
    border-color: inherit;
}
.ideditor .section-raw-membership-editor .member-row img.member-entity-icon,
.ideditor .section-raw-member-editor .member-row img.member-entity-icon {
    display: inline-block;
    width: auto;
    height: 18px;
    margin-left: 5px;
    margin-bottom: -4.5px;
}
.ideditor .section-raw-membership-editor .member-row span.member-entity-ref-color,
.ideditor .section-raw-member-editor .member-row span.member-entity-ref-color,
.ideditor .feature-list .feature-list-item span.member-entity-ref-color {
    display: inline-block;
    margin-left: 5px;
    margin-right: -5px;
    border-style: solid;
    border-width: 4px;
    border-radius: 10px;
    line-height: 10px;
}

.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
    padding-left:0;
    padding-right: 10px;
}
.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name.has-colour::before,
.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
.ideditor[dir='rtl'] .feature-list .entity-name.has-colour::before {
    margin-left: 5px;
    margin-right: -5px;
}
.ideditor[dir='rtl'] .combobox-parent-relation .has-colour::before  {
    margin-left: 5px;
    margin-right: 2px;
}


.ideditor .form-field-input-member > input.member-role {
    border-radius: 0 0 4px 4px;
}

.ideditor .member-row-new .member-entity-input {
    flex: 1 1 100%;
    border-radius: 4px 4px 0 0;
    border: 0;
}

.ideditor .section-raw-member-editor .member-row.dragging {
    opacity: 0.75;
    z-index: 3000;
    /*
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    */
}

/* add tag, add relation buttons */
.ideditor .add-row {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
}
.ideditor .add-row .add-tag,
.ideditor .add-row .add-relation,
.ideditor .add-row .space-value {
    flex: 1 1 50%;
}
.ideditor .add-row .space-buttons {
    flex: 0 0 62px;
}
.ideditor .add-row button {
    padding: 5px;
    background: rgba(0,0,0,.5);
}
.ideditor .add-row button:focus,
.ideditor .add-row button:active {
    background: rgba(0,0,0,.8);
}
@media (hover: hover) {
    .ideditor .add-row button:hover {
        background: rgba(0,0,0,.8);
    }
}

.ideditor .add-tag {
    border-radius: 0 0 4px 4px;
}
.ideditor .add-tag button {
    visibility: hidden;
}
.ideditor .add-tag input.key::-moz-placeholder {
    font-weight: normal;
}
.ideditor .add-tag input.key::placeholder {
    font-weight: normal;
}
.ideditor[dir='ltr'] .add-tag input.key {
    border-bottom-left-radius: 4px;
}
.ideditor[dir='rtl'] .add-tag input.key {
    border-bottom-right-radius: 4px;
}
.ideditor[dir='ltr'] .add-tag input.value {
    border-bottom-right-radius: 4px;
}
.ideditor[dir='rtl'] .add-tag input.value {
    border-bottom-left-radius: 4px;
}
.ideditor[dir='ltr'] .tag-row:has(+ .add-tag) button:last-child {
    border-bottom-right-radius: 4px;
}
.ideditor[dir='rtl'] .tag-row:has(+ .add-tag) button:last-child {
    border-bottom-left-radius: 4px;
}

.ideditor .add-relation {
    margin-top: 10px;
    border-radius: 4px;
}


/* OSM Note / QA Editors
------------------------------------------------------- */
.ideditor .note-header,
.ideditor .qa-header {
    background-color: var(--bg-color-2);
    border-radius: 5px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.ideditor .note-header-icon,
.ideditor .qa-header-icon {
    background-color: var(--bg-color);
    padding: 10px;
    flex: 0 0 auto;
    position: relative;
    width: 60px;
    height: 60px;
    border-right: 1px solid var(--border-color);
    border-radius: 5px 0 0 5px;
}
.ideditor[dir='rtl'] .note-header-icon,
.ideditor[dir='rtl'] .qa-header-icon {
    border-right: unset;
    border-left: 1px solid var(--border-color);
    border-radius: 0 5px 5px 0;
}

.ideditor .note-header-icon .icon-wrap,
.ideditor .qa-header-icon .icon-wrap {
    position: absolute;
    top: 0px;
}
.ideditor .preset-icon-28 {
    position: absolute;
    top: 16px;
    left: 16px;
    margin: auto;
}
.ideditor .preset-icon-28 .icon {
    width: 28px;
    height: 28px;
}

.ideditor .note-header-label,
.ideditor .qa-header-label {
    background-color: var(--bg-color-2);
    padding: 0 15px;
    flex: 1 1 100%;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0 5px 5px 0;
}
.ideditor[dir='rtl'] .note-header-label,
.ideditor[dir='rtl'] .qa-header-label {
    border-radius: 5px 0 0 5px;
}

.ideditor .note-category {
    margin: 20px 0px;
}

.ideditor .comments-container {
    background: var(--bg-color-3);
    padding: 1px 10px;
    border-radius: 8px;
    margin-top: 20px;
}

.ideditor .comment {
    background-color: var(--bg-color);
    border-radius: 5px;
    border: 1px solid var(--border-color);
    margin: 10px auto;
    display: flex;
    flex-flow: row nowrap;
}
.ideditor .comment-avatar {
    padding: 10px;
    flex: 0 0 auto;
}
.ideditor .comment-avatar .icon.comment-avatar-icon {
    width: 40px;
    height: 40px;
    -o-object-fit: cover;
       object-fit: cover;
    border: 1px solid var(--border-color);
    border-radius: 20px;
}
.ideditor .comment-main {
    padding: 10px 10px 10px 0;
    flex: 1 1 100%;
    flex-flow: column nowrap;
    overflow: hidden;
    overflow-wrap: break-word;
}
.ideditor[dir='rtl'] .comment-main {
    padding: 10px 0 10px 10px;
}

.ideditor .comment-metadata {
    flex-flow: row nowrap;
    justify-content: space-between;
}
.ideditor .comment-author {
    font-weight: bold;
    color: var(--text-color);
}
.ideditor .comment-date {
    color: var(--muted-text-color);
}
.ideditor .inspector-hover .comment-text,
.ideditor .comment-text {
    color: var(--text-color);
    margin-top: 10px;
    overflow-y: auto;
    max-height: 250px;
}
.ideditor .comment-text::-webkit-scrollbar {
    border-left: none;
}

.ideditor .note-save,
.ideditor .qa-save {
    padding-top: 20px;
}

.ideditor .qa-details-container {
    background: var(--bg-color-3);
    padding: 10px;
    margin-top: 20px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}
.ideditor .qa-details-description-text::first-letter {
    text-transform: capitalize;
}
.ideditor[dir='rtl'] .qa-details-description-text::first-letter {
    text-transform: none;  /* #5877 */
}
.ideditor .qa-details-subsection h4 {
    padding-bottom: 2px;
}
.ideditor .qa-details-subsection:not(:last-child) {
    margin-bottom: 10px;
}
.ideditor .qa-details-subsection:empty {
    display: none;
}

.ideditor .note-save .new-comment-input,
.ideditor .qa-save .new-comment-input {
    width: 100%;
    height: 100px;
    max-height: 300px;
    min-height: 100px;
}

.ideditor .note-save .detail-section,
.ideditor .qa-save .detail-section {
    margin: 10px 0;
}

.ideditor .note-report {
    float: right;
}


/* Custom Data Editor
------------------------------------------------------- */
.ideditor .data-header {
    background-color: var(--bg-color-2);
    border-radius: 5px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.ideditor .data-header-icon {
    background-color: var(--bg-color);
    padding: 10px;
    flex: 0 0 auto;
    position: relative;
    width: 60px;
    height: 60px;
    border-right: 1px solid var(--border-color);
    border-radius: 5px 0 0 5px;
}
.ideditor[dir='rtl'] .data-header-icon {
    border-right: unset;
    border-left: 1px solid var(--border-color);
    border-radius: 0 5px 5px 0;
}

.ideditor .data-header-icon .icon-wrap {
    position: absolute;
    top: 0px;
}

.ideditor .data-header-label {
    background-color: var(--bg-color-2);
    padding: 0 15px;
    flex: 1 1 100%;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0 5px 5px 0;
}
.ideditor[dir='rtl'] .data-header-label {
    border-radius: 5px 0 0 5px;
}

/* custom data editor - no info/delete buttons */
.ideditor .data-editor.raw-tag-editor .tag-row button {
    display: none;
}
.ideditor .data-editor.raw-tag-editor .tag-row .key-wrap,
.ideditor .data-editor.raw-tag-editor .tag-row .value-wrap {
    width: 50%;
}


.ideditor .over-map {
    position: relative;
    height: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    overflow: hidden;
}
.ideditor .over-map > * {
    pointer-events: auto;
    z-index: 5;
}
/* offscreen this without hiding it */
.ideditor .over-map .select-trap {
    position: absolute;
    right: -1000%;
    opacity: 0;
}

/* Map Controls
------------------------------------------------------- */
.ideditor .map-controls-wrap {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 100;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ideditor .map-controls-wrap::-webkit-scrollbar {
    display: none;
}
.ideditor .map-controls {
    right: 0;
    top: 0;
    width: 40px;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 5px 0;
    pointer-events: none;
}
.ideditor .map-controls:before {
    content: '';
    display: inline-block;
    pointer-events: none;
    width: 40px;
    height: 100%;
    max-height: 70px;
    flex: 0 1 auto;
}
.ideditor[dir='rtl'] .map-controls {
    left: 0;
    right: auto;
}

.ideditor .map-control {
    position: relative;
    display: flex;
    flex-direction: column;
}
.ideditor .map-control > button {
    position: relative;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,.5);
    border-radius: 0;
    pointer-events: auto;
}

.ideditor .map-control > button:not(.disabled):focus,
.ideditor .map-control > button:not(.disabled):active {
    background: rgba(0, 0, 0, .8);
}
.ideditor .map-control > button.active,
.ideditor .map-control > button.active:active {
    background: var(--link-color);
}
@media (hover: hover) {
    .ideditor .map-control > button:not(.disabled):hover {
        background: rgba(0, 0, 0, .8);
    }
    .ideditor .map-control > button.active:hover {
        background: var(--link-color);
    }
}

.ideditor .map-control > button.disabled .icon {
    color: rgba(255, 255, 255, 0.5);
}


/* Fullscreen Button (disabled)
------------------------------------------------------- */
.ideditor div.full-screen {
    /*display: inline-block;*/
    width: 40px;
    margin-right: 10px;
    display: none;
}

.ideditor div.full-screen .tooltip {
    min-width: 160px;
}

.ideditor div.full-screen > button, .ideditor div.full-screen > button.active {
    width: 40px;
    height: 40px;
    background: transparent;
}
.ideditor div.full-screen > button:active,
.ideditor div.full-screen > button:focus {
    background-color: rgba(0, 0, 0, .8);
}
@media (hover: hover) {
    .ideditor div.full-screen > button:hover {
        background-color: rgba(0, 0, 0, .8);
    }
}


/* Map Controls
------------------------------------------------------- */

/* Zoom in/out buttons */
.ideditor .zoombuttons > button.zoom-in {
    border-radius: 4px 0 0 0;
}
.ideditor[dir='rtl'] .zoombuttons > button.zoom-in {
    border-radius: 0 4px 0 0;
}

/* Geolocate button */
.ideditor .geolocate-control {
    margin-bottom: 10px;
}
.ideditor .geolocate-control > button {
    border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .geolocate-control > button {
    border-radius: 0 0 4px 0;
}

/* Zoom to selection button */
.ideditor .zoom-to-selection-control .icon {
    width: 22px;
    height: 22px;
}


/* Background / Map Data / Help Pane buttons
------------------------------------------------------- */
.ideditor .background-control > button {
    border-radius: 4px 0 0 0;
}
.ideditor[dir='rtl'] .background-control > button {
    border-radius: 0 4px 0 0;
}

.ideditor .help-control > button {
    border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .help-control > button {
    border-radius: 0 0 4px 0;
}


/* Background / Map Data Settings
------------------------------------------------------- */
.ideditor .imagery-faq {
    margin-bottom: 10px;
    white-space: nowrap;
}

.ideditor .layer-list, .ideditor .controls-list {
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.ideditor .layer-list > li {
    background-color: var(--bg-color);
    color: var(--link-color);
    position: relative;
    display: flex;
}

.ideditor .layer-list:empty {
    display: none;
}

.ideditor .layer-list > li:first-child {
    border-radius: 3px 3px 0 0;
}
.ideditor .layer-list > li:last-child {
    border-radius: 0 0 3px 3px;
}
.ideditor .layer-list > li:only-child {
    border-radius: 3px;
}
.ideditor .layer-list li:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}
.ideditor .layer-list li:active {
    background-color: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor .layer-list li:hover {
        background-color: var(--bg-color-3);
    }
}

.ideditor .layer-list li.active button,
.ideditor .layer-list li.switch button,
.ideditor .layer-list li.active,
.ideditor .layer-list li.switch {
    background: var(--selected-bg-color);
}

.ideditor .layer-list li.best > div.best {
    padding: 5px;
    flex: 0 0 auto;
    align-self: center;
}

.ideditor[dir='rtl'] .list-item-data-browse svg {
    transform: rotateY(180deg);
}

/* make sure tooltip fits in map-control panel */
/* if too wide, placement will be wrong the first time it displays */
.ideditor .layer-list li.best .popover-inner {
    max-width: 160px;
}

.ideditor .layer-list label {
    padding: 5px 10px;
    cursor: pointer;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ideditor[dir='ltr'] .layer-list .indented label {
    padding-left: 24px;
}
.ideditor[dir='rtl'] .layer-list .indented label {
    padding-right: 24px;
}

.ideditor .layer-list label > span {
    display: block;
    overflow: hidden;
    width: calc(100% - 20px); /* Ensures radio input width within flexbox */
}

.ideditor .layer-list label span.localized-text {
    line-height: 0.95rem;
}

.ideditor .layer-list input.list-item-input {
    height: 2.2em;
    padding: 0px 4px;
    width: 50%;
    min-width: 160px;
}

.ideditor .map-data-pane .layer-list button,
.ideditor .background-pane .layer-list button {
    border-left: 1px solid var(--border-color);
    border-radius: 0;
    padding-left: 4px;
    padding-right: 4px;
}
.ideditor[dir='rtl'] .map-data-pane .layer-list button,
.ideditor[dir='rtl'] .background-pane .layer-list button {
    border-left: none;
    border-right: 1px solid var(--border-color);
}

.ideditor .map-data-pane .layer-list button .icon,
.ideditor .background-pane .layer-list button .icon {
    opacity: 0.5;
}

.ideditor .map-data-pane .layer-list button:last-of-type,
.ideditor .background-pane .layer-list button:last-of-type {
    border-radius: 0 3px 3px 0;
}
.ideditor[dir='rtl'] .map-data-pane .layer-list button:last-of-type,
.ideditor[dir='rtl'] .background-pane .layer-list button:last-of-type {
    border-radius: 3px 0 0 3px;
}

.ideditor .map-data-pane .vectortile-container .vectortile-header {
    padding-bottom: 5px;
}
.ideditor .map-data-pane .vectortile-container .vectortile-footer {
    padding-bottom: 10px;
}


/* Issues
------------------------------------------------------- */
.ideditor .issue {
    overflow: hidden;
}
.ideditor .issue .issue-label,
.ideditor .issue-label .issue-text {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    cursor: pointer;
    text-align: initial;
    background: none;
}

.ideditor .issue-text .issue-icon {
    flex: 0 0 auto;
    padding: 2px 3px;
}
.ideditor .issue-text .issue-message {
    flex: 1 1 auto;
    padding: 4px 5px;
}
.ideditor .issue-label .issue-info-button {
    height: unset;
    width: 32px;
    flex: 0 0 auto;
    border-left: 1px solid var(--border-color);
    background-color: rgba(0,0,0,0);
}
.ideditor[dir='rtl'] .issue-label .issue-info-button {
    border-left: 0;
    border-right: 1px solid var(--border-color);
}
.ideditor .issue-container .issue-label .issue-info-button .icon {
    opacity: 0.5;
}
.ideditor .issue-container.active .issue-label .issue-info-button .icon {
    opacity: 0.7;
}
.ideditor .issue-label .issue-info-button:last-child {
    border-radius: 0 4px 4px 0;
}
.ideditor[dir='rtl'] .issue-label .issue-info-button:last-child {
    border-radius: 4px 0 0 4px;
}

/* suggestion styles */
.ideditor .suggestions-list,
.ideditor .suggestions-list *,
.ideditor .issue-container.active .issue.severity-suggestion,
.ideditor .issue-container.active .issue.severity-suggestion * {
    border-color: var(--suggestion-border-color);
}
.ideditor .suggestions-list .issue.severity-suggestion .issue-label,
.ideditor .issue.severity-suggestion .issue-fix-list,
.ideditor .suggestion-section {
    background: var(--suggestion-bg-color);
}

.ideditor .issue-container.active .issue.severity-suggestion .issue-label {
    background: var(--suggestion-label-color);
}

.ideditor .issue.severity-suggestion .issue-icon {
    color: var(--suggestion-icon-color);
}

.ideditor .issue.severity-suggestion .issue-fix-item button.actionable,
.ideditor .issue-container.active .issue.severity-suggestion .issue-info-button {
    color: var(--suggestion-text-color);
    fill: var(--suggestion-text-color);
}
.ideditor .suggestions-list .issue.severity-suggestion .issue-label:active,
.ideditor .suggestions-list .issue.severity-suggestion .issue-label:focus,
.ideditor .issue.severity-suggestion .issue-fix-item button.actionable:active,
.ideditor .issue.severity-suggestion .issue-fix-item button.actionable:focus {
    background: var(--suggestion-highlight-color);
}
.ideditor .issue.severity-suggestion .issue-fix-item button.actionable:active,
.ideditor .issue.severity-suggestion .issue-fix-item button.actionable:focus,
.ideditor .issue-container.active .issue.severity-suggestion .issue-info-button:active,
.ideditor .issue-container.active .issue.severity-suggestion .issue-info-button:focus {
    color: var(--suggestion-highlight-text-color);
    fill: var(--suggestion-highlight-text-color);
}
@media (hover: hover) {
    .ideditor .suggestions-list .issue.severity-suggestion .issue-label:hover,
    .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
        background: var(--suggestion-highlight-color);
    }
    .ideditor .issue.severity-suggestion .issue-fix-item button.actionable:hover,
    .ideditor .issue-container.active .issue.severity-suggestion .issue-info-button:hover {
        color: var(--suggestion-highlight-text-color);
        fill: var(--suggestion-highlight-text-color);
    }
}

/* warning styles */
.ideditor .warnings-list,
.ideditor .warnings-list *,
.ideditor .issue-container.active .issue.severity-warning,
.ideditor .issue-container.active .issue.severity-warning * {
    border-color: var(--warning-border-color);
}

.ideditor .warnings-list .issue.severity-warning .issue-label,
.ideditor .issue.severity-warning .issue-fix-list,
.ideditor .warning-section {
    background: var(--warning-bg-color);
}

.ideditor .issue-container.active .issue.severity-warning .issue-label {
    background: var(--warning-label-color);
}

.ideditor .issue.severity-warning .issue-icon {
    color: var(--warning-icon-color);
}

.ideditor .issue.severity-warning .issue-fix-item button.actionable,
.ideditor .issue-container.active .issue.severity-warning .issue-info-button {
    color: var(--warning-text-color);
    fill: var(--warning-text-color);
}
.ideditor .warnings-list .issue.severity-warning .issue-label:active,
.ideditor .warnings-list .issue.severity-warning .issue-label:focus,
.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
    background: var(--warning-highlight-color);
}
.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
.ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
.ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
    color: var(--warning-highlight-text-color);
    fill: var(--warning-highlight-text-color);
}
@media (hover: hover) {
    .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
    .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
        background: var(--warning-highlight-color);
    }
    .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
    .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
        color: var(--warning-highlight-text-color);
        fill: var(--warning-highlight-text-color);
    }
}


/* error styles */
.ideditor .errors-list,
.ideditor .errors-list *,
.ideditor .issue-container.active .issue.severity-error,
.ideditor .issue-container.active .issue.severity-error * {
    border-color: var(--error-border-color);
}

.ideditor .errors-list .issue.severity-error .issue-label,
.ideditor .issue.severity-error .issue-fix-list,
.ideditor .error-section {
    background: var(--error-bg-color);
}

.ideditor .issue-container.active .issue.severity-error .issue-label {
    background: var(--error-label-color);
}

.ideditor .issue.severity-error .issue-fix-item button.actionable,
.ideditor .issue-container.active .issue.severity-error .issue-info-button {
    color: var(--error-text-color);
    fill: var(--error-icon-color);
}
.ideditor .issue.severity-error .issue-icon {
    color: var(--error-icon-color);
}
.ideditor .errors-list .issue.severity-error .issue-label:active,
.ideditor .errors-list .issue.severity-error .issue-label:focus,
.ideditor .issue.severity-error .issue-fix-item button.actionable:active,
.ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
    background: var(--error-highlight-color);
}
.ideditor .issue.severity-error .issue-fix-item button.actionable:active,
.ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
.ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
.ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
    color: var(--error-highlight-text-color);
    fill: var(--error-highlight-text-color);
}
@media (hover: hover) {
    .ideditor .errors-list .issue.severity-error .issue-label:hover,
    .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
        background: var(--error-highlight-color);
    }
    .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
    .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
        color: var(--error-highlight-text-color);
        fill: var(--error-highlight-text-color);
    }
}


/* Issues Pane */
.ideditor .issues-options-container {
    display: table;
}
.ideditor .issues-option {
    display: table-row;
}
.ideditor .issues-option-title {
    display: table-cell;
    font-weight: bold;
    padding-right: 10px;
}
.ideditor[dir='rtl'] .issues-option-title {
    padding-right: 0;
    padding-left: 10px;
}
.ideditor .issues-option label {
    display: table-cell;
    padding: 0 10px;
    white-space: nowrap;
}

.ideditor .layer-list.issues-list li.issue {
    border-color: inherit;    /* override .layer-list styles */
    color: inherit;
    height: unset;
}

.ideditor .layer-list.issue-rules-list,
.ideditor .layer-list.issues-list,
.ideditor .layer-list.layer-feature-list {
    margin-bottom: 0;
}
.ideditor .section-footer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    height: 30px;
}
.ideditor .section-footer a {
    padding: 5px;
}

.ideditor .section-issues-status .box {
    border-radius: 4px;
    border: 1px solid var(--valid-border-color);
    background: var(--valid-bg-color);
    padding: 5px !important;
    display: flex;
}
.ideditor .section-issues-status .icon {
    color: var(--valid-icon-color);
}

.ideditor input.square-degrees-input {
    padding: 2px !important; /* important needed for rtl */
    width: 3em;
    height: 2em;
    text-align: center;
    background: rgba(0,0,0,0);
    color: currentColor;
}


/* Entity Issues List */
.ideditor .section-entity-issues .issue-container .issue {
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-color-2);
}
.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
    background: var(--active-bg-color);
}
@media (hover: hover) {
    .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
    .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
        background: var(--active-bg-color);
    }
}
.ideditor .section-entity-issues .issue .issue-label .issue-text {
    padding-right: 10px;
}
.ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
    padding-right: unset;
    padding-left: 10px;
}

.ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
    font-weight: bold;
}
.ideditor .section-entity-issues .issue-container:not(:last-of-type) {
    margin-bottom: 5px;
}
.ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
    margin-top: 10px;
}
.ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
    margin-bottom: 10px;
}

/* fixes */
.ideditor .section-entity-issues .issue-fix-list {
    border-top: 1px solid;
    border-color: inherit;
}
.ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
    display: none;
}

.ideditor li.issue-fix-item button {
    padding: 2px 10px 2px 20px;
    background: transparent;
    width: 100%;
    text-align: initial;
}
.ideditor[dir='rtl'] li.issue-fix-item button {
    padding: 2px 20px 2px 10px;
}
.ideditor li.issue-fix-item:first-of-type button {
    padding-top: 5px;
}
.ideditor li.issue-fix-item:last-of-type button {
    padding-bottom: 5px;
}

.ideditor li.issue-fix-item button .fix-message {
    padding: 0 10px;
    vertical-align: middle;
}

.ideditor li.issue-fix-item button.actionable {
    cursor: pointer;
}
.ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
    color: #555;
    fill: #555;
}

.ideditor .issue-container:not(.active) ul.issue-fix-list {
    display: none;
}
.ideditor .issue-container:not(.active) .issue-info {
    display: none;
}

.ideditor .issue-info {
    flex: 1 1 auto;
    width: 100%;
    overflow: hidden;
    display: none;
    padding: 10px 0;
}
.ideditor .issue-info.expanded {
    display: inline-block;
}

.ideditor .issue-info .issue-reference {
    margin-bottom: 10px;
}
.ideditor .issue-info .tagDiff-table {
    min-width: 60%;
    width: unset;
    border: 1px solid var(--border-color);
}
.ideditor .issue-info .tagDiff-row {
    border: 1px solid var(--border-color);
}
.ideditor .issue-info .tagDiff-cell {
    padding: 2px 10px;
    font-family: monospace;
    font-size: 10px;
    border: 1px solid var(--border-color);
}
.ideditor .issue-info .tagDiff-cell-add {
    background: var(--valid-bg-color);
}
.ideditor .issue-info .tagDiff-cell-remove {
    background: var(--error-bg-color);
}


/* Background - Display Options Sliders
------------------------------------------------------- */
.ideditor .display-options-container {
    padding: 10px;
}

.ideditor .display-options-container label {
    padding-bottom: 0;
    padding-top: 10px;
}

.ideditor .display-options-container label span {
    font-weight: bold;
    margin: 5px;
}

.ideditor .display-control .control-wrap {
    display: flex;
    align-items: center;
    width: 100%;
}
.ideditor .display-control .display-option-input {
    height: 20px;
    flex: 1 1 100%;
}

.ideditor .display-control button {
    height: 30px;
    width: 30px;
    margin-left: 5px;
    margin-right: 0px;
    vertical-align: text-bottom;
    border-radius: 4px;
    flex: 0 0 auto;
}
.ideditor[dir='rtl'] .display-control button {
    margin-left: 0px;
    margin-right: 5px;
}


/* Background - Adjust Alignment
------------------------------------------------------- */
.ideditor .background-pane .nudge-container {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
    position: relative;
}

.ideditor .nudge-container .nudge-controls-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ideditor .nudge-container .nudge-outer-rect {
    background-color: var(--widget-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 45px;
    cursor: move;
    /* prevent scrolling pane while dragging on touchscreen */
    touch-action: none;
    /* disable drag-to-select */
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    position: relative;
}

.ideditor .nudge-container .nudge-inner-rect {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    width: 65%;
    min-height: 20px;
}

.ideditor .nudge-container .nudge::after {
    content: '';
    display: block;
    position: absolute;
    margin: auto;
    left: 0; right: 0; top: 0; bottom: 0;
    height: 0;
    width: 0;
}

.ideditor .nudge-container input {
    width: 100%;
    padding: 2px;
    text-align: center;
    border: 0;
}

.ideditor .nudge-container input.error {
    border: 1px solid var(--warning-border-color);
    border-radius: 2px;
    background: var(--warning-bg-color);
}

.ideditor .nudge-container button {
    position: absolute;
    height: 40px;
    width: 40px;
}
.ideditor .nudge-container button.right,
.ideditor .nudge-container button.left {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
}
.ideditor .nudge-container button.right {
    right: 0;
}
.ideditor .nudge-container button.left {
    left: 0;
}
.ideditor .nudge-container button.top,
.ideditor .nudge-container button.bottom {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.ideditor .nudge-container button.top {
    top: 0;
}
.ideditor .nudge-container button.bottom {
    bottom: 0;
}

.ideditor .nudge-container button.nudge-reset {
    right: 0;
    bottom: 0;
}

.ideditor .nudge-surface {
   position: absolute;
   z-index: 5000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: transparent;
   cursor: move;
}

.ideditor .background-pane .nudge.right::after {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid var(--widget-color);
}

.ideditor .background-pane .nudge.left::after {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid var(--widget-color);
}

.ideditor .background-pane .nudge.top::after {
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 5px solid var(--widget-color);
}

.ideditor .background-pane .nudge.bottom::after {
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid var(--widget-color);
}


/* Side Panes - Background / Map Data / Help
------------------------------------------------------- */
.ideditor .map-panes {
    flex: 0 1 auto;
    position: relative;
    height: 100%;
    max-width: 100%;
}
.ideditor .map-pane {
    position: relative;
    top: 0;
    width: 400px;
    max-width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.ideditor .map-pane.help-pane {
    width: 600px;
}

.ideditor .pane-heading {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
}

.ideditor .pane-heading h2 {
    margin: 14px 20px;
}

.ideditor .pane-heading button {
    width: 40px;
    border-radius: 0;
}

.ideditor .pane-content {
    height: 100%;
    padding: 10px 50px 20px 20px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}
.ideditor[dir='rtl'] .pane-content {
    padding: 10px 20px 20px 50px;
}

.ideditor .help-pane .pane-content > div {
    padding-bottom: 15px;
}


/* Help
------------------------------------------------------- */
.ideditor .help-pane p {
    font-size: 15px;
    margin-bottom: 20px;
}

.ideditor .help-pane .left-content .icon.inline,
.ideditor .curtain-tooltip .icon.inline {
    margin-right: 0;
    margin-left: 0;
    height: 1.34em;
    width: 1.34em;
}

.ideditor .help-pane .toc {
    width: 100%;
    max-width: 200px;
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
    padding-left: 5px;
}

.ideditor .help-pane .toc li a,
.ideditor .help-pane .nav a {
    display: block;
    border: 1px solid var(--border-color);
    padding: 5px 10px;
}

.ideditor .help-pane .toc li a {
    border-bottom: 0;
}
.ideditor .help-pane .toc li a:focus,
.ideditor .help-pane .nav a:focus,
.ideditor .help-pane .toc li a:active,
.ideditor .help-pane .nav a:active {
    background: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor .help-pane .toc li a:hover,
    .ideditor .help-pane .nav a:hover {
        background: var(--bg-color-3);
    }
}

.ideditor .help-pane .toc li a.selected {
    background: var(--selected-bg-color);
}

.ideditor .help-pane .toc li:first-child a {
    border-radius: 4px 4px 0 0;
}

.ideditor .help-pane .toc li:nth-last-child(3) a {
    border-bottom: 1px solid var(--border-color);
    border-radius: 0 0 4px 4px
}

.ideditor .help-pane .toc li.shortcuts a,
.ideditor .help-pane .toc li.walkthrough a {
    overflow: hidden;
    margin-top: 10px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px;
}

.ideditor .help-pane .toc li.walkthrough a {
    text-align: center;
}

.ideditor .help-pane .nav {
    position: relative;
    padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.ideditor .help-pane .nav a {
    flex: 0 0 50%;
    text-align: center;
}

.ideditor .help-pane .nav a:first-child {
    border-radius: 4px 0 0 4px;
}

.ideditor .help-pane .nav a:last-child:not(:only-child) {
    border-radius: 0 4px 4px 0;
    border-left: 0;
}

.ideditor .help-pane .nav a:only-child {
    flex: 0 0 100%;
    border-radius: 4px;
}


/* Inspector (hover styles)
------------------------------------------------------- */
.ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
.ideditor .inspector-hover .form-field-input-wrap .label,
.ideditor .inspector-hover .form-field-input-multicombo .chiplist,
.ideditor .inspector-hover .form-field-button,
.ideditor .inspector-hover .structure-extras-wrap,
.ideditor .inspector-hover .comments-container .comment,
.ideditor .inspector-hover button,
.ideditor .inspector-hover input,
.ideditor .inspector-hover textarea,
.ideditor .inspector-hover label {
    background: var(--bg-color-3);
}
.ideditor .inspector-hover .preset-list-button,
.ideditor .inspector-hover .tag-row input {
    background: var(--bg-color-2);
}

.ideditor .inspector-hover a,
.ideditor .inspector-hover .form-field-input-multicombo .chip,
.ideditor .inspector-hover .form-field-input-check span,
.ideditor .inspector-hover .section-entity-issues .issue .icon {
    color: var(--passive-text-color);
}

.ideditor .inspector-hover .form-field-input-multicombo .chip {
    background: var(--bg-color-3);
    border: 1px solid var(--border-color);
}

/* no scrollbars */
.ideditor .inspector-hover div {
    overflow-x: visible;
    overflow-y: visible;
}

/* hide and remove from layout */
.ideditor .inspector-hidden,
.ideditor .inspector-hover .preset-list-button-wrap .tag-reference-button,
.ideditor .inspector-hover label input[type="checkbox"],
.ideditor .inspector-hover label input[type="radio"],
.ideditor .inspector-hover .form-field-input-multicombo .input-wrap,
.ideditor .inspector-hover .form-field-input-radio label,
.ideditor .inspector-hover .form-field-input-radio label span,
.ideditor .inspector-hover .form-field-input-radio label.remove .icon,
.ideditor .inspector-hover .tag-row button,
.ideditor .inspector-hover .tag-row.add-tag,
.ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
.ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
    display: none;
}

/* hide but preserve in layout */
.ideditor .inspector-hover .combobox-caret,
.ideditor .inspector-hover .header button,
.ideditor .inspector-hover .quick-links,
.ideditor .inspector-hover .form-field-input-multicombo .chip .remove,
.ideditor .inspector-hover .hide-toggle:before,
.ideditor .inspector-hover .more-fields,
.ideditor .inspector-hover .field-label button,
.ideditor .inspector-hover .footer * {
    visibility: hidden;
}

/* Unstyle the active entity issue on hover */
.ideditor .inspector-hover .section-entity-issues .issue-container.active {
    margin-top: 1px;
    margin-bottom: 1px;
}
.ideditor .inspector-hover .section-entity-issues .issue-container * {
    border-color: var(--border-color) !important;
}
.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
    border-bottom: 0;
}
.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
    font-weight: normal;
}


/* Styles for raw tag inspector on hover */
.ideditor .inspector-hover .tag-row .key-wrap,
.ideditor .inspector-hover .tag-row .value-wrap {
    height: 31px;
}

.ideditor .inspector-hover .tag-row:first-child input.value {
    border-top-right-radius: 4px;
}
.ideditor[dir='rtl'] .inspector-hover .tag-row:first-child input.value {
    border-top-right-radius: 0;
    border-top-left-radius: 4px;
}

.ideditor .inspector-hover .tag-row:last-child input.value {
    border-bottom-right-radius: 4px;
}
.ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.value {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 4px;
}

.ideditor .inspector-hover .tag-row:last-child input.key {
    border-bottom-left-radius: 4px;
}
.ideditor[dir='rtl'] .inspector-hover .tag-row:last-child input.key {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 4px;
}

.ideditor .inspector-hover .more-fields {
    max-height: 0;
    margin-bottom: -10px;
}

/* Unstyle button fields */
.ideditor .inspector-hover .form-field-input-radio label.active,
.ideditor .inspector-hover .entity-editor-pane summary.hide-toggle {
    opacity: 1;
    background-color: transparent;
    color: var(--passive-text-color);
    padding-left: 0;
    border-width: 0;
}
.ideditor .inspector-hover .form-field-input-radio button.active {
    padding-left: 10px;
}

/* Show placeholder on hover for radio buttons */
.ideditor .inspector-hover .form-field-input-radio {
    border: 1px solid var(--border-color);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}
.ideditor .inspector-hover .form-field-input-radio .placeholder {
    opacity: 1;
    color: var(--passive-text-color);
    padding: 5px 10px;
    width: 100%;
    height: auto;
    border: 0;
}
.ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
    border: 0;
}


/* Raster Background Tiles
------------------------------------------------------- */
.ideditor img.tile {
    position: absolute;
    transform-origin: 0 0;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;

    pointer-events: none;

    -webkit-user-drag: none;

    opacity: 1;
    transition: opacity 250ms linear;

    /* prevent brief flickering of "broken image" on tile loading errors, see https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.ideditor .layer-overlay .img.tile,
.ideditor .map-in-map-overlay .img.tile {
    /* dummy transition such that the `ontransitionend` event can be triggered, see https://github.com/openstreetmap/iD/pull/10785 */
    transition: opacity 1ms linear;
}

.ideditor .layer-background .layer,
.ideditor .map-in-map-background {
    filter: url(#alpha-slope5);
}

.ideditor .layer-background img.tile-removing,
.ideditor .layer-overlay img.tile-removing,
.ideditor .map-in-map-background img.tile-removing,
.ideditor .map-in-map-overlay img.tile-removing {
    opacity: 0;
    z-index: 1;
}

.ideditor .tile-label-debug {
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    position: absolute;
    text-align: center;
    padding: 5px;
    border-radius: 3px;
    z-index: 2;
    margin-left: -70px;
    margin-top: -20px;

    transform-origin: 0 0;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;
}

.ideditor img.tile-debug {
    outline: 1px solid red;
}


/* Map
------------------------------------------------------- */
.ideditor .main-map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: #000;
    color: #333;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    touch-action: none;
    -webkit-touch-callout: none;
}
.ideditor .main-map * {
    touch-action: none;
}

.ideditor .supersurface {
    transform-origin: 0 0;
}

.ideditor .supersurface, .ideditor .layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ideditor .layer-background {
    z-index: 1;
}
.ideditor .layer-overlay {
    z-index: 2;
}
.ideditor .layer-data {
    z-index: 3;
}

/* Map-In-Map
------------------------------------------------------- */
.ideditor .map-in-map {
    position: absolute;
    overflow: hidden;
    top: 10px;
    width: 200px;
    height: 150px;
    z-index: 2;
    background: #000;
    border: #aaa 1px solid;
    border-radius: 4px;
    box-shadow: 0 0 2em black;
}
.ideditor[dir='ltr'] .map-in-map {
    left: 10px;
}
.ideditor[dir='rtl'] .map-in-map {
    right: 10px;
}

.ideditor .map-in-map-tiles {
    transform-origin: 0 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.ideditor .map-in-map-viewport,
.ideditor .map-in-map-data {
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.ideditor .map-in-map-viewport {
    position: absolute;
}

.ideditor .map-in-map-data {
    position: relative;
    z-index: 10;
}

.ideditor .map-in-map-bbox {
    fill: none;
    stroke: rgba(255, 255, 0, 0.75);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.ideditor .map-in-map-bbox.thick {
    stroke-width: 5;
}


/* Debug Data
------------------------------------------------------- */
.ideditor .debug {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
.ideditor .map-in-map-data .debug {
    stroke-width: 1;
}

.ideditor .nocolor { color: rgba(0, 0, 0, 0); }
.ideditor .red     { color: rgba(255, 0, 0, 0.75); }
.ideditor .green   { color: rgba(0, 255, 0, 0.75); }
.ideditor .blue    { color: rgba(176, 176, 255, 0.75); }
.ideditor .yellow  { color: rgba(255, 255, 0, 0.75); }
.ideditor .cyan    { color: rgba(0, 255, 255, 0.75); }
.ideditor .magenta { color: rgba(255, 0, 255, 0.75); }
.ideditor .orange  { color: rgba(255, 153, 0, 0.75); }
.ideditor .pink    { color: rgba(255, 0, 153, 0.75); }
.ideditor .purple  { color: rgba(153, 0, 255, 0.75); }

.ideditor .debug-legend {
    position: absolute;
    top: 70px;
    right: 80px;
    padding: 5px;
    border-radius: 4px;
    pointer-events: none;
}

.ideditor .debug-legend-item {
    padding-right: 5px;
}
.ideditor .debug-legend-item:before {
    content: "\25A0";
    padding: 0 5px;
}


/* Information Panels
------------------------------------------------------- */
.ideditor .info-panels {
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: flex-end;
    width: 100%;
    z-index: 1;
    -ms-user-select: element;
    pointer-events: none;
    overflow: hidden;
}

.ideditor .panel-container h1,
.ideditor .panel-container h2,
.ideditor .panel-container h3,
.ideditor .panel-container h4,
.ideditor .panel-container h5 {
    display: inline-block;
    margin-bottom: 0;
}

.ideditor .panel-container h1,
.ideditor .panel-container h2,
.ideditor .panel-container h3 {
    color: #ff8;
}

.ideditor .panel-container {
    flex: 0 0 auto;
    margin: 0 2px 2px 0;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.75);
    padding-bottom: 10px;
    width: 250px;
    max-width: 100%;
    pointer-events: auto;
}

.ideditor .panel-container .panel-title {
    border-radius: 4px 4px 0 0;
}

.ideditor .panel-title {
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
}

.ideditor .panel-title button.close {
    padding: 2px;
    background: none;
    color: #ddd;
}
.ideditor[dir='rtl'] .panel-title button.close {
    float: left;
}
.ideditor .panel-title button.close:focus,
.ideditor .panel-title button.close:active {
    color: #fff;
}
@media (hover: hover) {
    .ideditor .panel-title button.close:hover {
        color: #fff;
    }
}
.ideditor .panel-title button.close .icon {
    height: 20px;
    width: 16px;
}

.ideditor .panel-content {
    padding: 5px 10px;
    position: relative;
}

.ideditor .panel-content ul:empty {
    display: none;
}

.ideditor .panel-content li span:not(.localized-text) {
    display: inline-block;
    white-space: nowrap;
    margin: 0 8px;
}

.ideditor .panel-content .button {
    display: inline-block;
    background: var(--link-color);
    border-radius: 2px;
    padding: 0 4px;
    margin-top: 10px;
    margin-right: 10px;
    color: #fff;
}
.ideditor[dir='rtl'] .panel-content .button {
    margin-right: auto;
    margin-left: 10px;
}

.ideditor .panel-content-history .links a {
    margin-left: 8px;
}
.ideditor[dir='rtl'] .panel-content-history .links a {
    margin-left: auto;
    margin-right: 8px;
}
.ideditor .panel-content-history h4 {
    padding-bottom: 0;
}
.ideditor .panel-content-location .location-info {
    margin-top: 10px;
}


/* Map Footer
------------------------------------------------------- */
.ideditor .map-footer {
    width: 100%;
    position: relative;
    border-radius: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    -ms-user-select: element;
    flex: 0 0 auto;
}

.ideditor .map-footer-bar {
    pointer-events: all;
    display: block;
    height: 2.5em;
    position: relative;
}

.ideditor .main-footer-wrap,
.ideditor .flash-wrap {
    display: flex;
    flex: 0 0 100%;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: 100%;
    position: absolute;
    right: 0;
    left: 0;
}

.ideditor .footer-show {
    bottom: 0px;
    transition: bottom 75ms linear;
}

.ideditor .footer-hide {
    bottom: -100%;
    transition: bottom 75ms linear;
}


/* Attribution
------------------------------------------------------- */
.ideditor .attribution-wrap {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 0;
    pointer-events: none;
}

.ideditor .attribution-wrap > * {
    pointer-events: auto;
}

.ideditor .attribution-wrap .base-layer-attribution,
.ideditor .attribution-wrap .overlay-layer-attribution {
    color: #ccc;
    font-size: 10px;
}
.ideditor .attribution-wrap .overlay-layer-attribution {
    text-align: right;
}

.ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
    content: '; ';
}

.ideditor .attribution-wrap .attribution a,
.ideditor .attribution-wrap .attribution a:visited {
    color: #ccf;
}
.ideditor .attribution-wrap .attribution a:focus,
.ideditor .attribution-wrap .attribution a:hover {
    color: #aaf;
}
@media (hover: hover) {
    .ideditor .attribution-wrap .attribution a:hover {
        color: #aaf;
    }
}

.ideditor .attribution-wrap .attribution span {
    background-color: rgba(0,0,0,0.33);
    padding: 3px 6px;
    border-radius: 4px;
}

.ideditor .attribution-wrap .attribution .source-image {
    height: 20px;
    vertical-align: middle;
    border-radius: 3px;
}

.ideditor .attribution-wrap .attribution span {
    margin: 0 3px;
}


/* Footer - Flash messages
------------------------------------------------------- */
.ideditor .flash-content {
    display: flex;
    flex: 1 0 auto;
    flex-flow: row nowrap;
    align-items: center;
    padding: 2px;
}

.ideditor .flash-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 8px;
}

.ideditor .flash-icon circle {
    fill: #eee;
}
.ideditor .flash-icon.disabled circle {
    cursor: auto;
    fill: rgba(255,255,255,0.7);
}

.ideditor .flash-icon use {
    color: #222;
}
.ideditor .flash-icon.disabled use,
.ideditor .flash-icon.operation.disabled use {
    fill: rgba(32,32,32,0.7);
    color: #282828b3;
}

.ideditor .flash-text {
    flex: 1 1 auto;
}

/* Scale bar
------------------------------------------------------- */
.ideditor .map-footer-bar .scale-block {
    vertical-align: bottom;
    width: 250px;
    flex: 0 0 auto;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    height: 30px;
    align-self: center;
}

.ideditor .scale-block .scale {
    height: 100%;
    width: 100%;
    cursor: pointer;
    display: block;
}
.ideditor[dir='rtl'] .scale-block .scale {
    transform: scaleX(-1);
}

.ideditor .scale-block .scale-text {
    display: inline-block;
    position: absolute;
    color: #ccc;
    top: 0.45em;
}

.ideditor .scale-block .scale path {
    fill: none;
    stroke: #ccc;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/* Footer - About, Source Switcher
------------------------------------------------------- */
.ideditor .map-footer-bar .info-block {
    flex: 1 1 100%;
    overflow: hidden;
}

.ideditor .map-footer-list {
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    justify-content: flex-end;
}

.ideditor .map-footer-list li {
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 5px;
}
.ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.5);
}
.ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
    border-left: 1px solid rgba(255,255,255,.5);
}
.ideditor .map-footer-list li:empty {
    display: none;
}

.ideditor .map-footer-list a.chip {
    padding: 1px 4px 1px 4px;
    border-radius: 2px;
    color: #eee;
}
.ideditor .map-footer-list a.chip .icon {
    width: 14px;
    height: 14px;
    margin-top: -2px;
}
.ideditor .map-footer-list a.chip span.count {
    margin: 0 3px;
}

.ideditor .source-switch a.chip.live {
    background: #d32232;
    color: #fff;
}

.ideditor .feature-warning a.chip {
    background: #1e90ff;
}

.ideditor .issues-info a.chip.resolved-count {
    background: #15911E;
}
.ideditor .issues-info a.chip.warnings-count {
    background: #DF8500;
}
.ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
    margin-right: 5px;
}
.ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
    margin-left: 5px;
}

.ideditor .user-list a:not(:last-of-type):after {
    content: ', ';
}

.ideditor .api-status {
    text-align: right;
    padding: 1px 10px;
    color: #eee;
    flex: 1 1 auto;
}
.ideditor[dir='rtl'] .api-status {
    text-align: left;
}
.ideditor .api-status:empty {
    display: none;
}

.ideditor .api-status.offline,
.ideditor .api-status.readonly,
.ideditor .api-status.error {
    background: #a22;
}

.ideditor .api-status a {
    text-decoration: underline;
    color: #ccc;
    pointer-events: all;
}
.ideditor .api-status a:focus,
.ideditor .api-status a:active {
    color: inherit;
}
@media (hover: hover) {
    .ideditor .api-status a:hover {
        color: inherit;
    }
}

.ideditor .local-storage-full {
    display: block;
    width: 100%;
}

/* Notification Badges
------------------------------------------------------- */
/* For an icon (e.g. new version) */
.ideditor .badge {
    display: inline-flex;
    background: #d32232;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.ideditor[dir='ltr'] .badge {
    margin-left: 6px;
}
.ideditor[dir='rtl'] .badge {
    margin-right: 6px;
}
.ideditor .badge .icon {
    vertical-align: baseline;
    width: 11px;
    height: 11px;
    color: #fff;
    flex: 0 0 auto;
}

/* For text (e.g. upcoming events) */
.ideditor .badge-text {
    display: inline-block;
    color: #fff;
    text-align: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 5px;
    background: #f00;
    border-radius: 9px;
}
.ideditor[dir='rtl'] .badge-text {
    margin-left: 0;
    margin-right: 5px;
}


/* Modals / Prompts
------------------------------------------------------- */
.ideditor .modal {
    top: 5%;
    max-height: 90%;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    margin: auto;
    z-index: 50;
    width: 80%;
    min-width: 200px;
    max-width: 550px;
    display: flex;
    flex-direction: column;
}

.ideditor .modal .content {
    overflow-x: hidden;
    overflow-y: auto;
}

.ideditor .modal .loader {
    margin-bottom: 10px;
    filter: var(--bg-filter);
    mix-blend-mode: var(--mix-blend-mode);
}
.ideditor .modal .description {
    text-align: center;
}

.ideditor .shaded {
    z-index: 5000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}
.ideditor .shaded:before {
    content:'';
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0px; right: 0px; top: 0px; bottom: 0px;
}

.ideditor .modal-section {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}
.ideditor .modal-section p:not(:last-of-type) {
    padding-bottom: 20px;
}
.ideditor .modal-section h4 {
    padding-bottom: 0;
}
.ideditor .modal-section.buttons {
    text-align: center;
}

.ideditor .modal-section.buttons button {
    min-width: 130px;
}

.ideditor .modal-section.buttons .action {
    display: inline-block;
    margin: 0 10px;
}

.ideditor .save-section .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.ideditor .save-section .buttons .action,
.ideditor .save-section .buttons .secondary-action {
    width: 45%;
    margin: 10px auto;
    text-align: center;
    vertical-align: middle;
}

.ideditor .loading-modal {
    text-align: center;
}
.ideditor .modal-actions {
    display: flex;
}
.ideditor .modal-actions button {
    color: var(--link-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    min-height: 160px;
    text-align: center;
    width: 100%;
}

.ideditor .logo-small {
    height: 40px;
    width: 40px;
    margin: auto;
}

.ideditor .logo {
    height: 100px;
    width: 100%;
    max-width: 100px;
    margin: auto;
}

.ideditor .modal-actions > :first-child {
    border-right: 1px solid var(--border-color);
}

.ideditor .modal-section:last-child {
    border-bottom: 0;
}

/* Restore Modal
------------------------------------------------------- */
.ideditor .modal-actions .logo-restore {
    color: var(--link-color);
}
.ideditor .modal-actions .logo-reset {
    color: #e06c5e;
}

/* Success Screen / Community Index
------------------------------------------------------- */
.ideditor .save-success.body {
    overflow-y: scroll;
    overflow-x: hidden;
}

.ideditor .save-success .link-out {
    margin: 0px 5px;
    white-space: nowrap;
}

.ideditor .save-summary,
.ideditor .save-supporting,
.ideditor .save-communityLinks {
    padding: 0px 20px 15px 20px;
}

.ideditor .save-supporting,
.ideditor .save-communityLinks {
    border-top: 1px solid var(--border-color);
}

.ideditor .save-success table,
.ideditor .save-success p {
    margin-top: 15px;
}
.ideditor .save-success h3 {
    font-size: 14px;
    margin-top: 15px;
    line-height: 1.5;
    padding-bottom: 0;
}
.ideditor .save-success td {
    vertical-align: top;
}
.ideditor .save-success td.cell-icon {
    width: 40px;
}
.ideditor .save-success td.cell-detail {
    padding: 0 10px;
}
.ideditor .save-success td.community-detail {
    padding-bottom: 15px;
}
.ideditor .save-success .community-table h3 {
    margin: 0;
}

.ideditor .summary-view-on-osm,
.ideditor .support-the-map,
.ideditor .community-name {
    font-size: 14px;
    font-weight: bold;
}
.ideditor .community-languages {
    margin-top: 5px;
    font-style: italic;
}
.ideditor .community-languages:only-child {
    margin-top: 0;
}

.ideditor .community-detail summary.hide-toggle {
    font-size: 12px;
    font-weight: normal;
    padding-bottom: 0;
}
.ideditor .community-detail .hide-toggle svg.icon.pre-text {
    width: 12px;
    height: 15px;
}

.ideditor .community-events {
    margin-top: 5px;
}

.ideditor .community-event,
.ideditor .community-more {
    background-color: var(--bg-color-2);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.ideditor .community-event-name {
    font-size: 14px;
    font-weight: bold;
}
.ideditor .community-event-when {
    font-weight: bold;
}

.ideditor .community-missing {
    padding: 10px;
    text-align: center;
}


/* Splash Modal
------------------------------------------------------- */
.ideditor .modal-actions .logo-walkthrough,
.ideditor .modal-actions .logo-features {
    color: var(--link-color);
}

.ideditor .modal-splash .section-preferences-third-party {
    margin-top: 20px;
}

.ideditor .modal-splash .section-preferences-third-party .privacy-link {
    display: none;
}


/* Shortcuts Modal
------------------------------------------------------- */
.ideditor .modal-shortcuts {
    width: 90%;
    max-width: 1050px;
}

.ideditor .modal-shortcuts .modal-section:last-child {
    padding: 10px 15px 20px 15px;
    min-height: 275px;
}

.ideditor .modal-shortcuts .tabs-bar {
    padding-bottom: 5px;
    text-align: center;
}

.ideditor .modal-shortcuts a.tab {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    cursor: pointer;
    color: var(--text-color);
    font-size: 16px;
    font-weight: bold;
}
.ideditor .modal-shortcuts a.tab.active {
    color: var(--link-color);
    border-bottom: 2px solid;
}
.ideditor .modal-shortcuts a.tab:focus,
.ideditor .modal-shortcuts a.tab:active {
    color: var(--link-focus-color);
    background-color: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor .modal-shortcuts a.tab:hover {
        color: var(--link-focus-color);
        background-color: var(--bg-color-3);
    }
}

.ideditor .modal-shortcuts .shortcut-tab {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.ideditor .modal-shortcuts .shortcut-column {
    width: auto;
}

.ideditor .modal-shortcuts .shortcut-tab-tools .shortcut-column {
    flex: 1 1 100%;
    width: 100%;
}

.ideditor .modal-shortcuts td {
    padding-bottom: 5px;
}

.ideditor .modal-shortcuts .shortcut-section {
    padding: 20px 0 10px 0;
}

.ideditor .modal-shortcuts .shortcut-keys {
    padding: 0 10px;
    text-align: right;
    white-space: nowrap;
}
.ideditor[dir='rtl'] .modal-shortcuts .shortcut-keys {
    text-align: left;
}

.ideditor .modal-shortcuts .shortcut-keys .gesture {
    padding: 3px;
}


/* Settings Modals
------------------------------------------------------- */
.ideditor .settings-modal textarea {
    height: 70px;
    width: 100%;
}

.ideditor .settings-custom-background .instructions-template {
    margin-bottom: 20px;
}
.ideditor .settings-custom-background .instructions-template p {
    margin-bottom: 0;
}
.ideditor .settings-custom-background .instructions-template ul {
    padding-bottom: 20px;
}
.ideditor .settings-custom-background .instructions-template ul li {
    list-style-type: disc;
    list-style-position: inside;
}

.ideditor .settings-custom-data .instructions-url {
    margin-bottom: 10px;
}
.ideditor .settings-custom-data .field-file,
.ideditor .settings-custom-data .instructions-template {
    margin-bottom: 20px;
}


/* Save Mode
------------------------------------------------------- */
.ideditor a.user-info {
    display: inline-block;
}

.ideditor .commit-form {
    margin-bottom: 0;
}

.ideditor .user-info img {
    float: left;
}

.ideditor .note-save .field-warning,
.ideditor .field-warning {
    background: var(--warning-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
}

.ideditor .note-save .field-warning:empty,
.ideditor .field-warning:empty {
    display: none;
}

.ideditor .changeset-info,
.ideditor .request-review,
.ideditor .commit-info {
    margin-bottom: 10px;
}

.ideditor .field-warning {
    margin-top: 10px;
}

.ideditor .request-review label {
    cursor: pointer;
}

.ideditor .changeset-list {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color);
    margin-bottom: 10px;
    overflow: hidden;
}

.ideditor .changeset-list li button {
    padding: 5px 10px;
    width: 100%;
    border-radius: 0;
    text-align: initial;
}
.ideditor .changeset-list li {
    border-top: 1px solid var(--border-color);
}
.ideditor .changeset-list li:first-child {
    border-top: 0;
}
.ideditor .changeset-list .alert {
    opacity: 0.5;
}


/* Conflict resolution
------------------------------------------------------- */
.ideditor .conflicts-help {
    padding: 20px;
    background-color: var(--warning-bg-color);
    border-bottom: 1px solid var(--border-color);
}

.ideditor .conflicts-buttons {
    padding: 20px;
}

.ideditor button.conflicts-button {
    float: left;
}

.ideditor .conflict-container {
    border-bottom: 1px solid var(--border-color);
}

.ideditor .conflict-description {
    padding: 5px 20px;
    display: block;
}

.ideditor .conflicts-done {
    padding: 20px 20px 0 20px;
}

.ideditor .conflict-detail-container {
    padding: 10px 20px;
}

.ideditor .conflict-count {
    padding: 10px 20px;
}

.ideditor .conflict-choices {
    margin-top: 10px;
}

.ideditor .conflict-nav-buttons {
    padding: 10px 0 20px 0;
}

.ideditor .conflict-nav-button {
    height: 30px;
}


/* Notices (Zoom in to Edit)
------------------------------------------------------- */
.ideditor .notice {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    text-align: center;
}

.ideditor .notice .zoom-to {
    margin: auto;
    width: 300px;
    padding: 20px 5px;
    font-size: 150%;
    border-radius: 8px;
    font-weight: bold;
}

.ideditor .notice .zoom-to:focus,
.ideditor .notice .zoom-to:active {
    background: rgba(0,0,0,0.6);
}
@media (hover: hover) {
    .ideditor .notice .zoom-to:hover {
        background: rgba(0,0,0,0.6);
    }
}

.ideditor .notice .zoom-to .icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
}
.ideditor[dir='rtl'] .notice .zoom-to .icon {
    margin-left: 10px;
    margin-right: 0;
}


/* Tooltips
------------------------------------------------------- */
.ideditor .popover {
    position: absolute;
    display: none;
}
.ideditor .tooltip {
    color: var(--text-color);
    font-size: 12px;
    white-space: initial;
}
.ideditor .tooltip:not(.curtain-tooltip) {
    pointer-events: none;
}
.ideditor .popover.in {
    z-index: 5000;
    height: auto;
    display: block;
}
.ideditor .tooltip.in {
    opacity: 0.95;
}
.ideditor .popover.top {
    margin-top: -4px;
}
.ideditor .popover.right {
    margin-left: 4px;
}
.ideditor .popover.bottom {
    margin-top: 4px;
}
.ideditor .popover.left {
    margin-left: -4px;
}
.ideditor .popover.arrowed.top {
    margin-top: -10px;
}
.ideditor .popover.arrowed.right {
    margin-left: 10px;
}
.ideditor .popover.arrowed.bottom {
    margin-top: 10px;
}
.ideditor .popover.arrowed.left {
    margin-left: -10px;
}
.ideditor .bar-button .tooltip.arrowed.bottom {
    margin-top: 20px;
}
.ideditor .tooltip.top {
    text-align: center;
}
.ideditor .tooltip.right {
    text-align: left;
}
.ideditor .tooltip.bottom {
    text-align: center;
}
.ideditor .tooltip.left {
    text-align: right;
}

.ideditor .popover-inner {
    border-radius: inherit;
}

.ideditor .tooltip .popover-inner {
    border-radius: 4px;
    max-width: 200px;
    min-width: 80px;
    padding: 10px;
    font-weight: normal;
    background-color: var(--bg-color);
}

.ideditor .popover-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.ideditor .popover.top .popover-arrow {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    border-top-color: var(--bg-color);
    border-width: 5px 5px 0;
}
.ideditor .popover.right .popover-arrow {
    top: 50%;
    left: -5px;
    margin-top: -5px;
    border-right-color: var(--bg-color);
    border-width: 5px 5px 5px 0;
}
.ideditor .popover.left .popover-arrow {
    top: 50%;
    right: -5px;
    margin-top: -5px;
    border-left-color: var(--bg-color);
    border-width: 5px 0 5px 5px;
}
.ideditor .popover.bottom .popover-arrow {
    top: -5px;
    left: 50%;
    margin-left: -5px;
    border-bottom-color: var(--bg-color);
    border-width: 0 5px 5px;
}
.ideditor .popover:not(.arrowed) .popover-arrow {
    display: none;
}

.ideditor .tooltip-heading {
    font-weight: bold;
    background: var(--bg-color-2);
    padding: 10px;
    margin: -10px -10px 10px -10px;
    border-radius: 3px 3px 0 0;
    font-size: 14px;
}

.ideditor .keyhint-wrap {
    background: var(--bg-color-2);
    padding: 10px;
    margin: 10px -10px -10px -10px;
    border-radius: 0 0 3px 3px;
}
.ideditor .popover-inner .shortcut {
    font-weight: bold;
    margin-left: 5px;
}

.ideditor[dir='rtl'] .popover-inner .shortcut {
    margin-left: 0;
    margin-right: 5px;
}

/* dark tooltips for sidebar / panels */
.ideditor .tooltip.dark.top .popover-arrow,
.ideditor .map-pane .tooltip.top .popover-arrow,
.ideditor .sidebar .tooltip.top .popover-arrow,
.ideditor .modal .tooltip.top .popover-arrow {
    border-top-color: var(--dark-tooltip-bg-color);
}
.ideditor .tooltip.dark.bottom .popover-arrow,
.ideditor .map-pane .tooltip.bottom .popover-arrow,
.ideditor .sidebar .tooltip.bottom .popover-arrow,
.ideditor .modal .tooltip.bottom .popover-arrow {
    border-bottom-color: var(--dark-tooltip-bg-color);
}
.ideditor .tooltip.dark.left .popover-arrow,
.ideditor .map-pane .tooltip.left .popover-arrow,
.ideditor .sidebar .tooltip.left .popover-arrow,
.ideditor .modal .tooltip.left .popover-arrow {
    border-left-color: var(--dark-tooltip-bg-color);
}
.ideditor .tooltip.dark.right .popover-arrow,
.ideditor .map-pane .tooltip.right .popover-arrow,
.ideditor .sidebar .tooltip.right .popover-arrow,
.ideditor .modal .tooltip.right .popover-arrow {
    border-right-color: var(--dark-tooltip-bg-color);
}
.ideditor .tooltip.dark .popover-inner,
.ideditor .tooltip.dark .tooltip-heading,
.ideditor .tooltip.dark .keyhint-wrap,
.ideditor .map-pane .popover-inner,
.ideditor .map-pane .tooltip-heading,
.ideditor .map-pane .keyhint-wrap,
.ideditor .sidebar .popover-inner,
.ideditor .sidebar .tooltip-heading,
.ideditor .sidebar .keyhint-wrap,
.ideditor .modal .popover-inner {
    background: var(--dark-tooltip-bg-color);
    color: var(--dark-tooltip-text-color);
}
.ideditor .tooltip.dark kbd,
.ideditor .map-pane .tooltip kbd,
.ideditor .sidebar .tooltip kbd {
    background-color: #666;
    border: solid 1px #444;
    border-bottom-color: #333;
    box-shadow: inset 0 -1px 0 #333;
    color: #eee;
}

/* Exceptions for tooltip layouts */

/* commit warning tooltips need to be closer */
.ideditor .warning-section .tooltip.top {
    margin-top: -5px;
}

.ideditor li:first-of-type .badge .tooltip,
.ideditor li.hide + li.version .badge .tooltip {
    left: auto !important;
    right: 5px !important;
}
.ideditor[dir='rtl'] li:first-of-type .badge .tooltip,
.ideditor[dir='rtl'] li.hide + li.version .badge .tooltip {
    left: 5px !important;
    right: auto !important;
}
.ideditor li:first-of-type .badge .tooltip .popover-arrow,
.ideditor li.hide + li.version .badge .tooltip .popover-arrow {
    right: 15px !important;
    left: auto !important;
}
.ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow,
.ideditor[dir='rtl'] li.hide + li.version .badge .tooltip .popover-arrow {
    left: 15px !important;
    right: auto !important;
}


/* Contextual Edit Menu
------------------------------------------------------- */
.ideditor .edit-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    border-radius: 4px;
    /* padding is set in edit_menu.js */
}

.ideditor .edit-menu .tooltip {
    width: 200px; /* see also edit_menu.js */
}

.ideditor .edit-menu-item {
    display: flex;
    align-items: center;
    border-radius: 0;
    padding: 0 12px;
    /* height is set in edit_menu.js */
}
.ideditor .edit-menu-item .label {
    max-width: 120px;
    text-align: initial;
    line-height: 1.1em;
    font-weight: bold;
}
.ideditor[dir='ltr'] .edit-menu-item .label {
    margin-left: 8px;
}
.ideditor[dir='rtl'] .edit-menu-item .label {
    margin-right: 8px;
}

.ideditor .edit-menu-item use {
    pointer-events: none;
}

/* Lasso
------------------------------------------------------- */
.ideditor .lasso-path {
    fill-opacity: 0.3;
    stroke: #fff;
    stroke-width: 1;
    stroke-opacity: 1;
    stroke-dasharray: 5, 5;
}


/* Scrollbars
 ----------------------------------------------------- */
.ideditor ::-webkit-scrollbar {
    height: 10px;
    overflow: visible;
    width: 10px;
    border-left: 1px solid var(--border-color-2);
}

.ideditor ::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0;
}

.ideditor ::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 3px 3px 3px 4px;
    border-radius: 6px;
    cursor: auto;
}
.ideditor ::-webkit-scrollbar-track:active {
    background-color: rgba(0,0,0,.05);
}
@media (hover: hover) {
    .ideditor ::-webkit-scrollbar-track:hover {
        background-color: rgba(0,0,0,.05);
    }
}
/* Firefox */
@-moz-document url-prefix() {
	.ideditor * {
	    scrollbar-width: thin;
	}
}

.ideditor :dir(rtl)::-webkit-scrollbar {
    border-right: 1px solid var(--border-color-2);
    border-left: none;
}
.ideditor :dir(rtl)::-webkit-scrollbar-thumb {
    border-width: 3px 4px 3px 3px;
    border-radius: 6px;
}

/* Resize handles of textareas */
.ideditor textarea::-webkit-resizer {
	background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0gMiA5IGwgNyAtNyBNIDYgOSBsIDMgLTMiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjOTk5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+Cjwvc3ZnPg==") var(--bg-color);
	background-size: 12px 12px;
	background-position: bottom right;
	background-repeat: no-repeat;
}
.ideditor textarea:active::-webkit-resizer,
.ideditor textarea:focus::-webkit-resizer {
	background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0gMiA5IGwgNyAtNyBNIDYgOSBsIDMgLTMiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlPSIjOTk5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+Cjwvc3ZnPg==") var(--active-bg-color);
	background-size: 12px 12px;
	background-position: bottom right;
	background-repeat: no-repeat;
}
.ideditor textarea:dir(rtl)::-webkit-resizer {
	background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0gOCA5IGwgLTcgLTcgTSA0IDkgbCAtMyAtMyIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiM5OTkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KPC9zdmc+") var(--bg-color);
	background-size: 12px 12px;
	background-position: bottom left;
	background-repeat: no-repeat;
}
.ideditor textarea:active:dir(rtl)::-webkit-resizer,
.ideditor textarea:focus:dir(rtl)::-webkit-resizer {
	background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0gOCA5IGwgLTcgLTcgTSA0IDkgbCAtMyAtMyIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiM5OTkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KPC9zdmc+") var(--active-bg-color);
	background-size: 12px 12px;
	background-position: bottom left;
	background-repeat: no-repeat;
}


/* Intro walkthrough
 ----------------------------------------------------- */
.ideditor .curtain {
    z-index: 1000;
    pointer-events: none;
    position: absolute;
}

.ideditor .curtain-darkness {
    pointer-events: all;
    fill-opacity: 0.7;
    fill: #222;
    fill-rule: evenodd;
}

.ideditor .intro-nav-wrap {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    padding: 10px;
    z-index: 1001;
}

.ideditor .intro-nav-wrap .intro-nav-wrap-logo {
    flex: 0 0 auto;
    height: 40px;
    width: 40px;
    color: #fff;
    margin: 0px 20px;
    vertical-align: middle;
}

.ideditor .intro-nav-wrap .joined {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
}

.ideditor .intro-nav-wrap button.chapter {
    flex: 1 1 100%;
    padding: 0px 5px;
    font-weight: bold;
}

.ideditor .intro-nav-wrap button.chapter.next {
    animation-duration: 1s;
    animation-name: pulse;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes pulse {
    from  { background: var(--link-color); }
    to    { background: var(--suggestion-label-color); }
}

.ideditor .intro-nav-wrap button.chapter.finished {
    background: #8cd05f;
}

.ideditor .intro-nav-wrap button.chapter .status {
    display: none;
}

.ideditor .intro-nav-wrap button.chapter.finished .status {
    display: inline-block;
}

.ideditor .curtain-tooltip {
    z-index: 1002;
}

.ideditor .curtain-tooltip.tooltip.in {
    opacity: 1;
}
.ideditor .curtain-tooltip.tooltip {
    text-align: left;
}
.ideditor[dir='rtl'] .curtain-tooltip.tooltip {
    text-align: right;
}

.ideditor .curtain-tooltip .popover-inner {
    font-size: 15px;
    position: relative;
    padding: 20px;
}

.ideditor .curtain-tooltip .popover-inner .button-section,
.ideditor .curtain-tooltip .popover-inner .instruction {
    font-weight: bold;
    display: block;
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 10px 20px 0 20px;
}

.ideditor .curtain-tooltip .popover-inner .button-section button {
    width: 66.6666%;
}

.ideditor .curtain-tooltip .popover-inner .instruction:only-child {
    border: 0;
    padding: 0;
    margin: 0;
}

.ideditor .curtain-tooltip .popover-inner .icon.pre-text {
    vertical-align: text-top;
    margin-right: 0;
    margin-left: 0;
    display: inline-block;
}

.ideditor .curtain-tooltip.intro-points-describe,
.ideditor .curtain-tooltip.intro-lines-name_road {
    top: 133px !important;
}

.ideditor .tooltip-illustration {
    height: 80px;
    width: 200px;
    margin-left: -20px;
    margin-top: -10px;
}
.ideditor[dir='rtl'] .tooltip-illustration {
    margin-left: auto;
    margin-right: -20px;
}

.ideditor .curtain-tooltip.intro-mouse {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.ideditor .curtain-tooltip.intro-mouse .counter {
    position: absolute;
    display: block;
    top: 50px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    z-index: 1003;
}

.ideditor .curtain-tooltip.intro-mouse .tooltip-illustration use {
    fill: rgba(112, 146, 255, 0);
    color: rgba(112, 146, 255, 0);
}
.ideditor .curtain-tooltip.intro-mouse.leftclick .tooltip-illustration use {
    fill: rgba(112, 146, 255, 1);
}
.ideditor .curtain-tooltip.intro-mouse.rightclick .tooltip-illustration use {
    color: rgba(112, 146, 255, 1);
}

.ideditor .huge-modal-button {
    width: 100%;
    padding: 20px;
}

.ideditor .huge-modal-button .illustration {
    height: 100px;
    width: 100px;
    color: var(--link-color);
}