/* 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;
}
/* Basics
------------------------------------------------------- */
/* the root element of Rapid */
.ideditor {
  display: flex;
  flex-flow: row nowrap;

  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;

  /*
   Establish a local stacking context so all elements within Rapid are on the
   same layer relative to elements outside Rapid - 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: #333;
  background-color: #333;

  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 #rapid-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,
.ideditor select {
  cursor: pointer;
}

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

.ideditor h3:last-child,
.ideditor h2: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: #7092ff;
}
.ideditor a:focus {
  color: #597be7;
}
@media (hover: hover) {
  .ideditor a:hover {
    color: #597be7;
  }
}
.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: #fcfcfc;
  border: solid 1px #ccc;
  margin: 0 2px;
  border-bottom-color: #bbb;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #bbb;
}

.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: #fff;
  color: #333;
  border: 1px solid #ccc;
  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] {
  /* 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: #f1f1f1;
}

.ideditor textarea.disabled,
.ideditor input.disabled {
  color: #777;
  background-color: #eee;
  cursor: not-allowed;
}

.ideditor input[type="checkbox"],
.ideditor input[type="radio"] {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  cursor: pointer;
  vertical-align: middle;
}
.ideditor input[type="checkbox"]:indeterminate {
  accent-color: #aaa;
}
.ideditor[dir='rtl'] input[type="checkbox"],
.ideditor[dir='rtl'] input[type="radio"] {
  margin-left: 5px;
  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;
}

/* 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: #fff;
  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 #ccc;
  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: #fff;
  color: #333;
}
.ideditor .fillL2 {
  background: #f6f6f6;
  color: #333;
}
.ideditor .fillL3 {
  background: #ececec;
  color: #333;
}
.ideditor .fillD {
  background: rgba(0,0,0,.6);
  color: #fff;
}
.ideditor .fillD2 {
  background: rgba(0,0,0,.75);
  color: #fff;
}

.ideditor .fl { float: left;}
.ideditor .fr { float: right;}

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

.ideditor .deemphasize {
  color: #a9a9a9;
}
.ideditor .content {
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
}
.ideditor .loading {
  background: url(img/loader_bg.gif);
  background-size: 5px 5px;
}


/* Buttons
------------------------------------------------------- */
.ideditor button {
  text-align: center;
  border: 0;
  background: #fff;
  color: #333;
  font-size: 12px;
  display: inline-block;
  border-radius: 4px;
}

.ideditor button:focus,
.ideditor button:active,
.ideditor button.hover {
  background-color: #ececec;
}
@media (hover: hover) {
  .ideditor button:hover {
    background-color: #ececec;
  }
}
.ideditor button.active {
  background: #7092ff;
}
.ideditor button.disabled {
  background-color: rgba(255,255,255,.25);
  color: rgba(0,0,0,.4);
  cursor: not-allowed;
}

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

.ideditor .joined > *:first-child,
.ideditor[dir='rtl'] .joined > *:last-child {
  border-radius: 4px 0 0 4px;
}
.ideditor .joined > *:last-child,
.ideditor[dir='rtl'] .joined > *:first-child {
  border-radius: 0 4px 4px 0;
}
.ideditor .joined > *:first-child:last-child {  /* only-child, but with better specificity */
  border-radius: 4px;
}


/* Action buttons */
.ideditor button.action {
  background: #7092ff;
  color: #fff;
  font-weight: bold;
}
.ideditor button.action:focus,
.ideditor button.action:active {
  background: #597be7;
}
.ideditor button.secondary-action {
  background: #ececec;
  font-weight: bold;
}
.ideditor button.secondary-action:focus,
.ideditor button.secondary-action:active {
  background: #cccccc;
}

.ideditor button.action.disabled,
.ideditor button[disabled].action {
  background: #cccccc;
  color: #888;
  cursor: not-allowed;
}

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

@media (hover: hover) {
  .ideditor button.action:hover {
    background: #597be7;
  }
  .ideditor button.secondary-action:hover {
    background: #cccccc;
  }
  .ideditor button.action.disabled:hover,
  .ideditor button[disabled].action:hover {
    background: #cccccc;
    color: #888;
    cursor: not-allowed;
  }
}


/* Icons
------------------------------------------------------- */
/*
 Unfortunately our icons in the rapid spritesheet are inconsistent.
 They should really fill the viewbox, but they generally take up
 less space than that.  This is why they default size them to 20px.
 The icons we use from FontAwesome are consistent and use the entire
 viewbox, so we default size them at 16px.
*/
.ideditor .icon {
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
.ideditor .icon.icon-fas {
  width: 16px;
  height: 16px;
  margin: 2px;
}

.ideditor .icon.operation use {
  fill: #222;
  color: #79f;
}
.ideditor button.disabled .icon.operation use,
.ideditor .icon.operation.disabled use {
  fill: rgba(32,32,32,.2);
  color: rgba(40,40,40,.2);
}

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


/* Main Content
------------------------------------------------------- */
.ideditor .main-content {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;

  position: relative;
  overflow: hidden;
  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;
}


/* Toolbar / Persistent UI Elements
------------------------------------------------------- */
.ideditor .map-toolbar {
  display: flex;
  flex: 0 0 0px;
  flex-flow: row nowrap;

  justify-content: space-between;
  padding: 10px 0 0 0;
  z-index: 101;
}

.ideditor .map-toolbar .toolbar-item {
  display: flex;
  flex: 0 0 0px;
  flex-flow: column wrap;
  justify-content: center;
}
.ideditor .map-toolbar .toolbar-item.spacer {
  flex-grow: 1;
}

.ideditor .map-toolbar .toolbar-item .item-content {
  display: flex;
  flex: 0 0 40px;
  flex-flow: row nowrap;
  justify-content: center;

  margin: 0 5px;
}

.ideditor .map-toolbar .toolbar-item .item-label {
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
  margin: 1px 2px 2px 2px;
}

.ideditor button.bar-button {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;

  align-items: center;
  padding: 0 10px;
  min-width: 30px;
  white-space: nowrap;
  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.add-area {
  opacity: 0.65;
}

.ideditor button.save .count {
  display: inline-block;
  min-width: 20px;
  text-align: center;
}

.ideditor .help-pane svg.icon.add-note,
.ideditor button.add-note svg.icon {
  height: 15px;
  width: 15px;
  color: rgba(0,0,0,0.25);
  stroke: #333;
  stroke-width: 60px;
}
.ideditor .help-pane svg.icon.add-note {
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 3px;
}

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


/* Header for modals / panes
------------------------------------------------------- */
.ideditor .header {
  display: flex;
  flex: 0 0 0px;
  align-items: center;
  justify-content: center;

  border-bottom: 1px solid #ccc;
  padding: 20px 40px;
  position: relative;
}

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


/* Hide/Toggle collapsible sections (aka Disclosure)
------------------------------------------------------- */
.ideditor .hide-toggle .icon.pre-text {
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-top: -3px;
}

.ideditor a:visited.hide-toggle,
.ideditor a.hide-toggle {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}


/* Sidebar / Inspector
------------------------------------------------------- */
.ideditor .sidebar {
  display: flex;
  flex: 0 0 400px;
  flex-flow: column nowrap;

  z-index: 10;
  background: #f6f6f6;
  -ms-user-select: element;
  overflow: hidden;
}

.ideditor .resizer {
  display: flex;
  flex: 0 0 15px;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  z-index: 10;
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #fff;
  border-width: 0 1px;
  border-color: #ccc;
  border-style: solid;
}

.ideditor .resizer-handle {
  width: 4px;
  height: 10%;
  background-color: #ccc;
  border-radius: 4px;
  pointer-events: none;
}

@media (hover: hover) {
  .ideditor .resizer:hover {
    background-color: #ececec;
  }
  .ideditor .resizer-handle:hover {
    background-color: #bcbcbc;
  }
}


/* .collapsing: the sidebar has been set to a width that is too small,
  set some opacity and hide the child contents */
.ideditor .sidebar.collapsing { opacity: 0.5 }
.ideditor .sidebar.collapsing > * { display: none; }

/* .collapsed: the sidebar is hidden completely */
.ideditor .sidebar.collapsed { display: none; }


.ideditor .sidebar-component {
  display: flex;
  flex: 1 1 0px;
  flex-flow: column nowrap;
  overflow: hidden;
}

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

.ideditor .feature-list-wrap {
  display: flex;
  flex: 1 0 0px;
  flex-flow: column nowrap;
}

.ideditor .inspector-wrap {
  display: flex;
  flex: 1 0 0px;
  flex-flow: column nowrap;
  overflow: hidden;
}

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

.ideditor .panewrap {
  display: flex;
  flex: 1 0 0px;
  flex-flow: row nowrap;
  width: 200%;
}

.ideditor .pane {
  display: flex;
  flex: 0 0 50%;
  flex-flow: column nowrap;
  width: 50%;
}

.ideditor .inspector-body {
  display: flex;
  flex: 1 1 0px;
  flex-flow: column nowrap;
  overflow-y: scroll;
  overflow-x: hidden;
}

.ideditor .entity-editor {
  padding: 20px;
}

/* Preserve extra space at bottom of scrollable stuff */
/* to allow for dropdowns, hovering, etc - iD#5280, Rapid#1593 */
.ideditor .entity-editor > div:last-child,
.ideditor .pane-content > div:last-child {
  margin-bottom: 150px;
}

.ideditor .sidebar .search-header {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.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;
}

.ideditor .sidebar-footer {
  display: flex;
  flex: 0 0 0px;
  flex-flow: column nowrap;
  order: 99;

  padding: 3px 15px;
  border-top: 1px solid #ccc;
  background-color: #f6f6f6;
}


/* 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 #ccc;
  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 {
  display: flex;
  flex: 1 1 0px;
  flex-flow: row nowrap;

  padding: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ideditor .feature-list-item .label .icon {
  opacity: 0.5;
}
.ideditor .feature-list-item .close {
  padding: 10px;
}
.ideditor .feature-list-item .close .icon {
  opacity: 0.5;
}
.ideditor .feature-list-item .entity-type {
  color: #7092ff;
  font-weight: bold;
}
.ideditor .feature-list-item:active .entity-type,
.ideditor .feature-list-item:focus .entity-type {
  color: #597be7;
}
@media (hover: hover) {
  .ideditor .feature-list-item:hover .entity-type {
    color: #597be7;
  }
}
.ideditor .feature-list-item .entity-name {
  color: #666;
  padding: 0 10px;
}
.ideditor .section-selected-features .feature-list {
  border: 1px solid #ccc;
  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 #ccc;
    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: #ececec;
}


.ideditor .preset-icon-container {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
    visibility: hidden;
    z-index: 2;
}
.ideditor .preset-icon-container.showing-img img.image-icon {
    visibility: visible;
}
.ideditor .preset-icon-container.showing-img *:not(.image-icon) {
    display: none;
}

.ideditor .preset-icon-category-border path {
    stroke-opacity: 1;
    stroke-width: 1px;
}

.ideditor .preset-icon-point-border path {
    fill: #fff;
    stroke: #333;
    stroke-opacity: 1;
    stroke-width: 1px;
}

.ideditor .preset-icon-vertex-border circle {
    fill: #efefef;
    fill-opacity: 1;
    stroke: #333;
    stroke-opacity: 1;
    stroke-width: 1.5px;
}

.ideditor .preset-icon-area-border path {
    stroke-opacity: 1;
    stroke-width: 1.2px;
}
.ideditor .preset-icon-area-border circle.vertex {
    fill: #fff;
    fill-opacity: 1;
    stroke: #000;
    stroke-opacity: 0.3;
    stroke-width: 1px;
}
.ideditor .preset-icon-area-border circle.midpoint {
    fill: transparent;
    fill-opacity: 1;
    stroke: #000;
    stroke-opacity: 0.3;
    stroke-width: 1px;
}

.ideditor .preset-icon-line path.casing {
    stroke-width: 5px;
}
.ideditor .preset-icon-line path.stroke {
    stroke-width: 4px;
}
.ideditor .preset-icon-line circle.vertex {
    fill: #fff;
    fill-opacity: 1;
    stroke: #000;
    stroke-opacity: 0.3;
    stroke-width: 1px;
}

.ideditor .preset-icon,
.ideditor .preset-icon-route {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.ideditor .preset-icon svg.icon,
.ideditor .preset-icon-route svg.icon {
    width: 28px;
    height: 28px;
    fill: #333;
}
.ideditor .preset-icon svg.icon.rapid-icon,
.ideditor .preset-icon-route svg.icon.rapid-icon {
    width: 50px;
    height: 50px;
}
.ideditor .preset-icon svg.icon.shrunk,
.ideditor .preset-icon-route svg.icon.shrunk {
    scale: 0.8;
}
.ideditor .preset-icon svg.icon.raised,
.ideditor .preset-icon-route svg.icon.raised {
    translate: 0 -7px;
}
.ideditor .preset-icon svg.icon.lowered,
.ideditor .preset-icon-route svg.icon.lowered {
    translate: 0 12px;
}


.ideditor .preset-list-button .label {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    background: #f6f6f6;
    text-align: left;
    padding: 5px 10px;
    border-left: 1px solid rgba(0, 0, 0, .1);
    flex: 1 1 100%;
    align-self: stretch;
}
.ideditor[dir='rtl'] .preset-list-button .label {
    text-align: right;
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
.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 .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: #ececec;
}
@media (hover: hover) {
    .ideditor .preset-list-button:hover .label {
        background-color: #ececec;
    }
}

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


.ideditor .current .preset-list-button,
.ideditor .current .preset-list-button .label {
    background-color: #e8ebff;
}

.ideditor .category .preset-list-button:after,
.ideditor .category .preset-list-button:before {
    content: "";
    position: absolute;
    top: -5px;
    left: -1px; right: -1px;
    border: 1px solid #ccc;
    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: #ececec;
    width: 0;
    height: 0;
    margin-left: 50%;
    margin-left: calc(50% - 10px);
}


/* Entity/Preset Editor
------------------------------------------------------- */
.ideditor .section .grouped-items-area {
    padding: 10px;
    margin: 0 -10px 10px -10px;
    border-radius: 8px;
    background: #ececec;
}
.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: #333;
    background: #f6f6f6;
    border: 1px solid #ccc;
    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;
    white-space: nowrap;
}
.ideditor[dir='rtl'] .field-label .label-text {
    padding: 5px 10px 4px 0;
}

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

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

}

.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 #ccc;
    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: #fff;
    border: 1px solid #ccc;
    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: #f1f1f1;
}
@media (hover: hover) {
    .ideditor .form-field-button:hover {
        background-color: #f1f1f1;
    }
}
.ideditor .form-field-button .icon {
    fill: #333;
    opacity: .5;
}


