@layer ideditor {
/* 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: #2b4dc5;
    --link-focus-color: #22409e;
    --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: #0a0;

    --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;
        --valid-icon-color: #4e4;

        --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;
        --valid-icon-color: #4e4;

        --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; }
.ideditor .layer-osm path.directionalcombo-marker-left-path,
.ideditor .layer-osm path.directionalcombo-marker-right-path { fill: #7092ff; }

/* 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;
}

/* circle to visualize radius/diameter */
.ideditor g.point .radius,
.ideditor g.vertex .radius {
    fill: #333;
    fill-opacity: 0.6;
    stroke: #fff;
    stroke-width: 0.5px;
    stroke-opacity: 0.75;
}

.ideditor .fill-wireframe g.point .radius,
.ideditor .fill-wireframe g.vertex .radius {
    fill: none;
}
.ideditor .surface.tr g.point .radius,
.ideditor .surface.tr g.vertex .radius {
    display: none;
}


/* 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,
.ideditor .directional-combo-group path.directionalcombo {
    stroke-width: 6px;
}

.ideditor .directional-combo-group path.directionalcombo {
    opacity: 0.95;
}

.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-flowers,
.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);
}


/* Orange things */
.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(214, 136, 26);
}
.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(214, 136, 26, 0.3);
    fill: rgba(214, 136, 26, 0.3);
}
.ideditor .pattern-color-landfill {
    fill: rgba(214, 136, 26, 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-plant_nursery,
.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-plant_nursery,
.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-plant_nursery,
.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-plant_nursery,
.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.line.casing.tag-highway-cycleway.tag-foot-designated:not(.tag-crossing),
.ideditor .preset-icon-container path.line.casing.tag-highway-path.tag-bicycle-designated.tag-foot-designated:not(.tag-crossing) {
    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_type {
    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_type {
    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_type {
    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_type {
    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_type {
    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_type {
    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_type {
    stroke: #a9d;
}
.ideditor path.line.casing.tag-piste_type {
    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;
}


/* fords */
.ideditor path.line.stroke.tag-highway.tag-ford {
    stroke-opacity: 0.7;
}
.ideditor path.line.casing.tag-highway.tag-ford {
    stroke: rgba(119, 221, 221, 0.6);
    stroke-opacity: 0.5;
    stroke-linecap: butt;
    stroke-dasharray: none;
}


/* embankments / cuttings */
/* see also #ideditor-sided-marker-embankment */
.ideditor path.line.stroke.tag-man_made-embankment {
    stroke: #444;
    stroke-width: 2px;
}
.ideditor path.line.casing.tag-man_made-embankment {
    stroke: rgba(200, 200, 200, 0.75);
    stroke-linecap: butt;
    stroke-dasharray: none;
    stroke-width: 2.5px;
}


/* Surface - unpaved */
.ideditor path.line.casing.tag-unpaved {
    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-dasharray: none;
}
.ideditor path.line.stroke.tag-bridge.tag-unpaved {
    stroke-linecap: butt;
    stroke-dasharray: 6,2;
}
.ideditor path.line.casing.tag-tunnel.tag-unpaved {
    stroke-dasharray: 6,2;
}
/* 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;
}

/* Track - based on grading (tracktype) */
.ideditor path.line.casing.tag-highway-track {
    stroke: #ddd;
    stroke-linecap: butt;
}
.ideditor path.line.casing.tag-highway-track.tag-ungraded { stroke-dasharray: 7, 3, 3, 3, 3, 3; }
.ideditor path.line.casing.tag-highway-track.tag-tracktype-grade2 { stroke-dasharray: 10, 4; }
.ideditor path.line.casing.tag-highway-track.tag-tracktype-grade3 { stroke-dasharray: 6, 4; }
.ideditor path.line.casing.tag-highway-track.tag-tracktype-grade4 { stroke-dasharray: 4, 6; }
.ideditor path.line.casing.tag-highway-track.tag-tracktype-grade5 { stroke-dasharray: 3, 8; }
.ideditor path.line.casing.tag-highway-track.tag-bridge { stroke-dasharray: none; }
.ideditor path.line.stroke.tag-highway-track.tag-bridge { stroke-linecap: butt; }
.ideditor path.line.stroke.tag-highway-track.tag-bridge.tag-ungraded { stroke-dasharray: 7, 3, 3, 3, 3, 3; }
.ideditor path.line.stroke.tag-highway-track.tag-bridge.tag-tracktype-grade2 { stroke-dasharray: 12, 2; }
.ideditor path.line.stroke.tag-highway-track.tag-bridge.tag-tracktype-grade3 { stroke-dasharray: 8, 6; }
.ideditor path.line.stroke.tag-highway-track.tag-bridge.tag-tracktype-grade4 { stroke-dasharray: 6, 6; }
.ideditor path.line.stroke.tag-highway-track.tag-bridge.tag-tracktype-grade5 { stroke-dasharray: 4, 8; }
.ideditor path.line.casing.tag-highway-track.tag-tunnel.tag-ungraded { stroke-dasharray: 7, 3, 3, 3, 3, 3; }
.ideditor path.line.casing.tag-highway-track.tag-tunnel.tag-tracktype-grade2 { stroke-dasharray: 12, 2; }
.ideditor path.line.casing.tag-highway-track.tag-tunnel.tag-tracktype-grade3 { stroke-dasharray: 8, 6; }
.ideditor path.line.casing.tag-highway-track.tag-tunnel.tag-tracktype-grade4 { stroke-dasharray: 6, 6; }
.ideditor path.line.casing.tag-highway-track.tag-tunnel.tag-tracktype-grade5 { stroke-dasharray: 4, 8; }

/* 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 */
.ideditor path.stroke.tag-building {
    stroke: rgb(224, 110, 95);
}
.ideditor path.fill.tag-building {
    stroke: rgba(224, 110, 95, 0.3);
    fill: rgba(224, 110, 95, 0.3);
}
/* 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.target,
.ideditor.mode-select .qaItem.target,
.ideditor.mode-select-data .qaItem.target,
.ideditor.mode-select-error .qaItem.target,
.ideditor.mode-select-note .qaItem.target {
    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;
}

.ideditor .disabled-panel {
    pointer-events: none;
    opacity: 0.5;
}

/* 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;
    }
}

.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;
}
/* Multiple custom data layers, each with its own color */
.ideditor .layer-custom-data path.stroke {
    stroke: var(--custom-data-color);
}
.ideditor .layer-custom-data path.fill {
    stroke: var(--custom-data-color);
    fill: var(--custom-data-color);
}
.ideditor .layer-custom-data path.shadow {
    stroke: var(--custom-data-color);
}
.ideditor .layer-custom-data path.MultiPoint.shadow,
.ideditor .layer-custom-data path.Point.shadow {
    fill: var(--custom-data-color);
}

.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,
.ideditor .fill-partial path.area.fill.tag-cemetery-sector {
    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 {
    stroke: rgb(224, 110, 95);
    fill: rgba(224, 110, 95, 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;
    pointer-events: none;
}
.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;
}
/* heading + trailing controls (add button, view switcher) on one row */
.ideditor summary.hide-toggle:has(.disclosure-header-options) {
    display: flex;
    align-items: center;
    width: 100%;
}
.ideditor summary.hide-toggle .hide-toggle-label {
    flex: 0 1 auto;
    min-width: 0;
}
.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%;
}
/* Allow tooltips to overflow the inspector body */
.ideditor .inspector-body .popover {
    overflow: visible;
}
.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;
    display: none;
}
.ideditor .preset-icon-container.showing-img img.image-icon {
    display: initial;
}
.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 .accessory-buttons > button.tag-reference-button:not(:hover):not(:active):not(:focus) {
    background: var(--bg-color-2);
}
.ideditor .preset-list-button-wrap .accessory-buttons > button.tag-reference-button .icon {
    opacity: .5;
}
.ideditor .preset-list-button-wrap .accessory-buttons {
    display: flex;
}

.ideditor[dir='ltr'] .preset-list-button-wrap .accessory-buttons > button {
    border-left: 1px solid var(--border-color);
}

.ideditor[dir='rtl'] .preset-list-button-wrap .accessory-buttons > button {
    border-right: 1px solid var(--border-color);
}

.ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) .accessory-buttons > button:last-child {
    border-radius: 0 4px 4px 0;
}

.ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) .accessory-buttons > button:last-child {
    border-radius: 4px 0 0 4px;
}

/* shortcut-row is used in shortcuts modal (modules/ui/shortcuts.js) */
.ideditor .shortcut-row {
    display: flex;
    align-items: center;
    gap: 8px;
}


.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.labeled-input input {
    border-radius: 0;
    border-width: 0;
    width: 100%;
}
.ideditor .form-field-input-access ul.rows li.labeled-input > div {
    flex: 1 1 50%;
    min-width: 0;
}
.ideditor .form-field-input-access ul.rows li.labeled-input > .preset-input-access-wrap {
    display: flex;
    flex-flow: row nowrap;
}
.ideditor .form-field-input-access ul.rows li.labeled-input > .preset-input-access-wrap input {
    flex: 1 1 auto;
    min-width: 0;
}
.ideditor .form-field ul.rows li.labeled-input button {
    border-width: 0;
}
.ideditor .form-field ul.rows li.preset-access-add > .label {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
}
.ideditor .form-field ul.rows li.preset-access-add > .label input.preset-input-access-add-key {
    background: var(--bg-color-2);
    font-weight: normal;
    border-radius: 0;
    border-width: 0;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.ideditor .form-field ul.rows li.preset-access-add > .label .combobox-caret {
    flex: 0 0 auto;
}
.ideditor .form-field ul.rows li.preset-access-add input::-moz-placeholder {
    font-weight: normal;
}
.ideditor .form-field ul.rows li.preset-access-add input::placeholder {
    font-weight: normal;
}
.ideditor[dir='ltr'] .form-field ul.rows li.labeled-input > div:nth-child(2) input,
.ideditor[dir='ltr'] .form-field ul.rows li.labeled-input button {
    border-left-width: 1px;
}
.ideditor[dir='rtl'] .form-field ul.rows li.labeled-input > div:nth-child(2) input,
.ideditor[dir='rtl'] .form-field ul.rows li.labeled-input 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;
}
.ideditor .form-field ul.rows.rows-table li.labeled-input > .preset-label-directionalcombo .directionalcombo-label-arrow {
    width: 13.2px;
    height: 13.2px;
    margin-left: 0.35em;
    vertical-align: middle;
    transform: rotate(var(--indicator-rotation, 0deg));
    transform-origin: center;
    opacity: 1;
}
.ideditor .form-field ul.rows.rows-table li.labeled-input > .preset-label-directionalcombo .directionalcombo-label-arrow path {
    fill: var(--passive-text-color);
    transition: fill 120ms ease-in-out;
}
.ideditor .form-field ul.rows.rows-table li.labeled-input.is-active-indicator > .preset-label-directionalcombo .directionalcombo-label-arrow path { fill: #7092ff; }
.ideditor .form-field ul.rows.rows-table li.labeled-input > .preset-label-directionalcombo .directionalcombo-label-arrow.directionalcombo-label-arrow-hidden {
    display: none;
}


/* 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,
.ideditor .form-field-input-integer button.decrement::after,
.ideditor .form-field-input-integer 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,
.ideditor .form-field-input-integer 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,
.ideditor .form-field-input-integer 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.raw-value {
    font-family: monospace;
    color: var(--text-color);
}
.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 .raw-value {
    font-family: monospace;
    color: var(--text-color);
}
.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;
}

/* One-line (horizontal) layout when all options fit on a single row */
.ideditor .form-field-input-radio.one-line {
    overflow: hidden;
}
.ideditor .form-field-input-radio.one-line > label {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.ideditor .form-field-input-radio.one-line.equal-spacing > label {
    flex: 1 1 0;
}
.ideditor .form-field-input-radio.one-line > label:first-of-type {
    border-end-start-radius: 4px;
}
.ideditor .form-field-input-radio.one-line > label:last-of-type {
    border-end-start-radius: 0;
}
.ideditor .form-field-input-radio.one-line > label:not(:first-of-type) {
    border-inline-start: none;
}

/* Two-column layout when all options fit on a half-width box */
.ideditor .form-field-input-radio.two-column {
    overflow: hidden;
}
.ideditor .form-field-input-radio.two-column > label {
    flex: 1 1 auto;
    min-width: 50%;
    max-width: 100%;
    width: 50%;
}
.ideditor .form-field-input-radio.two-column > label:nth-last-of-type(2):nth-of-type(odd),
.ideditor .form-field-input-radio.two-column > label:last-of-type:nth-of-type(odd) {
    border-end-start-radius: 4px;
}
.ideditor .form-field-input-radio.two-column > label:last-of-type:nth-of-type(even) {
    border-end-start-radius: 0;
}
.ideditor .form-field-input-radio.two-column > label:nth-of-type(even) {
    border-inline-start: none;
}


/* 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;
}


/* Disclosure header options (icon buttons in the summary row;
   used by the raw tag editor view switcher and the background pane add button)
------------------------------------------------------- */
.ideditor .disclosure-header-options {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-inline-start: auto;
}
/* hide heading controls while the section is collapsed */
.ideditor details.disclosure-wrap:not(:open) > summary .disclosure-header-options {
    display: none;
}
.ideditor button.disclosure-header-option {
    flex: 0 0 auto;
    padding: 3px;
    background: var(--muted-text-color);
    color: var(--bg-color-3);
    margin: 0 3px;
}
.ideditor button.disclosure-header-option:focus,
.ideditor button.disclosure-header-option.active {
    color: var(--bg-color);
    background: var(--link-focus-color);
}
@media (hover: hover) {
    .ideditor button.disclosure-header-option:hover {
        color: var(--bg-color);
        background: var(--link-focus-color);
    }
}
.ideditor button.disclosure-header-option.selected {
    color: var(--bg-color);
    background: var(--link-color);
    /* already the active view — no further action, so not a pointer */
    cursor: default;
}
.ideditor button.disclosure-header-option svg.icon {
    width: 14px;
    height: 14px;
    display: block;
}
.ideditor[dir='ltr'] button.disclosure-header-option-list {
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}


/* Raw Tag Editor
------------------------------------------------------- */
.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 img.member-entity-icon.hide,
.ideditor .section-raw-member-editor .member-row img.member-entity-icon.hide {
    display: none;
}
.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;
}

.ideditor .data-editor {
    padding: 20px;
}
/* custom data editor: no info/delete/add buttons */
.ideditor .data-editor.raw-tag-editor .tag-row button,
.ideditor .data-editor.raw-tag-editor .add-tag {
    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 .data-editor.raw-tag-editor.tag-row {
    background-color: transparent;
}
.ideditor .data-editor.raw-tag-editor li:first-child input.value {
    border-start-end-radius: 4px;
}
.ideditor .data-editor.raw-tag-editor li:nth-last-child(2) input.key {
    border-end-start-radius: 4px;
}
.ideditor .data-editor.raw-tag-editor li:nth-last-child(2) input.value {
    border-end-end-radius: 4px;
}


.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 .background-smooth {
    display: block;
    margin-bottom: 10px;
}

.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);
}
/* Tint each cell, not the whole `li`, so edit/delete (and similar) buttons
   can hover independently of the label / selected state. */
.ideditor .layer-list li.active > *,
.ideditor .layer-list li.switch > * {
    background: var(--selected-bg-color);
}
.ideditor .layer-list li label:active,
.ideditor .layer-list li button:active {
    background-color: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor .layer-list li label:hover,
    .ideditor .layer-list li button:hover {
        background-color: var(--bg-color-3);
    }
}

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

.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 */
    line-height: 1rem; /* tighten labels, esp. ones that wrap to two lines */
}

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

/* clamp background layer labels to a single line; the row tooltip reveals the
   full text when it overflows */
.ideditor .background-pane .layer-list label > span {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.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 {
    fill: var(--text-color);
    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 .layer-list select {
    padding-left: 4px;
    padding-bottom: 1px;
}
.ideditor[dir='rtl'] .layer-list select {
    padding-left: 0px;
    padding-right: 4px;
}

.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 .accessory-buttons .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 .layer-background.no-smooth img.tile {
    image-rendering: pixelated;
}

.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 .source-image {
    height: 20px;
    vertical-align: middle;
    border-radius: 3px;
}

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


/* 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;
}

.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;
}

.ideditor .section-preferences-favorite-presets {
    margin-top: 20px;
}

.ideditor .favorite-presets-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-color-secondary);
}

.ideditor .favorite-presets-list {
    margin-top: 10px;
    gap: 4px;
    display: flex;
    flex-direction: column;
}

.ideditor .favorite-presets-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background-color: var(--bg-color-2);
    border-radius: 4px;
    cursor: grab;
    position: relative;
    gap: 2px;
}

.ideditor .favorite-presets-item.dragging {
    opacity: 0.75;
    z-index: 3000;
    cursor: grabbing;
}

.ideditor .favorite-presets-item .drag-indicator {
    opacity: 0.5;
    flex: 0 0 auto;
    cursor: move;
    display: flex;
    align-items: center;
}

.ideditor .favorite-presets-item .drag-indicator svg.icon {
    width: 16px;
    height: 16px;
    display: block;
}

.ideditor .favorite-presets-item .preset-icon-wrapper {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ideditor .favorite-presets-item .preset-icon-wrapper .preset-icon-container {
    width: 40px;
    height: 40px;
}

.ideditor .favorite-presets-item .preset-name {
    flex: 1 1 auto;
    display: block;
    line-height: 125%;
    padding: 0;
}

.ideditor .favorite-presets-item .preset-right-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ideditor .favorite-presets-item .preset-right-group .preset-geometries {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.ideditor .favorite-presets-item .preset-right-group .preset-geometries svg.icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.6;
    width: 14px;
    height: 14px;
}

.ideditor .favorite-presets-item .preset-right-group input.favorite-shortcut {
    flex: 0 0 auto;
    width: 3.5em;
    height: 24px;
    padding: 0 4px;
    text-align: center;
    font-family: monospace;
}

.ideditor .favorite-presets-item .preset-right-group input.favorite-shortcut.invalid {
    border-color: #e06d5f;
    background-color: #fce9e7;
}

.ideditor .favorite-presets-item .preset-right-group .favorite-remove {
    flex: 0 0 auto;
    padding: 4px;
    background-color: var(--bg-color);;
}

.ideditor .favorite-presets-item .preset-right-group .favorite-remove:hover {
    background-color: var(--bg-color-3);;
}

.ideditor .favorite-presets-explanation {
    margin-top: 12px;
    padding: 0;
    font-size: 12px;
    color: var(--text-color-secondary);
    line-height: 1.5;
}

.ideditor .favorite-presets-explanation p {
    margin: 0;
    padding: 0;
}

.ideditor .preset-list-button-wrap button.favorite-heart-button {
    width: 32px;
    flex: 0 0 auto;
    position: relative;
    padding: 0;
    background: var(--bg-color-2);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.ideditor .preset-list-button-wrap button.favorite-heart-button:not(:hover):not(:active):not(:focus) {
    background: var(--bg-color-2);
}

.ideditor .preset-list-button-wrap button.favorite-heart-button {
    border-radius: 0;
}

.ideditor .preset-list-button-wrap button.favorite-heart-button:hover,
.ideditor .preset-list-button-wrap button.favorite-heart-button:active,
.ideditor .preset-list-button-wrap button.favorite-heart-button:focus {
    background: var(--bg-color-3);
}

.ideditor .preset-list-button-wrap button.favorite-heart-button .heart-icon-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ideditor .preset-list-button-wrap button.favorite-heart-button .heart-icon-container svg.icon {
    width: 16px;
    height: 16px;
    color: var(--text-color);
    opacity: 0.6;
    fill: currentColor;
}

.ideditor .preset-list-button-wrap button.favorite-heart-button:hover .heart-icon-container svg.icon,
.ideditor .preset-list-button-wrap button.favorite-heart-button.active .heart-icon-container svg.icon {
    opacity: 1;
}

.ideditor .preset-list-button-wrap button.favorite-heart-button.active .heart-icon-container svg.icon {
    color: var(--link-color);
    fill: var(--link-color);
}

.ideditor .preset-list-button-wrap button.favorite-heart-button .heart-icon-container .shortcut-badge {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 2px 5px;
    white-space: nowrap;
    zoom: 0.85; /* quick way to make the element smaller as a whole */
}

.ideditor .preset-list-item.preset-favorites .preset-list-button-wrap.category {
    background-color: var(--bg-color-2);
}

.ideditor .preset-list-item.preset-favorites .preset-list-button-wrap.category .preset-icon-container .preset-icon svg.icon use {
    fill: var(--link-color);
}

.ideditor .preset-list-button-wrap .shortcut-display {
    margin-right: 12px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ideditor .preset-list-button-wrap .shortcut-display kbd {
    margin: 0;
    font-size: 11px;
}


/* 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%;
}

/* license disclaimer, shown as an info callout */
.ideditor .settings-custom-background .settings-custom-background-callout {
    border: 1px solid var(--link-color);
    border-radius: 4px;
    background: var(--selected-bg-color);
    padding: 8px 10px;
    margin-bottom: 20px;
}
.ideditor .settings-custom-background .settings-custom-background-callout p {
    margin: 0;
}
.ideditor .settings-custom-background .settings-custom-background-callout a {
    text-decoration: underline;
}

/* form field labels and inputs */
.ideditor .settings-custom-background .field-name-label,
.ideditor .settings-custom-background .field-template-label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.ideditor .settings-custom-background input.field-name {
    width: 100%;
    margin-bottom: 20px;
}
.ideditor .settings-custom-background textarea.field-template {
    display: block; /* avoid inline baseline gap under the control */
    width: 100%;
    margin: 0 0 5px 0; /* same gap as label → field */
}
/* form help under the template field */
.ideditor .settings-custom-background .instructions-example {
    font-size: 12px;
    margin: 0 0 20px 0; /* section spacing before token disclosures */
}
.ideditor .settings-custom-background .instructions-example code {
    margin-inline-start: 0.35em;
    word-break: break-all;
    background: none;
    padding: 0;
}
/* collapsible WMS/TMS token reference — tight pair, no extra margin
   below (modal-section padding already provides the 20px section gap) */
.ideditor .settings-custom-background .instructions-template > *:not(:last-child) {
    margin-bottom: 5px;
}
.ideditor .settings-custom-background .instructions-template summary.hide-toggle {
    font-size: 13px;
    line-height: 1.3; /* override inspector 25px heading line-height */
}
.ideditor .settings-custom-background .instructions-template p {
    margin-bottom: 0;
}
.ideditor .settings-custom-background .instructions-template ul {
    padding-bottom: 10px;
}
.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);
}
/* long custom tile URL templates in background-list tooltips */
.ideditor .tooltip-text code {
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
}

.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;
    border-top: 1px solid var(--border-color);
}
.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;
}
/* opened with a key: one line per entry, the full title */
.ideditor .edit-menu.keyboard-menu .edit-menu-item .label {
    max-width: none;
    white-space: nowrap;
}

/* 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);
}

/* Radnetz fork: an entry of the edit menu with a flyout (extract: both sides / left / right) */
.ideditor .edit-menu-item.flyout-open {
    background: var(--bg-color-hover, #f1f1f1);
}
.ideditor .edit-menu-item .flyout-caret {
    position: absolute;
    right: 3px;
    font-size: 11px;
    line-height: 1;
    opacity: 0.6;
    pointer-events: none;
}
.ideditor .edit-menu-item {
    position: relative;
}
.ideditor .edit-menu-flyout {
    position: absolute;
    left: calc(100% + 4px);
    min-width: 240px;
    max-width: 340px;
    padding: 4px 0;
    background: var(--bg-color);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 1;
}
.ideditor .edit-menu-flyout.flyout-left {
    left: auto;
    right: calc(100% + 4px);
}
.ideditor .edit-menu-flyout-group + .edit-menu-flyout-group {
    border-top: 1px solid #ddd;
    margin-top: 4px;
    padding-top: 4px;
}
.ideditor .edit-menu-flyout-title {
    padding: 2px 12px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #777;
}
.ideditor .edit-menu-flyout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 0;
    text-align: start;
    font-weight: normal;
    line-height: 1.25;
}
.ideditor .edit-menu-flyout-item .label {
    flex: 1 1 auto;
}
.ideditor .edit-menu-flyout-item.disabled {
    color: #aaa;
    cursor: not-allowed;
}
.ideditor .edit-menu-flyout-item kbd {
    flex: none;
}
/* Multiple custom data layers: Map Data pane section and settings modal */

.ideditor .layer-list-custom-data label > span.custom-data-swatch {
    display: block;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-inline: 4px 8px;
    border-radius: 2px;
    vertical-align: middle;
}

.ideditor .layer-list-custom-data label > span.custom-data-name {
    flex: 1 1 auto;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* "(key=value)" after the name */
.ideditor .layer-list-custom-data .custom-data-filter {
    margin-inline-start: 4px;
    font-size: 11px;
    opacity: 0.7;
}

.ideditor .custom-data-layers-empty {
    margin: 0 0 10px 0;
    font-size: 12px;
}

.ideditor .settings-custom-data-layer label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.ideditor .settings-custom-data-layer input.field-name,
.ideditor .settings-custom-data-layer textarea.field-url {
    display: block;
    width: 100%;
    margin: 0 0 5px 0;
}
.ideditor .settings-custom-data-layer input.field-name {
    margin-bottom: 20px;
}
.ideditor .settings-custom-data-layer .instructions-formats,
.ideditor .settings-custom-data-layer .instructions-filter {
    font-size: 12px;
    margin: 0 0 20px 0;
}
.ideditor .settings-custom-data-layer .filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.ideditor .settings-custom-data-layer .filter-row input {
    flex: 1 1 0;
    min-width: 0;
}
.ideditor .settings-custom-data-layer input.field-color {
    width: 60px;
    height: 30px;
    padding: 2px;
}

/* a layer that is not selectable ignores the pointer, so clicks reach the OSM data below */
.ideditor .layer-custom-data.not-selectable,
.ideditor .layer-custom-data.not-selectable path,
.ideditor .layer-custom-data.not-selectable text {
    /* iD's rules for area fills are more specific */
    pointer-events: none !important;
}
.ideditor .custom-data-filter-tooltip {
    margin-top: 6px;
}

/* minimap: thin outlines and a light fill, no interaction */
.ideditor .map-in-map-data .layer-custom-data {
    pointer-events: none;
}
.ideditor .map-in-map-data .layer-custom-data path.stroke {
    stroke-width: 1.5;
    fill: none;
}
.ideditor .map-in-map-data .layer-custom-data path.Point.stroke,
.ideditor .map-in-map-data .layer-custom-data path.MultiPoint.stroke {
    fill: var(--custom-data-color);
}
.ideditor .map-in-map-data .layer-custom-data path.fill {
    stroke: none;
    fill: var(--custom-data-color);
    fill-opacity: 0.25;
}

/* progress tracking: radio buttons in the layer settings */
.ideditor .settings-custom-data-layer .tracker-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 5px;
}
.ideditor .settings-custom-data-layer .tracker-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
}
.ideditor .settings-custom-data-layer .tracker-options input {
    width: auto;
    margin: 0;
}

/* progress tracking: a red casing around every tracked line, green when it is done */
.ideditor .layer-custom-data path.casing {
    fill: none;
    stroke: #e5484d;
    stroke-width: 9;
    stroke-opacity: 0.85;
    stroke-linecap: round;
    pointer-events: none;
}
.ideditor .layer-custom-data path.casing.progress-done {
    stroke: #2fb344;
}
.ideditor .map-in-map-data .layer-custom-data path.casing {
    display: none;
}

/* progress tracking in the sidebar */
.ideditor .progress-tracking {
    margin: 0 20px 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.ideditor .progress-tracking-title {
    font-weight: bold;
    margin-bottom: 6px;
}
.ideditor .progress-tracking-buttons {
    display: flex;
    gap: 6px;
}
.ideditor .progress-tracking-buttons button {
    flex: 1 1 0;
    height: 30px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-color-2);
    color: var(--text-color);
}
.ideditor .progress-tracking-buttons button:disabled {
    opacity: 0.6;
    cursor: default;
}
.ideditor .progress-tracking-buttons button.progress-done.active {
    background: #2fb344;
    border-color: #2fb344;
    color: #fff;
    opacity: 1;
}
.ideditor .progress-tracking-byline:not(:empty) {
    margin-top: 6px;
    font-size: 12px;
}

/* the shortcut on the Done button */
.ideditor .progress-tracking-buttons kbd.progress-done-key {
    margin-left: 8px;
    padding: 0 4px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 11px;
    opacity: 0.7;
}
 
/* data layer labels in the colour of their layer, so they can be told apart */
.ideditor .layer-custom-data text.label {
    fill: var(--custom-data-color);
}
/* Way table panel: selected way with previous and next ways, one row per tag */

/* A dock below the map: a flex child of `.main-content` with a fixed height (set in JS).
   `.main-map` is positioned absolutely over all of `.main-content`, so it gets the rest explicitly. */
.ideditor .main-content > .way-table-panel {
    position: relative;
    z-index: 6;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    /* theme colors, so the dock follows the light and the dark theme like the sidebar */
    --way-table-accent: color-mix(in srgb, var(--link-color) 28%, var(--bg-color));
    --way-table-accent-soft: color-mix(in srgb, var(--link-color) 12%, var(--bg-color));
    border-top: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
    pointer-events: auto;
    touch-action: auto;
}
.ideditor .main-content > .way-table-panel.hide {
    display: none;
}
.ideditor .main-content > .main-map {
    height: calc(100% - var(--way-table-height, 0px));
}

.ideditor .way-table-empty {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--passive-text-color);
}

/* previous / next way, in the table's corner cell */
.ideditor .way-table-nav {
    display: flex;
    gap: 4px;
}
.ideditor .way-table-nav button {
    width: 26px;
    height: 20px;
    padding: 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: inherit;
    cursor: pointer;
}
.ideditor .way-table-nav button .icon {
    width: 16px;
    height: 16px;
}
.ideditor .way-table-nav button:hover:not(:disabled) {
    background: var(--active-bg-color);
}
.ideditor .way-table-nav button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* the button in the bottom corner of the map that opens and closes the dock */
.ideditor .map-controls .way-table-control {
    margin-top: auto;
    padding-top: 10px;
}
.ideditor .map-controls .way-table-control > button {
    position: relative;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px 0 0 4px;
    pointer-events: auto;
}
.ideditor[dir='rtl'] .map-controls .way-table-control > button {
    border-radius: 0 4px 4px 0;
}
.ideditor .map-controls .way-table-control > button:focus,
.ideditor .map-controls .way-table-control > button:hover {
    background: rgba(0, 0, 0, 0.8);
}
.ideditor .map-controls .way-table-control > button.active {
    background: var(--link-color);
}
/* the sidebar icon, turned so the filled part is at the bottom */
.ideditor .map-controls .way-table-control > button .icon {
    transform: rotate(-90deg);
}

.ideditor .way-table-body {
    flex: 1 1 auto;
    overflow: auto;
}

.ideditor .way-table-junction {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 12px;
    background: var(--warning-bg-color);
}
.ideditor .way-table-junction button {
    height: auto;
    padding: 2px 6px;
    font-size: 12px;
}

.ideditor table.way-table {
    border-collapse: collapse;
    font-size: 12px;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
}
.ideditor table.way-table th,
.ideditor table.way-table td {
    padding: 1px 8px;
    border: 1px solid var(--border-color-2);
    text-align: start;
    white-space: nowrap;
    max-width: 22em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ideditor table.way-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-color-3);
}
.ideditor table.way-table thead th.center {
    background: var(--way-table-accent);
}
/* a way's header cell: name and id; the whole cell is the hover and click area */
.ideditor table.way-table thead th.way-table-way {
    color: var(--link-focus-color);
    cursor: pointer;
}
.ideditor table.way-table thead th.way-table-way.center {
    color: var(--text-color);
    cursor: default;
}
.ideditor table.way-table thead th.way-table-way:not(.center):hover,
.ideditor table.way-table thead th.way-table-way:not(.center):focus-visible {
    background: var(--way-table-accent);
    color: var(--text-color);
}
.ideditor table.way-table thead th.way-table-way:not(.center):hover .way-table-way-name {
    text-decoration: underline;
}
.ideditor table.way-table .way-table-way-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.ideditor table.way-table .way-table-way-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}
.ideditor table.way-table .way-table-way-id {
    flex: 0 0 auto;
    font-family: monospace;
    font-weight: normal;
    font-size: 11px;
    opacity: 0.7;
}
.ideditor table.way-table thead th.reversed .way-table-way-name {
    font-style: italic;
}