/* 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, Cycleway
------------------------------------------------------- */
.ideditor .form-field-input-access,
.ideditor .form-field-input-cycleway {
    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 #ccc;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    width: 100%;
}
.ideditor .form-field ul.rows li {
    border-top: 1px solid #ccc;
}
.ideditor .form-field ul.rows li:first-child {
    border-top: 0;
}
.ideditor .form-field ul.rows li {
    display: flex;
    flex-flow: row nowrap;
}
.ideditor .form-field ul.rows li.labeled-input > div {
    flex: 1 1 auto;
    width: 100%;
    border-radius: 0;
    line-height: 0.95rem;
}
.ideditor .form-field ul.rows li input {
    border-radius: 0;
    border-width: 0;
    width: 100%;
}
.ideditor .form-field ul.rows li button {
    border-width: 0;
}
.ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
.ideditor[dir='ltr'] .form-field ul.rows li button {
    border-left-width: 1px;
}
.ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
.ideditor[dir='rtl'] .form-field ul.rows li button {
    border-right-width: 1px;
}

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


/* Field - Structure
------------------------------------------------------- */
.ideditor .structure-extras-wrap {
    width: 100%;
    padding: 10px 10px;
    background: #fff;
    border: 1px solid #ccc;
    border-top: 0px;
    border-radius: 0 0 4px 4px;
}
.ideditor .structure-extras-wrap > ul.rows {
    border: 1px solid #ccc;
    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 {
    font-family: monospace;
}
.ideditor .form-field-input-combo input.known-value {
    color: #7092ff;
}

.ideditor .form-field-input-multicombo ul.chiplist {
    padding: 5px 8px 5px 8px;
    background: #fff;
    display: block;
    border-radius: 0 0 4px 4px;
    width: 100%;
}

.ideditor .form-field-input-multicombo li {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    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: #eff2f7;
    border: 1px solid #ccd5e3;
    max-width: 100%;
    color: #7092ff;
}
.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: #333;
}
.ideditor .form-field-input-multicombo li.mixed {
    border-color: #eff2f7;
    color: #888;
    font-style: italic;
}

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

.ideditor .form-field-input-multicombo a {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    padding: 0px 5px 0px 5px;
    margin: 0;
    cursor: pointer;
    color: #a6b4ce;
    display: block;
    text-align: center;
    flex: 0 0 auto;
}

.ideditor .form-field-input-multicombo .input-wrap {
    border: 1px solid #ddd;
    width: 100px;
}
.ideditor .form-field-input-multicombo input {
    border: none;
    width: 100%;
}

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


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

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

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


/* Field - Checkbox
------------------------------------------------------- */
.ideditor .form-field-input-check {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 5px 10px;
    color: #7092ff;
    border: 1px solid #ccc;
    border-top: 0;
    cursor: pointer;
}
.ideditor .form-field-input-check > input[type="checkbox"] {
    flex: 0 1 auto;
    width: 20px;
    margin-top: 0;
}
.ideditor .form-field-input-check > span {
    flex: 1 1 auto;
}
.ideditor .form-field-input-check > span.mixed {
    font-style: italic;
}
.ideditor .form-field-input-check > .reverser {
    flex: 0 1 auto;
    background-color: #eff2f7;
    border: 1px solid #ccd5e3;
    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: #e3e8ef;
}
@media (hover: hover) {
    .ideditor .form-field-input-check > .reverser:hover {
        background: #e3e8ef;
    }
}
.ideditor .form-field-input-check > .reverser.hide {
    display: none;
}
.ideditor .form-field-input-check:active,
.ideditor .form-field-input-check:focus {
    background: #f1f1f1;
}
@media (hover: hover) {
    .ideditor .form-field-input-check:hover {
        background: #f1f1f1;
    }
}
.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: #fff;
    color: #7092ff;
    cursor: pointer;
}
.ideditor .form-field-input-radio > label.mixed {
    font-style: italic;
}
.ideditor .form-field-input-radio > label:last-child {
    border-radius: 0 0 4px 4px;
}
.ideditor .form-field-input-radio > label:active,
.ideditor .form-field-input-radio > label:focus {
    background-color: #ececec;
}
@media (hover: hover) {
    .ideditor .form-field-input-radio > label:hover {
        background-color: #ececec;
    }
}
.ideditor .form-field-input-radio > label.active {
    background-color: #e8ebff;
}
.ideditor .form-field-input-radio > label:not(:last-of-type) {
    border-bottom: 1px solid #ccc;
}
.ideditor .form-field-input-radio > label > input[type="radio"] {
    flex: 0 1 auto;
    width: 20px;
}
.ideditor .form-field-input-radio > label > span {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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


/* Field - roadspeed
------------------------------------------------------- */
.ideditor .form-field-input-roadspeed input.roadspeed-number {
    flex-basis: 0;
}
.ideditor .form-field-input-roadspeed input.roadspeed-unit {
    flex: 0 1 auto;
    width: 80px;
}
.ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
    border-radius: 0 0 0 4px;
}
.ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
    border-radius: 0 0 4px 0;
}
.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-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: #777;
    background-color: #eee;
    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: #ccc;
    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 #ccc;
    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 #ccc;
    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;
}


/* 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 #ccc;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.ideditor .form-field-input-restrictions .restriction-controls-container {
    background-color: #fff;
    width: 100%;
    padding: 5px;
    border-top: 1px solid #ccc;
    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;
    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: rgba(255, 255, 255, .8);
    color: #888;
    text-align: center;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.ideditor .restriction-help span {
    margin: 2px;
}

.ideditor .restriction-help .qualifier {
    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) #preset-input-comment {
    border-color: rgb(230, 100, 100);
}
.ideditor .form-field-comment:not(.present) .field-label {
    border-color: rgb(230, 100, 100);
    background: rgba(230, 100, 100, 0.2);
}
.ideditor .form-field-comment:not(.present) button {
    border-color: rgb(230, 100, 100);
}


/* 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: #fff;
    max-height: 245px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
}

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

.ideditor .combobox a.selected,
.ideditor .combobox a:active,
.ideditor .combobox a:focus {
    background: #ececec;
}
@media (hover: hover) {
    .ideditor .combobox a:hover {
        background: #ececec;
    }
}

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

.ideditor .combobox-caret {
    display: inline-block;
    position: relative;
    height: 30px;
    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 #ccc;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.ideditor .combobox .combobox-option.raw-option {
    font-family: monospace;
    color: #333;
}


/* Field Help
------------------------------------------------------- */
.ideditor .field-help-body {
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    margin: 5px;
    padding: 8px;
    border: 1px solid #ccc;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    z-index: 20;
    background: rgba(255,255,255,0.95);
    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: 55px;
    border-radius: 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: #666;
}
.ideditor .field-help-nav-item.active {
    color: #7092ff;
    border-bottom: 2px solid;
}
.ideditor .field-help-nav-item:active,
.ideditor .field-help-nav-item:focus {
    color: #597be7;
    background-color: #efefef;
}
@media (hover: hover) {
    .ideditor .field-help-nav-item:hover {
        color: #597be7;
        background-color: #efefef;
    }
}

.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: #f6f6f6;
    padding: 5px 10px;
}


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


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

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

.ideditor .tag-text.readonly,
.ideditor .tag-row.readonly,
.ideditor .tag-row.readonly input.key,
.ideditor .tag-row.readonly input.value,
.ideditor .tag-row.readonly button.remove {
    color: #777;
    background-color: #eee;
    cursor: not-allowed;
}

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


.ideditor .tag-row input.key {
    font-weight: bold;
    background-color: #f6f6f6;
}

.ideditor .tag-row input.value {
    border-right: 1px solid #ccc;
}
.ideditor[dir='rtl'] .tag-row input.value {
    border-left: 1px solid #ccc;
}

.ideditor .tag-row:first-child input.key {
    border-top: 1px solid #ccc;
    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 #ccc;
}
.ideditor .tag-row button {
    flex: 0 0 auto;
    width: 32px;
    border: 1px solid #ccc;
    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: #f1f1f1;
}
@media (hover: hover) {
    .ideditor .tag-row button:hover {
        background: #f1f1f1;
    }
}
.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: #f5f5f5;
}
.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;
    display: unset;
}
.ideditor .tag-reference-description {
}
.ideditor .tag-reference-link {
    display: block;
}

.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: #f6f6f6;
    color: #333;
}
.ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
    border-bottom: 1px solid #ccc;
}
.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
    border-top: 1px solid #ccc;
}


/* 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;
}
.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 .section-raw-member-editor .member-row .member-entity-name.has-color::before,
.ideditor .section-raw-membership-editor .member-row .member-entity-name.has-color::before,
.ideditor .feature-list .entity-name.has-color::before,
.ideditor .combobox-parent-relation .has-color::before {
    display: inline-block;
    content: '';
    margin-left: -5px;
    margin-right: 5px;
    border-style: solid;
    border-width: 4px;
    border-radius: 4px;
    border-color: inherit;
}
.ideditor .combobox-parent-relation .has-color::before  {
    margin-left: 2px;
}

.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-color::before,
.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name.has-color::before,
.ideditor[dir='rtl'] .feature-list .entity-name.has-color::before {
    margin-left: 5px;
    margin-right: -5px;
}
.ideditor[dir='rtl'] .combobox-parent-relation .has-color::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-relation {
    margin-top: 10px;
    border-radius: 4px;
}


/* OSM Note / QA Editors / Custom Data Editor
------------------------------------------------------- */
.ideditor .data-header,
.ideditor .note-header,
.ideditor .qa-header {
  background-color: #f6f6f6;
  border-radius: 5px;
  border: 1px solid #ccc;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

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

.ideditor .data-header-icon .icon-wrap,
.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-icon .note-fill {
  color: #f30;
  stroke: #333;
  stroke-width: 40px;
}
.ideditor .note-header-icon.new .note-fill {
  color: #fe0;
  stroke: #333;
  stroke-width: 40px;
}
.ideditor .note-header-icon.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;
}

.ideditor .data-header-label,
.ideditor .note-header-label,
.ideditor .qa-header-label {
  background-color: #f6f6f6;
  padding: 0 15px;
  flex: 1 1 100%;
  font-size: 14px;
  font-weight: bold;
  border-radius: 0 5px 5px 0;
  line-height: 19px;
}
.ideditor[dir='rtl'] .data-header-label,
.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: #ececec;
  padding: 1px 10px;
  border-radius: 8px;
  margin-top: 20px;
}

.ideditor .comment {
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #ccc;
  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 #ccc;
  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: #333;
}
.ideditor .comment-date {
  color: #aaa;
}
.ideditor .comment-text {
  color: #333;
  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-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 10px;
}
/* Specify margin when one is followed by the other */
.ideditor .qa-details-header+.qa-details-container {
  margin-top: 8px;
}
.ideditor .qa-details-container {
  background: #ececec;
  padding: 10px;
  margin-top: 20px;
  border-radius: 4px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}
.ideditor .qa-details-container h1,
.ideditor .qa-details-container h2,
.ideditor .qa-details-container h3,
.ideditor .qa-details-container h3 {
  font-size: 18px;
}
.ideditor .qa-details-container ul,
.ideditor .qa-details-container ol {
  margin-left: 20px;
}
.ideditor .qa-details-container li {
  list-style: auto;
}
.ideditor .qa-details-container ul li {
  list-style: disc;
}
.ideditor .qa-details-description-text::first-letter {
  text-transform: capitalize;
}
.ideditor[dir='rtl'] .qa-details-description-text::first-letter {
  text-transform: none;  /* iD#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 .qa-details-item span {
  padding: 0 5px;
}

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

.ideditor .qa-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ideditor .qa-header-icon .qaItem {
  scale: 1.8;
}

/* data editor contains a custom raw-tag-editor without info/add/delete buttons */
.ideditor .data-tag-editor {
  padding: 20px;
}
.ideditor .data-tag-editor button.add-tag,
.ideditor .data-tag-editor .tag-row button {
  display: none;
}
.ideditor .data-tag-editor .tag-row .key-wrap,
.ideditor .data-tag-editor .tag-row .value-wrap {
  width: 50%;
}


/* Over Map
------------------------------------------------------- */
.ideditor .over-map {
  display: flex;
  flex: 1 1 0px;
  flex-direction: row-reverse;
  align-items: flex-end;

  position: relative;
  pointer-events: none;
}
.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 {
  display: flex;
  flex-direction: column;

  right: 0;
  top: 0;
  width: 40px;
  position: absolute;
  z-index: 100;
  bottom: 0;
  pointer-events: none;
}
.ideditor .map-controls:before {
  flex: 0 1 auto;
  content: '';
  display: inline-block;
  pointer-events: none;
  width: 40px;
  height: 100%;
  max-height: 70px;
}
.ideditor[dir='rtl'] .map-controls {
  left: 0;
  right: auto;
}

.ideditor .map-control {
  display: flex;
  position: relative;
  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: #7092ff;
}

@media (hover: hover) {
  .ideditor .map-control > button:not(.disabled):hover {
    background: rgba(0, 0, 0, .8);
  }
  .ideditor .map-control > button.active:hover {
    background: #7092ff;
  }
}

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

.ideditor .map-control > button.bearing {
  border-radius: 4px 0 0 0;
}
.ideditor button.bearing > .bearing_n {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}
.ideditor[dir='rtl'] .map-control > button.bearing {
  border-radius: 0 4px 0 0;
}
.ideditor button.bearing .tooltip-keyhint .rotate-the-map {
  margin-bottom: 5px;
}
.ideditor button.bearing .tooltip-keys svg.icon {
  margin: 0 3px;
}


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

.ideditor .map-control > button.zoom-to-selection .icon {
  width: 22px;
  height: 22px;
}

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


/* 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 / Preferences Settings
------------------------------------------------------- */
.ideditor .imagery-faq {
    margin-bottom: 10px;
    white-space: nowrap;
}

.ideditor .layer-list, .ideditor .controls-list {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.ideditor .layer-list > li {
    background-color: #fff;
    color: #7092ff;
    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 #ccc;
}
.ideditor .layer-list li:active {
    background-color: #ececec;
}
@media (hover: hover) {
    .ideditor .layer-list li:hover {
        background-color: #ececec;
    }
}

.ideditor .layer-list li.active button,
.ideditor .layer-list li.active {
  background: #e8ebff;
}

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

.ideditor .best > svg {
  color: #e98733;
  height: 19px;
}

.ideditor .layer-list .wayback-date {
  color: #333;
  height: 20px;
  cursor: pointer;
}

.ideditor .layer-list .list-item-maproulette > label > span {
  flex: 1 1 auto;
}
.ideditor .layer-list .list-item-maproulette .challenge-ids {
  color: #333;
  height: 20px;
  width: 120px;
  cursor: pointer;
}

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

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

.ideditor .list-item-date-filter label > span {
   flex: 0 0 20%;
}

.ideditor .layer-list label > span.background-name {
    display: flex;
    flex: 1;
    padding: 0 5px;
}

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

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

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

.ideditor .background-pane .layer-list button.favorite-background {
  border: 0;
}

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

.ideditor .preferences-pane .mouse-wheel-title {
    color: #444;
    font-weight: bold;
    line-height: 2;
}

/* preferences: map color scheme */
.ideditor .color-select {
    width: 100%;
    border: none;
    padding-left: 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 4px;
}
.ideditor .issue-container .issue-text .issue-icon {
  padding: 2px 6px;
}
.ideditor .issue-text .issue-message {
  flex: 1 1 auto;
  padding: 4px 5px;
}
.ideditor .issue-label .issue-autofix {
  flex: 0 0 auto;
  padding: 5px 8px;
}
.ideditor .issue-label .issue-info-button {
  height: unset;
  width: 32px;
  flex: 0 0 auto;
  border-left: 1px solid #ccc;
  background-color: rgba(0,0,0,0);
}
.ideditor[dir='rtl'] .issue-label .issue-info-button {
  border-left: 0;
  border-right: 1px solid #ccc;
}
.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;
}

.ideditor button.autofix.action {
  flex: 0 0 20px;
  height: 20px;
  width: 20px;
  background: #7092ff;
  color: #fff;
  padding: 0;
}
.ideditor button.autofix.action:focus,
.ideditor button.autofix.action:active,
.ideditor button.autofix.action.active {
  background: #597be7;
}
@media (hover: hover) {
  .ideditor button.autofix.action:hover {
    background: #597be7;
  }
}

/* fix all */
.ideditor .autofix-all {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  margin-top: -25px;
  padding-bottom: 5px;
}
.ideditor .autofix-all-link-text {
  padding: 0;
}
.ideditor .autofix-all-link-icon svg {
  margin: 0 9px;
  background: currentColor;
  border-radius: 4px;
}
.ideditor .autofix-all-link-icon svg use {
  color: #fff;
}

/* error styles */
.ideditor .error-list,
.ideditor .error-list *,
.ideditor .issue-container.active .issue.severity-error,
.ideditor .issue-container.active .issue.severity-error * {
  border-color: #f77;
}

.ideditor .error-list .issue.severity-error .issue-label,
.ideditor .issue.severity-error .issue-fix-list,
.ideditor .error-section {
  background: #ffd6d6;
}

.ideditor .issue-container.active .issue.severity-error .issue-label {
  background: #ffc6c6;
}

.ideditor .issue.severity-error .issue-fix-item button.actionable,
.ideditor .issue-container.active .issue.severity-error .issue-info-button {
  color: #b91201;
  fill: #b91201;
}
.ideditor .issue.severity-error .issue-icon {
  color: #dd1400;
}
.ideditor .error-list .issue.severity-error .issue-label:active,
.ideditor .error-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: #ffb6b6;
}
.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: #840c00;
  fill: #840c00;
}
@media (hover: hover) {
  .ideditor .error-list .issue.severity-error .issue-label:hover,
  .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
    background: #ffb6b6;
  }
  .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
  .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
    color: #840c00;
    fill: #840c00;
  }
}

/* warning styles */
.ideditor .warning-list,
.ideditor .warning-list *,
.ideditor .issue-container.active .issue.severity-warning,
.ideditor .issue-container.active .issue.severity-warning * {
  border-color: #fb2;
}

.ideditor .warning-list .issue.severity-warning .issue-label,
.ideditor .issue.severity-warning .issue-fix-list,
.ideditor .warning-section {
  background: #ffc;
}