/* key column stays visible while scrolling sideways */
.ideditor table.way-table tbody th.way-table-key,
.ideditor table.way-table thead th.way-table-key-header {
    position: sticky;
    left: 0;
    max-width: 14em;
    background: var(--bg-color-2);
    font-family: monospace;
    font-weight: normal;
}
.ideditor table.way-table thead th.way-table-key-header {
    z-index: 2;
}

/* subtle highlight for keys used by the selected way's preset */
.ideditor table.way-table tr.preset-key th.way-table-key {
    background: color-mix(in srgb, var(--link-color) 12%, var(--bg-color-2));
    font-weight: bold;
}
.ideditor table.way-table tr:not(.preset-key) {
    color: var(--passive-text-color);
}

.ideditor table.way-table td.center {
    background: var(--way-table-accent-soft);
}
.ideditor table.way-table td.changed {
    background: color-mix(in srgb, #ffc400 30%, var(--bg-color));
}
.ideditor table.way-table td.added {
    background: color-mix(in srgb, #3fc41e 26%, var(--bg-color));
}
.ideditor table.way-table td.removed {
    background: color-mix(in srgb, #ff503c 28%, var(--bg-color));
}
/* changed in this mapping session: the cell clearly, its row lightly */
.ideditor table.way-table tr.edited th.way-table-key {
    box-shadow: inset 3px 0 0 #7c3aed;
}
.ideditor table.way-table tr.edited td {
    background-image: linear-gradient(color-mix(in srgb, #7c3aed 7%, transparent), color-mix(in srgb, #7c3aed 7%, transparent));
}
.ideditor table.way-table td.edited {
    box-shadow: inset 0 0 0 2px #7c3aed;
    font-weight: bold;
}

.ideditor .way-table-resize {
    flex: 0 0 auto;
    height: 6px;
    cursor: ns-resize;
    background: var(--bg-color-3);
}
.ideditor .way-table-resize::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin: 2px auto 0;
    border-radius: 1px;
    background: var(--muted-text-color);
}
.ideditor .way-table-resize:hover::after {
    background: var(--text-color);
}

/* the info panels sit in the same corner: keep the map buttons (and the way table button) free */
.ideditor[dir='ltr'] .over-map > .info-panels {
    padding-right: 44px;
}
.ideditor[dir='rtl'] .over-map > .info-panels {
    padding-left: 44px;
}
/* Width preview on the map while a width field is hovered or focused */

.ideditor .data-layer.width-indicator {
    pointer-events: none;
}

.ideditor .width-indicator path.width-indicator-band {
    /* same blue as the directional combo side indicator (css/20_map.css) */
    fill: rgba(112, 146, 255, 0.3);
    stroke: #7092ff;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.ideditor .width-indicator text.width-indicator-label {
    fill: #fff;
    stroke: #000;
    stroke-width: 3px;
    paint-order: stroke;
    font-size: 12px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* width source as pills (ui/fields/source_pills.ts) */
.ideditor .form-field-input-sourcePills.source-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: none;
    background: transparent;
}
.ideditor .source-pills button.source-pill {
    width: auto;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-color-2);
    color: var(--text-color);
    font-size: 12px;
}
.ideditor .source-pills button.source-pill:hover {
    background: var(--bg-color-3);
}
.ideditor .source-pills button.source-pill.active {
    background: var(--link-color);
    border-color: var(--link-color);
    color: #fff;
}
.ideditor .source-pills input.source-pills-other {
    flex: 1 1 120px;
    min-width: 120px;
    height: 24px;
    border-radius: 12px;
    font-size: 12px;
}

/* stone calculator below a width field (measure/stone_calculator.ts) */
.ideditor .stone-calculator {
    margin: 4px 0 2px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-color-2);
    font-size: 12px;
}
.ideditor .stone-calculator-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.ideditor .stone-calculator input.stone-count {
    width: 64px;
    height: 24px;
}
.ideditor .stone-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.ideditor .stone-calculator button.stone-size {
    width: auto;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    font-size: 11px;
}
.ideditor .stone-calculator button.stone-size.active {
    background: var(--link-color);
    border-color: var(--link-color);
    color: #fff;
}
.ideditor .stone-calculator-result {
    font-weight: bold;
}
.ideditor .stone-calculator button.stone-calculator-apply {
    width: auto;
    height: 24px;
    margin-top: 6px;
    padding: 0 10px;
}

/* a part source (`source:cycleway:width`) without its own value: the one of `source:width` */
.ideditor .source-pills button.source-pill.inherited {
    border-style: dashed;
    border-color: var(--link-color);
}
/* Live touched: objects other mappers are editing, list in the Map Data pane, indicator dot */

/* map halos, drawn like the selection halo but in the status colors */
.ideditor .live-touched-touched.shadow,
.ideditor .live-touched-stale.shadow,
.ideditor .live-touched-saved.shadow {
    stroke-opacity: 0.7;
}
.ideditor path.live-touched-touched.shadow { stroke: #ff8c00; }
.ideditor path.live-touched-stale.shadow { stroke: #ff8c00; stroke-opacity: 0.35; stroke-dasharray: 6, 6; }
.ideditor path.live-touched-saved.shadow { stroke: #9b59ff; }
.ideditor path.live-touched-conflict.casing { stroke: #e0282e; stroke-opacity: 1; }
.ideditor g.point.live-touched .shadow,
.ideditor g.vertex.live-touched .shadow { fill: #ff8c00; fill-opacity: 0.6; }
.ideditor g.point.live-touched-saved .shadow,
.ideditor g.vertex.live-touched-saved .shadow { fill: #9b59ff; }

/* Map Data pane section */
.ideditor .live-touched-login {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 4px;
    border-left: 4px solid #ff8c00;
    background: rgba(255, 140, 0, 0.15);
}
.ideditor .live-touched-login p {
    margin: 0 0 6px;
}
.ideditor .live-touched-login button {
    height: auto;
    padding: 4px 10px;
}
.ideditor ul.live-touched-toggle li.disabled label {
    opacity: 0.5;
    cursor: not-allowed;
}
.ideditor .live-touched-message {
    margin: 4px 0;
    font-size: 12px;
}
.ideditor ul.live-touched-items li.live-touched-item {
    display: block;
    padding: 5px 10px;
    line-height: 1.35;
    cursor: pointer;
    border-left: 4px solid #ff8c00;
}
.ideditor ul.live-touched-items li.live-touched-item-stale { border-left-color: rgba(255, 140, 0, 0.4); }
.ideditor ul.live-touched-items li.live-touched-item-saved { border-left-color: #9b59ff; }
.ideditor .live-touched-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.ideditor .live-touched-item-title {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ideditor .live-touched-item-id {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: 0.7;
}
.ideditor .live-touched-item-status,
.ideditor .live-touched-item-hint {
    font-size: 12px;
}
/* conflict: only the hint line stands out, in iD's warning colors */
.ideditor .live-touched-item-hint {
    margin-top: 2px;
    color: var(--warning-text-color);
}
.ideditor .live-touched-item-hint .icon {
    color: var(--warning-icon-color);
    fill: currentColor;
}
.ideditor .live-touched-item-hint.hide {
    display: none;
}
.ideditor .live-touched-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
}
.ideditor .live-touched-footer button.live-touched-nuke {
    height: auto;
    padding: 4px 8px;
    font-size: 12px;
}

/* pulsing dot on the Map Data button while others edit in view */
.ideditor .map-data-control button.live-touched-others-nearby {
    position: relative;
}
.ideditor .map-data-control button.live-touched-others-nearby::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff8c00;
    animation: live-touched-pulse 1.5s ease-in-out infinite;
}
@keyframes live-touched-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}
/* TILDA bike infrastructure section in the inspector.
   Cards look like iD fields: a header bar like `.field-label`, a bordered body below. */

.ideditor .section-tilda-bike-infra {
    line-height: 1.4;
}

/* plain text like the info text of fields and presets (.tag-reference-body) */
.ideditor .tilda-callout {
    padding-bottom: 10px;
    color: var(--text-color);
    font-size: 12px;
}

.ideditor .tilda-card {
    margin-bottom: 10px;
}
/* one line: side, category (cut with an ellipsis), target, edit button */
.ideditor .tilda-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 4px 4px 10px;
    font-weight: bold;
    color: var(--text-color);
    background: var(--bg-color-2);
    border: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
}
.ideditor .tilda-card-body {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: var(--bg-color);
}

/* the way itself, collapsed when its bike infrastructure is on the sides */
.ideditor .tilda-card.collapsible .tilda-card-header {
    cursor: pointer;
}
.ideditor .tilda-card.collapsible .tilda-card-header::before {
    content: '▾';
    display: inline-block;
    width: 1em;
    color: var(--link-color);
}
.ideditor .tilda-card.collapsed .tilda-card-header::before {
    content: '▸';
}
.ideditor .tilda-card.collapsed .tilda-card-header {
    border-radius: 4px;
}
.ideditor .tilda-card.collapsed .tilda-card-body {
    display: none;
}
/* nothing to show (e.g. no bike infrastructure and nothing missing): only the header */
.ideditor .tilda-card-body:not(:has(> :not(:empty))) {
    display: none;
}
.ideditor .tilda-card:has(.tilda-card-body:not(:has(> :not(:empty)))) .tilda-card-header {
    border-radius: 4px;
}
.ideditor .tilda-card-hint:not(:empty) {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: normal;
    font-size: 12px;
    color: var(--muted-text-color);
}

.ideditor .tilda-side {
    flex: none;
    white-space: nowrap;
}
.ideditor .tilda-headline {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: normal;
}
.ideditor .tilda-category,
.ideditor .tilda-target-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ideditor .tilda-target-name:not(:empty) {
    flex: 0 1 auto;
    font-size: 12px;
}
/* like the buttons in fields: own background and border, so it is easy to find */
.ideditor .tilda-card button.tilda-edit {
    flex: none;
    width: 26px;
    height: 26px;
    margin-inline-start: auto;
    padding: 0;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
}
.ideditor .tilda-card button.tilda-edit:hover {
    background: var(--active-bg-color);
}
.ideditor .tilda-card button.tilda-edit.active {
    background: var(--link-focus-color);
    border-color: var(--link-focus-color);
    color: var(--bg-color);
}
.ideditor .tilda-card button.tilda-edit .icon {
    width: 14px;
    height: 14px;
}
.ideditor .tilda-card.collapsed .tilda-headline {
    display: none;
}
.ideditor .tilda-category {
    flex: 0 1 auto;
    padding: 2px 8px;
    border-radius: 3px;
    background: #2e7d32;
    color: #fff;
    cursor: help;
}
.ideditor .tilda-category.incomplete { background: #b27c00; }
.ideditor .tilda-category.needs-clarification { background: #c62828; }
.ideditor .tilda-category.absent { background: #666; }

.ideditor .tilda-subheading {
    margin: 4px 0;
    font-weight: bold;
    font-size: 12px;
}

.ideditor .tilda-gap {
    margin-bottom: 8px;
    padding: 6px 8px;
    border-left: 3px solid #b27c00;
    font-size: 12px;
}
.ideditor .tilda-gap code {
    margin-inline-end: 4px;
}
.ideditor .tilda-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 0 0;
}
.ideditor .tilda-card button.tilda-value {
    height: auto;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
}

.ideditor .tilda-target-label {
    display: block;
    margin: 4px 0;
}
.ideditor .tilda-target select {
    width: 100%;
    height: 30px;
}
.ideditor .tilda-attributes-header {
    margin: 10px 0 4px 0;
    font-size: 12px;
    font-weight: bold;
}
.ideditor .tilda-attribute {
    display: grid;
    grid-template-columns: 1.2em 1fr;
    align-items: baseline;
    -moz-column-gap: 6px;
         column-gap: 6px;
    padding: 4px 0;
    font-size: 12px;
    border-top: 1px solid var(--border-color);
}
.ideditor .tilda-attribute:first-of-type {
    border-top: 0;
}
.ideditor .tilda-attribute-state {
    text-align: center;
    font-weight: bold;
}
.ideditor .tilda-attribute.state-ok .tilda-attribute-state,
.ideditor .tilda-attribute.state-inherited .tilda-attribute-state { color: #2e9d3a; }
.ideditor .tilda-attribute.state-inherited .tilda-attribute-state { opacity: 0.6; }
/* assumed default: a notice, not a request (no color, also not on the field title) */
.ideditor .tilda-attribute.state-assumed .tilda-attribute-state {
    font-family: serif;
    font-style: italic;
    color: var(--link-color);
}

/* missing tags: orange = needed, yellow = only if it applies (or TILDA guesses);
   the field titles below get the same color (preset_fields.js `fieldStatus`) */
.ideditor {
    --tilda-required-color: #e07b00;
    --tilda-optional-color: #a88a00;
}
    .ideditor.theme-dark {
        --tilda-required-color: #ff9d3b;
        --tilda-optional-color: #e8cc4a;
    }
@media (prefers-color-scheme: dark) {
    .ideditor:not(.theme-light) {
        --tilda-required-color: #ff9d3b;
        --tilda-optional-color: #e8cc4a;
    }
}
.ideditor .tilda-attribute.severity-required .tilda-attribute-state,
.ideditor .tilda-attribute.severity-required .tilda-attribute-missing {
    color: var(--tilda-required-color);
}
.ideditor .tilda-attribute.severity-optional .tilda-attribute-state,
.ideditor .tilda-attribute.severity-optional .tilda-attribute-missing {
    color: var(--tilda-optional-color);
}
.ideditor .entity-editor .wrap-form-field.field-status-required .field-label .label-text,
.ideditor .entity-editor .field-related-editor.field-status-required .field-label .label-text {
    color: var(--tilda-required-color);
}
.ideditor .entity-editor .wrap-form-field.field-status-optional .field-label .label-text,
.ideditor .entity-editor .field-related-editor.field-status-optional .field-label .label-text {
    color: var(--tilda-optional-color);
}
.ideditor .tilda-attribute-missing a.tilda-reveal {
    color: inherit;
    text-decoration: underline;
}
/* "add below": the field lights up when the link brings it into view */
.ideditor .entity-editor .wrap-form-field.field-reveal {
    animation: tilda-field-reveal 1.6s ease-out;
}
@keyframes tilda-field-reveal {
    0%, 30% { background-color: color-mix(in srgb, var(--link-color) 30%, transparent); }
    100% { background-color: transparent; }
}

.ideditor .tilda-attribute-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ideditor .tilda-attribute-tags code,
.ideditor .tilda-attribute-missing code {
    padding: 0;
    background: none;
    font-family: monospace;
    overflow-wrap: anywhere;
}
.ideditor .tilda-attribute-tags > code {
    display: block;
}
.ideditor .tilda-attribute-note:not(:empty) {
    color: var(--passive-text-color);
}
.ideditor .tilda-attribute.state-ignored .tilda-attribute-note,
.ideditor .tilda-attribute.state-guess .tilda-attribute-note {
    color: inherit;
}
.ideditor .tilda-attribute-inputs {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.ideditor .tilda-attribute input.tilda-attribute-input {
    width: 8em;
    height: 24px;
    padding: 0 4px;
    font-size: 12px;
}

/* "Checked" / "Verified": stored for the project, not in OSM (WORKDOC feature 33) */
.ideditor .tilda-card button.tilda-check,
.ideditor .tilda-verified button.tilda-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: auto;
    padding: 2px 8px 2px 6px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
}
.ideditor .tilda-card button.tilda-check:hover:not([disabled]),
.ideditor .tilda-verified button.tilda-check:hover:not([disabled]) {
    background: var(--active-bg-color);
}
.ideditor .tilda-card button.tilda-check[disabled],
.ideditor .tilda-verified button.tilda-check[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.ideditor button.tilda-check .icon {
    width: 12px;
    height: 12px;
    opacity: 0.25;
}
.ideditor button.tilda-check.active .icon {
    opacity: 1;
    color: #2e9d3a;
}
.ideditor .tilda-attribute.state-assumed.checked .tilda-attribute-state {
    font-family: inherit;
    font-style: normal;
    color: #2e9d3a;
}
.ideditor .tilda-verified {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
}
.ideditor .tilda-verified-status {
    color: var(--passive-text-color);
}

/* reminders: something to look for that no tag shows */
.ideditor .tilda-reminders {
    margin-top: 8px;
}
.ideditor .tilda-reminder {
    padding: 4px 8px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-color);
    background: var(--bg-color-2);
    border-left: 3px solid var(--border-color);
}
.ideditor .tilda-reminder-title {
    font-weight: bold;
    margin-inline-end: 4px;
}
/* Lens section (Map Data pane) and the import/edit modal */

.ideditor .layer-list-lenses li.lens-item label > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ideditor .settings-lens .settings-lens-callout {
    margin-bottom: 20px;
    padding: 8px 10px;
    border-radius: 4px;
    border-left: 4px solid var(--warning-text, #d97706);
    background: rgba(217, 119, 6, 0.12);
}
.ideditor .settings-lens label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.ideditor .settings-lens .settings-lens-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.ideditor .settings-lens .settings-lens-file button {
    flex: 0 0 auto;
    width: auto;
    padding: 0 12px;
}
.ideditor .settings-lens .instructions {
    font-size: 12px;
    margin-bottom: 20px;
}
.ideditor .settings-lens input.field-name {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}
.ideditor .settings-lens .settings-lens-shortcut {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ideditor .settings-lens input.field-shortcut {
    width: 3em;
    text-align: center;
    text-transform: lowercase;
}
.ideditor .settings-lens input.field-shortcut.invalid {
    border-color: #e06d5f;
}
.ideditor .settings-lens .settings-lens-shortcut-error {
    font-size: 12px;
    color: #e06d5f;
}
/* Preferences ▸ Interface: hide the captions under the top toolbar buttons.
   Keep 10px under the buttons, matching the padding above them. */
.ideditor.hide-toolbar-labels .top-toolbar .toolbar-item .item-label {
    display: none;
}
.ideditor.hide-toolbar-labels .top-toolbar .toolbar-item {
    padding-bottom: 10px;
}

/* Right sidebar: zoom, zoom-to-selection and locate are optional (Preferences ▸ Interface) and
   get the class `hide`. Upstream gives fixed buttons the rounded corners and the gap, so:
   - the gap to the pane buttons belongs to the first pane button, and is only there
     when a map button is shown above;
   - the first and the last shown map button get the rounded corners. */
.ideditor .map-controls .geolocate-control {
    margin-bottom: 0;
}
.ideditor .map-controls:has(> .map-control:not(.map-pane-control):not(.hide)) > .map-control:not(.map-pane-control) + .map-pane-control {
    margin-top: 10px;
}
.ideditor .map-controls .zoombuttons > button.zoom-in,
.ideditor .map-controls .geolocate-control > button {
    border-radius: 0;
}
.ideditor .map-controls .map-control:not(.map-pane-control):not(.hide):not(.map-control:not(.map-pane-control):not(.hide) ~ *) > button:first-child {
    border-top-left-radius: 4px;
}
.ideditor .map-controls .map-control:not(.map-pane-control):not(.hide):not(:has(~ .map-control:not(.map-pane-control):not(.hide))) > button:last-child {
    border-bottom-left-radius: 4px;
}
.ideditor[dir='rtl'] .map-controls .map-control:not(.map-pane-control):not(.hide):not(.map-control:not(.map-pane-control):not(.hide) ~ *) > button:first-child {
    border-radius: 0 4px 0 0;
}
.ideditor[dir='rtl'] .map-controls .map-control:not(.map-pane-control):not(.hide):not(:has(~ .map-control:not(.map-pane-control):not(.hide))) > button:last-child {
    border-radius: 0 0 4px 0;
}

/* the same for the pane buttons: the help button, upstream's rounded end, is optional */
.ideditor .map-controls .help-control > button {
    border-radius: 0;
}
.ideditor .map-controls .map-pane-control:not(.hide):not(:has(~ .map-pane-control:not(.hide))) > button {
    border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .map-controls .map-pane-control:not(.hide):not(:has(~ .map-pane-control:not(.hide))) > button {
    border-radius: 0 0 4px 0;
}
/* Read-only feature categories: visible for orientation, muted, not interactive */

/* Muted with `stroke-opacity` / `fill-opacity`, which are painted directly. `opacity` (and a
   `filter`) makes every element its own transparent group: with thousands of them each repaint got
   so slow that panning at z17 took 2.5x as long as in stock iD (scripts/perf, 2026-10-15). */
/* not the shadows: they are the invisible hover and selection halo (stroke-opacity 0) */
.ideditor .layer-osm .readonly-feature:not(.shadow),
.ideditor .layer-osm .readonly-feature *:not(.shadow) {
    stroke-opacity: 0.35 !important;
    fill-opacity: 0.25 !important;
}

/* no hover, click, lasso start or snapping on read-only features; their click targets get an
   inline `pointer-events: none` (renderer/readonly_features.ts) */
.ideditor .layer-osm .readonly-feature,
.ideditor .layer-osm .readonly-feature * {
    pointer-events: none !important;
}

/* Traffic sign field: what the fork adds around the package's field
   (the field's own look comes from @osm-traffic-signs/id-field, id-field.css) */

/* tags the sign implies, below the field (modules/ui/fields/traffic_sign.ts, tag plan UI) */
.ideditor .traffic-sign-plan {
    flex-basis: 100%;
    width: 100%;
    padding: 6px 10px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-color-2);
}
.ideditor .traffic-sign-plan-header {
    font-size: 12px;
    color: var(--passive-text-color);
    cursor: pointer;
}
.ideditor .traffic-sign-plan[open] .traffic-sign-plan-header {
    color: var(--text-color);
}

/* below an empty traffic sign field: "No sign here" (sets `none`) */
.ideditor .form-field-input-traffic-sign button.traffic-sign-none,
.ideditor button.traffic-sign-none {
    display: inline-block;
    width: auto;
    height: 22px;
    margin: 4px 0 0;
    padding: 0 8px;
    border: 1px dashed var(--border-color);
    border-radius: 11px;
    background: transparent;
    color: var(--text-color);
    font-size: 12px;
    opacity: 0.8;
}
.ideditor button.traffic-sign-none:hover {
    background: var(--bg-color-3);
    opacity: 1;
}
.ideditor .inspector-hover button.traffic-sign-none {
    display: none;
}
/* Interactive | read-only | hidden toggle in the Map Data lists (ui/layer_mode_toggle.ts) */

.ideditor :is(.map-data-pane, .map-display-pane) .layer-list li:has(> .layer-mode) {
    display: flex;
    align-items: stretch;
}
.ideditor :is(.map-data-pane, .map-display-pane) .layer-list li:has(> .layer-mode) > label {
    flex: 1 1 auto;
    min-width: 0;
}
/* Map Features: the toggle replaces the checkbox; keep the input for iD's own code */
.ideditor :is(.map-data-pane, .map-display-pane) .layer-feature-list li > label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
/* dim the label's content, not the label: its tooltip is a child and would fade too */
.ideditor :is(.map-data-pane, .map-display-pane) .layer-list li[data-mode="readonly"] > label > :not(.popover, input), .ideditor :is(.map-data-pane, .map-display-pane) .layer-list li[data-mode="hidden"] > label > :not(.popover, input) {
    opacity: 0.6;
}
/* a read-only data layer looks the same on the map, so its row is not dimmed */
.ideditor :is(.map-data-pane, .map-display-pane) .layer-list-custom-data li[data-mode="readonly"] > label > :not(.popover, input) {
    opacity: 1;
}
.ideditor :is(.map-data-pane, .map-display-pane) .layer-mode {
    display: flex;
    flex: 0 0 auto;
}
.ideditor :is(.map-data-pane, .map-display-pane) .layer-mode button {
    width: 30px;
    height: auto;
    border-radius: 0;
    border-left: 1px solid rgba(128, 128, 128, 0.3);
    background: transparent;
}
.ideditor :is(.map-data-pane, .map-display-pane) .layer-mode button .icon {
    width: 14px;
    height: 14px;
    opacity: 0.25;
}
.ideditor :is(.map-data-pane, .map-display-pane) .layer-mode button:hover .icon {
    opacity: 0.6;
}
.ideditor :is(.map-data-pane, .map-display-pane) .layer-mode button.active .icon {
    opacity: 1;
}
.ideditor :is(.map-data-pane, .map-display-pane) .layer-mode button.layer-mode-interactive.active {
    color: #7092ff;
}

/* Map features moved to the Map Display pane, photo overlays to the Photos pane
   (see WORKDOC "Right sidebar buttons"); they keep the Map Data pane's list styles. */
.ideditor .photos-pane .layer-list button {
    border-left: 1px solid var(--border-color);
    border-radius: 0;
    padding-left: 4px;
    padding-right: 4px;
}
.ideditor .photos-pane .layer-list button .icon {
    fill: var(--text-color);
    opacity: 0.5;
}
.ideditor .photos-pane .layer-list button:last-of-type {
    border-radius: 0 3px 3px 0;
}

/* a mode the entry cannot have (e.g. read-only for a data layer with progress tracking) */
.ideditor :is(.map-data-pane, .map-display-pane) .layer-mode button.unavailable {
    cursor: not-allowed;
}
.ideditor :is(.map-data-pane, .map-display-pane) .layer-mode button.unavailable .icon, .ideditor :is(.map-data-pane, .map-display-pane) .layer-mode button.unavailable:hover .icon {
    opacity: 0.1;
}
/* Tag plan: proposed tag changes with a reason each and one apply button
   (TILDA section, traffic sign suggestions; modules/ui/tag_plan.ts) */

.ideditor .tag-plan {
    font-size: 12px;
}
.ideditor .tag-plan ul {
    margin: 6px 0;
}
.ideditor .tag-plan li {
    margin: 4px 0;
}
.ideditor .tag-plan li.tag-plan-add code::before { content: '+ '; }
.ideditor .tag-plan li.tag-plan-change code::before { content: '~ '; }
.ideditor .tag-plan li.tag-plan-remove code::before { content: '− '; }
.ideditor .tag-plan li.tag-plan-remove code { text-decoration: line-through; }
.ideditor .tag-plan .tag-plan-reason {
    display: block;
    color: var(--passive-text-color);
}
.ideditor .tag-plan-conflict-text {
    margin: 4px 0;
    padding: 8px 10px;
    border-left: 4px solid #e06d5f;
    border-radius: 4px;
    background: var(--bg-color-2);
    line-height: 1.5;
}
.ideditor .tag-plan button.tag-plan-apply {
    height: auto;
    padding: 4px 10px;
}
.ideditor .tag-plan button.tag-plan-apply.hide {
    display: none;
}

/* diff mode: iD's tag diff, as in the "suggested" changes of the outdated tags issue (.issue-info) */
.ideditor .tag-plan .tagDiff-table {
    width: 100%;
    margin: 6px 0;
    border: 1px solid var(--border-color);
}
.ideditor .tag-plan .tagDiff-row {
    border: 1px solid var(--border-color);
}
.ideditor .tag-plan .tagDiff-cell {
    padding: 2px 10px;
    font-family: monospace;
    font-size: 11px;
    border: 1px solid var(--border-color);
    overflow-wrap: anywhere;
}
.ideditor .tag-plan .tagDiff-cell-add {
    background: var(--valid-bg-color);
}
.ideditor .tag-plan .tagDiff-cell-remove {
    background: var(--error-bg-color);
}

/* one tag with its own small apply button (traffic sign suggestions) */
.ideditor .tag-plan .tag-plan-line {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ideditor .tag-plan button.tag-plan-apply-row {
    flex: none;
    width: auto;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    font-size: 11px;
}
.ideditor .tag-plan button.tag-plan-apply-row:hover {
    background: var(--bg-color-3);
}
/* Internal TILDA notes (WORKDOC feature 29).
   The markers and the editor reuse the OSM note styles; these rules give them TILDA's colours,
   so the internal notes are not taken for the public OSM notes. */

.ideditor .data-layer.tilda-notes * {
    pointer-events: none;
}

.ideditor.mode-add-tilda-note .main-map {
    cursor: crosshair; /* Opera */
    cursor: url(img/cursor/draw.png) 9 9, crosshair; /* FF */
}
.ideditor.mode-select-tilda-note .note {
    cursor: pointer;
}

/* open: teal with a white question mark; resolved: white with a teal check (as in TILDA) */
.ideditor .note-header-icon.tilda-note .note-fill,
.ideditor .layer-tilda-notes .tilda-note .note-fill {
    color: #0f766e;
    stroke: #fff;
    stroke-width: 40px;
}
.ideditor .note-header-icon.tilda-note.closed .note-fill,
.ideditor .layer-tilda-notes .tilda-note.closed .note-fill {
    color: #fff;
    stroke: #0f766e;
}
.ideditor .note-header-icon.tilda-note.new .note-fill,
.ideditor .layer-tilda-notes .tilda-note.new .note-fill {
    color: #99f6e4;
    stroke: #0f766e;
}
.ideditor .layer-tilda-notes .tilda-note .icon-annotation,
.ideditor .note-header-icon.tilda-note .icon-annotation {
    color: #0f766e;
}
.ideditor .layer-tilda-notes .tilda-note-annotation {
    fill: #fff;
    font-size: 11px;
    font-weight: bold;
    pointer-events: none;
}
.ideditor .note-header-icon span.tilda-note-annotation {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    line-height: 15px;
    display: block;
    width: 15px;
    text-align: center;
}
.ideditor g.tilda-note .shadow {
    stroke: #14b8a6;
}

/* toolbar: one button per kind of note */
.ideditor button.add-tilda-note svg.icon {
    height: 15px;
    width: 15px;
    color: #0f766e;
    stroke: #fff;
    stroke-width: 40px;
    margin-top: 3px;
    margin-right: 4px;
}
.ideditor .toolbar-item.notes .item-content {
    display: flex;
}
.ideditor .toolbar-item.notes button.add-button:not(:last-child) {
    border-radius: 4px 0 0 4px;
    margin-right: 1px;
}
.ideditor .toolbar-item.notes button.add-button:not(:first-child) {
    border-radius: 0 4px 4px 0;
}
.ideditor .toolbar-item.notes button.add-button:only-child {
    border-radius: 4px;
}

/* editor */
.ideditor .tilda-note-private {
    background: #ccfbf1;
    color: #134e4a;
    border: 1px solid #5eead4;
    border-radius: 5px;
    padding: 6px 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ideditor .tilda-note-private .icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}
.ideditor .tilda-note-header .note-header-label {
    padding-top: 8px;
    padding-bottom: 8px;
    overflow-wrap: anywhere;
}
.ideditor .tilda-note-meta {
    font-weight: normal;
    color: var(--muted-text-color);
}
.ideditor .tilda-note-status.open {
    color: #0f766e;
    font-weight: bold;
}
.ideditor .tilda-note-editor .comment-main {
    padding: 10px;
}
.ideditor .tilda-note-markdown p,
.ideditor .tilda-note-markdown ul,
.ideditor .tilda-note-markdown ol {
    margin-bottom: 8px;
}
.ideditor .tilda-note-markdown ul,
.ideditor .tilda-note-markdown ol {
    padding-left: 20px;
}
.ideditor .tilda-note-markdown ul li {
    list-style: disc;
}
.ideditor .tilda-note-markdown ol li {
    list-style: decimal;
}
.ideditor .tilda-note-markdown blockquote {
    border-left: 3px solid var(--border-color);
    padding-left: 8px;
}
.ideditor .tilda-note-markdown hr {
    margin: 8px 0;
}
.ideditor .tilda-note-markdown > :last-child {
    margin-bottom: 0;
}
.ideditor .tilda-note-notice {
    margin-top: 15px;
}
.ideditor .tilda-note-notice a {
    margin-left: 5px;
}
.ideditor .tilda-note-editor .note-save h4 {
    padding-bottom: 4px;
}
.ideditor .tilda-note-editor .tilda-note-subject-input {
    width: 100%;
    margin-bottom: 12px;
}
.ideditor .tilda-note-prose {
    margin: 10px 0;
    color: var(--muted-text-color);
}

/* layer list */
.ideditor .layer-list li.list-item-tilda-notes {
    flex-wrap: wrap;
}
.ideditor .layer-list .tilda-notes-access {
    flex: 0 0 100%;
    padding: 0 10px 6px 35px;
    color: var(--muted-text-color);
    font-size: 12px;
    white-space: normal;
}
.ideditor .layer-list .tilda-notes-access.hide {
    display: none;
}

/* the short label ("OSM" / "TILDA") tells the two note buttons apart, also on a narrow toolbar */
.ideditor .top-toolbar.narrow .toolbar-item.notes button.bar-button .label {
    display: inline;
}
.ideditor .top-toolbar.narrow .toolbar-item.notes button.bar-button {
    padding: 0 8px;
}
/* The footer bar is gone (WORKDOC feature 31). What it held now floats over the map,
   lives in a pane, or sits in the top toolbar. */

/* Scale (optional) and the issue / hidden feature chips: bottom left, above the attribution */
.ideditor .map-status {
    position: absolute;
    bottom: 32px;
    left: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 0;
    pointer-events: none;
}
.ideditor[dir='rtl'] .map-status {
    left: auto;
    right: 5px;
}
.ideditor .map-status > * {
    pointer-events: auto;
}
.ideditor .map-status > *:empty {
    display: none;
}

.ideditor .map-status .scale-block {
    position: relative;
    width: 250px;
    height: 24px;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    background: rgba(0,0,0,0.33);
    border-radius: 4px;
}
.ideditor .map-status .scale-block .scale g {
    transform: translate(10px, 8px);
}
.ideditor .map-status .scale-block .scale-text {
    top: 3px;
    color: #eee;
}
.ideditor .map-status .scale-block .scale path {
    stroke: #eee;
}

.ideditor .map-status a.chip {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
}
.ideditor .map-status a.chip .icon {
    width: 14px;
    height: 14px;
    margin-top: -2px;
}
.ideditor .map-status a.chip span.count {
    margin: 0 3px;
}

/* Flash messages: a toast at the bottom center of the map (was a second row of the footer bar) */
.ideditor .over-map > .flash-wrap {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 64px;
    transform: translateX(-50%);
    display: block;
    height: auto;
    max-width: 80%;
    padding: 4px 12px 4px 4px;
    border-radius: 4px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    z-index: 2;
    pointer-events: none;
    transition: opacity 100ms linear;
}
.ideditor .over-map > .flash-wrap.footer-hide {
    bottom: 64px;
    opacity: 0;
}
.ideditor .over-map > .flash-wrap.footer-show {
    opacity: 1;
}

/* History panel: the mappers of the features in view, while nothing is selected */
.ideditor .panel-content-history .history-contributors {
    margin-top: 5px;
}
.ideditor .panel-content-history .history-contributors:empty {
    display: none;
}

/* Help pane: version and project links */
.ideditor .help-pane .help-about {
    clear: both;
    display: flex;
    flex-flow: row wrap;
    gap: 5px 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}
.ideditor .help-pane .help-about .badge .icon {
    margin: 0 5px;
}

/* Preferences ▸ OpenStreetMap server */
.ideditor .osm-server-list .osm-server-url {
    margin-left: 8px;
    color: var(--passive-text-color, #7092ff);
    opacity: 0.7;
}
.ideditor[dir='rtl'] .osm-server-list .osm-server-url {
    margin-left: 0;
    margin-right: 8px;
}
.ideditor .osm-server-hint {
    margin-top: 8px;
    opacity: 0.7;
}

/* Top toolbar: the OSM account */
.ideditor .top-toolbar .account-wrap {
    display: flex;
}
.ideditor .top-toolbar button.account-button.logged-in {
    padding: 0 8px;
}
.ideditor .top-toolbar button.account-button .user-icon {
    max-width: 24px;
    max-height: 24px;
    border-radius: 50%;
}
.ideditor .account-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 10px;
    min-width: 180px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    overflow: hidden;
    z-index: 300;
}
.ideditor[dir='rtl'] .account-menu {
    right: auto;
    left: 10px;
}
.ideditor .account-menu li:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}
.ideditor .account-menu li a {
    display: block;
    padding: 8px 12px;
    white-space: nowrap;
}
.ideditor .account-menu li.account-menu-user a {
    font-weight: bold;
}
.ideditor .account-menu li a:focus,
.ideditor .account-menu li a:active {
    background: var(--bg-color-3);
}
@media (hover: hover) {
    .ideditor .account-menu li a:hover {
        background: var(--bg-color-3);
    }
}
/* preview of the new way while hovering "Extract right cycle track" etc. (modules/operations/extract_sidepath.ts) */
.ideditor g.auxiliary path.preview.extract-sidepath-preview {
    stroke: #ff26d4;
    stroke-width: 4;
    stroke-dasharray: 10, 6;
    stroke-linecap: round;
    pointer-events: none;
}

/* "Merge into a foot and cycle path" (modules/operations/merge_sidepaths.ts): the ways that stay and the ones that go */
.ideditor g.auxiliary path.preview.merge-sidepaths-stays {
    stroke: #ff26d4;
    stroke-width: 5;
    stroke-linecap: round;
    pointer-events: none;
}
.ideditor g.auxiliary path.preview.merge-sidepaths-goes {
    stroke: #ff4d4d;
    stroke-width: 4;
    stroke-dasharray: 4, 8;
    stroke-linecap: round;
    pointer-events: none;
}
/* Mapillary layer: age colors, highlighted users/organizations, the selected feature's images (WORKDOC feature 18) */

.ideditor {
    --mly-age-new: #55ff22;
    --mly-age-mid: #ffe600;
    --mly-age-old: #ff9500;
    --mly-age-outdated: #f0252b;
    --mly-highlight: #1e6bff;
    --mly-selected: #ff00cc;
}

/* age colors: markers (circle and viewfield) and sequences */
.ideditor .layer-mapillary .viewfield-group.mly-age-new * { fill: var(--mly-age-new); }
.ideditor .layer-mapillary .viewfield-group.mly-age-mid * { fill: var(--mly-age-mid); }
.ideditor .layer-mapillary .viewfield-group.mly-age-old * { fill: var(--mly-age-old); }
.ideditor .layer-mapillary .viewfield-group.mly-age-outdated * { fill: var(--mly-age-outdated); }
.ideditor .layer-mapillary .sequence.mly-age-new { stroke: var(--mly-age-new); }
.ideditor .layer-mapillary .sequence.mly-age-mid { stroke: var(--mly-age-mid); }
.ideditor .layer-mapillary .sequence.mly-age-old { stroke: var(--mly-age-old); }
.ideditor .layer-mapillary .sequence.mly-age-outdated { stroke: var(--mly-age-outdated); }

/* highlighted users/organizations: a dot with a white ring, a thicker sequence */
.ideditor .layer-mapillary .viewfield-group circle.mly-highlight-dot {
    fill: var(--mly-highlight);
    stroke: #fff;
    stroke-width: 1.5px;
}
.ideditor .layer-mapillary .sequence.mly-highlighted {
    stroke-width: 4px;
}

/* images of the selected feature: a larger ring and a dot */
.ideditor .layer-mapillary .viewfield-group.mly-selected-feature-image circle.mly-selected-ring {
    fill: none;
    stroke: var(--mly-selected);
    stroke-width: 3px;
}
.ideditor .layer-mapillary .viewfield-group.mly-selected-feature-image circle:not(.mly-extra) {
    fill: var(--mly-selected);
}

/* age slider: cutoff marker and legend */
.ideditor .list-item-date-slider {
    /* the legend goes on its own line below the slider */
    flex-wrap: wrap;
}
.ideditor .list-item-date-slider > label {
    flex: 1 1 100%;
}
.ideditor .list-item-date-slider .slider-wrap {
    position: relative;
    /* room for the cutoff date above the slider */
    margin-top: 14px;
}
.ideditor .date-slider-cutoff {
    position: absolute;
    top: 0;
    bottom: 1.4em;
    width: 0;
    border-left: 2px dashed var(--mly-age-outdated);
    pointer-events: none;
}
.ideditor .date-slider-cutoff-label {
    position: absolute;
    top: -13px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10px;
    color: var(--mly-age-outdated);
}
.ideditor .mly-age-legend {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    padding: 0 10px 8px;
    font-size: 11px;
}
.ideditor .mly-age-legend .mly-age-band::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-inline-end: 4px;
    background: var(--band);
}
.ideditor .mly-age-legend .mly-age-new { --band: var(--mly-age-new); }
.ideditor .mly-age-legend .mly-age-mid { --band: var(--mly-age-mid); }
.ideditor .mly-age-legend .mly-age-old { --band: var(--mly-age-old); }
.ideditor .mly-age-legend .mly-age-outdated { --band: var(--mly-age-outdated); }
/* Mapillary images field (WORKDOC feature 19): one row per image, like the directional combo */

.ideditor .form-field-input-mapillary-images ul.rows.empty {
    display: none;
}

/* label cell: key label, below it small the age and image type */
.ideditor .form-field-input-mapillary-images li.labeled-input > .mly-image-label {
    padding: 4px 10px;
    white-space: nowrap;
    vertical-align: middle;
}
.ideditor .mly-image-label .mly-image-title,
.ideditor .mly-image-label .mly-image-info {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ideditor .mly-image-label .mly-image-info {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.2;
    opacity: .7;
}
.ideditor .mly-image-label .mly-image-info:empty {
    display: none;
}
.ideditor .mly-image-label select.mly-add-key {
    width: 100%;
    max-width: 150px;
    height: 2em;
    padding: 0 4px;
    border: 0;
    font-size: 12px;
}

/* value cell: the id (cut off, it is not important) and the buttons */
.ideditor .form-field-input-mapillary-images li.labeled-input > .mly-image-value {
    width: 100%;
    /* a set cell height makes `height: 100%` below fill the whole row, which the
       two-line label makes taller than the input */
    height: 2.5em;
}
.ideditor .form-field-input-mapillary-images .mly-image-value-inner {
    display: flex;
    align-items: stretch;
    height: 100%;
}
.ideditor .form-field-input-mapillary-images .mly-image-value .mly-image-input {
    flex: 1 1 auto;
    height: auto;
    min-width: 3em;
    text-overflow: ellipsis;
}
.ideditor .form-field-input-mapillary-images .mly-image-value .form-field-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    border-radius: 0;
}
.ideditor .form-field-input-mapillary-images .mly-image-value .form-field-button.disabled,
.ideditor .form-field-input-mapillary-images .mly-image-value .form-field-button:disabled {
    opacity: .4;
    pointer-events: none;
}
.ideditor[dir='ltr'] .form-field-input-mapillary-images .mly-image-value .form-field-button {
    border-left: 1px solid var(--border-color);
}
.ideditor[dir='rtl'] .form-field-input-mapillary-images .mly-image-value .form-field-button {
    border-right: 1px solid var(--border-color);
}

/* "+" in the field label */
.ideditor .field-label .mly-add-icon.active .icon {
    opacity: 1;
    fill: var(--link-color, #7092ff);
}

/* the row the viewer bar suggests for the shown image (features 20, 26) */
.ideditor .form-field-input-mapillary-images li.labeled-input.mly-active-target > .mly-image-label {
    box-shadow: inset 3px 0 0 #7c3aed;
}
/* Mapillary traffic signs (WORKDOC feature 26) */

/* the selected sign on the map: full opacity, a yellow frame, and a dotted line to the shown image */
.ideditor .layer-mapillary-signs .icon-sign.mly-sign-selected {
    opacity: 1;
}
.ideditor .layer-mapillary-signs .icon-sign.mly-sign-selected rect {
    fill: none;
    stroke: #ffee00;
    stroke-width: 3px;
    outline: none;
    x: -15px;
    y: -15px;
    width: 30px;
    height: 30px;
    rx: 4px;
}
.ideditor .layer-mapillary-signs .mapillary-sign-link {
    fill: none;
    stroke: #ffee00;
    stroke-width: 2.5px;
    stroke-dasharray: 2 5;
    stroke-linecap: round;
    pointer-events: none;
}
/* Mapillary's computed position of the shown image, where the line bends */
.ideditor .layer-mapillary-signs .mapillary-sign-computed {
    fill: #ffee00;
    stroke: #000;
    stroke-width: 1px;
    pointer-events: none;
}

/* group chips below "Traffic signs" in the Photo Overlays pane (the row wraps them onto their own line) */
.ideditor .layer-list li.list-item-mapillary-signs {
    flex-wrap: wrap;
    height: auto;
}
.ideditor .mapillary-sign-groups {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 8px 6px 28px;
}
.ideditor .mapillary-sign-groups button.mapillary-sign-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 12px;
    background: transparent;
    color: var(--muted-text-color, #767676);
    border: 1px dashed var(--border-color, #ccc);
}
.ideditor .mapillary-sign-groups button.mapillary-sign-group.active {
    background: color-mix(in srgb, var(--text-color) 14%, transparent);
    color: var(--text-color, #333);
    border-style: solid;
}
.ideditor .mapillary-sign-groups button.mapillary-sign-group:hover {
    background: color-mix(in srgb, var(--text-color) 22%, transparent);
}
.ideditor .mapillary-sign-group-count {
    font-size: 11px;
    opacity: 0.7;
}

/* the bar of the selected sign: above the photo viewer, over the map, so the image stays free */
.ideditor .photoviewer .mapillary-sign-bar {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    max-width: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 12px;
    pointer-events: auto;
}
.ideditor .mapillary-sign-bar-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ideditor .mapillary-sign-bar-icons {
    display: flex;
    gap: 3px;
    flex: none;
}
.ideditor .mapillary-sign-bar-icon,
.ideditor .mapillary-sign-bar-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
}
.ideditor .mapillary-sign-bar-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
}
.ideditor .mapillary-sign-bar-direction {
    flex: none;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 238, 0, 0.25);
    white-space: nowrap;
}
.ideditor .mapillary-sign-bar-direction.hide {
    display: none;
}
.ideditor .photoviewer .mapillary-sign-bar button {
    height: 22px;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}
.ideditor .photoviewer .mapillary-sign-bar button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
}
.ideditor .photoviewer .mapillary-sign-bar button:disabled {
    opacity: 0.45;
}
.ideditor .mapillary-sign-bar-days,
.ideditor .mapillary-sign-bar-actions {
    display: flex;
    gap: 3px;
}
/* one row of days, scrolled sideways when there are many */
.ideditor .mapillary-sign-bar-days {
    overflow-x: auto;
    scrollbar-width: thin;
}
.ideditor .mapillary-sign-bar-days button {
    flex: none;
}
.ideditor .mapillary-sign-bar-actions {
    flex-wrap: wrap;
}
.ideditor .photoviewer .mapillary-sign-bar button.mapillary-sign-bar-day.active {
    background: #ffee00;
    color: #000;
}
.ideditor .photoviewer .mapillary-sign-bar button.mapillary-sign-bar-day {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 3px 8px;
    text-align: left;
}
.ideditor .mapillary-sign-bar-day-dates {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ideditor .mapillary-sign-bar-day-age {
    font-size: 11px;
    opacity: 0.75;
}
.ideditor .mapillary-sign-bar-day-count {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    opacity: 0.8;
}
.ideditor .mapillary-sign-bar-day-count .icon.mapillary-sign-bar-day-icon {
    width: 11px;
    height: 11px;
}
.ideditor .photoviewer .mapillary-sign-bar button.mapillary-sign-bar-action {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
    white-space: nowrap;
}
.ideditor .mapillary-sign-bar-actions.hide,
.ideditor .mapillary-sign-bar-signs.hide,
.ideditor .mapillary-sign-bar-write.hide,
.ideditor .mapillary-sign-bar-head.hide,
.ideditor .mapillary-sign-bar-days.hide {
    display: none;
}
/* the write buttons as their own group below the images */
.ideditor .mapillary-sign-bar-write {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
/* without a sign the bar only has the image keys: no line above them */
.ideditor .mapillary-sign-bar:not(.with-sign) .mapillary-sign-bar-write {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
/* with a sign, the image keys are their own group below the sign's buttons */
.ideditor .mapillary-sign-bar.with-sign .mapillary-sign-bar-images {
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}
.ideditor .mapillary-sign-bar-images {
    flex-wrap: wrap;
}
/* already tagged: green with a check; another value tagged: the arrow label */
.ideditor .photoviewer .mapillary-sign-bar button.mapillary-sign-bar-action.present {
    opacity: 1;
    background: rgba(76, 175, 80, 0.45);
    color: #fff;
}
.ideditor .photoviewer .mapillary-sign-bar button.mapillary-sign-bar-action.present:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.7);
}
.ideditor .photoviewer .mapillary-sign-bar button.mapillary-sign-bar-action.suggested {
    box-shadow: inset 0 0 0 1.5px #ffee00;
}
.ideditor .mapillary-sign-bar-signs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ideditor .photoviewer .mapillary-sign-bar button.mapillary-sign-bar-action.replaces {
    background: rgba(255, 152, 0, 0.35);
}

/* links to the same place in other imagery (infra3D) */
.ideditor .mapillary-sign-bar-links {
    display: flex;
    gap: 3px;
}
.ideditor .mapillary-sign-bar-links.hide {
    display: none;
}
.ideditor .mapillary-sign-bar.with-sign .mapillary-sign-bar-links,
.ideditor .mapillary-sign-bar-write:not(.hide) + .mapillary-sign-bar-links {
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

/* infra3D in the inspector's preset header, next to the favorite heart */
.ideditor .preset-list-button-wrap button.infra3d-button {
    width: 32px;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--bg-color-2);
    color: var(--text-color);
    font-size: 11px;
    font-weight: bold;
    opacity: 0.75;
}
.ideditor .preset-list-button-wrap button.infra3d-button:hover,
.ideditor .preset-list-button-wrap button.infra3d-button:focus {
    background: var(--bg-color-3);
    opacity: 1;
}
/* Measuring tape (Maßband) for width fields */

.ideditor .data-layer.measure-tape {
    pointer-events: none;
}

.ideditor .measure-tape-hit {
    stroke: transparent;
    stroke-width: 20px;
    pointer-events: stroke;
    cursor: move;
    touch-action: none;
}
.ideditor .measure-tape-line {
    stroke: #2f6bff;
    stroke-width: 2px;
    pointer-events: none;
}
.ideditor .measure-tape-handle {
    /* a thin cursor: the move cursor would hide the measured point */
    cursor: crosshair;
    touch-action: none;
}
.ideditor .measure-tape-handle-hit {
    fill: transparent;
    stroke: none;
    pointer-events: all;
}
.ideditor .measure-tape-ring {
    fill: none;
    stroke: #2f6bff;
    stroke-width: 2px;
    pointer-events: none;
}
.ideditor .measure-tape-cross {
    fill: none;
    stroke: #2f6bff;
    stroke-width: 1px;
    pointer-events: none;
}
.ideditor .measure-tape-label {
    fill: #fff;
    stroke: #000;
    stroke-width: 3px;
    paint-order: stroke;
    font-size: 12px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.ideditor button.form-field-button.measure-tape-button.active {
    background: var(--active-bg-color, #dfe9ff);
}

/* Magnifier while dragging a tape end */
.ideditor .measure-loupe {
    position: absolute;
    width: 160px;
    height: 160px;
    z-index: 5;
    pointer-events: none;
}
.ideditor .measure-loupe-lens {
    position: absolute;
    inset: 0;
    /* keeps the cloned background layer's z-index inside the lens, below the crosshair */
    isolation: isolate;
    border-radius: 50%;
    overflow: hidden;
    background: #222;
    /* a ring outside the lens: a border would shift the image against the crosshair */
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #000, 0 2px 10px 4px rgba(0, 0, 0, 0.5);
}
.ideditor .measure-loupe-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
}
.ideditor .measure-loupe-overlay {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    overflow: hidden;
    border-radius: 50%;
}
.ideditor .measure-loupe-tape {
    stroke: #2f6bff;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.9;
}
.ideditor .measure-loupe-cross-halo {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
}
.ideditor .measure-loupe-cross {
    fill: none;
    stroke: #2f6bff;
    stroke-width: 2;
    stroke-linecap: round;
}
.ideditor .measure-loupe-dot {
    fill: #ff2f6b;
    stroke: #fff;
    stroke-width: 1;
}
/* Related tags buttons in the field title (feature 25): FontAwesome icons fill their box while
   iD's drawings have padding, so ours are smaller to look the same size. An open one stays visible. */
.ideditor[dir] .entity-editor .form-field > .field-label > button.field-related-toggle .icon {
    width: 11px;
    height: 11px;
}
.ideditor .entity-editor .field-label > button.field-related-toggle.active {
    opacity: 1;
    visibility: visible;
}
/* the close button of an open editor is always visible */
.ideditor .entity-editor .field-related-editor .field-label > button.field-related-close {
    opacity: 1;
    visibility: visible;
}


/* Related tags below a field (feature 25): "Source: Luftbild 2026 ✎"
   (`.form-field` is a wrapping flex row: take a full row, never wider than the field) */
.ideditor .entity-editor .field-related {
    flex: 1 1 100%;
    min-width: 0;
    padding-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-text-color, #767676);
}
.ideditor .entity-editor .field-related-line {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
}
.ideditor .entity-editor .field-related-label {
    flex: none;
}
.ideditor .entity-editor .field-related-value {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-color);
}
.ideditor .entity-editor .field-related-value.empty {
    font-style: italic;
    color: inherit;
}
.ideditor .entity-editor .field-related button.field-related-button {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border-radius: 3px;
    color: var(--text-color);
}
.ideditor .entity-editor .field-related button.field-related-button:hover,
.ideditor .entity-editor .field-related button.field-related-edit.active {
    background: var(--active-bg-color);
}
.ideditor .entity-editor .field-related button.field-related-button .icon {
    width: 12px;
    height: 12px;
}

/* the open editors: full fields in one light rounded box */
.ideditor .entity-editor .field-related-editors.open {
    margin-top: 4px;
    padding: 6px 8px;
    background: var(--bg-color-2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.ideditor .entity-editor .field-related .field-related-editor {
    min-width: 0;
    font-size: inherit;
}
.ideditor .entity-editor .field-related .field-related-editor .form-field-input-wrap,
.ideditor .entity-editor .field-related .field-related-editor input {
    min-width: 0;
}
.ideditor .entity-editor .field-related .field-related-editor + .field-related-editor {
    margin-top: 6px;
}
.ideditor .entity-editor .field-related .field-related-editor .form-field {
    margin-bottom: 0;
    padding: 0;
}
/* Radnetz Berlin: a more compact entity editor.
   Sections run edge to edge, separated by a line; the section headers are full-width rows.
   Fields keep a small side gutter, the raw tag editor uses the full width.
   Overrides `80_app.css` so upstream stays untouched. */

.ideditor .entity-editor {
    --sidebar-gutter: 10px;
    padding: 0;
}
.ideditor .entity-editor .section:not(:last-child) {
    margin-bottom: 0;
}
.ideditor .entity-editor > .section:not(.hide) {
    border-bottom: 1px solid var(--border-color);
}


/* Feature type: the header of the sidebar, no disclosure */
.ideditor .entity-editor .section-feature-type .preset-list-button-wrap {
    min-height: 52px;
    border: 0;
    border-radius: 0;
}
.ideditor .entity-editor .section-feature-type .preset-icon-container {
    width: 52px;
    height: 52px;
}
.ideditor .entity-editor .section-feature-type .preset-list-button .label {
    padding: 4px var(--sidebar-gutter);
}
.ideditor[dir] .entity-editor .section-feature-type .preset-list-button-wrap .accessory-buttons > button {
    border-radius: 0;
}
.ideditor .entity-editor .section-feature-type .tag-reference-body.expanded {
    padding: 0 var(--sidebar-gutter) var(--sidebar-gutter);
}
.ideditor .section-feature-type .label-inner .feature-type-kicker {
    font-size: 11px;
    font-weight: normal;
    line-height: 1.3;
    color: var(--muted-text-color);
}
.ideditor .section-feature-type .label-inner .namepart:nth-child(1) {
    font-weight: normal;
}
.ideditor .section-feature-type .label-inner .feature-type-kicker + .namepart {
    font-weight: bold;
}


/* Section headers: full-width rows, the body indented by the gutter */
.ideditor .entity-editor summary.hide-toggle {
    box-sizing: border-box;
    width: 100%;
    padding: 5px var(--sidebar-gutter);
    line-height: 22px;
}
.ideditor .entity-editor details.disclosure-wrap:open > summary.hide-toggle {
    margin-bottom: 0;
}
@media (hover: hover) {
    .ideditor .entity-editor summary.hide-toggle:hover {
        background: var(--bg-color-3);
    }
}
.ideditor .entity-editor .disclosure-content {
    padding: 2px var(--sidebar-gutter) var(--sidebar-gutter);
}


/* Fields: no grey box around them */
.ideditor .entity-editor .section .grouped-items-area {
    padding: 0;
    margin: 0 0 8px 0;
    border-radius: 0;
    background: none;
}
/* a section body that is such an area itself (issues): it keeps the gutter of a section body */
.ideditor .entity-editor .section .disclosure-content.grouped-items-area {
    padding: 2px var(--sidebar-gutter) var(--sidebar-gutter);
    margin: 0;
}
/* issue details (reference text, suggested tags): a little air below the issue box */
.ideditor .entity-editor .section-entity-issues .issue-info {
    padding: 8px 2px 0;
}


/* Fields: a bit tighter */
.ideditor .entity-editor .form-field {
    margin-bottom: 8px;
}
.ideditor .entity-editor .field-label .label-text {
    padding: 3px 0 2px 8px;
}
.ideditor[dir='rtl'] .entity-editor .field-label .label-text {
    padding: 3px 8px 2px 0;
}
.ideditor .entity-editor .form-field input[type=text],
.ideditor .entity-editor .form-field input[type=number],
.ideditor .entity-editor .form-field input[type=url],
.ideditor .entity-editor .form-field input[type=tel],
.ideditor .entity-editor .form-field input[type=email],
.ideditor .entity-editor .form-field input[type=date] {
    height: 2.3em;
    padding: 0 8px;
}
.ideditor .entity-editor .form-field-button {
    width: 26px;
}


/* Raw tag editor: edge to edge, the rows are the only frame */
.ideditor .entity-editor .section-raw-tag-editor .disclosure-content {
    padding: 0;
}
.ideditor .entity-editor .section-raw-tag-editor .tag-list,
.ideditor .entity-editor .section-raw-tag-editor .tag-text {
    margin-top: 0;
}
.ideditor .entity-editor .section-raw-tag-editor .tag-row input {
    height: 2.3em;
    padding: 0 8px;
}
.ideditor[dir='ltr'] .entity-editor .section-raw-tag-editor .tag-row input.key,
.ideditor[dir='rtl'] .entity-editor .section-raw-tag-editor .tag-row button:last-child {
    border-left: 0;
}
.ideditor[dir='rtl'] .entity-editor .section-raw-tag-editor .tag-row input.key,
.ideditor[dir='ltr'] .entity-editor .section-raw-tag-editor .tag-row button:last-child {
    border-right: 0;
}
.ideditor .entity-editor .section-raw-tag-editor .tag-row input,
.ideditor .entity-editor .section-raw-tag-editor .tag-row button {
    border-radius: 0 !important;
    /* the same gap between rows and cells as in the fields */
    border-color: var(--bg-color-2);
}
.ideditor .entity-editor .section-raw-tag-editor .tag-text {
    border-width: 1px 0;
    border-radius: 0;
}
/* the list ends in the section's bottom line */
.ideditor .entity-editor .section-raw-tag-editor .tag-row:last-child input,
.ideditor .entity-editor .section-raw-tag-editor .tag-row:last-child button {
    border-bottom: 0;
}
.ideditor .entity-editor .section-raw-tag-editor .tag-text {
    border-bottom: 0;
}
.ideditor .entity-editor .section-raw-tag-editor .tag-reference-body.expanded {
    padding-right: var(--sidebar-gutter);
    padding-left: var(--sidebar-gutter);
}


/* No scrollbar track when nothing scrolls, and a thin one when something does
   (upstream always reserves it with `overflow-y: scroll`) */
.ideditor .inspector-body {
    overflow-y: auto;
    scrollbar-width: thin;
}


/* Fields without boxes and without lines between them, only space.
   The label is plain text, inputs and buttons keep their darker background. The borders inside
   the input area take the sidebar color: the outer edges disappear and the inner ones become
   small gaps between the parts (the same gap separates rows, cells and tag rows everywhere). */
.ideditor .entity-editor .form-field {
    margin-bottom: 0;
    padding: 4px 0 8px;
}
.ideditor .entity-editor .wrap-form-field:first-child .form-field {
    padding-top: 0;
}
.ideditor .entity-editor .field-label {
    background: none;
    border: 0;
    border-radius: 0;
    /* titles are not clickable (field.js), only the inputs and buttons */
    cursor: default;
}
.ideditor .entity-editor .field-label .label-text {
    padding: 3px 0 3px 0;
}
.ideditor[dir='rtl'] .entity-editor .field-label .label-text {
    padding: 3px 0 3px 0;
}
.ideditor[dir] .entity-editor .field-label button {
    border: 0;
    /* as wide as the buttons in the input row below */
    width: 26px;
}
.ideditor .entity-editor .form-field-input-wrap,
.ideditor .entity-editor .form-field-input-wrap *,
.ideditor .entity-editor .form-field ul.rows,
.ideditor .entity-editor .form-field ul.rows *,
.ideditor .entity-editor .form-field .structure-extras-wrap {
    border-color: var(--bg-color-2);
}
.ideditor .entity-editor .form-field-input-wrap,
.ideditor .entity-editor .form-field ul.rows {
    border-radius: 4px;
    overflow: hidden;
}
/* 1: rows and cells inside a field: no own rounded corners, the field's input area has them */
.ideditor .entity-editor .form-field ul.rows .form-field-input-wrap,
.ideditor .entity-editor .form-field ul.rows input {
    border-radius: 0;
}
/* 1: directional combo rows are table rows, which draw no borders: the gap goes on the cells */
.ideditor .entity-editor .form-field ul.rows.rows-table li + li > div {
    border-top: 1px solid var(--bg-color-2);
}
/* 4: row labels ("Left side", "All") start where the text of an input starts */
.ideditor .entity-editor .form-field ul.rows li.labeled-input > .label {
    padding-left: 8px;
    padding-right: 8px;
}
/* 2: radio options (Structure) use the same gap as rows */
.ideditor .entity-editor .form-field .form-field-input-radio > label {
    border-color: var(--bg-color-2);
}
/* Structure's sub fields (type, layer): flat rows like the rest, no inner box */
.ideditor .entity-editor .form-field .structure-extras-wrap {
    padding: 0;
    border: 0;
    border-top: 1px solid var(--bg-color-2);
    border-radius: 0;
    background: none;
}
.ideditor .entity-editor .form-field .structure-extras-wrap > ul.rows {
    border: 0;
    border-radius: 0;
}
.ideditor .entity-editor .form-field .structure-extras-wrap li.labeled-input {
    align-items: center;
}
/* up/down and dropdown arrows in the same light grey as the label icons */
.ideditor .entity-editor .form-field .combobox-caret::after,
.ideditor .entity-editor .form-field button.decrement::after {
    border-top-color: color-mix(in srgb, var(--text-color) 45%, transparent);
}
.ideditor .entity-editor .form-field button.increment::after {
    border-bottom-color: color-mix(in srgb, var(--text-color) 45%, transparent);
}

/* the combobox dropdown hangs below the input */
.ideditor .entity-editor .form-field-input-wrap:has(.combobox-input:focus) {
    overflow: visible;
}
.ideditor .entity-editor .form-field .form-field-input-traffic-sign,
.ideditor .entity-editor .form-field .form-field-input-traffic-sign * {
    border-color: var(--bg-color-2) !important;
}

/* Traffic sign field: no text for "no signs yet", the "Add sign…" input says enough */
.ideditor .entity-editor .traffic-sign-empty {
    display: none !important;
}


/* Our buttons in fields: Font Awesome icons fill the whole icon box, iD's icons have a margin,
   so they are drawn smaller to look the same size */
.ideditor .entity-editor .form-field-button.measure-tape-button .icon,
.ideditor .entity-editor .form-field-button.mly-image-show .icon {
    width: 14px;
    height: 14px;
}

/* Mapillary images field: the input and the buttons fill the whole row,
   the buttons as wide as the ones in the field label */
.ideditor .entity-editor .form-field-input-mapillary-images .mly-image-value .mly-image-input {
    height: 100%;
}
.ideditor .entity-editor .form-field-input-mapillary-images .mly-image-value .form-field-button {
    width: 26px;
}

/* "Add field:" – the input shrinks instead of running past the gutter when the label wraps */
.ideditor .entity-editor .more-fields input {
    min-width: 0;
}


/* A field that details the sides of the field above it (side prerequisite, e.g. the lane type
   below the bike infrastructure): closer to it, so they read as one group */
.ideditor .entity-editor .form-field.has-side-prerequisite {
    padding-top: 0;
}
/* The usable width above the width (bicycle roads): one group, the width follows close below */
.ideditor .entity-editor .wrap-form-field:has(> .form-field-width_effective) + .wrap-form-field > .form-field-width {
    padding-top: 0;
}
.ideditor .entity-editor .form-field > .field-hint {
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--text-color-secondary, var(--text-color));
    opacity: .75;
}
/* a side where the field above says there is nothing to detail */
.ideditor .entity-editor .form-field ul.rows li.side-prerequisite-unmet input:disabled {
    background: var(--bg-color-2);
    font-style: italic;
    cursor: not-allowed;
}
.ideditor .entity-editor .form-field ul.rows li.side-prerequisite-unmet .combobox-caret {
    display: none;
}

/* link buttons in fields (Mapillary / Wikidata / website "open" links) look like the other field buttons, not blue */
.ideditor .entity-editor a.form-field-button {
    color: var(--text-color);
}

/* Field title buttons (delete, undo, info, …): only while the field is hovered or focused
   (touch: focus the input), faded in fast; hidden buttons can't be clicked by accident.
   Shape: 22px squares with the input's background, a stronger background on hover. */
.ideditor .entity-editor .wrap-form-field .field-label > button {
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease-out, visibility 0s linear .12s;
}
.ideditor .entity-editor .wrap-form-field:hover > .form-field > .field-label > button,
.ideditor .entity-editor .wrap-form-field:focus-within > .form-field > .field-label > button,
.ideditor .entity-editor .field-related-editor:hover > .form-field > .field-label > button,
.ideditor .entity-editor .field-related-editor:focus-within > .form-field > .field-label > button {
    opacity: 1;
    visibility: visible;
    transition: opacity .12s ease-out, visibility 0s;
}
.ideditor .entity-editor .field-label {
    gap: 3px;
}
/* (`.form-field >` to win over iD's `:not(:hover)` rule and the width above) */
.ideditor[dir] .entity-editor .form-field > .field-label > button {
    width: 22px;
    height: 22px;
    margin: 0 0 4px;   /* space to the input below */
    border: 0;
    border-radius: 4px;
    background: var(--bg-color);
}
.ideditor[dir] .entity-editor .form-field > .field-label > button:hover,
.ideditor[dir] .entity-editor .form-field > .field-label > button:focus-visible,
.ideditor[dir] .entity-editor .form-field > .field-label > button.active {
    background: color-mix(in srgb, var(--text-color) 22%, var(--bg-color-2));
}
.ideditor[dir] .entity-editor .form-field > .field-label > button .icon {
    width: 16px;
    height: 16px;
}
.ideditor .entity-editor .field-label > button:hover .icon {
    opacity: 1;
}

/* Light theme: white inputs on the near-white sidebar hardly stand out, so labels and values read
   as one block. A slightly darker surface gives the hierarchy of the dark theme: the surface with
   the labels, and the lighter inputs on it. */
@media (prefers-color-scheme: light) {
    .ideditor .entity-editor {
        --bg-color-2: #e9ebef;
        --bg-color-3: #dde0e5;
        --active-bg-color: #e3e6ea;
        background: var(--bg-color-2);
    }
    .ideditor .entity-editor .field-label .label-text {
        color: #222;
    }
}
/* Traffic sign fields with one row per key (WORKDOC feature 27) */
.ideditor .traffic-sign-group-rows {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}
/* every row is the full-width sign field; rows next to others have a plain label above them */
.ideditor .traffic-sign-group-row {
    min-width: 0;
}
.ideditor .traffic-sign-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 3px;
    font-size: 12px;
    color: var(--text-color);
}
.ideditor .traffic-sign-group-label.hide {
    display: none;
}
/* points along the way as it is on the map (rotated by the field) */
.ideditor .traffic-sign-group-arrow {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    transform-origin: center;
}
.ideditor .traffic-sign-group-arrow.hide {
    display: none;
}
.ideditor .traffic-sign-group-arrow path {
    fill: var(--passive-text-color);
}
.ideditor .traffic-sign-group-input {
    min-width: 0;
}
/* a labelled row is a box of its own, not attached to the field's title */
.ideditor .form-field .traffic-sign-group-label:not(.hide) + .traffic-sign-group-input .form-field-input-traffic-sign {
    border-top: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
}

/* "Per direction" in the title of the way's field (look: `sidebar-toggle`, 99_z_sidebar_toggle.css) */
.ideditor[dir] .entity-editor .form-field > .field-label > button.traffic-sign-toggle,
/* the same for "Per part" in the title of the width field (part_width_fields.ts) */
.ideditor[dir] .entity-editor .form-field > .field-label > button.part-width-toggle {
    width: auto;
    padding: 0 8px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: normal;
    opacity: 1;
    visibility: visible;
}
.ideditor .field-label button.traffic-sign-toggle.locked {
    cursor: default;
}
/* One look for buttons in the sidebar that are switched on ("Per direction", measuring a width,
   an open related-tags editor, an open TILDA editor): a tint of the link color with a thin ring.
   Visible in the light and the dark theme, calmer than a filled blue button. */
.ideditor {
    --toggle-on-bg: color-mix(in srgb, var(--link-color) 24%, var(--bg-color));
    --toggle-on-ring: color-mix(in srgb, var(--link-color) 70%, var(--bg-color));
}
.ideditor[dir] .entity-editor .form-field > .field-label > button.active,
.ideditor .entity-editor button.form-field-button.measure-tape-button.active,
.ideditor .entity-editor .field-related button.field-related-edit.active,
.ideditor .tilda-card button.tilda-edit.active,
.ideditor button.tilda-check.active {
    background: var(--toggle-on-bg);
    box-shadow: inset 0 0 0 1px var(--toggle-on-ring);
    border-color: transparent;
    color: var(--text-color);
}
.ideditor[dir] .entity-editor .form-field > .field-label > button.active:hover,
.ideditor .entity-editor button.form-field-button.measure-tape-button.active:hover,
.ideditor .entity-editor .field-related button.field-related-edit.active:hover,
.ideditor .tilda-card button.tilda-edit.active:hover,
.ideditor button.tilda-check.active:hover:not([disabled]) {
    background: color-mix(in srgb, var(--link-color) 34%, var(--bg-color));
}
/* Hover preview of a feature in the sidebar (nothing selected, `.inspector-hover`): read-only.
   iD hides or greys its own controls there; the same for the controls of this fork. */

/* hidden, but they keep their place */
.ideditor .inspector-hover .disclosure-header-option,
.ideditor .inspector-hover .tilda-card button.tilda-edit,
.ideditor .inspector-hover .preset-list-button-wrap button.infra3d-button,
.ideditor[dir] .inspector-hover .form-field > .field-label > button.traffic-sign-toggle,
.ideditor[dir] .inspector-hover .form-field > .field-label > button.part-width-toggle,
.ideditor .inspector-hover .field-related button.field-related-button,
.ideditor .inspector-hover .form-field-input-traffic-sign .traffic-sign-row__drag,
.ideditor .inspector-hover .form-field-input-traffic-sign .traffic-sign-row__remove {
    visibility: hidden;
}

/* removed: inputs and buttons that only make sense while editing */
.ideditor .inspector-hover .tilda-attribute-inputs,
.ideditor .inspector-hover .tilda-gaps,
.ideditor .inspector-hover .tilda-target,
.ideditor .inspector-hover .tilda-verified button.tilda-check,
.ideditor .inspector-hover .form-field-input-traffic-sign .traffic-sign-add-row,
.ideditor .inspector-hover .form-field-button.measure-tape-button {
    display: none !important;
}

/* greyed like iD's inputs */
.ideditor .inspector-hover .tilda-card-header,
.ideditor .inspector-hover .tilda-card-body,
.ideditor .inspector-hover .form-field-input-traffic-sign .traffic-sign-row,
.ideditor .inspector-hover .form-field-input-traffic-sign input {
    background: var(--bg-color-3) !important;
}
.ideditor .inspector-hover .surface-smoothness-field,
.ideditor .inspector-hover .form-field-input-surface-smoothness {
    opacity: 0.75;
}

}