.ideditor .issue-container.active .issue.severity-warning .issue-label {
  background: #ffa;
}

.ideditor .issue.severity-warning .issue-icon {
  color: #f90;
}

.ideditor .issue.severity-warning .issue-fix-item button.actionable,
.ideditor .issue-container.active .issue.severity-warning .issue-info-button {
  color: #b15500;
  fill: #b15500;
}
.ideditor .warning-list .issue.severity-warning .issue-label:active,
.ideditor .warning-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: #fafa30;
}
.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: #7f3d00;
  fill: #7f3d00;
}
@media (hover: hover) {
  .ideditor .warning-list .issue.severity-warning .issue-label:hover,
  .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
    background: #fafa30;
  }
  .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
  .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
    color: #7f3d00;
    fill: #7f3d00;
  }
}


/* suggestion styles */
.ideditor .suggestion-list,
.ideditor .suggestion-list *,
.ideditor .issue-container.active .issue.severity-suggestion,
.ideditor .issue-container.active .issue.severity-suggestion * {
  border-color: #68abab;
}

.ideditor .suggestion-list .issue.severity-suggestion .issue-label,
.ideditor .issue.severity-suggestion .issue-fix-list,
.ideditor .suggestion-section {
  background: #c7fafa;
}

.ideditor .issue-container.active .issue.severity-suggestion .issue-label {
  background: #c7fafa;
}

.ideditor .issue.severity-suggestion .issue-icon {
  color: #00a7a7;
}

.ideditor .issue.severity-suggestion .issue-fix-item button.actionable,
.ideditor .issue-container.active .issue.severity-suggestion .issue-info-button {
  color: #098787;
  fill: #098787;
}
.ideditor .suggestion-list .issue.severity-suggestion .issue-label:active,
.ideditor .suggestion-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: #7cfafa;
}
.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: #066262;
  fill: #066262;
}
@media (hover: hover) {
  .ideditor .suggestion-list .issue.severity-suggestion .issue-label:hover,
  .ideditor .issue.severity-suggestion .issue-fix-item button.actionable:hover {
    background: #7cfafa;
  }
  .ideditor .issue.severity-suggestion .issue-fix-item button.actionable:hover,
  .ideditor .issue-container.active .issue.severity-suggestion .issue-info-button:hover {
    color: #066262;
    fill: #066262;
  }
}


/* 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 #72d979;
    background: #c6ffca;
    padding: 5px !important;
    display: flex;
}
.ideditor .section-issues-status .icon {
    color: #05ac10;
}

.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 #ccc;
    background: #f6f6f6;
}
.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: #f1f1f1;
}
@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: #f1f1f1;
    }
}
.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 {
    align-items: center;
    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 .suggested-update {
    margin-top: 10px;
}
.ideditor .issue-info .issue-reference {
    margin-bottom: 10px;
}
.ideditor .issue-info .tagDiff-table {
    min-width: 60%;
    width: unset;
    border: 1px solid #ccc;
}
.ideditor .issue-info .tagDiff-row {
    border: 1px solid #ccc;
}
.ideditor .issue-info .tagDiff-cell {
    padding: 2px 10px;
    font-family: monospace;
    font-size: 10px;
    border: 1px solid #ccc;
}
.ideditor .issue-info .tagDiff-cell-add {
    background: #dfd;
}
.ideditor .issue-info .tagDiff-cell-remove {
    background: #fdd;
}
.ideditor .issue-info .tagDiff-message {
    padding: 2px 10px;
    font-family: monospace;
    font-size: 10px;
}


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

.ideditor .display-control h5 {
    padding-bottom: 0;
    padding-top: 10px;
}

.ideditor .display-control h5 span {
    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 #ccc;
    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: #eee;
    border: 1px solid #ccc;
    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: #fff;
    border: 1px solid #ccc;
    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 #ff7878;
    border-radius: 2px;
    background: #ffb;
}

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

.ideditor .background-pane .nudge.left::after {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #222;
}

.ideditor .background-pane .nudge.top::after {
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 5px solid #222;
}

.ideditor .background-pane .nudge.bottom::after {
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid #222;
}


/* Side Panes - Background / Map Data / Help
------------------------------------------------------- */
.ideditor .map-panes {
  flex: 0 1 auto;
  position: absolute;
  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 #ccc;
  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;
}


/* Help
------------------------------------------------------- */

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

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

.ideditor .help-pane .toc {
  width: 100%;
  max-width: 200px;
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
  padding-left: 5px;
}
.ideditor[dir='rtl'] .help-pane .toc {
  float: left;
  margin-left: unset;
  margin-right: 20px;
  padding-left: unset;
  padding-right: 5px;
}

.ideditor .help-pane .toc li a,
.ideditor .help-pane .nav a {
  display: block;
  border: 1px solid #ccc;
  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: #ececec;
}
@media (hover: hover) {
  .ideditor .help-pane .toc li a:hover,
  .ideditor .help-pane .nav a:hover {
    background: #ececec;
  }
}

.ideditor .help-pane .toc li.selected {
  background: #e8ebff;
}

.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 #ccc;
  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 #ccc;
  border-radius: 4px;
}

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

.ideditor .help-pane .nav {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-bottom: 30px;
  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: #ececec;
}
.ideditor .inspector-hover .preset-list-button,
.ideditor .inspector-hover .tag-row input {
    background: #f6f6f6;
}

.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: #666;
}

.ideditor .inspector-hover .form-field-input-multicombo .chip {
    background: #eee;
    border: 1px solid #ccc;
}

/* scrollbars only when necessary */
/*.inspector-hover div {*/
/*  overflow-x: hidden;*/
/*  overflow-y: auto;*/
/*}*/

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

/* hide but preserve in layout */
.ideditor .inspector-hover .combobox-caret,
.ideditor .inspector-hover .header button,
.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 .tag-row button {
  opacity: 0;
}

/* 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: #ccc !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 a.hide-toggle {
    opacity: 1;
    background-color: transparent;
    color: #666;
    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 #ccc;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}
.ideditor .inspector-hover .form-field-input-radio .placeholder {
    opacity: 1;
    color: #666;
    padding: 5px 10px;
    width: 100%;
    height: auto;
    border: 0;
}
.ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
    border: 0;
}


/* Map
------------------------------------------------------- */
/* `main-map` is a container that takes up all the space where the map will go. */
.ideditor .main-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;

  display: grid;
  place-content: center;
  place-items: center;
  grid-template: 1fr / 1fr;

  background: #000;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  z-index: 0;
}
.ideditor .main-map * {
  touch-action: none;
}

/* `supersurface` contains temporary transforms from the user interacting with the map between full redraws */
.ideditor .supersurface {
  display: grid;
  grid-template: 1fr / 1fr;
  place-content: center;
  place-items: center;
/* for testing */
/*  background-image: url(img/test-pattern.png);*/
/*  background-size:     cover;*/
/*  background-repeat:   no-repeat;*/
/*  background-position: center center;*/
}

.ideditor .main-map > *,
.ideditor .supersurface > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  height: 100%;
  width: 100%;
}

/*`surface` is the actual map canvas, managed by Pixi. */
.ideditor .surface {
  z-index: 1;
}

/* `overlay` is a div that floats over the map but stays transformed with it.
 *  (this is where we draw the edit menu)
 */
.ideditor .overlay {
  z-index: 2;
  pointer-events: none;
}

.ideditor .overlay * {
  pointer-events: auto;
}


/* 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: 6px;
  box-shadow: rgb(0 0 0 / 42%) 0px 0px 0px 3px;
}
.ideditor[dir='ltr'] .map-in-map {
  left: 10px;
}
.ideditor[dir='rtl'] .map-in-map {
  right: 10px;
}


/* 3D Map
------------------------------------------------------- */
.ideditor #map3d_container {
  position: absolute;
  overflow: hidden;
  width: 300px;
  height: 300px;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin-right: 30px;
  border: #aaa 1px solid;
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 42%) 0px 0px 0px 3px;
}


/* Edit blocks
------------------------------------------------------- */
.ideditor .explanation-item {
  padding:  10px;
}


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

.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, 85, 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 Cards
------------------------------------------------------- */
.ideditor .info-cards {
  display: flex;
  flex-flow: row wrap-reverse;
  justify-content: flex-end;

  width: 100%;
  z-index: 10;
  -ms-user-select: element;
  pointer-events: none;
  overflow: hidden;
}

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

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

.ideditor .card-container {
  display: flex;
  flex-flow: column nowrap;
  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: 240px;
  pointer-events: auto;
}

.ideditor .card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 5px 10px;
  border-radius: 4px 4px 0 0;
}

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

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

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

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

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

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


/* Map Footer
------------------------------------------------------- */
/* The very bottom "status" row */
/* Will either display .flash-wrap or .map-footer-wrap */
.ideditor .map-footer {
  display: flex;
  flex: 0 0 2.5em;
  flex-flow: column nowrap;

  height: 2.5em;
  position: relative;
}

.ideditor .map-footer-wrap,
.ideditor .flash-wrap {
  display: flex;
  flex: 1 1 0px;
  flex-flow: row nowrap;
  justify-content: space-between;

  position: absolute;
  right: 0;
  left: 0;
  height: 100%;
}

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

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


/* Attribution
------------------------------------------------------- */
.ideditor .attribution-wrap {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-end;

  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  z-index: 0;
  pointer-events: none;
}

.ideditor .attribution-section {
  display: flex;
  flex-flow: column nowrap;

  pointer-events: auto;
  color: #ccc;
  font-size: 10px;
}

.ideditor .attribution-section.overlays {
  text-align: end;
}

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

.ideditor .attribution-image {
  height: 20px;
  vertical-align: middle;
  border-radius: 3px;
}
.ideditor .attribution-text {
  margin: 0 3px;
}


/* API Status bar
------------------------------------------------------- */
.ideditor .api-status {
  flex: 0 0 0px;

  text-align: right;
  padding: 1px 10px;
  color: #eee;
  background: rgba(170, 34, 34, 0.9);
  z-index: 101;
}
.ideditor[dir='rtl'] .api-status {
  text-align: left;
}
.ideditor .api-status:empty {
  display: none;
}

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

/* Map 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: rgba(40,40,40,0.7);
}

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

/* Map Footer - Scale bar
------------------------------------------------------- */
.ideditor .scale-wrap {
  display: flex;
  flex: 0 0 250px;
  flex-flow: row nowrap;
  align-items: center;

  width: 250px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ideditor .scale-wrap .scale {
  display: flex;
  flex: 0 0 auto;
  cursor: pointer;
  margin: 0 10px;
}

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

.ideditor .scale-wrap .scale-text {
  display: flex;
  flex: 1 0 0px;
}


/* Map Footer - Info (About, Source Switcher, etc)
------------------------------------------------------- */
.ideditor .map-footer-info {
  display: flex;
  flex: 1 1 0px;
  flex-flow: row nowrap;

  height: 100%;
  overflow: hidden;
  justify-content: flex-end;
}

.ideditor .map-footer-info > div {
  display: flex;
  align-items: center;

  height: 100%;
  white-space: nowrap;
  padding: 5px;
}
.ideditor .map-footer-info > div:empty {
  display: none;
}
.ideditor .map-footer-info > div:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.5);
}
.ideditor[dir='rtl'] .map-footer-info > div:not(:last-child) {
  border-right: unset;
  border-left: 1px solid rgba(255,255,255,.5);
}

.ideditor .contributors span {
  display: inline-flex;
}
.ideditor .contributors a {
  display: inline-block;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}
.ideditor .contributors a.user-link:not(:last-of-type):after {
  content: ', ';
}


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

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

.ideditor .filter-info a.chip {
  background: #1e90ff;
}

.ideditor .issues-info a.chip.error-count {
  background: #d32232;
}
.ideditor .issues-info a.chip.warning-count {
  background: #df8500;
}
.ideditor .issues-info a.chip.suggestion-count {
  background: #00a7a7;
}
.ideditor .issues-info a.chip.resolved-count {
  background: #15911e;
}
.ideditor .issues-info > *:not(:last-child),
.ideditor .project-links > *:not(:last-child) {
  margin-right: 5px;
}
.ideditor[dir='rtl'] .issues-info > *:not(:last-child),
.ideditor[dir='rtl'] .project-links > *:not(:last-child) {
  margin-right: unset;
  margin-left: 5px;
}

.ideditor .project-links .icon.bugnub {
  color: #ff26db;
}


/* 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;
    color: #fff;
    flex: 0 0 auto;
    margin-bottom: 2px;
}

/* 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;
}
.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 #ccc;
}
.ideditor .modal-section p:not(:last-child) {
    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: #7092ff;
    border-bottom: 1px solid #ccc;
    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,
.ideditor .modal-actions > :nth-child(2) {
    border-right: 1px solid #ccc;
}

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

/* Restore Modal
------------------------------------------------------- */
.ideditor .modal-actions .logo-restore {
    color: #7092ff;
}
.ideditor .modal-actions .logo-reset {
    color: #e06c5e;
}

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

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

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

.ideditor .save-communityLinks {
    border-top: 1px solid #ccc;
}

.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 .summary-view-on-osm,
.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 a.hide-toggle,
.ideditor .community-detail a:visited.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: #efefef;
    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: #7092ff;
}


/* 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 .nav-bar {
  padding-bottom: 5px;
  text-align: center;
}

.ideditor .modal-shortcuts a.nav-item {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
  color: #666;
  font-size: 16px;
  font-weight: bold;
}
.ideditor .modal-shortcuts a.nav-item.active {
  color: #7092ff;
  border-bottom: 2px solid;
}
.ideditor .modal-shortcuts a.nav-item:focus,
.ideditor .modal-shortcuts a.nav-item:active {
  color: #597be7;
  background-color: #efefef;
}
@media (hover: hover) {
  .ideditor .modal-shortcuts a.nav-item:hover {
    color: #597be7;
    background-color: #efefef;
  }
}

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

.ideditor .shortcut-column {
  width: auto;
  height: 0;
  margin-bottom: 20px;
}

.ideditor .shortcut-row {
}

.ideditor .shortcut-row > td {
  padding-bottom: 3px;
}

.ideditor .shortcut-row > .shortcut-section {
  padding: 15px 0 5px 0;
}

.ideditor .shortcut-keys {
  padding: 0 10px;
  color: #767676;
  text-align: right;
  white-space: nowrap;
}
.ideditor[dir='rtl'] .shortcut-keys {
  text-align: left;
}

.ideditor .shortcut-keys kbd {
  color: #555;
  margin: unset;
}
.ideditor .shortcut-separator {
  margin: 0 3px;
}

/* Settings Modals (custom background, custom data)
------------------------------------------------------- */
.ideditor .settings-modal textarea {
  height: 70px;
  width: 100%;
}

.ideditor .modal-section .instructions-template p {
  padding-bottom: 0px;
}

.ideditor .modal-section .instructions-template {
  margin-bottom: 20px;
}
.ideditor .modal-section .instructions-template li {
  list-style-type: disc;
  list-style-position: inside;
}

.ideditor .settings-custom-data .field-file {
  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: #ffb;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
}

.ideditor .note-save .field-warning:empty,
.ideditor .field-warning:empty {
    display: none;
}

.ideditor .field-warning,
.ideditor .changeset-info,
.ideditor .request-review,
.ideditor .commit-info {
    margin-bottom: 10px;
}

.ideditor .request-review label {
    cursor: pointer;
}

.ideditor .changeset-list {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    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 #ccc;
}
.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: #ffffbb;
  border-bottom: 1px solid #ccc;
}

.ideditor .conflicts-buttons {
  padding: 20px;
}

.ideditor button.conflicts-button {
  float: left;
}

.ideditor .conflict-container {
  border-bottom: 1px solid #ccc;
}

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


/* Tooltips
------------------------------------------------------- */
.ideditor .popover {
  position: absolute;
  display: none;
}
.ideditor .tooltip {
  color: #333;
  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 .tooltip .popover-inner {
  display: flex;
  flex-flow: column nowrap;

  border-radius: 4px;
/*  max-width: 200px;*/
/*  min-width: 80px;*/
  max-width: 240px;
  min-width: 100px;
  padding: 10px;
  font-weight: normal;
  background-color: #fff;
}

.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: #fff;
  border-width: 5px 5px 0;
}
.ideditor .popover.right .popover-arrow {
  top: 50%;
  left: -5px;
  margin-top: -5px;
  border-right-color: #fff;
  border-width: 5px 5px 5px 0;
}
.ideditor .popover.left .popover-arrow {
  top: 50%;
  right: -5px;
  margin-top: -5px;
  border-left-color: #fff;
  border-width: 5px 0 5px 5px;
}
.ideditor .popover.bottom .popover-arrow {
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #fff;
  border-width: 0 5px 5px;
}
.ideditor .popover:not(.arrowed) .popover-arrow {
  display: none;
}

.ideditor .tooltip-heading {
  font-weight: bold;
  background: #f6f6f6;
  padding: 10px;
  margin: -10px -10px 10px -10px;
  border-radius: 3px 3px 0 0;
  font-size: 14px;
}

.ideditor .tooltip-keyhint {
  padding: 10px;
  margin: 10px -10px -10px -10px;
}
.ideditor .tooltip-keyhint .tooltip-keys {
  padding: 0 3px;
  white-space: nowrap;
}
.ideditor .tooltip-keys kbd.shortcut {
  font-size: 10px;
  font-weight: bold;
}

/* dark tooltips */
.ideditor .tooltip.dark.top .popover-arrow,
.ideditor .map-pane .tooltip.top .popover-arrow,
.ideditor .sidebar .tooltip.top .popover-arrow {
  border-top-color: #000;
}
.ideditor .tooltip.dark.bottom .popover-arrow,
.ideditor .map-pane .tooltip.bottom .popover-arrow,
.ideditor .sidebar .tooltip.bottom .popover-arrow {
  border-bottom-color: #000;
}
.ideditor .tooltip.dark.left .popover-arrow,
.ideditor .map-pane .tooltip.left .popover-arrow,
.ideditor .sidebar .tooltip.left .popover-arrow {
  border-left-color: #000;
}
.ideditor .tooltip.dark.right .popover-arrow,
.ideditor .map-pane .tooltip.right .popover-arrow,
.ideditor .sidebar .tooltip.right .popover-arrow {
  border-right-color: #000;
}
.ideditor .tooltip.dark .popover-inner,
.ideditor .tooltip.dark .tooltip-heading,
.ideditor .map-pane .popover-inner,
.ideditor .map-pane .tooltip-heading,
.ideditor .sidebar .popover-inner,
.ideditor .sidebar .tooltip-heading {
  background: #000;
  color: #ccc;
}
.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 {
  left: auto !important;
  right: 5px !important;
}
.ideditor[dir='rtl'] li:first-of-type .badge .tooltip {
  left: 5px !important;
  right: auto !important;
}
.ideditor li:first-of-type .badge .tooltip .popover-arrow {
  right: 15px !important;
  left: auto !important;
}
.ideditor[dir='rtl'] li:first-of-type .badge .tooltip .popover-arrow {
  left: 15px !important;
  right: auto !important;
}


/* Contextual Edit Menu
------------------------------------------------------- */
.ideditor .edit-menu {
    position: absolute;
    z-index: 999;
    display: flex;
    flex-direction: column;
    background: #fff;
    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;
}


/* MapRoulette Context Menu
------------------------------------------------------- */
.ideditor .maproulette-menu {
    position: absolute;
    z-index: 1000; /* Ensure the menu is above other elements */
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ccc; /* Add a border for visibility */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
    /* padding is set in maproulette_menu.js */
}

.ideditor .maproulette-menu-item {
    display: flex;
    align-items: center;
    border-radius: 0;
    padding: 0 12px;
    /* height is set in maproulette_menu.js */
    cursor: pointer;
    transition: background-color 0.2s;
}

.ideditor .maproulette-menu-item:hover {
    background-color: #f0f0f0; /* Highlight on hover */
}

.ideditor .maproulette-menu-item .label {
    max-width: 120px;
    text-align: initial;
    line-height: 1.1em;
    font-weight: bold;
}

.ideditor[dir='ltr'] .maproulette-menu-item .label {
    margin-left: 8px;
}

.ideditor[dir='rtl'] .maproulette-menu-item .label {
    margin-right: 8px;
}


/* Scrollbars
 ----------------------------------------------------- */
.ideditor ::-webkit-scrollbar {
  height: 20px;
  overflow: visible;
  width: 10px;
}

.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;
}
.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 only */
@-moz-document url-prefix() {
  .ideditor * {
    scrollbar-width: thin;
  }
}


/* Intro walkthrough
 ----------------------------------------------------- */
.ideditor .curtain {
  position: absolute;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.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: #7092ff; }
  to    { background: #c6d4ff; }
}

.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;
  pointer-events: none;
}
.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 .instruction {
  display: block;
  font-weight: bold;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  margin-left: -20px;
  margin-right: -20px;
  padding: 10px 20px 0 20px;
  pointer-events: auto;
}
.ideditor .curtain-tooltip .popover-inner .instruction:only-child {
  border: 0;
  padding: 0;
  margin: 0;
}

.ideditor .curtain-tooltip .popover-inner .button-section {
  display: flex;
  flex: 1 1 0px;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  font-weight: bold;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  margin-left: -20px;
  margin-right: -20px;
  padding: 10px 20px 0 20px;
  pointer-events: auto;
}

.ideditor .curtain-tooltip .popover-inner a {
  pointer-events: auto;
}

.ideditor .curtain-tooltip .popover-inner .button-section button {
  width: 50%;
}

.ideditor .curtain-tooltip .popover-inner .icon.pre-text {
  display: inline-block;
  vertical-align: text-top;
  margin-right: 0;
  margin-left: 0;
}

.ideditor .curtain-tooltip .popover-inner .icon.success {
  display: inline-block;
  vertical-align: text-top;
  color: #55bb00;
  margin: 0 5px;
}

.ideditor .curtain-tooltip.intro-points-describe,
.ideditor .curtain-tooltip.intro-lines-name_road {
  top: 133px !important;
}

.ideditor .tooltip-illustration {
  height: 80px;
  width: 200px;
  margin-top: -20px;
}

.ideditor .huge-modal-button {
  width: 100%;
  padding: 20px;
}

.ideditor .huge-modal-button .illustration {
  height: 100px;
  width: 100px;
  color: #7092ff;
}

/* overrides that will only be active during the walkthrough */
/* see Rapid#1364 */
.ideditor.inIntro .wrap-form-field-playground_theme,
.ideditor.inIntro .wrap-form-field-access_simple,
.ideditor.inIntro .wrap-form-field-min_age,
.ideditor.inIntro .wrap-form-field-max_age {
  display: none;
}


/* Nine Slice - A grid with resize handles around it:

   top-left |   top-middle  | top-right
------------+---------------+------------
middle-left | middle-middle | middle-right
------------+---------------+------------
bottom-left | bottom-middle | bottom-right

 ------------------------------------------------------------ */
.ideditor .nineslice {
  display: grid;
  grid-template-columns: 25px 1fr 25px;
  grid-template-rows: 25px 1fr 25px;
}

.ideditor .nineslice .top-left {
  grid-row: 1;
  grid-column: 1;
}
.ideditor .nineslice .top-middle {
  grid-row: 1;
  grid-column: 2;
}
.ideditor .nineslice .top-right {
  grid-row: 1;
  grid-column: 3;
}
.ideditor .nineslice .middle-left {
  grid-row: 2;
  grid-column: 1;
}
.ideditor .nineslice .middle-middle {
  grid-row: 2;
  grid-column: 2;
}
.ideditor .nineslice .middle-right {
  grid-row: 2;
  grid-column: 3;
}
.ideditor .nineslice .bottom-left {
  grid-row: 3;
  grid-column: 1;
}
.ideditor .nineslice .bottom-middle {
  grid-row: 3;
  grid-column: 2;
}
.ideditor .nineslice .bottom-right {
  grid-row: 3;
  grid-column: 3;
}


/* Photo Viewer
 ----------------------------------------------------- */
.ideditor .photoviewer {
  flex: 0 0 auto;

  position: absolute;
  left: 0;
  bottom: 0;
  margin: 5px;
  width: 500px;
  height: 370px;
}
.ideditor[dir='rtl'] .photoviewer {
  left: unset;
  right: 0;
}

.ideditor .photoviewer button.thumb-hide {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 0;
  padding: 5px;
  z-index: 50;
}
.ideditor[dir='rtl'] .photoviewer button.thumb-hide {
  right: unset;
  left: 5px;
}


/*
  Wrapper for a viewer
  absolute position within the middle-middle section of the nineframe,
  inset reserves space around it to allow the user plenty of space to resize.
 */
.ideditor .photo-wrapper {
  position: absolute;
  inset: 10px;
  outline: 5px solid #fff;
  overflow: hidden;
}

.ideditor .photo-footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 10;
}

.ideditor .photo-options {
  display: flex;
  flex: 0 0 auto;
  padding: 2px 5px;
}

.ideditor .photo-attribution {
  display: flex;
  flex: 0 0 auto;
  padding: 2px 5px;
}

.ideditor .photo-attribution a,
.ideditor .photo-attribution span {
  padding: 0 2px;
}

.ideditor .photo-options label {
  cursor: pointer;
}
.ideditor .photo-options span {
  margin: 0 5px;
}
.ideditor .photo-options input[type="checkbox"] {
  margin: 0 5px;
  vertical-align: text-bottom;
}


/* photo-controls (step forward, back, rotate) */
.ideditor .photo-controls-wrap {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  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;
  background: rgba(0,0,0,0.65);
  color: #ddd;
  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;
  }
}
.ideditor .photo-controls .icon {
  width: 13px;
  height: 13px;
  vertical-align: text-top;
}


/* Streetside Viewer (pannellum) */
.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 .pnlm-ui {
  margin: 10px;
}
.ideditor .ms-wrapper .pnlm-compass.pnlm-control {
  width: 26px;
  height: 26px;
  left: 4px;
  top: 60px;
  background-size: contain;
  background-repeat: no-repeat no-repeat;
}


/* Mapillary viewer */
.ideditor .mapillary-viewer .mapillary-dom {
  bottom: 15px;  /* raise up slightly to leave space for photo-footer */
}

.ideditor .mly-wrapper .mapillary-bearing-north {
  border-bottom-color: white;
  border-bottom-width: 4px;
  border-left-color: rgba(0,0,0,0);
  border-left-width: 4px;
  border-right-color: rgba(0,0,0,0);
  border-right-width: 4px;
  border-right-style: solid;
  border-left-style: solid;
  border-bottom-style: solid;
}

.ideditor .mly-wrapper .mapillary-tag-symbol {
  font-size: 10px;
  background-color: rgba(0,0,0,0.4);
  margin-top: -30px;
}


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

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

.ideditor .osc-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* possibly existed before and was removed? */
.ideditor svg.icon.icon-30 {
  width: 30px;
  height: 30px;
}

.ideditor svg.logo-rapid,
.ideditor .icon.rapid {
  fill: #333;
  color: #da26d3;
}

.ideditor svg.logo-rapid.dark,
.ideditor .dark .icon.rapid,
.ideditor .icon.rapid.dark {
  fill: #eee;
  color: #da26d3;
}

/* beta badge */
.ideditor .beta {
  display: inline-block;
  text-align: center;
  font-weight: bold;
  color: #eee;
  margin: 0 10px;
  width: 1.8em;
  height: 1.8em;
  border: 1px solid #909;
  border-radius: 5px;
  background: rgb(203,16,237);
  background: linear-gradient(0deg, rgba(108,1,167,1) 6%, rgba(203,16,237,1) 50%, rgb(229, 140, 253) 90%, rgb(201, 42, 251) 100%);
  cursor: default;
}
.ideditor .beta:before {
  content: '\03b2';  /* β */
}


/* Toolbar buttons */
.ideditor button.rapid-features svg.logo-rapid {
  width: 60px;
  height: 16px;
}
.ideditor .map-toolbar.narrow button.rapid-features svg.logo-rapid {
  width: 22px;
  height: 22px;
}

.ideditor button.rapid-poweruser-features .beta {
  font-size: 1.2em;
  margin: 0;
}
.ideditor button.rapid-features.layer-off use {
  fill: rgba(0,0,0,.4);
  color: rgba(0,0,0,.4);
}

/* rapid logo with wordmark embedded in text */
.ideditor .icon.pre-text.rapid {
  vertical-align: text-top;
  margin-right: 0;
  margin-left: 0;
  display: inline-block;
  width: 60px;
  fill: #333;
  color: #da26d3;
}


/* UI Buttons */
/* There are a lot of rules here to cover all permutations of primary, secondary, disabled */
/* We can not just add an `opacity: 0.5` .disabled rule because that affects children too including tooltips */
.ideditor .rapid-inspector button,
.ideditor .modal.rapid-modal button {
  border: 0;
  background: #c000c0;  /* rapid magenta is just too bold for giant buttons: #da26d3;*/
  color: #eee;
  font-size: 16px;
  border-radius: 30px;
  height: 3rem;
}
.ideditor .rapid-inspector button svg,
.ideditor .modal.rapid-modal button svg {
  color: #eee;
  fill: #da26d3;
}
.ideditor .rapid-inspector button:focus,
.ideditor .rapid-inspector button:hover,
.ideditor .modal.rapid-modal button:focus,
.ideditor .modal.rapid-modal button:hover {
  background: #c6d;
}
.ideditor .rapid-inspector button:focus svg,
.ideditor .rapid-inspector button:hover svg,
.ideditor .modal.rapid-modal button:focus svg,
.ideditor .modal.rapid-modal button:hover svg {
  fill: #c6d;
}

.ideditor .rapid-inspector button.disabled,
.ideditor .modal.rapid-modal button.disabled {
  background: #da26d388;
  color: #eee8;
}
.ideditor .rapid-inspector button.disabled svg,
.ideditor .modal.rapid-modal button.disabled svg {
  color: #eee8;
  fill: #da26d388;
}
.ideditor .rapid-inspector button.disabled:focus,
.ideditor .rapid-inspector button.disabled:hover,
.ideditor .modal.rapid-modal button.disabled:focus,
.ideditor .modal.rapid-modal button.disabled:hover {
  background: #c6d8;
}
.ideditor .rapid-inspector button.disabled:focus svg,
.ideditor .rapid-inspector button.disabled:hover svg,
.ideditor .modal.rapid-modal button.disabled:focus svg,
.ideditor .modal.rapid-modal button.disabled:hover svg {
  fill: #c6d8;
}

.ideditor .rapid-inspector button.secondary,
.ideditor .modal.rapid-modal button.secondary {
  border: 0;
  background: #666;
  color: #eee;
}
.ideditor .rapid-inspector button.secondary svg,
.ideditor .modal.rapid-modal button.secondary svg {
  color: #eee;
  fill: #666;
}
.ideditor .rapid-inspector button.secondary:focus,
.ideditor .rapid-inspector button.secondary:hover,
.ideditor .modal.rapid-modal button.secondary:focus,
.ideditor .modal.rapid-modal button.secondary:hover {
  background: #888;
}
.ideditor .rapid-inspector button.secondary:focus svg,
.ideditor .rapid-inspector button.secondary:hover svg,
.ideditor .modal.rapid-modal button.secondary:focus svg,
.ideditor .modal.rapid-modal button.secondary:hover svg {
  fill: #888;
}

.ideditor .rapid-inspector button.secondary.disabled,
.ideditor .modal.rapid-modal button.secondary.disabled {
  background: #6668;
  color: #eee8;
}
.ideditor .rapid-inspector button.secondary.disabled svg,
.ideditor .modal.rapid-modal button.secondary.disabled svg {
  color: #eee8;
  fill: #6668;
}
.ideditor .rapid-inspector button.secondary.disabled:focus,
.ideditor .rapid-inspector button.secondary.disabled:hover,
.ideditor .modal.rapid-modal button.secondary.disabled:focus,
.ideditor .modal.rapid-modal button.secondary.disabled:hover {
  background: #8888;
}
.ideditor .rapid-inspector button.secondary.disabled:focus svg,
.ideditor .rapid-inspector button.secondary.disabled:hover svg,
.ideditor .modal.rapid-modal button.secondary.disabled:focus svg,
.ideditor .modal.rapid-modal button.secondary.disabled:hover svg {
  fill: #8888;
}

.ideditor .modal.rapid-modal button svg.logo-rapid,
.ideditor .modal.rapid-modal button svg.logo-rapid:focus,
.ideditor .modal.rapid-modal button svg.logo-rapid:hover {
  color: #eee;
  fill: #eee;
}
.ideditor .modal.rapid-modal button.disabled svg.logo-rapid,
.ideditor .modal.rapid-modal button.disabled svg.logo-rapid:focus,
.ideditor .modal.rapid-modal button.disabled svg.logo-rapid:hover {
  color: #eee8;
  fill: #eee8;
}


/* Sidebar - Rapid/Overture Inspectors */
.ideditor .rapid-inspector,
.ideditor .overture-inspector {
  display: flex;
  flex: 1 1 0px;
  flex-flow: column nowrap;
}

.ideditor .rapid-inspector .header {
  flex: 0 0 0px;
  background: #f6f6f6;
  color: #333;
  border-bottom: 1px solid #aaaa;
}
.ideditor .rapid-inspector .header h3 {
  display: flex;
}
.ideditor .rapid-inspector .header svg.logo-rapid {
  height: 35px;
}

.ideditor button.rapid-inspector-close,
.ideditor button.overture-inspector-close {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border-radius: 0px;
  height: 100%;
}
.ideditor[dir='rtl'] button.rapid-inspector-close,
.ideditor[dir='rtl'] button.overture-inspector-close {
  right: unset;
  left: 0;
}
.ideditor button.rapid-inspector-close svg,
.ideditor button.overture-inspector-close svg {
  color: #da26d3;
}
.ideditor button.rapid-inspector-close svg,
.ideditor button.overture-inspector-close svg {
  color: #000000;
}
.ideditor button.rapid-inspector-close:hover,
.ideditor button.overture-inspector-close:hover {
  background: #8885;
}

.ideditor .rapid-inspector .tooltip .popover-inner {
  border: 1px solid #aaaa;
}

.ideditor .rapid-inspector .body,
.ideditor .overture-inspector .body {
  display: flex;
  flex: 1 1 0px;
  flex-flow: column nowrap;

  background: #f6f6f6;
  color: #333;
  padding: 20px;
}

.ideditor .rapid-inspector .body p,
.ideditor .overture-inspector .body p {
  padding: 20px 0;
}

.ideditor .rapid-inspector .feature-info,
.ideditor .overture-inspector .feature-info {
  display: flex;
  padding: 5px 10px;
  border-radius: 5px 5px 0 0;
  border: 1px solid #333;
}

.ideditor .rapid-inspector .feature-info .dataset-label,
.ideditor .overture-inspector .feature-info .dataset-label  {
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}
.ideditor .rapid-inspector .feature-info .dataset-beta {
  font-size: 13px;
}

.ideditor .rapid-inspector .tag-info,
.ideditor .overture-inspector .property-info {
  padding: 7px;
  background: #444;
  color: #ddd;
  border-radius: 0 0 5px 5px;
  border: 1px transparent;
  overflow-x: auto;
}
.ideditor .overture-inspector .property-info {
  padding: 0px 5px 15px 5px;
}
.ideditor .rapid-inspector .tag-bag {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}
.ideditor .overture-inspector .property-heading {
  margin-right: 5px;
  padding-left: 3px;
  margin-top: 5px;
  font-size: larger;
}
.ideditor .rapid-inspector .tag-heading {
  padding-left: 3px;
}

.ideditor .rapid-inspector .tag-info .tag-entry {
  display: flex;
  flex: 0 1 auto;

  border: 1px solid #aaaa;
  border-radius: 5px;
  font-size: smaller;
  font-weight: 300;
  margin: 0 3px;
}

.ideditor .overture-inspector .property-info .property-entry {
  display: flex;
  flex-flow: row wrap;
  border-radius: 5px;
  font-size: smaller;
  font-weight: 300;
  margin: 0 3px;
}

.ideditor .rapid-inspector .tag-key,
.ideditor .rapid-inspector .tag-value,
.ideditor .overture-inspector .property-key {
  flex: 0 1 auto;
  padding: 0px 3px;
}

.ideditor .overture-inspector .property-value {
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 0 3px;
}

.ideditor .rapid-inspector .tag-key,
.ideditor .overture-inspector .property-key {
  font-weight: bold;
  font-size: unset;
}

.ideditor .rapid-inspector-choices {
  display: flex;
  flex: 0 0 0px;
  flex-flow: column nowrap;
  text-align: center;

  background: #ddd;
  border-radius: 5px;
}

.ideditor .rapid-inspector-choice {
  display: flex;
  flex: 0 0 0px;
  flex-flow: column nowrap;
  margin: 10px;
}

.ideditor .rapid-inspector-notice {
    font-style: italic;
}

.ideditor .rapid-inspector-choice .choice-wrap {
  display: flex;
  flex: 1 0 50px;
  flex-flow: row nowrap;
}

.ideditor .rapid-inspector-choice .choice-wrap > button {
  display: flex;
  flex: 1 1 0px;

  border: 0;
  align-items: center;
}

.ideditor .rapid-inspector-choice .choice-wrap > button.choice-button {
  border-right: 1px solid #333a;
  border-radius: 25px 0 0 25px;
}
.ideditor[dir='rtl'] .rapid-inspector-choice .choice-wrap > button.choice-button {
  border-right: unset;
  border-left: 1px solid #333a;
  border-radius: 0 25px 25px 0;
}
.ideditor .rapid-inspector-choice .choice-wrap > button.tag-reference-button {
  flex: 0 0 40px;
  border-radius: 0 25px 25px 0;
}
.ideditor[dir='rtl'] .rapid-inspector-choice .choice-wrap > button.tag-reference-button {
  border-radius: 25px 0 0 25px;
}

.ideditor .rapid-inspector-choice .choice-button .choice-icon {
  width: 30px;
  height: 30px;
  margin: 0 15px;
}
.ideditor .rapid-inspector-choice .tag-reference-button .icon {
  margin: 0 5px;
}
.ideditor .rapid-inspector-choice .tag-reference-body {
  padding: 15px;
}

.ideditor .overture-inspector img.wordmark-overture {
  width: 100%;
  max-width: 225px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* For things that should stack in rows */
.ideditor .rapid-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Rapid modal dialogs */
.ideditor .modal.rapid-modal {
  top: 80px;
  min-width: 650px;
  max-width: 650px;
  max-height: 85%;
  background: rgba(25, 25, 25, 0.9);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  color: #ddd;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  border: 1px solid #888a;
}

.ideditor .modal.rapid-modal h1,
.ideditor .modal.rapid-modal h2,
.ideditor .modal.rapid-modal h3,
.ideditor .modal.rapid-modal h4,
.ideditor .modal.rapid-modal h5 {
  color: #fff;
}

.ideditor .modal.rapid-modal .modal-section.buttons {
  flex-flow: column;
  padding: 20px;
  width: 100%;
}

.ideditor .modal.rapid-modal .modal-section {
  border-bottom: 1px solid #aaaa;
}
.ideditor .modal.rapid-modal .modal-section:last-child {
  border-bottom: 0;
}

.ideditor .modal.rapid-modal .modal-section .logo-rapid {
  fill: white;
  margin: 4px 9px 0 9px;
}
.ideditor .modal.rapid-modal p {
  font-size: 14px;
}
.ideditor .modal.rapid-modal button.close {
  position: absolute;
  right: 0;
  top: 0;
  background: transparent;
  height: 40px;
  border-radius: 0;
}
.ideditor[dir='rtl'] .modal.rapid-modal button.close {
   right: unset;
   left: 0;
 }

.ideditor .modal.rapid-modal button.close svg {
  color: #da26d3;
}
.ideditor .modal.rapid-modal button.close:hover {
  background: #8885;
}

/* Splash, Whats New, Login to OSM */
.ideditor .modal.rapid-modal .modal-section .icon.pre-text.rapid {
  color: #da26d3;
  fill: #fff;
  vertical-align: middle;
}
.ideditor .modal.rapid-modal .modal-section h1 .icon.pre-text.rapid,
.ideditor .modal.rapid-modal .modal-section h2 .icon.pre-text.rapid {
  height: 27px;
  width: 100px;
  margin: 0 2px;
}
.ideditor .modal.rapid-modal .modal-section h3 .icon.pre-text.rapid,
.ideditor .modal.rapid-modal .modal-section h4 .icon.pre-text.rapid,
.ideditor .modal.rapid-modal .modal-section h5 .icon.pre-text.rapid,
.ideditor .modal.rapid-modal .modal-section p .icon.pre-text.rapid {
  height: 20px;
  width: 60px;
  margin: 0 2px;
}
.ideditor .modal.rapid-modal .modal-actions > button {
  width: 100%;
  margin: 20px;
}
.ideditor .modal.rapid-modal.modal-splash .modal-actions > button {
  height: unset;  /* big buttons */
  padding: 10px;
}
.ideditor .modal.rapid-modal.modal-whatsnew .modal-actions > button {
  height: 50px;
  width: 25%;
  min-height: unset;
}

.ideditor .modal.rapid-modal.modal-whatsnew .whatsnew-images {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.ideditor .modal.rapid-modal.modal-whatsnew .whatsnew-image {
  max-height: 350px;
  align-items: center;
}

.ideditor .modal.rapid-modal.modal-whatsnew .whatsnew-dontshow {
  margin-top: 20px;
  font-size: 16px;
}
.ideditor .modal.rapid-modal.modal-whatsnew .rapid-checkbox-label {
  width: 100%;
}
.ideditor .modal.rapid-modal.modal-whatsnew .rapid-checkbox-text {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  margin: 0px 20px;
}
.ideditor .modal.rapid-modal.modal-whatsnew .rapid-checkbox-custom {
  display: flex;
  flex: 0 0 36px;
}


/* dark scrollbars */
.ideditor .modal.rapid-modal ::-webkit-scrollbar {
  width: 8px;
}
.ideditor .modal.rapid-modal ::-webkit-scrollbar-track {
  background: #444;
}
.ideditor .modal.rapid-modal ::-webkit-scrollbar-thumb {
  background-color: #da26d3;
  border-radius: 6px;
  border: 0;
}
.ideditor .modal.rapid-modal ::-webkit-scrollbar-thumb:hover {
  background-color: #c6d;
  cursor: pointer;
}


/* Toggle Features */
.ideditor .modal.rapid-modal .rapid-checkbox {
  font-size: 24px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 10px;
  width: 100%;
}
.ideditor .modal.rapid-modal .rapid-datasets-container > .rapid-checkbox:last-of-type {
  padding-bottom: 15px;
}

.ideditor .modal.rapid-modal .rapid-stack .rapid-datasets-container {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.ideditor .rapid-stack .rapid-checkbox.rapid-toggle-all {
  border-bottom: 1px solid #888a;
  padding: 45px 10px 10px 10px;
}
.ideditor .rapid-stack .rapid-checkbox.rapid-manage-datasets {
  border-top: 1px solid #888a;
  padding: 10px;
  cursor: pointer;
}
.ideditor .rapid-stack .rapid-checkbox.rapid-manage-datasets:hover {
  color: #ddd;
  background: #8885;
}

.ideditor .modal.rapid-modal .rapid-stack .rapid-feature {
  display: flex;
  flex-flow: column nowrap;
}

.ideditor .rapid-feature-label,
.ideditor .rapid-feature-label-container,
.ideditor .rapid-feature-extent-container {
  display: flex;
  align-items: center;
}
.ideditor .rapid-feature-label-container > div,
.ideditor .rapid-feature-extent-container > div {
  margin: 0 5px;
}
.ideditor .rapid-feature-extent-container {
  font-size: 14px;
  font-style: italic;
  margin: -5px 5px 5px 5px;
  color: #aaa;
}

.ideditor .rapid-feature-label-container .rapid-feature-label-beta {
  font-size: 14px;
}
.ideditor .rapid-feature-label > svg.icon.logo-rapid {
  width: 4em;
  height: 1.3em;
  margin: -5px;
}
.ideditor .rapid-feature-label-divider {
  width: 1px;
  height: 20px;
  background: #888a;
}

.ideditor .rapid-feature-description {
  font-size: 14px;
  margin: 4px;
}
.ideditor .rapid-feature-license {
  font-size: 12px;
}
.ideditor .rapid-checkbox.disabled {
  opacity: .5;
}
.ideditor .rapid-feature-checkbox {
  margin-left: auto;
}

.ideditor .rapid-checkbox.section-divider {
  width: 100%;
  height: 1px;
  background: #888a;
  padding: 1px;
  align-self: center;
  margin-top: 3px;
  margin-bottom: 3px;
}

.ideditor .rapid-checkbox.section-divider.strong {
  background: #fffa;
}

.ideditor .rapid-feature-hotkey {
  margin: 0 5px;
  font-size: 14px;
}

.ideditor .rapid-checkbox-inputs {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
}

.ideditor .rapid-checkbox-label {
  display: flex;
  align-items: center;
}

.ideditor .rapid-colorpicker-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 15px;
}
.ideditor .rapid-colorpicker-label:not(.disabled),
.ideditor .rapid-checkbox-label:not(.disabled) {
  cursor: pointer;
}
.ideditor .rapid-colorpicker-label.disabled {
  opacity: 0.5;
}

.ideditor .rapid-colorpicker {
  padding: 2px;
  border: none;
  background: #fff;
  border-radius: 6px;
  width: 36px;
  height: 36px;
}
.ideditor .rapid-colorpicker-label:not(.disabled):hover {
  opacity: 0.9;
}

.ideditor .rapid-colorpicker-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
}
.ideditor .rapid-colorpicker-fill .icon {
  pointer-events: none;
}

/* since checkboxes can't be styled, we'll
hide this one and style something on top of it.  */
.ideditor .rapid-checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.ideditor .rapid-checkbox-label .rapid-checkbox-custom {
  height: 36px;
  width: 36px;
  background-color: transparent;
  border-radius: 5px;
  border: 2px solid #fff;
}

.ideditor .rapid-checkbox-label .rapid-checkbox-custom::after {
  content: "";
  height: 0px;
  width: 0px;
}

.ideditor .rapid-checkbox-label input:checked ~ .rapid-checkbox-custom::after {
  content: "";
  display: block;
  padding: 2px;
  border-radius: 0;
  border: solid #da26d3;
  background-color: transparent;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
  opacity: 1;
  margin: 3px 9px;
  height: 12px;
  width: 6px;
}


/* Rapid Power User features */
.ideditor .rapid-stack.poweruser .modal-section-heading {
  display: flex;
  flex-flow: column;
  padding: 10px 20px;
  width: 100%;
}

.ideditor .rapid-stack.poweruser .modal-section-heading h3 {
  font-size: 24px
}
.ideditor .rapid-stack.poweruser .modal-heading-desc {
  font-size: 16px;
  font-style: italic;
}
.ideditor .rapid-stack.poweruser .modal-heading-desc .smile {
  font-style: normal;
  margin: 0 10px;
}
.ideditor .rapid-stack.poweruser .rapid-features-container {
  width: 100%;
  border-top: 1px solid #888a;
}
.ideditor .rapid-stack.poweruser .rapid-features-container > .rapid-checkbox:last-of-type {
  padding-bottom: 15px;
}
.ideditor .rapid-stack.poweruser .rapid-features-container .rapid-feature-label {
  margin: 0 5px;
}

.ideditor .rapid-stack.poweruser .rapid-features-container .rapid-feature-description {
  font-size: 14px;
  font-style: italic;
  margin: -5px 5px 5px 5px;
  color: #aaa;
}

/* Rapid Catalog modal */
/* catalog-wrap is an absolutely positioned div to create a new stacking context,
   so we can put a modal on top of the other modal.
   (it functions like .shaded for layout but without adding any shading)
*/
.ideditor .catalog-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  z-index: 51;   /* above existing modal */
}
.ideditor .modal.rapid-modal.modal-catalog {
  width: 80%;
  min-width: 600px;
  max-width: 1000px;
  min-height: 85%;
}
.ideditor .modal.rapid-modal.modal-catalog p {
  font-size: 12px;
}

.ideditor .modal-catalog .modal-section {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  padding: 0;
}

.ideditor .modal-catalog .modal-section.rapid-catalog-header {
  display: flex;
  flex-flow: column nowrap;
  padding: 10px 20px;
  border-bottom: 1px solid #aaaa;
  color: #fff;
}
.ideditor .modal-catalog .modal-section.rapid-catalog-header > div {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
}

.ideditor .rapid-catalog-header-icon {
  flex: 0 0 40px;
}
.ideditor .rapid-catalog-header-text {
  flex: 1 1 auto;
  font-size: 24px;
  padding: 0 5px;
}
.ideditor .rapid-catalog-header-about {
  color: #ddd;
}

.ideditor .modal-catalog .modal-section.rapid-catalog-filter {
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 20px;
  border-bottom: 1px solid #aaaa;
  color: #fff;
}
.ideditor .rapid-catalog-filter-search-wrap,
.ideditor .rapid-catalog-filter-type-wrap {
  position: relative;
  flex: 1;
  padding: 0 5px;
}
.ideditor .rapid-catalog-filter-search-wrap > .icon {
  position: absolute;
  left: 16px;
  top: 11px;
  color: #aaa;
  width: 16px;
  height: 16px;
}
.ideditor[dir='rtl'] .rapid-catalog-filter-search-wrap > .icon {
  left: unset;
  right: 16px;
}

.ideditor .rapid-catalog-filter-search,
.ideditor .rapid-catalog-filter-type {
  background: #444;
  color: #ddd;
  padding: 4px 12px;
  border-radius: 10px;
  border: 1px solid #333;
  font-size: 16px;
  width: 90%;
}
.ideditor .rapid-catalog-filter-search {
  padding: 4px 12px 4px 40px;
}
.ideditor[dir='rtl'] .rapid-catalog-filter-search {
  padding: 4px 40px 4px 12px;
}
.ideditor .rapid-catalog-filter-search:focus,
.ideditor .rapid-catalog-filter-search:active,
.ideditor .rapid-catalog-filter-type:focus,
.ideditor .rapid-catalog-filter-type:active {
  background: #444;
  color: #eee;
  outline: none;
  border: 1px solid #aaa;
}

.ideditor div.combobox.combobox-dataset-categories {
  background: #333;
  color: #ddd;
  border: 1px solid #222;
}
.ideditor div.combobox.combobox-dataset-categories a {
  color: #ddd;
  border-top: 1px solid #222;
}
.ideditor div.combobox.combobox-dataset-categories a.selected,
.ideditor div.combobox.combobox-dataset-categories a:active,
.ideditor div.combobox.combobox-dataset-categories a:focus {
  color: #eee;
  background: #3c3c3c;
}
@media (hover: hover) {
  .ideditor div.combobox.combobox-dataset-categories a:hover {
    color: #eee;
    background: #3c3c3c;
  }
}

.ideditor .rapid-catalog-filter-clear a {
  padding: 15px;
  font-size: 14px;
}

.ideditor .rapid-catalog-filter-results {
  flex: 1 1 200px;
  padding: 0 5px;
  text-align: end;
  font-size: 20px;
}

.ideditor .modal-catalog .rapid-catalog-datasets-section {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  overflow-y: auto;
}

/* give this section height, even when its contents are hidden */
.ideditor .rapid-catalog-datasets-status,
.ideditor .rapid-catalog-datasets {
  flex: 1 1 9999px;
}

.ideditor .rapid-catalog-datasets-status {
  font-size: 20px;
  text-align: center;
  margin: 50px;
}

.ideditor .rapid-catalog-datasets {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 5px;
  width: 100%;
}
.ideditor .rapid-catalog-dataset {
  display: flex;
  flex: 1 1 40%;
  flex-flow: row nowrap;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  height: 220px;
  color: #eee;
}
.ideditor .rapid-catalog-dataset.added {
  background: rgba(55, 55, 55, 0.9);
}

.ideditor .rapid-catalog-dataset-label {
  flex: 1;
  padding: 0 8px;
}
.ideditor .rapid-catalog-dataset-thumb {
  flex: 0;
}
.ideditor img.rapid-catalog-dataset-thumbnail {
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 130px;
  width: 180px;
}
.ideditor img.rapid-catalog-dataset-thumbnail.inverted {
  filter: invert(1) brightness(2) contrast(0.75);
}

.ideditor .rapid-catalog-dataset-name {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 3px;
}

.ideditor .dataset-categories {
  display: flex;
  flex-flow: row wrap;
}
.ideditor .dataset-category {
  display: inline-block;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #666;
  color: #eee;
  margin-left: unset;
  margin-right: 4px;
  line-height: 1.5;
}
.ideditor[dir='rtl'] .dataset-category {
  margin-right: unset;
  margin-left: 4px;
}
.ideditor .dataset-category-preview {
  background: rgb(203,16,237);
  background: linear-gradient(0deg, rgba(108,1,167,1) 6%, rgba(203,16,237,1) 50%, rgb(229, 140, 253) 90%, rgb(201, 42, 251) 100%);
}
.ideditor .dataset-category-featured {
  background: #a21;
}
.ideditor .dataset-added-text {
  color: #16da16;
}

.ideditor .rapid-catalog-dataset button.rapid-catalog-dataset-action {
  font-size: 12px;
  height: 28px;
  border-radius: 14px;
  margin: 10px 0;
  padding: 0 15px;
}

/* Colorpicker popup */
.ideditor .colorpicker-popup {
  position: absolute;
  padding: 10px;
  z-index: 100;
  background-color: #fff;
  border: none;
  display: flex;
  border-radius: 6px;
  box-shadow: 0 0 2em black;
}
.ideditor .colorpicker-arrow {
  position: absolute;
  top: -10px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #fff;
}

.ideditor .colorpicker-colors {
  display: flex;
  flex-flow: row wrap;
}
.ideditor .colorpicker-option {
  border: 2px solid transparent;
  background: #fff;
  border-radius: 6px;
}
.ideditor .colorpicker-option:hover {
  border: 2px solid #ddd;
}
.ideditor .colorpicker-option.selected {
  border: 2px solid #444;
}
.ideditor .colorpicker-option-fill {
  background-color: currentColor;
  width: 20px;
  height: 20px;
  margin: 4px;
  border-radius: 5px;
}