/* 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-family: 'Graphik', sans-serif;*/
	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 :root {
  /* Define some variables for consistency */
  --input-padding-y: 10px;
  --input-padding-x: 12px;
  --input-border-radius: 6px;
  --input-border-color: #ced4da; /* Light grey border */
  --input-focus-border-color: #86b7fe; /* Bootstrap focus blue */
  --input-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrap focus shadow */
  --placeholder-color: #adb5bd; /* Standard placeholder */
  --placeholder-light-color: #dee2e6; /* Very light placeholder */
  --input-bg-light: #f8f9fa; /* Light background for select */
  --input-bg-white: #fff;
  --required-color: #dc3545; /* Red for required asterisk */
  --clear-btn-bg: #e9ecef;
  --clear-btn-color: #6c757d;
}

.ideditor .form-field {
  position: relative; /* Needed for absolute positioning of asterisk/clear button */
  margin-bottom: 15px;
}

.ideditor .form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500; /* Slightly bolder labels */
  font-size: 0.9rem; /* Smaller label text */
  color: #495057; /* Darker label text */
}

/* Base styles for all inputs/selects */
.ideditor .form-input {
  display: block;
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529; /* Input text color */
  background-clip: padding-box;
  border: 1px solid var(--input-border-color);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* Remove default styling */
  border-radius: var(--input-border-radius);
  box-sizing: border-box; /* Consistent sizing */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ideditor .form-input:disabled {
  cursor: not-allowed;
}

.ideditor .form-input:focus {
  border-color: var(--input-focus-border-color);
  outline: 0;
  box-shadow: var(--input-focus-box-shadow);
}

/* Specific styles for text-like inputs */
.ideditor .form-input-text {
  background-color: var(--input-bg-white);
}

/* Specific styles for select */
.ideditor .form-input-select {
  background-color: var(
    --input-bg-light
  ); /* Light grey background for select */
  /* Custom arrow using SVG */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--input-padding-x) center;
  background-size: 16px 12px;
  padding-right: calc(
    var(--input-padding-x) * 2 + 16px
  ); /* Make space for arrow */
}

/* Style the placeholder option in select */
.ideditor .form-input-select:invalid,
.ideditor .form-input-select option[value=""] {
  color: var(--placeholder-color);
}
.ideditor .form-input-select option {
  color: #212529; /* Normal text color for options */
}

/* Placeholder styling */
.ideditor .form-input::-moz-placeholder {
  color: var(--placeholder-color);
  opacity: 1; /* Override browser defaults */
}
.ideditor .form-input::placeholder {
  color: var(--placeholder-color);
  opacity: 1; /* Override browser defaults */
}

/* Special light placeholder style */
.ideditor .form-input--light-placeholder::-moz-placeholder {
  color: var(--placeholder-light-color); /* Very light grey */
}
.ideditor .form-input--light-placeholder::placeholder {
  color: var(--placeholder-light-color); /* Very light grey */
}

/* Required field marker */
/* Positioned relative to the .form-field container */
.ideditor .form-input-required::before {
  content: "*";
  color: var(--required-color);
  position: absolute;
  /* Adjust top/left to position near the top-left corner of the input box */
  /* These values might need tweaking based on your label styles */
  top: calc(
    0.9rem + 5px + 2px
  ); /* label font size + label margin + small offset */
  left: -10px;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1;
  z-index: 1; /* Ensure visibility */
}

/* Wrapper for inputs that might have a clear button */
.ideditor .form-input-wrapper {
  position: relative;
}

/* Clear button (X) */
.ideditor .form-input-clear-btn {
  position: absolute;
  top: 50%;
  /* Adjust right padding based on input padding */
  right: var(--input-padding-x);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background-color: var(--clear-btn-bg);
  color: var(--clear-btn-color);
  font-size: 14px;
  font-weight: bold;
  line-height: 18px; /* Adjust for vertical centering */
  text-align: center;
  cursor: pointer;
  padding: 0;
  display: none; /* Hidden by default */
  z-index: 3; /* Above input */
}

/* Show clear button when the wrapper has the 'has-value' class */
.ideditor .form-input-wrapper.has-value .form-input-clear-btn {
  display: block;
}

/* Add padding to the input itself when clear button is visible */
.ideditor .form-input-wrapper.has-value .form-input {
  /* Add space: button width + some gap */
  padding-right: calc(var(--input-padding-x) + 20px + 5px);
}

.ideditor .modal-badge {
  position: absolute;
  top: 10px;
  right: 20px;
}

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

  --sidebar-width: 300px;
  --sidebar-filter-block-width: 0px;
  --navbar-width: 60px;
  --navbar-height: 60px;
  --resizer-width: 16px;
  --filter-sidebar-top: 104px;

  --main-green: #1baa75;
  --red: #dc3545;
  --dark-green: #255f38;
  --text-color: #333;
  --dark-green-gradient: linear-gradient(135deg, #255f38 0%, #3eb86b 100%);
  --light-green-gradient: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  --blue: #007bff;
  --dark-blue: #0056b3;
  --dark-blue-2: #004085;
  --light-grey: #e3e3e3;
  --light-grey2: #666666;
  --light-grey3: #f2f2f7;
  --dark-grey: #555;
  --dark-grey-text: #1c1c1e;
  --chartText: #454f5b;
  --chartTextLight: #637381;
}

@media (max-width: 1024px) {
  .ideditor {
    --sidebar-filter-block-width: 260px;
  }
}

@media (max-width: 768px) {
  .ideditor {
    --navbar-width: 0px;
  }
}

.ideditor.filter-sidebar-header-have-name {
  --filter-sidebar-top: 133px;
}

.ideditor.filter-collapsed {
  --sidebar-filter-block-width: 0px;
}

.ideditor.filter-not-collapsed {
  --sidebar-filter-block-width: 280px;
}

.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%;
  max-width: 600px;
}
.ideditor .col12 {
  float: left;
  width: 100%;
}

/* Utility Classes
------------------------------------------------------- */
.ideditor .fillWeather {
  background: #f2f2f7;
  color: #1c1c1e;
}
.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, 0.6);
  color: #fff;
}
.ideditor .fillD2 {
  background: rgba(0, 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;
}
/*.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, 0.25);
  color: rgba(0, 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, 0.5);
}
.ideditor[dir="rtl"] .joined > * {
  border-radius: 0;
  border-left: 1px solid rgba(0, 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, 0.2);
  color: rgba(40, 40, 40, 0.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;
  width: 100%;
  height: 100%;
}

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

/* General container for the charts */
/*.charts-container {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  flex-wrap: wrap;*/
/*  gap: 20px;*/
/*  padding: 20px;*/
/*}*/

/*!* Style for the individual chart canvases *!*/
/*.chart-canvas {*/
/*  border-radius: 10px; !* Rounded corners for a modern look *!*/
/*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); !* Light shadow for depth *!*/
/*  overflow: hidden;*/
/*}*/

/*!* Responsive layout *!*/
/*@media (max-width: 768px) {*/
/*  .chart-canvas {*/
/*    width: 100%; !* Make the charts full width on smaller screens *!*/
/*  }*/
/*}*/

/*!* Style for chart tooltips *!*/
/*.chartjs-tooltip {*/
/*  background-color: rgba(0, 0, 0, 0.7); !* Darker background for tooltips *!*/
/*  color: #fff; !* White text color *!*/
/*  border-radius: 4px; !* Rounded corners for tooltips *!*/
/*  padding: 8px 12px;*/
/*  font-size: 12px;*/
/*  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);*/
/*}*/

/*!* Style for chart legend *!*/
/*.chartjs-legend {*/
/*  font-size: 14px;*/
/*  font-weight: 600;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  margin-top: 10px;*/
/*  color: #333;*/
/*}*/
/*.chartjs-legend li {*/
/*  margin-right: 10px;*/
/*  list-style-type: none;*/
/*}*/
/*.chartjs-legend li span {*/
/*  display: inline-block;*/
/*  width: 12px;*/
/*  height: 12px;*/
/*  margin-right: 5px;*/
/*  border-radius: 50%;*/
/*}*/

.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-direction: column;
  flex: 0 0 0px;
  align-items: flex-start;
  gap: 14px;
  justify-content: center;
  color: #255f38;
  border-bottom: 1px solid #ccc;
  padding: 15px 20px;
  position: relative;
}

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

.ideditor .header h5 {
  font-size: 14px;
  font-weight: normal;
  margin-top: -8px;
  text-align: left;
  color: #666;
  padding-bottom: 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;
  width: 100dvw;
  flex: 0 0 calc(var(--sidebar-width) + var(--navbar-width));
  flex-flow: column nowrap;
  padding-left: var(--navbar-width);
  z-index: 100;
  background: #ffffff;
  box-shadow: 0 8px 16px #00000026, 0 0 2px #0000001a;
  -ms-user-select: element;
  border-right: 1px solid #e3e3e3;
  overflow: hidden;
}

@media (max-width: 768px) {
  .ideditor .sidebar {
    flex: 0 0 100dvw;
    padding-left: 0;
    height: calc(100% - var(--navbar-height)) !important;
  }
}

.ideditor .resizer {
  display: flex;
  flex: 0 0 calc(var(--resizer-width));
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  z-index: 999;
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: var(--light-grey3);
  margin-left: var(--sidebar-filter-block-width);
  border-right: 1px solid #e3e3e3;
}

@media (max-width: 1024px) {
  .ideditor .resizer {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .ideditor .resizer {
    display: none;
  }
}

.ideditor .resizer-handle {
  width: 4px;
  height: 8%;
  background-color: var(--dark-grey);
  border-radius: 4px;
  pointer-events: none;
  transition: border-color 0.3s ease-in-out, transform 0.3s ease-in-out,
    height 0.3s ease-in-out;
}

.ideditor .resizer-no-sidebar {
  margin-left: calc(var(--navbar-width));
}

.ideditor .resizer-after-filters {
  margin-left: var(--sidebar-filter-block-width);
}

@media (hover: hover) {
  .ideditor .resizer:hover .resizer-handle {
    border-color: #fff;
    height: 9%;
    transform: scaleX(1.1);
  }
}

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

.ideditor .sidebar-component {
  display: flex;
  flex: 1 1 0;
  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;
  background: #fff;
  flex: 1 0 0;
  flex-flow: column nowrap;
  z-index: 100;
}

.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%;
  overflow-y: scroll;
}

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

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

.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: 10px 15px;
  border-top: 1px solid #ccc;
}

/* Feature List / Search Results
------------------------------------------------------- */
.ideditor .feature-list {
  height: 100%;
  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, 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, 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: 0.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: 0.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: 0.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;
  width: 100%;
}
.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: 0.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, 0.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, 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, 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 .inner2-wrap {
  display: flex;
  flex-flow: column 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: 0.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, 0.5);
}
.ideditor .add-row button:focus,
.ideditor .add-row button:active {
  background: rgba(0, 0, 0, 0.8);
}
@media (hover: hover) {
  .ideditor .add-row button:hover {
    background: rgba(0, 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;
}
.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-container {
  background: #ececec;
  padding: 10px;
  margin-top: 20px;
  border-radius: 4px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}
.ideditor .qa-details-description-text::first-letter {
  text-transform: capitalize;
}
.ideditor[dir="rtl"] .qa-details-description-text::first-letter {
  text-transform: none; /* 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, 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, 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, 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, 0.8);
}
@media (hover: hover) {
  .ideditor div.full-screen > button:hover {
    background-color: rgba(0, 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;
}

@media (max-width: 768px) {
  .ideditor .map-footer {
    margin-bottom: 60px;
  }
}

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

.ideditor .map-footer-legend-wrap {
  position: absolute;
  top: 0;
  right: 5px;
  transform: translate(0, -100%);
}

/* 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, 0.5);
}
.ideditor[dir="rtl"] .map-footer-info > div:not(:last-child) {
  border-right: unset;
  border-left: 1px solid rgba(255, 255, 255, 0.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 .ui-modal {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  margin: 8px 8px 8px 467px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 500;
  height: calc(100% - 16px);
  overflow: hidden;
}

.ideditor .close-icon {
  width: 30px;
  height: 30px;
}

.ideditor .ui-modal .close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 501;
}

.ideditor .ui-modal .ui-content {
  color: #1c1c1e;
  height: calc(100% - 141px);
  position: relative;
  /*max-height: 100%;*/
  /*overflow-y: auto;*/
}

.ideditor .weather-card:hover {
  background: #f2f2f7;
}

.ideditor .weather-card > .shaded {
  height: 100dvh;
  cursor: auto;
}

.ideditor .polygon-modal {
  overflow-y: auto;
  top: 5%;
  position: relative;
  border-radius: 12px;
  margin: auto;
  z-index: 50;
  width: 90%;
  height: 90%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 12px #0003;
}

.ideditor .weather-modal {
  top: 5%;
  position: relative;
  border-radius: 12px;
  margin: auto;
  z-index: 501;
  width: 90%;
  height: 85%;
  max-width: 1000px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 12px #0003;
}

.ideditor .weather-modal > .close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 20px;
  background: transparent;
}

.ideditor .weather-modal .content {
  overflow-y: auto;
  padding: 20px;
}

.ideditor .weather-forecast__header {
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
}

.ideditor .weather-forecast__table {
  margin-top: 8px;
  display: flex;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
}

.ideditor .weather-forecast__attributes {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  gap: 12px;
  color: #636366;
  font-size: 12px;
}

.ideditor .weather-forecast__attributes-item {
  min-height: 76px;
}

.ideditor .weather-forecast__column {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding-left: 8px;
  border-left: 1px solid #e5e5ea;
  font-size: 12px;
}

.ideditor .weather-forecast__day {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 76px;
}

.ideditor .weather-forecast__day-name {
  font-size: 14px;
  font-weight: 500;
  color: #636366;
}

.ideditor .weather-forecast__day-date {
  font-size: 10px;
  color: #636366;
}

.ideditor .weather-forecast__icon {
  width: 24px;
  height: 24px;
}

.ideditor .weather-forecast__value {
  font-weight: 500;
}

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

.ideditor .modal-polygon-info-onhover {
  position: fixed;
  top: 80px;
  left: 484px;
  min-width: 200px;
  max-width: 550px;
  max-height: 90vh;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  pointer-events: none;
}

.ideditor .modal-polygon-info-onhover .content {
  pointer-events: auto;
}

.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 {
  display: none;
  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, 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, 0.05);
}
@media (hover: hover) {
  .ideditor ::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 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;
}

/* Add fields in sidebar */

/* Контейнер с полями */
.ideditor .add-fields-container {
  background: #f2f2f7;
  padding: 16px;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}

/* Текстовый контейнер */
.ideditor .add-fields-text {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
  /* width: 70%; */
  align-self: center;
}

/* Заголовок */
.ideditor .add-fields-title {
  font-size: 18px;
  font-weight: 500;
}

/* Описание */
.ideditor .add-fields-description {
  align-self: start;
  font-size: 14px;
}

/* Контейнер с кнопками */
.ideditor .add-fields-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

.ideditor .add-fields-buttons button {
  display: flex;
  gap: 8px;
  height: 50px;
  border-radius: 8px;
  /*border: 1px solid rgb(229, 229, 234);*/
  padding: 0 16px;
  font-size: 14px;
  line-height: 16px;
  cursor: pointer;
  align-items: center;
  transition: background-color 0.3s;
  background-color: var(--main-green);
  color: white;
  justify-content: center;
  flex-grow: 1;
}

/* Ховер-эффект */
.ideditor .add-field-btn:hover {
  background: #219150;
}

/* Стили для иконок внутри кнопок */
.ideditor .add-fields-buttons img {
  width: 20px;
  height: 20px;
}

.ideditor .btn-disabled {
  background-color: #e0e0e0 !important;
  color: #a6a6a6 !important;
  cursor: default !important;
}

.ideditor .btn-primary {
  background-color: var(--main-green);
  color: white;
}

.ideditor .btn-primary:hover {
  background-color: #36a062;
}

.ideditor .select-on-map {
  cursor: not-allowed;
}

.ideditor .upload-file {
  cursor: not-allowed;
}

.ideditor .sidebar.collapsed ~ .main-content .map-footer,
.ideditor .sidebar.collapsed + .main-content .map-footer,
body.sidebar-collapsed .main-content .map-footer {
  margin-left: 0;
}

body .help-image-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 42, 60, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .help-image-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(33, 150, 243, 0.18);
  border: 2px solid #fff;
  background: #fff;
}
body .help-image-lightbox-close {
  position: fixed;
  top: 32px;
  right: 48px;
  font-size: 2.2em;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
}
body .help-image-lightbox-close:hover {
  color: #90caf9;
}
/* 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;
}
.ideditor .action-btn,
.ideditor .action-btn:focus {
  margin-top: 15px;
  min-height: 50px;
  background-color: var(--main-green);
  padding: 0 20px;
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.ideditor .action-btn:hover {
  background-color: var(--main-green);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transform: scale(1.01);
}

.ideditor .action-btn:disabled {
  background-color: #e0e0e0;
  box-shadow: none;
  transform: none;
  color: #a6a6a6;
  cursor: default;
}

.ideditor .standard-width {
  width: 350px;
}

.ideditor .fullwidth {
  width: 100%;
}

.ideditor .burger-container {
  position: absolute;
  top: 16px;
  right: 4px;
}

.ideditor .burger {
  width: 30px;
  height: 19px;
  position: relative;
  cursor: pointer;
}

.ideditor .burger span {
  position: absolute;
  left: 0;
  width: 70%;
  height: 2px;
  background-color: var(--dark-green);
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

.ideditor .burger span:nth-child(1) {
  top: 0;
}

.ideditor .burger span:nth-child(2) {
  top: 7px;
}

.ideditor .burger span:nth-child(3) {
  top: 14px;
}

/* Анимация при активном состоянии */
.ideditor .burger.active span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.ideditor .burger.active span:nth-child(2) {
  opacity: 0;
}

.ideditor .burger.active span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .ideditor .standard-width {
    width: 100%;
  }

  .ideditor .action-btn,
  .ideditor .action-btn:focus {
    font-size: 12px;
  }

}
.ideditor .back-btn {
  position: fixed;
  top: 40px;
  right: 5rem;
  transform: translateY(-50%) scale(1);
  z-index: 1000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
  border: none;
  overflow: hidden;
  transition:
    background 0.3s ease-out,
    box-shadow 0.3s ease-out;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ideditor .back-btn svg {
  width: 25px;
  height: 25px;
}

.ideditor .back-btn:hover {
  background: linear-gradient(135deg, #F6CF79 0%, #3eb86b 100%);
}

.ideditor .back-btn:active {
  transform: translateY(-50%) scale(0.95);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  filter: brightness(0.9);
}

.ideditor .back-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s ease-out;
  pointer-events: none;
}

.ideditor .reports-list-position {
  top: 2.5rem;
  right: 5.5rem;
}

@media (max-width: 900px) {
  .ideditor .back-btn {
    top: 38px;
    right: 4.5rem;
    width: 35px;
    height: 35px;
  }
}
.ideditor .scroll-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #22c55e;
  color: white;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2147483647;
  font-size: 0;
  outline: none !important;
}

.ideditor .scroll-to-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ideditor .scroll-to-top-btn:hover {
  background: #16a34a;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.ideditor .scroll-to-top-btn.absolute {
  position: absolute;
}
.ideditor .ui-reports-list-table .ui-empty-message-block {
  text-align: center;
}

.ideditor .ui-empty-message-block {
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
  border-radius: 8px;
}

.ideditor .ui-empty-message-block::before {
  content: '📄';
  font-size: 1em;
  color: #b0b0b0;
  margin-right: 5px;
}


.ideditor .ui-empty-message-block strong {
  color: #666;
}
.ideditor .field-popup {
  position: absolute;
  z-index: 1000;
  background: rgba(27, 170, 117, 0.75);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: 12px;

  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 12px 30px rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 14px;
  min-width: 200px;
  max-width: 300px;
  font-size: 14px;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  transform: translateY(10px);
}

.ideditor .field-popup.show {
  opacity: 1;
  transform: translateY(0);
}

.ideditor .field-popup-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ideditor .field-popup-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  margin: 0;
  padding: 0;
  border: none;
}

.ideditor .field-popup-title .icon {
  width: 28px;
  height: 28px;
}

.ideditor .field-popup-title span {
  margin-left: 10px;
}

.ideditor .field-popup-icon-title {
  margin-right: 8px;
  fill: #fff;
}

.ideditor .field-popup-name,
.ideditor .field-popup-culture,
.ideditor .field-popup-area {
  display: flex;
  align-items: center;
  color: #fff;
  margin: 0;
}

.ideditor .field-popup-icon {
  margin-right: 8px;
  fill: #fff;
}

.ideditor .field-popup-name strong,
.ideditor .field-popup-culture strong,
.ideditor .field-popup-area strong {
  color: #fff;
  font-weight: 500;
  margin-right: 6px;
}

.ideditor .field-popup-culture {
  align-items: flex-start;
}

.ideditor .pop-up-land-types-wrapper {
  flex-direction: column;
  align-items: start;
}

.ideditor .pop-up-land-types-wrapper > *:not(:first-child) {
  margin-bottom: 5px;
}


@media (prefers-color-scheme: dark) {
  .ideditor .field-popup {
    background-color: #2d3748;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
  .ideditor .field-popup-title {
    color: #edf2f7;
  }
  .ideditor .field-popup-icon-title,
  .ideditor .field-popup-icon {
    fill: #a0aec0;
  }
  .ideditor .field-popup-name,
  .ideditor .field-popup-culture,
  .ideditor .field-popup-area {
    color: #a0aec0;
  }
  .ideditor .field-popup-name strong,
  .ideditor .field-popup-culture strong,
  .ideditor .field-popup-area strong {
    color: #e2e8f0;
  }
}


@media (max-width: 768px) {
  .ideditor .field-popup {
    max-width: 240px;
    font-size: 13px;
    padding: 10px;
  }

  .ideditor .field-popup-title {
    font-size: 15px;
  }
}


.ideditor .field-info-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.ideditor .field-info-row label {
  width: 160px;
  min-width: 160px;
  text-align: left;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
  margin-right: 8px;
}
.ideditor .field-info-input,
.ideditor .field-info-select {
  flex: 1 1 0;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: 0 14px;
  font-size: 15px;
  color: #0f172a;
  box-sizing: border-box;
  width: 100%;
}
.ideditor .field-info-readonlyText {
  font-size: 15px;
  color: #334155;
  font-weight: 500;
  margin-left: 0;
}


.ideditor .pasture-animals-list {
  width: 100%;
}
.ideditor .pasture-animal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  width: 100%;
}
.ideditor .pasture-animal-row select,
.ideditor .pasture-animal-row input[type="number"] {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 15px;
  color: #0f172a;
  box-sizing: border-box;
  padding: 0 14px;
}


.ideditor .field-info-row label .required-star,
.ideditor .pasture-animal-row .required-star {
  color: #dc3545;
  margin-left: 3px;
}
.ideditor .field-deleted {
  opacity: 0.6;
}
.ideditor .field-deleted .field-name {
  text-decoration: line-through;
}

.ideditor .loading-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  margin: 32px 0;
  background: #fff8dc;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  min-height: 120px;
  width: 100%;
  box-sizing: border-box;
}
.ideditor .loading-message__icon {
  margin-bottom: 12px;
  color: #e0b800;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ideditor .loading-message__title {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 6px;
  text-align: center;
}
.ideditor .loading-message__subtitle {
  font-size: 15px;
  color: #555;
  text-align: center;
}
.ideditor .add-fields-container, .ideditor .crops, .ideditor .loading-message, .ideditor .tags-editor-block, .ideditor .help-widget-modern-container, .ideditor .services-container {
  animation: fadeIn 0.7s;
}

.ideditor .add-fields-container {
  margin: 10px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ideditor .upload-file-button,
.ideditor .select-on-map-button,
.ideditor .draw-field-button,
.ideditor .add-fields-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* Карточка поля */
.ideditor .create-field-text, .ideditor .add-fields-title {
  font-family: system-ui;
}

/*.field-item {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*  padding: 12px 15px;*/
/*  border-radius: 4px;*/
/*  margin: 4px 0;*/
/*  background: #fff;*/
/*  box-shadow: 0 1px 3px rgba(0,0,0,0.1);*/
/*  cursor: pointer;*/
/*}*/

.ideditor .field-item.field-deleted {
  opacity: 0.5;
}
.ideditor .field-item.selected {
  outline: 2px solid #1976d2;
  background: #f0f7fa !important;
}
.ideditor .field-item.newField {
  background: #e8f5e9;
  border: 1px solid #81c784;
}
.ideditor .field-item:hover {
  background: #f0f7fa !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s, box-shadow 0.2s;
}

.ideditor .field-info {
  display: flex;
  flex-direction: column;
}
.ideditor .field-info .field-name {
  font-size: 14px;
  color: #333;
  line-height: 1.2;
  margin-bottom: 10px;
}
.ideditor .field-info .field-culture {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}
.ideditor .field-info .field-area {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #666;
}
.ideditor .button-container {
  display: flex;
  gap: 5px;
}
.ideditor .button-container button {
  display: flex; /* или flex */
  align-items: center;  /* вертикальное центрирование */
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
}

.ideditor .button-container button svg {
  padding: 7px;
  transition: transform 0.2s ease;
}

.ideditor .button-container button:hover svg {
  transform: scale(1.2);
  stroke: #000;
}
.ideditor .button-container .delete-btn svg {
  stroke: #dc3545;
}
.ideditor .button-container .edit-btn svg {
  stroke: #333;
}
.ideditor .button-container .view-btn svg {
  stroke: #333;
}
.ideditor .button-container .location-btn svg {
  stroke: #333;
}

.ideditor .search-results-header {
  font-size: 16px;
  color: #333;
  margin: 10px 0 5px 0;
}

.ideditor .zembalance-tag-editor {
  padding-left: 20px;
  padding-right: 20px;
}

.ideditor .help-inline-content {
  margin-top: 12px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  overflow-y: auto;
  max-height: 60vh;
}
.ideditor .analytics {
  width: 100%;
  padding: 0 40px 40px;
}

.ideditor .analytics-grid {
  display: grid;
  grid-template-columns: 65% calc(35% - 20px);
  gap: 20px;
}

.ideditor .analytics-left-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ideditor .analytics-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ideditor .analytics-chart-title {
  align-self: start;
  font-size: 1.2rem;
  font-weight: 700;
  color: #212B36;
}

.ideditor .analytics-chart-svg {
  position: relative;
  width: 100%;
  height: auto;
}

.ideditor .yAxis {
  font-size: 15px;
  font-weight: 500;
  fill: var(--chartTextLight);
}

.ideditor .analytics-chart-svg .tick text {
  font-size: 14px;
  fill: var(--chartText);
  font-weight: 500;
}

.ideditor .analytics-chart-svg .tick line,
.ideditor .analytics-chart-svg .domain {
  stroke: #E0E0E0;
  stroke-dasharray: 2 4;
}

.ideditor .analytics-chart-svg .domain {
  stroke-dasharray: none;
}

.ideditor .analytics-chart-svg .value-label {
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

.ideditor .analytics-tooltip-global {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(0.9);
  background-color: rgba(33, 33, 33, 0.95);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  min-width: 180px;
  line-height: 1.6;
}

.ideditor .analytics-tooltip-global.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.ideditor .tooltip-header {
  font-weight: 700;
  font-size: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 8px;
  color: #ffffff;
}

.ideditor .tooltip-body {
  margin: 5px 0;
}

.ideditor .tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.ideditor .tooltip-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.ideditor .tooltip-key {
  color: #B0B0B0;
  margin-right: 12px;
}

.ideditor .tooltip-value {
  font-weight: 700;
  color: #ffffff;
}

.ideditor .tooltip-row > span:first-of-type {
  display: flex;
  align-items: center;
}

.ideditor .tooltip-footer {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 8px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.ideditor .analytics-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.ideditor .no-data-message {
  text-align: center;
  color: var(--chartTextLight);
  padding: 50px 0;
  font-size: 1rem;
  margin: auto;
}

.ideditor .analytics-chart-svg .tick text {
  font-size: 12px;
  fill: var(--chartTextLight);
  font-weight: 500;
}

.ideditor .analytics-chart-svg .tick line {
  stroke: #F1F3F5;
  stroke-dasharray: 2 4;
}

.ideditor .analytics-chart-svg .domain {
  stroke: #DDE1E6;
}

.ideditor .analytics-chart-svg .value-label {
  font-size: 14px;
  font-weight: 600;
  fill: #212B36;
  pointer-events: none;
}

.ideditor .donut-chart-svg-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px;
  /* width: 100%; */
}

.ideditor .donut-center-text text {
  pointer-events: none;
}

.ideditor .donut-center-title {
  font-size: 0.7rem;
  fill: var(--chartTextLight);
  text-transform: uppercase;
}

.ideditor .donut-center-value {
  fill: var(--chartText);
}

.ideditor .donut-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.ideditor .donut-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
}

.ideditor .donut-legend-item .legend-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 12px;
}

.ideditor .donut-legend-item .legend-text {
  color: var(--chartText);
  font-size: 14px;
  margin-right: auto;
}


.ideditor .donut-legend-item .legend-count {
  font-size: 13px;
  color: var(--chartText);
}

.ideditor .donut-legend-item .legend-value {
  font-size: 14px;
  color: var(--chartText);
}

.ideditor .analytics-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.ideditor .legend-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--chartText);
  cursor: pointer;
  transition: opacity 0.2s;
}

.ideditor .legend-item:hover {
  opacity: 0.7;
}

.ideditor .legend-color {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
}

.ideditor .legend-text {
  font-weight: 500;
}

.ideditor .analytics-tooltip-global {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(0.9);
  background-color: rgba(33, 33, 33, 0.95);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  min-width: 180px;
}

.ideditor .analytics-tooltip-global.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.ideditor .tooltip-header {
  font-weight: 700;
  font-size: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 8px;
}

.ideditor .tooltip-body {
  margin: 5px 0;
}

.ideditor .tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.ideditor .tooltip-row > span:first-of-type {
  display: flex;
  align-items: center;
}

.ideditor .tooltip-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.ideditor .tooltip-key {
  color: #B0B0B0;
  margin-right: 12px;
}

.ideditor .tooltip-value {
  font-weight: 700;
}

.ideditor .tooltip-footer {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 8px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.ideditor .yield-chart-container {
  margin-top: 24px;
}

.ideditor .yield-chart-legend {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  gap: 20px;
}

.ideditor .yield-legend-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--chartText);
}

.ideditor .yield-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin-right: 8px;
}

.ideditor .legend-item-left {
  display: flex;
  align-items: center;
}

.ideditor .donut-legend-item.highlighted {
  background-color: #f0f0f0;
}

.ideditor .legend-item-right {
  text-align: end;
}

.ideditor .chart-back-button {
  position: absolute;
  top: 5%;
  right: 12.6%;
  padding: 7px 20px;
  color: #fff;
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  margin: 0 auto;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.ideditor .chart-back-button:hover {
  background: linear-gradient(135deg, #F6CF79 0%, #3eb86b 100%);
}

.ideditor .analytics-legend-wrapper {
  display: flex;
  gap: 10px;
}

.ideditor .analytics-legend-item {
  padding: 5px 10px;
}

.ideditor .analytics-chart-container {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 20px;
  font-family: 'Inter', sans-serif;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Заголовок блока */
.ideditor .analytics-chart-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: -0.5px;
  line-height: 1.2;
  background: linear-gradient(45deg, #1d6141, #3a9d68);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Контейнер SVG */
.ideditor .line-chart-svg-container {
  width: 100%;
  height: auto;
  /* Убираем жесткую тень, SVG будет сам рисовать внутренние тени */
}

/* SVG элемент */

/* Стили осей */
.ideditor .x-axis path, .ideditor .y-axis path {
  stroke: none; /* Убираем основные линии осей */
}

.ideditor .x-axis .tick text, .ideditor .y-axis .tick text {
  font-size: 12px;
  fill: #7f8c8d; /* Мягкий серый для текста осей */
}

.ideditor .y-axis .tick line {
  stroke: #ecf0f1; /* Очень светлая сетка */
  stroke-dasharray: 4 4;
}

/* Стили линий и областей */
.ideditor .chart-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Эффект свечения добавляется через SVG filter */
}

/* Элементы легенды (кнопки выбора культур) */
.ideditor .analytics-legend-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 25px;
  padding: 0 15px;
}

.ideditor .legend-item {
  background-color: #f0f4f8;
  border: 1px solid #d3dee6;
  border-radius: 25px;
  padding: 2px 10px;
  font-size: 12px;
  color: #495057;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  outline: none;
}

.ideditor .legend-item:hover {
  background-color: #e2e8f0;
  border-color: #aeb8c2;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ideditor .legend-item.active {
  background: linear-gradient(45deg, #34d88e, #1a7e48);
  color: white;
  border-color: #1a7e48;
  box-shadow: 0 5px 15px rgba(46, 139, 87, 0.4);
  transform: translateY(-1px);
}

.ideditor .chart-back-button {
  font-size: 14px;
  font-weight: 500;
  fill: #007bff; /* Яркий синий */
  cursor: pointer;
  transition: fill 0.3s ease;
}

.ideditor .chart-back-button:hover {
  fill: #0056b3;
}

/* Стили для тултипа */
.ideditor .d3-tooltip {
  position: absolute;
  text-align: left;
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.95); /* Полупрозрачный фон */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Элегантная тень */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
  color: #34495e;
  line-height: 1.5;
}

.ideditor .d3-tooltip div:first-child {
  margin-bottom: 5px;
  font-size: 16px;
}

.ideditor .d3-tooltip div:nth-child(2),
.ideditor .d3-tooltip div:nth-child(3) {
  color: #7f8c8d;
}

@media (max-width: 1350px) {
  .ideditor .analytics-grid {
    grid-template-columns: 100%;
    gap: 16px;
  }

  .ideditor .analytics-left-column,
  .ideditor .analytics-right-column {
    gap: 16px;
  }

  .ideditor .analytics-chart-container {
    padding: 16px;
  }
}

@media (max-width: 900px) {
  .ideditor .analytics {
    margin-top: 20px;
  }

  .ideditor .analytics-chart-title {
    font-size: 1rem;
  }

  .ideditor .analytics-chart-container {
    padding: 10px;
    border-radius: 8px;
  }

  .ideditor .no-data-message {
    padding: 30px 0;
    font-size: 0.95rem;
  }

  .ideditor .donut-center-title {
    font-size: 0.6rem;
  }

  .ideditor .donut-center-value {
    font-size: 0.8rem;
  }

  .ideditor .donut-legend {
    gap: 8px;
    margin-top: 15px;
  }

  .ideditor .analytics-chart-container {
    text-align: center;
  }

  .ideditor .donut-legend-item {
    font-size: 0.75rem;
  }

  .ideditor .donut-legend-item .legend-text {
    font-size: 12px;
  }

  .ideditor .donut-legend-item .legend-count {
    font-size: 11px;
  }

  .ideditor .donut-legend-item .legend-value {
    font-size: 12px;
  }
}

.ideditor .ai-crop-area-block-charts-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-self: flex-start;
  gap: 20px;
  width: 100%;
}

@media (max-width: 900px) {
  .ideditor .ai-crop-area-block-charts-container {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
}

@media (max-width: 600px) {
  .ideditor .donut-center-title {
    font-size: 0.5rem;
  }

  .ideditor .donut-center-value {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .ideditor .analytics-chart-container {
    padding: 8px;
  }

  .ideditor .analytics-chart-title {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }

  .ideditor .donut-center-title {
    font-size: 0.45rem;
  }

  .ideditor .donut-center-value {
    font-size: 0.65rem;
  }

  .ideditor .donut-legend-item {
    font-size: 0.7rem;
  }

  .ideditor .donut-legend-item .legend-text {
    font-size: 11px;
  }

  .ideditor .donut-legend-item .legend-count {
    font-size: 10px;
  }

  .ideditor .donut-legend-item .legend-value {
    font-size: 11px;
  }
}

.ideditor .ai-crop-area-block-donut-legend {
  margin-top: 25px;
}

.ideditor .download-dashboard-button {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 8px 12px;
  background-color: #eff6ff;
  color: #1E3A8A;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1; /* Добавляем z-index для правильного наложения */
}

/* Контейнер для кнопки 'Назад к областям' в мобильной версии */
@media (max-width: 900px) {
  .ideditor .analytics-chart-container {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .ideditor .analytics-chart-title {
    margin-bottom: 10px;
  }


  .ideditor .chart-back-button {
    position: static !important;
    align-self: flex-start;
    font-size: 13px;
    padding: 6px 16px;
    margin-bottom: -10px;
    order: 1; /* Размещаем сразу после заголовка */
  }

  .ideditor .analytics-chart-title {
    order: 0; /* Заголовок первым */
  }

  /* Остальные элементы идут после кнопки */
  .ideditor .ui-select-wrapper {
    order: 2;
  }

  .ideditor .analytics-chart-svg,
  .ideditor .analytics-legend {
    order: 3;
  }
}

.ideditor .download-dashboard-button:hover {
  background-color: #dbeafe;
}

.ideditor .download-group {
  width: 100%;
  margin-top: 16px;
  order: 999; /* Гарантируем, что группа кнопок будет всегда последней */
}

.ideditor .download-button-divider {
  display: none;
  height: 1px;
  background-color: #E0E0E0;
  margin: 8px 0;
  width: 100%;
}

@media (max-width: 900px) {
  .ideditor .analytics .chart-back-button {
    top: 2.2%;
    right: 3%;
    font-size: 13px;
    padding: 2px 10px;
  }

  .ideditor .analytics .ui-select-wrapper {
    margin-top: 10px;
  }

  .ideditor .analytics-chart-container {
    display: flex;
    flex-direction: column;
  }

  .ideditor .download-group {
    margin-top: 12px;
    justify-items: center;
    order: 999; /* Явно указываем порядок и в медиа-запросе */
  }

  .ideditor .download-button-divider {
    display: block;
  }

  .ideditor .download-dashboard-button {
    position: static !important; /* Принудительно отключаем абсолютное позиционирование */
    align-self: center;
    margin: 0;
    padding: 8px 12px;
    order: 999;
  }

  /* Фиксим контейнер графика */
  .ideditor .ai-crop-area-block-charts-container {
    order: 1;
  }

  /* Фиксим селекты */
  .ideditor .analytics-ui-select-wrapper {
    order: 0;
  }
}

@media (min-width: 901px) {
  .ideditor .download-button-divider {
    display: none;
  }
}

.ideditor .analytics-ui-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ideditor .analytics-skeleton-wrapper {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ideditor .analytics-skeleton-animate {
  background: #f6f7f8;
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 20%,
    #f6f7f8 40%,
    #f6f7f8 100%
  );
  background-repeat: no-repeat;
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}

.ideditor .analytics-skeleton-title {
  width: 40%;
  height: 24px;
}

.ideditor .analytics-skeleton-controls {
  display: flex;
  gap: 10px;
}

.ideditor .analytics-skeleton-control {
  width: 120px;
  height: 36px;
  border-radius: 6px;
}

.ideditor .analytics-skeleton-chart-rect {
  width: 100%;
  flex-grow: 1;
  border-radius: 8px;
  min-height: 250px;
}

.ideditor .analytics-skeleton-chart-circle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  min-height: 250px;
}

.ideditor .analytics-skeleton-chart-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.ideditor .analytics-loading-block {
  min-height: 350px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.ideditor .chart-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.ideditor .chart-scroll-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.ideditor .arrow-right {
  right: 0;
  justify-content: flex-end;
  /*background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);*/
}

.ideditor .arrow-left {
  left: 0;
  justify-content: flex-start;
  /*background: linear-gradient(to right, rgba(255,255,255,0.8), transparent);*/
}

.ideditor .arrow-right,
.ideditor .arrow-left {
  position: absolute;
  top: 0;
  height: 100%;
  width: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #637381;
  z-index: 10;
  background-color: #fff;
}

.ideditor .group-background-highlight {
  pointer-events: none;
}
.ideditor .list-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (max-width: 900px) {
  .ideditor .list-container {
    padding-bottom: 100px;
  }
}
.ideditor .legend-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--chartText);
  cursor: pointer;
  transition: opacity 0.2s;
}

.ideditor .legend-item:hover {
  opacity: 0.7;
}

.ideditor .legend-text {
  color: var(--chartTextLight);
}
.ideditor .custom-preset-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.ideditor .custom-preset-content-wrapper {
  height:  calc(100% - 60px);
  overflow-y: auto;
  padding: 10px 10px 0 10px;
}

.ideditor .custom-preset-header-container {
  background: #fff;
  z-index: 1;
  padding-top: 10px;
  margin-bottom: 20px;
}.ideditor .edit-bar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  color: white;
  z-index: 1000;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.ideditor .edit-bar-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ideditor .edit-bar .text-block {
  display: flex;
  flex-direction: column;
}

.ideditor .edit-bar .text-block p {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.ideditor .edit-bar .bar-text-main {
  font-size: 14px;
  font-weight: 400;
  color: #d1d5db; /* cool-gray-300 */
}

.ideditor .edit-bar .bar-text-sub {
  font-size: 18px;
  font-weight: 600;
}

.ideditor .edit-bar .buttons {
  display: flex;
  gap: 12px;
}

.ideditor .edit-bar button {
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ideditor .edit-bar .cancel-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.ideditor .edit-bar .cancel-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.ideditor .edit-bar .save-btn {
  background-color: #3eb86b; /* Ваш зеленый */
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ideditor .edit-bar .save-btn:hover {
  background-color: #35a25e;
}

.ideditor .edit-bar .save-btn .icon-save {
  width: 16px;
  height: 16px;
}
.ideditor .field-editor-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px 20px 20px 79px;
  box-sizing: border-box;
}

.ideditor .field-editor-modal .modal-content {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  width: 100%;
  max-width: 1200px;
  height: auto;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
  0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ideditor .field-editor-modal .modal-header {
  padding: 32px 40px 24px;
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  color: white;
  position: relative;
}

.ideditor .field-editor-modal .modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.ideditor .field-editor-modal .modal-header p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 8px 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ideditor .field-editor-modal .modal-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ideditor .field-editor-modal .modal-body {
  padding: 32px 40px;
  overflow-y: auto;
  flex-grow: 1;
  background: #ffffff;
}

.ideditor .field-editor-modal .modal-body h4 {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a202c;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ideditor .field-editor-modal .modal-body h4::before {
  content: '🌾';
  font-size: 24px;
}

.ideditor .field-info-container {
  display: flex;
  gap: 32px;
  margin-bottom: 40px;
  align-items: flex-start;
}

.ideditor .field-editor-modal .seasons-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ideditor .field-editor-modal .season-block {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.ideditor .field-editor-modal .season-block:hover {
  border-color: #a7b4ec;
  box-shadow: 0 10px 25px -3px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.ideditor .field-editor-modal .season-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f1f5f9;
}

.ideditor .field-editor-modal .season-header .season-name {
  font-weight: 600;
  font-size: 18px;
  color: #1a202c;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ideditor .field-editor-modal .season-header .season-name::before {
  content: '📅';
  font-size: 20px;
}

.ideditor .field-editor-modal .season-header .season-dates {
  font-size: 14px;
  color: #64748b;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 500;
}

.ideditor .field-editor-modal .crops-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ideditor .field-editor-modal .crops-table th,
.ideditor .field-editor-modal .crops-table td {
  text-align: left;
  padding: 16px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}

.ideditor .field-editor-modal .crops-table th {
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 2px solid #e2e8f0;
}

.ideditor .field-editor-modal .crops-table tr:last-child td {
  border-bottom: none;
}

.ideditor .field-editor-modal .crops-table tr:hover {
  background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
}

.ideditor .field-editor-modal .crops-table tr.deleted-row {
  text-decoration: line-through;
  opacity: 0.5;
  background-color: #fef2f2;
}

.ideditor .field-editor-modal .crops-table tr.deleted-row input,
.ideditor .field-editor-modal .crops-table tr.deleted-row select,
.ideditor .field-editor-modal .crops-table tr.deleted-row button {
  pointer-events: none;
  background-color: #fdecec;
}

.ideditor .field-editor-modal .crops-table .actions-cell {
  text-align: center;
  width: 50px;
}

.ideditor .field-editor-modal .crops-table .delete-planting-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.ideditor .field-editor-modal .crops-table .delete-planting-btn:hover {
  background-color: #fef2f2;
}

.ideditor .field-editor-modal .crops-table input[type="text"],
.ideditor .field-editor-modal .crops-table .dropdown-imitation,
.ideditor .field-editor-modal .crops-table input[type="date"],
.ideditor .field-editor-modal .crops-table input[type="number"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.ideditor .crops-table select {
  padding: 0;
  height: 36.19px;
  width: 100%;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.ideditor .field-editor-modal .crops-table input[type="text"]:focus,
.ideditor .field-editor-modal .crops-table select:focus,
.ideditor .field-editor-modal .crops-table input[type="date"]:focus,
.ideditor .field-editor-modal .crops-table input[type="number"]:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background: #ffffff;
}

.ideditor .field-editor-modal .crops-table .dropdown-imitation {
  background: #ffffff;
  cursor: pointer;
  position: relative;
}

.ideditor .field-editor-modal .crops-table .dropdown-imitation::after {
  content: '▼';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 10px;
  pointer-events: none;
}

.ideditor .field-editor-modal .yield-input {
  display: flex;
  align-items: center;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.2s ease;
}

.ideditor .field-editor-modal .yield-input:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ideditor .field-editor-modal .yield-input input {
  border: none;
  background: transparent;
  width: 100%;
  padding: 12px 0px 12px 16px;
  font-size: 14px;
}

.ideditor .field-editor-modal .yield-input input:focus {
  outline: none;
}

.ideditor .field-editor-modal .yield-input span {
  padding: 12px 16px;
  color: #64748b;
  font-weight: 500;
  background: #f8fafc;
  border-left: 1px solid #e2e8f0;
  white-space: nowrap;
}

.ideditor .field-editor-modal .actions {
  width: 80px;
  text-align: center;
}

.ideditor .field-editor-modal .actions button {
  background: none;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ideditor .field-editor-modal .actions button:hover {
  border-color: #ef4444;
  background: #fef2f2;
  transform: scale(1.05);
}

.ideditor .field-editor-modal .actions button.delete-row-btn {
  color: #ef4444;
  font-size: 16px;
}

.ideditor .field-editor-modal .season-popup {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  z-index: 100;
  width: 280px;
  padding: 16px;
  margin-top: 8px;
  margin-bottom: 0;
  animation: popupSlideDown 0.2s ease;
}

.ideditor .season-popup {
  padding: 16px 0 16px 16px;
}

@keyframes popupSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ideditor .field-editor-modal .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
  border-bottom: 2px solid #f1f5f9;
}

.ideditor .field-editor-modal .popup-header .add-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #667eea;
  transition: all 0.2s ease;
}

.ideditor .field-editor-modal .popup-header .add-btn:hover {
  color: #5a67d8;
  transform: scale(1.1);
}

.ideditor .field-editor-modal .popup-season-list {
  overflow-x: hidden;
  border-top: none;
  border-bottom: 2px solid #f1f5f9;
  padding: 12px 0;
  margin: 12px 0 16px 0;
  max-height: 200px;
  overflow-y: auto;
}

.ideditor .field-editor-modal .season-item {
  padding: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}

.ideditor .field-editor-modal .season-item:hover {
  background: linear-gradient(90deg, #f8fafc 0%, #e0e7ff 100%);
  transform: translateX(4px);
}

.ideditor .field-editor-modal .season-item:last-child {
  margin-bottom: 0;
}

.ideditor .field-editor-modal .edit-season-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.ideditor .field-editor-modal .season-item:hover .edit-season-btn {
  opacity: 1;
  background: rgba(102, 126, 234, 0.1);
}

.ideditor .field-editor-modal .season-item .season-info {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex: 1;
}

.ideditor .field-editor-modal .season-item .season-name {
  display: block;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 2px;
}

.ideditor .field-editor-modal .season-item .season-dates {
  font-size: 12px;
  color: #64748b;
}

.ideditor .field-editor-modal .add-to-season-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  color: white;
  transition: all 0.2s ease;
  font-size: 14px;
}

.ideditor .field-editor-modal .add-to-season-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.ideditor .field-editor-modal .modal-footer {
  padding: 24px 40px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 2px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ideditor .field-editor-modal .modal-footer-content h2,
.ideditor .field-editor-modal .modal-footer-content p {
  margin: 0;
}

.ideditor .field-editor-modal .modal-footer-content p {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ideditor .field-editor-modal .modal-footer-content h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin-top: 4px;
}

.ideditor .field-editor-modal .modal-footer-buttons {
  display: flex;
  gap: 12px;
}

.ideditor .field-editor-modal .modal-footer-buttons button {
  padding: 14px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: center;
}

.ideditor .field-editor-modal .modal-footer-buttons .cancel-btn {
  background: #f1f5f9;
  color: #64748b;
  border: 2px solid #e2e8f0;
}

.ideditor .field-editor-modal .modal-footer-buttons .cancel-btn:hover {
  background: #e2e8f0;
  color: #475569;
  transform: translateY(-1px);
}

.ideditor .field-editor-modal .modal-footer-buttons .save-btn {
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.ideditor .field-editor-modal .modal-footer-buttons .save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.ideditor .season-edit-modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050;
  padding: 20px;
  box-sizing: border-box;
}

.ideditor .season-edit-modal-container .modal-content {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
  0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ideditor .season-edit-modal-container .modal-header {
  padding: 28px 32px 20px;
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.ideditor .season-edit-modal-container .modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.ideditor .season-edit-modal-container .modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ideditor .season-edit-modal-container .modal-header .close-btn {
  background: transparent;
  border: 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ideditor .season-edit-modal-container .modal-header .close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: scale(1.1);
}

.ideditor .season-edit-modal-container .modal-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #ffffff;
}

.ideditor .season-edit-modal-container .modal-body label {
  font-size: 14px;
  margin-bottom: 6px;
  color: #374151;
  font-weight: 600;
  display: block;
}

.ideditor .season-edit-modal-container .name-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ideditor .season-edit-modal-container .name-input-wrapper input[type="text"] {
  width: 100%;
  padding: 16px 48px 16px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  background: #ffffff;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.ideditor .season-edit-modal-container .name-input-wrapper input[type="text"]:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ideditor .season-edit-modal-container .name-input-wrapper .clear-btn {
  position: absolute;
  right: 12px;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: #64748b;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ideditor .season-edit-modal-container .name-input-wrapper .clear-btn:hover {
  background: #e2e8f0;
  color: #475569;
  transform: scale(1.1);
}

.ideditor .season-edit-modal-container .date-pickers {
  display: flex;
  gap: 16px;
}

.ideditor .season-edit-modal-container .date-picker {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ideditor .season-edit-modal-container .date-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.ideditor .season-edit-modal-container .date-input:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ideditor .season-edit-modal-container .date-input input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 16px;
  cursor: pointer;
}

.ideditor .season-edit-modal-container .date-input input:focus {
  outline: none;
}

.ideditor .season-edit-modal-container .delete-season-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  text-align: left;
  padding: 12px 16px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 14px;
}

.ideditor .season-edit-modal-container .delete-season-btn:hover {
  background: #fef2f2;
  transform: translateX(4px);
}

.ideditor .season-edit-modal-container .modal-footer {
  padding: 24px 32px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 2px solid #e2e8f0;
}

.ideditor .season-edit-modal-container .modal-footer button {
  padding: 14px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  transition: all 0.2s ease;
}

.ideditor .season-edit-modal-container .modal-footer .cancel-btn {
  background: #f1f5f9;
  color: #64748b;
  border: 2px solid #e2e8f0;
}

.ideditor .season-edit-modal-container .modal-footer .cancel-btn:hover {
  background: #e2e8f0;
  color: #475569;
  transform: translateY(-1px);
}

.ideditor .season-edit-modal-container .modal-footer .save-btn {
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.ideditor .season-edit-modal-container .modal-footer .save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.ideditor .field-editor-modal .season-loading,
.ideditor .field-editor-modal .no-seasons {
  text-align: center;
  padding: 20px;
  color: #64748b;
  font-style: italic;
}

.ideditor .field-editor-modal .input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.ideditor .field-editor-modal .modal-body::-webkit-scrollbar,
.ideditor .field-editor-modal .popup-season-list::-webkit-scrollbar {
  width: 6px;
}

.ideditor .field-editor-modal .modal-body::-webkit-scrollbar-track,
.ideditor .field-editor-modal .popup-season-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.ideditor .field-editor-modal .modal-body::-webkit-scrollbar-thumb,
.ideditor .field-editor-modal .popup-season-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.ideditor .field-editor-modal .modal-body::-webkit-scrollbar-thumb:hover,
.ideditor .field-editor-modal .popup-season-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.ideditor .field-editor-modal .crops-table tfoot tr:first-child td {
  border-bottom: none;
  padding-top: 8px;
  text-align: left;
}

.ideditor .field-editor-modal .add-planting-btn {
  width: auto;
  padding: 8px 16px;
  border-radius: 8px;
  background: transparent;
  border: 1px dashed #cbd5e1;
  color: #475569;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

.ideditor .field-editor-modal .add-planting-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}

.ideditor .field-editor-modal .add-planting-btn svg {
  margin-right: 8px;
}

.ideditor .field-editor-modal .modal-content.loading {
  filter: blur(4px);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ideditor .field-editor-modal .loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.ideditor .field-editor-modal .loader-overlay .spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-left-color: #3eb86b; /* Цвет вашего бренда */
  margin-bottom: 20px;
  animation: spin 1s ease infinite;
}

.ideditor .field-editor-modal .loader-overlay p {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ideditor .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}

.ideditor .crop-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.ideditor .not-found-crop-text {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
}

.ideditor .not-found-crop-description {
  margin: 0;
  font-size: 14px;
}

.ideditor .field-editor-modal .edit-bounds-btn .add-season-btn {
  height: 41.33px;
}

.ideditor .add-season-btn, .ideditor .edit-bounds-btn {
  height: 41.33px;
}

.ideditor .field-editor-modal .section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.ideditor .field-editor-modal .section-header-row h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.ideditor .field-editor-modal .header-buttons {
  display: flex;
  gap: 12px;
}

.ideditor .field-editor-modal .header-buttons .edit-bounds-btn,
.ideditor .field-editor-modal .header-buttons .add-season-btn,
.ideditor .edit-bounds-btn {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ideditor .field-editor-modal .header-buttons .edit-bounds-btn:hover,
.ideditor .field-editor-modal .header-buttons .add-season-btn:hover {
  background-color: #e2e8f0;
  border-color: #cbd5e1;
}

.ideditor .field-editor-modal .header-buttons .add-season-btn::before {
  content: '+';
  font-size: 18px;
  font-weight: bold;
}

.ideditor .field-editor-modal .header-buttons .edit-bounds-btn:hover {
  border-color: #667eea;
  background: linear-gradient(145deg, #f8fafc 0%, #e0e7ff 100%);
  color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.ideditor .field-editor-modal .header-buttons .add-season-btn:hover {
  border-color: #667eea;
  background: linear-gradient(145deg, #f8fafc 0%, #e0e7ff 100%);
  color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.ideditor .field-info-block {
  flex: 0 0 40%;
  min-width: 340px;
  width: 100%;
}

.ideditor .field-info-map-block {
  flex: 1 1 60%;
  /* min-width: 400px; */
  height: 455px;
  position: relative;
}

.ideditor .field-editor-modal .field-info-block.empty-field-info-block {
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 24px;
  padding: 24px 28px 20px 28px;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

.ideditor .field-editor-modal .field-info-block.empty-field-info-block .empty-info-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.ideditor .field-editor-modal .field-info-block.empty-field-info-block .empty-info-title {
  font-size: 18px;
  font-weight: 500;
  margin: 8px 0 4px 0;
}

.ideditor .field-editor-modal .field-info-block.empty-field-info-block .empty-info-desc {
  color: #64748b;
  font-size: 14px;
}

/* --- Новые классы для переноса inline-стилей из JS --- */

.ideditor .field-info-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.ideditor .field-info-row.pasture-animals-block {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ideditor .field-info-label {
  width: 160px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
}
.ideditor .field-info-label.pasture-animals-label {
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
}

.ideditor .field-info-input,
.ideditor .field-info-select {
  flex: 1 1 0;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: 0 14px;
  font-size: 15px;
  color: #0f172a;
}

.ideditor .field-info-input:focus,
.ideditor .field-info-select:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.15);
}

.ideditor .field-info-input:blur,
.ideditor .field-info-select:blur {
  border-color: #cbd5e1;
  box-shadow: none;
}

.ideditor .field-info-readonlyText {
  font-size: 15px;
  color: #334155;
  font-weight: 500;
}

.ideditor .pasture-animals-list {
  width: 100%;
}
.ideditor .pasture-animal-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  width: 100%;
}
.ideditor .pasture-animal-row select,
.ideditor .pasture-animal-row input[type="number"] {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 1rem;
}
.ideditor .remove-animal-btn {
  background: none;
  color: #dc3545;
  border: none;
  font-size: 1.5em;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
}

.ideditor .add-animal-btn {
  margin-top: 8px;
  background: #f6fff8;
  color: #10b981;
  border: 1.5px solid #10b981;
  border-radius: 6px;
  padding: 6px 18px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: all 1s cubic-bezier(.4,0,.2,1);
  box-shadow: none;
  outline: none;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 0;
}

.ideditor .edit-bounds-btn-under-map {
  background-color: #f1f5f9;
  margin-top: 15px;
  color: #475569;
  border: 1px solid #e2e8f0;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ideditor .field-info-map-block .main-content {
  height: 100%;
  min-height: 320px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* --- Адаптивность для мобильных устройств --- */
@media (max-width: 900px) {
  .ideditor .field-editor-modal {
    padding: 15px 15px 15px 69px;
    height: calc(100dvh - 59px);
  }

  .ideditor .field-editor-modal .modal-content {
    max-width: 95%;
    margin: 10px;
    height: 100%;
  }

  .ideditor .field-editor-modal .modal-header {
    padding: 20px 15px;
  }

  .ideditor .field-info-container {
    flex-direction: column-reverse;
    margin: 0;
  }

  .ideditor .field-info-map-block {
    min-width: 100%;
  }

  .ideditor .field-editor-modal .field-info-block.empty-field-info-block {
    padding: 20px 10px;
    margin: 0;
    min-width: 100%;
    width: 100%;
  }

  .ideditor .section-header-row {
    margin-top: 32px;
  }

  .ideditor .edit-bounds-btn {
    color: #fff;
  }

  .ideditor .field-editor-modal .crops-table {
    font-size: 12px;
  }

  .ideditor .field-editor-modal .crops-table th,
  .ideditor .field-editor-modal .crops-table td {
    padding: 12px 8px;
  }

  .ideditor .season-edit-modal-container .modal-content {
    max-width: 95%;
    margin: 10px;
  }

  .ideditor .season-edit-modal-container .date-pickers {
    flex-direction: column;
    gap: 12px;
  }

  .ideditor .field-editor-modal .modal-footer {

  }
}
@media (max-width: 768px) {
  .ideditor .field-editor-modal {
    padding-left: 15px;
  }
  .ideditor .field-editor-modal .modal-content {
    max-width: 100vw;
    border-radius: 0;
    margin: 0;
  }
  .ideditor .field-info-row {
    gap: 4px;
  }
  .ideditor .field-info-label {
    font-size: 13px;
  }
  .ideditor .field-info-input, .ideditor .field-info-select {
    font-size: 14px;
    height: 32px;
    padding: 0 8px;
  }
  .ideditor .pasture-animal-row select, .ideditor .pasture-animal-row input[type="number"] {
    font-size: 14px;
    padding: 6px 8px;
  }
  .ideditor .add-animal-btn {
    font-size: 0.95em;
    padding: 5px 8px;
  }
  .ideditor .modal-footer-content {
    display: none;
  }
  .ideditor .field-editor-modal .modal-footer {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 4px;
    padding-top: 0;
    gap: 8px;
  }
  .ideditor .field-editor-modal .modal-footer-content {
    margin-bottom: 4px;
    text-align: center;
  }
  .ideditor .field-editor-modal .modal-footer-buttons {
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  .ideditor .field-editor-modal .modal-footer-buttons button {
    min-width: 0;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
    font-size: 15px;
    border-radius: 8px;
  }

  .ideditor .field-editor-modal .section-header-row .edit-bounds-btn {
    display: none !important;
  }

  .ideditor .seasons-container {
    overflow-x: auto;
  }
  .ideditor .crops-table {
    width: 100%;
    min-width: 600px;
    max-width: 100%;
  }
  .ideditor .season-block {
    overflow-x: auto;
  }
  .ideditor .modal-content, .ideditor .modal-body {
    max-width: 100vw;
    overflow-x: auto;
  }
}
.ideditor .feature-list-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ideditor .search-header {
  flex-shrink: 0;
}

.ideditor .crops-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  flex: 1;
  min-height: 0;
  padding-top: 10px;
  height: 100%;
  scroll-behavior: smooth;
}

.ideditor .crops {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-top: 10px;
  height: 100%;
  scroll-behavior: smooth;
}

.ideditor .magnifier-swirling {
  display: inline-block;
  transform-origin: 90% 90%;
  animation: swirl 1.5s ease-in-out infinite;
}

@keyframes swirl {
  0% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

.ideditor .no-results-found-message, .ideditor .initial-search-message {
  text-align: center;
  font-size: 16px;
  margin: 32px 0 0 0;
  font-weight: 400;
}

.ideditor .footer {
  width: 100%;
  background: #fff;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.ideditor .create-field-text {
  color: var(--dark-grey-text);
  font-size: 16px;
  font-weight: 500;
}

.ideditor .create-field-icon {
  margin-bottom: 5px;
}

.ideditor .regions-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.ideditor .region-wrapper {
  border-radius: 4px;
  overflow: hidden;
}

.ideditor .region-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.ideditor .region-header:hover {
  background-color: #e0e0e0;
}

.ideditor .region-title {
  margin: 0;
  font-size: 13px;
  color: var(--dark-grey-text);
  flex-grow: 1;
  font-weight: 400;
}

.ideditor .toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.ideditor .toggle-icon svg {
  width: 100%;
  height: 100%;
  color: #666;
}

.ideditor .region-header.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.ideditor .region-content {
  padding: 10px;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  max-height: 500px;
  overflow-y: hidden;
  opacity: 1;
}

.ideditor .region-content.hidden {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  border-top: none;
}

.ideditor .clusterize-scroll {
  max-height: 400px;
  overflow-y: auto;
}

.ideditor .field-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px 12px 15px;
  margin: 4px 0;
  gap: 5px;
  background: #fff;
  box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
}

.ideditor .field-item:last-child {
  border-bottom: none;
}

.ideditor .field-item:hover {
  background: #f1f1f1;
}

.ideditor .field-item h4 {
  margin: 0;
  font-size: 1em;
  color: #444;
}

.ideditor .field-item p {
  margin: 0;
  font-size: 0.85em;
  color: #777;
}

.ideditor .no-results-found-message, .ideditor .initial-search-message {
  text-align: center;
  padding: 30px 20px;
  color: #888;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin: 10px;
}

.ideditor .help-container {
  display: flex;
  flex-direction: column;
  gap: 36px;
  background: #f4f7fb;
  min-height: 100vh;
}

.ideditor .help-block {
  background: #fff;
  border-radius: 20px;
  border: none;
  box-shadow: 0 2px 16px rgba(33, 150, 243, 0.07), 0 1.5px 6px rgba(30,42,60,0.04);
  padding: 20px;
  position: relative;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  min-width: 0;
  overflow: visible;
}

.ideditor .help-block::before {
  /*content: '';*/
  display: block;
  position: absolute;
  left: 0; top: 28px; bottom: 28px;
  width: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, #000 0%, #000 100%);
}

.ideditor .help-title {
  font-size: 24px;
  font-weight: 600;
  color: #333 !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: 30px;
  align-self: center;
  text-transform: uppercase;
}

.ideditor .help-description {
  font-size: 16px;
  color: #374151;
  line-height: 1.7;
}

.ideditor .help-image-lightbox-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(30,42,60,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ideditor .help-image-lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: 18px; box-shadow: 0 8px 40px rgba(33,150,243,0.18); border: 2px solid #fff; background: #fff; }
.ideditor .help-image-lightbox-close { position: fixed; top: 32px; right: 48px; font-size: 2.2em; color: #fff; background: none; border: none; cursor: pointer; z-index: 10000; }
.ideditor .help-image-lightbox-close:hover { color: #90caf9; }

/* Стили для изображений */
.ideditor .help-image {
  display: block;
  max-width: 480px;
  max-height: 340px;
  height: auto;
  border-radius: 5px;
  -o-object-fit: contain;
     object-fit: contain;
  cursor: pointer;
  transition: none;
  margin-bottom: 10px;
}

.ideditor .help-pdf-link {
  display: inline-flex;
  align-items: center;
  background: #e3f2fd;
  color: #1976d2;
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 0 10px 0;
  text-decoration: none;
  box-shadow: 0 1.5px 6px rgba(30,42,60,0.04);
  font-size: 16px;
  border: 1.5px solid #90caf9;
  transition: none;
}
.ideditor .help-pdf-link svg {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
}
.ideditor .help-pdf-link:hover {
  background: #e3eaf2;
  color: #0d47a1;
  text-decoration: none;
}


@media (max-width: 900px) {
  .ideditor .help-image-lightbox-img {
    max-width: 98vw;
    max-height: 65vh;
    border-radius: 10px;
  }
  .ideditor .help-image-lightbox-close {
    top: 10px;
    right: 10px;
    font-size: 2.5em;
    padding: 0 8px;
  }
  .ideditor .help-image {
    max-width: 94%;
    max-height: 180px;
  }
  .ideditor .help-block {
    padding: 10px;
    border-radius: 10px;
  }
  .ideditor .help-title {
    font-size: 16px;
  }
  .ideditor .help-description {
    font-size: 14px;
  }
  .ideditor .help-pdf-link {
    padding: 10px 10px;
    margin: 16px 0 0 18px;
    font-size: 14px;
  }
  .ideditor .help-pdf-link svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
  }
}

.ideditor .help-description-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 15px;
}

/* Стиль для каждого параграфа */
.ideditor .help-paragraph {
  font-size: 16px;
  margin-bottom: 1.2em; /* Добавляет отступ между абзацами */
  line-height: 1.6; /* Улучшает читабельность текста */
  text-align: justify; /* Делает текст аккуратнее по ширине */
}

/* Стиль для формул */
.ideditor .help-formula {
  background-color: #f4f4f4; /* Светлый фон для формулы */
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
  white-space: pre-wrap; /* Сохраняет пробелы и переносы */
  overflow-x: auto; /* Позволяет прокручивать длинные формулы */
}

/* Стиль для жирного текста внутри описания */
.ideditor .help-description-container strong {
  display: block; /* Делает жирный заголовок отдельной строкой */
  margin-top: 10px;
  font-weight: 700;
}
.ideditor .help-widget-modern-container {
  padding: 15px;
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .ideditor .help-widget-modern-container {
    max-width: unset;
    margin: 0;
  }
}

.ideditor .help-widget-modern-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.ideditor .help-widget-modern-back-btn {
  background: none;
  border: none;
  font-size: 1.7em;
  cursor: pointer;
  color: #888;
  margin-right: 10px;
  transition: color 0.2s;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ideditor .help-widget-modern-back-btn:hover {
  color: #2196F3;
  background: #f0f7ff;
}

.ideditor .help-widget-modern-title {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.ideditor .help-widget-modern-subtitle {
  font-size: 1em;
  color: #666;
  width: 100%;
}

.ideditor .help-widget-modern-card-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ideditor .help-widget-modern-card {
  display: flex;
  align-items: flex-start;
  background: #e6e6e8;
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  border: 1px solid transparent;
}
.ideditor .help-widget-modern-card:hover {
  background: #e3f2fd;
  box-shadow: 0 4px 16px rgba(33,150,243,0.10);
  border: 1px solid #90caf9;
  transform: translateY(-2px) scale(1.02);
}

.ideditor .help-widget-modern-card-icon {
  width: 48px;
  height: 48px;
  margin-right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ideditor .help-widget-modern-card-content {
  flex: 1;
}

.ideditor .help-widget-modern-card-title {
  font-size: 1.13em;
  font-weight: 600;
}

.ideditor .help-widget-modern-card-description {
  font-size: 1em;
  color: #555;
  margin: 0;
}


.ideditor .index-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.ideditor .index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
  min-height: 120px;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  align-items: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.ideditor .index-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.ideditor .index-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  transition: box-shadow 0.3s ease;
}

.ideditor .index-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.ideditor .index-card:hover::after {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.ideditor .index-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.ideditor .index-card-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ideditor .index-card-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ideditor .index-value-display {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ideditor .index-value-display span {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 8px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ideditor .index-interpretation-text {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1200px) {
  .ideditor .index-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
  }

  .ideditor .index-card {
    min-height: 110px;
    padding: 14px;
  }

  .ideditor .index-card-title {
    font-size: 15px;
  }

  .ideditor .index-value-display {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .ideditor .index-cards-container {
    padding: 16px;
    margin: 16px 0;
  }

  .ideditor .index-cards-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .ideditor .index-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ideditor .index-card {
    min-height: 100px;
    padding: 12px;
  }

  .ideditor .index-card-title {
    font-size: 14px;
  }

  .ideditor .index-value-display {
    font-size: 20px;
  }

  .ideditor .index-interpretation-text {
    font-size: 12px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ideditor .index-card {
  animation: fadeInUp 0.6s ease-out;
}

.ideditor .index-card:nth-child(1) { animation-delay: 0.1s; }
.ideditor .index-card:nth-child(2) { animation-delay: 0.2s; }
.ideditor .index-card:nth-child(3) { animation-delay: 0.3s; }
.ideditor .index-card:nth-child(4) { animation-delay: 0.4s; }
.ideditor .index-card:nth-child(5) { animation-delay: 0.5s; }


.ideditor .ui-analysis-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 200px;
}
.ideditor .recommendation-wrapper .field-info-key {
  color: #f59e0b;
  font-weight: 600;
}

.ideditor .recommendation-wrapper .field-info-value {
  color: #78350f;
  font-weight: 500;
}

.ideditor .analysis-block {
  margin-top: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ideditor .analysis-content {
  margin-top: 20px;
}

.ideditor .recommendation-wrapper {
  padding: 20px
}

.ideditor .datepicker-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-out forwards;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.ideditor .datepicker-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 30px;
  max-width: 78%;
  width: auto;
  height: auto;
  max-height: 90vh;
  opacity: 0;
  animation: scaleIn 0.3s ease-out 0.1s forwards;
}

.ideditor .datepicker-blocks {
  display: flex;
  align-items: center;
  margin-top: 24px;
  gap: 40px;
}

.ideditor .datepicker-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 200px;
}

.ideditor .datepicker-selectors-container {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.ideditor .datepicker-selector-block {
  display: flex;
  align-items: center;
  min-width: 150px;
  font-size: 12px;
}

.ideditor .datepicker-selector-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.ideditor .datepicker-selector-block svg:hover {
  border-radius: 50%;
  background: #ddd;
  transform: scale(1.1);
  transition: transform 0.2s ease-out;
  cursor: pointer;
}

.ideditor .datepicker-selector-block div {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ideditor .datepicker-calendar-container {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  box-sizing: border-box;
  margin-top: 20px;
}

.ideditor .datepicker-calendar-table {
  width: 100%;
  border-collapse: collapse;
}

.ideditor .datepicker-calendar-thead {
  width: 100%;
  background-color: #f0f0f0;
}

.ideditor .datepicker-calendar-row {
  height: 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 10px;
}

.ideditor .datepicker-calendar-th {
  text-align: center;
  padding: 8px 0;
  font-weight: bold;
  color: #555;
  font-size: 14px;
}

.ideditor .datepicker-calendar-tbody .datepicker-calendar-row {
  /* Стили для каждой строки дней */
}

.ideditor .datepicker-calendar-td {
  width: 12%;
  text-align: center;
  padding: 4px 8px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  border-radius: 50%;
}

.ideditor .datepicker-calendar-td.isSingle {
  color: #3eb86b;
  font-weight: 600;
}

.ideditor .datepicker-calendar-td.selected.isSingle {
  background-color: #3eb86b;
}

.ideditor .today {
  background-color: #000;
  opacity: 0.3;
  color: #fff;
}

.ideditor .datepicker-calendar-td:hover {
  background-color: #000;
  opacity: 0.3;
  color: #fff;
}

.ideditor .datepicker-calendar-td.selected {
  background-color: #000;
  color: #fff;
  font-weight: bold;
}

.ideditor .datepicker-calendar-td.inactive {
  color: #ccc;
  cursor: default;
}

.ideditor .datepicker-calendar-td.inactive:hover {
  background-color: transparent;
  color: #ccc;
  cursor: pointer;
}

.ideditor .datepicker-buttons-block {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.ideditor .datepicker-button {
  padding: 8px 16px;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.ideditor .unselectable-text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (max-width: 1100px) {
  .ideditor .datepicker-calendar-row {
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .ideditor .datepicker-modal {
    top: 47%;
    max-width: 97%;
    padding: 10px 5px 50px 10px;
    overflow-y: auto;
  }

  .ideditor .datepicker-blocks {
    justify-content: center;
  }

  .ideditor .datepicker-modal {
    max-width: 100%;
    width: 97%;
  }

  .ideditor .datepicker-buttons-block {
    justify-content: center;
  }

  .ideditor .datepicker-button {
    width: 100%;
  }
}

@media (max-width: 850px) {
  .ideditor .datepicker-calendar-row {
    gap: 12px;
    margin: 4px;
  }
}

@media (max-width: 730px) {
  .ideditor .datepicker-blocks {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 440px) {
  .ideditor .weather-modal-header {
    font-size: 32px;
  }

  .ideditor .datepicker-blocks {
    flex-direction: column;
    gap: 20px;
  }

  .ideditor .datepicker-calendar-container {
    padding: 10px;
    margin-top: 18px;
  }

  .ideditor .datepicker-calendar-row {
    gap: 12px;
    margin: 4px;
  }
}
.ideditor .loading-blur {
  filter: blur(4px);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ideditor .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3500;
  pointer-events: none;
}

.ideditor .loading-overlay .loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-left-color: #3eb86b;
  margin-bottom: 20px;
  animation: loading-overlay-spin 1s ease infinite;
}

.ideditor .loading-overlay .loading-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin: 0;
}

@keyframes loading-overlay-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.ideditor .loan-form-container {
  position: relative;
  padding-bottom: 60px;
}

.ideditor .field-data-wrapper {
  margin-bottom: 20px;
}

.ideditor .loan-form-info-block {
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  border-radius: 10px;
  font-size: 16px;
}

.ideditor .loan-form-culture-info-block,
.ideditor .loan-form-yield-info-block,
.ideditor .loan-form-index-info-block {
  padding: 0;
}

.ideditor .loan-form-crop-content-block {
  display: flex;
  margin-bottom: 50px;
}

.ideditor .loan-form-field-info-block {
  border-radius: 0 0 10px 10px;
}

.ideditor .loan-form-user-block,
.ideditor .loan-form-banks-block,
.ideditor .loan-form-loan-block,
.ideditor .loan-form-attached-block,
.ideditor .loan-form-field-info-block,
.ideditor .loan-form-approve-block {
  padding: 20px;
}

.ideditor .loan-form-info-block-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ideditor .loan-form-info-block-title-icon {
  padding-top: 7px;
}

.ideditor .loan-form-info-block-title-wrapper {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  border-radius: 10px;
  color: #fff;
}

.ideditor .loan-form-info-block-title {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0;
}

.ideditor .toggle-icon {
  transition: transform 0.3s ease;
  display: flex;
}

.ideditor .loan-form-info-block-title-wrapper.collapsed {
  border-radius: 8px 8px 0 0;
}

.ideditor .loan-form-info-block-title-wrapper.collapsed .toggle-icon {
  transform: rotate(-180deg);
}

.ideditor .toggle-icon svg {
  width: 30px;
  height: 30px;
}

.ideditor .loan-form-files-content.hidden {
  display: none;
}

.ideditor .loan-form-info-block-title {
  font-size: 18px;
  font-weight: 600;
}

.ideditor .loan-form-info-block h2 {
  font-size: 24px;
  margin-bottom: 50px;
}

.ideditor .loan-form-info-block-content {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 40px;
}

.ideditor .loan-form-loan-block-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ideditor .loan-form-fields-block-content {
  display: flex;
  width: 1000px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 200px;
  margin-bottom: 50px;
}

.ideditor .land-content,
.ideditor .main-info-content,
.ideditor .loan-form-info-block-content,
.ideditor .loan-form-approve-content {
  margin-top: 20px;
}

.ideditor .loan-form-approve-content-status-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ideditor .loan-form-approve-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ideditor .culture-content,
.ideditor .yield-content {
  width: 560px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 200px;
  margin-top: 20px;
}

.ideditor .index-content {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 200px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.ideditor .field-info-key {
  flex: 0 0 260px;
  margin-right: 20px;
  font-weight: 400;
  color: #4B5563;
}

.ideditor .field-info-value {
  font-weight: 500;
  flex: 1 1 auto;
  word-break: break-word;
}

.ideditor .field-info-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 360px;
  box-sizing: border-box;
}

.ideditor .user-field-wrapper {
  display: flex;
  flex-direction: column;
  width: 350px;
  margin-right: 20px;
}

.ideditor .user-field-wrapper label {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: -5px;
  color: var(--light-grey2);
}

.ideditor .user-field-wrapper .user-input-farmer-role {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

.ideditor .user-field-wrapper .user-input-farmer-role:focus {
  outline: none;
  border-color: #255F38;
  /*box-shadow: 0 0 0 0.2rem rgba(37, 95, 56, 0.5);*/
}

.ideditor .user-field-wrapper .user-input-bank-role {
  border: none;
  background-color: transparent;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  cursor: default;
  width: 100%;
  box-sizing: border-box;
}

.ideditor .user-field-wrapper .user-input-bank-role:disabled {
  opacity: 1;
}

.ideditor .field-checkbox-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  margin-bottom: 8px;
}

.ideditor .field-checkbox-wrapper input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  margin-right: 8px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ideditor .field-checkbox-wrapper input[type="checkbox"]:hover {
  border-color: #999;
}

.ideditor .field-checkbox-wrapper input[type="checkbox"]:focus {
  outline: none;
  border-color: #255F38;
}

.ideditor .field-checkbox-wrapper input[type="checkbox"]:checked {
  background-color: #255F38;
  border-color: #255F38;
}

.ideditor .field-checkbox-wrapper input[type="checkbox"]:checked::before {
  content: '';
  display: block;
  width: 17px;
  height: 16px;
  margin: 3px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.ideditor .field-checkbox-wrapper label {
  font-size: 1em;
  color: #333;
  cursor: pointer;
  margin-bottom: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ideditor .no-fields-placeholder {
  font-style: italic;
  color: #777;
  padding: 15px;
  border: 1px dashed #ddd;
  border-radius: 5px;
  background-color: #f0f0f0;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.ideditor .loan-form-files-content {
  display: flex;
  flex-direction: column;
  justify-content: start;
  flex-wrap: wrap;
  align-items: start;
  gap: 5%;
  padding: 20px
}

.ideditor .loan-form-files-list {
  display: flex;
  gap: 20px;
}

.ideditor .btn-add-file {
  display: inline-flex;
  align-items: center;
  padding: 11px 16px;
  margin-top: 20px;
  background: #F6CF79;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1;
}

.ideditor .btn-add-file:focus {
  background: #F6CF79;
}

.ideditor .btn-add-file:hover {
  background: #e0b95a;
}

.ideditor .files-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ideditor .file-pill,
.ideditor .file-pill-zip {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.ideditor .file-pill__name {
  margin-right: 12px;
  padding: 8px 0;
  font-weight: 500;
}

.ideditor .file-pill__remove {
  font-size: 29px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.ideditor .file-pill:hover,
.ideditor .file-pill-zip:hover,
.ideditor .file-pill__remove:hover {
  background: #F6CF79;
}

.ideditor .rejection-reason-wrapper {
  margin-bottom: 15px;
}

.ideditor .rejection-reason-textarea {
  width: 50%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  box-sizing: border-box;
  resize: vertical;
}

.ideditor .rejection-reason-textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.ideditor .rejection-reason-wrapper.invalid .rejection-reason-textarea {
  border-color: #dc3545;
}

.ideditor .rejection-reason-wrapper.invalid .rejection-reason-textarea::-moz-placeholder {
  color: #dc3545;
}

.ideditor .rejection-reason-wrapper.invalid .rejection-reason-textarea::placeholder {
  color: #dc3545;
}

.ideditor .loan-action-buttons {
  display: flex;
  gap: 15px;
}

.ideditor .loan-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px 10px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  transition: background-color 0.2s ease;
}

.ideditor .loan-action-button .loan-action-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.ideditor .approve-button {
  background-color: #28a745;
}

.ideditor .approve-button:hover {
  background-color: #218838;
}

.ideditor .reject-button {
  background-color: #dc3545;
}

.ideditor .reject-button:hover {
  background-color: #c82333;
}

.ideditor .add-application-btn {
  display: flex;
  margin: 40px auto 0;
  border-radius: 8px;
  font-size: 18px;
  background-color: #F6CF79;
  padding: 10px 30px;
  border: none;
  width: 270px;
  align-self: center;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.60);
}

.ideditor .add-application-btn:hover {
  background-color: #e0b95a;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.ideditor .add-application-btn:disabled {
  background-color: #f1f5f9;
}

.ideditor .ui-analysis-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 200px;
}

@media (max-width: 1200px) {
  .ideditor .loan-form-crop-content-block {
    flex-direction: column;
    gap: 50px;
  }

  .ideditor .loan-form-fields-block-content {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .ideditor .loan-form-files-list {
    flex-direction: column;
  }

  .ideditor .field-info-key {
    flex: 0;
  }

  .ideditor .loan-form-info-block-content {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  .ideditor .loan-form-info-block-title {
    font-size: 16px;
  }

  .ideditor .user-field-wrapper {
    width: 100%;
    margin: 0;
  }

  .ideditor .field-checkbox-wrapper label {
    font-size: 12px;
  }

  .ideditor .field-info-wrapper {
    flex-direction: column;
    min-width: 100%;
  }

  .ideditor .index-content {
    width: 100%;
  }

  .ideditor .culture-content,
  .ideditor .yield-content {
    width: 100%;
  }

  .ideditor .index-value-display {
    font-size: 17px;
  }

  .ideditor .add-application-btn {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
  }

  .ideditor .btn-add-file {
    display: flex;
    margin: 20px auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}
.ideditor .ui-popover {
  position: absolute;
  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.ideditor .ui-popover-header-block {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.ideditor .ui-popover-title {
  flex: 1;
  font-size: 26px;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #E0E0E0;
}

.ideditor .ui-popover-section {
  margin-top: 20px;
  padding: 25px;
  display: flex;
  border-radius: 8px;
  border: 1px solid #E0E0E0;
  flex-direction: column;
  max-width: 360px;
  position: relative;
  overflow: hidden;
  background-color: white;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.ideditor .ui-popover-section:hover {
  transform: scale(1.05);
  cursor: pointer;
  border: 1px solid transparent;
  background-image: linear-gradient(white, white),
  radial-gradient(circle at top left, #FFD700, #FF8C00, #DAA520);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 8px rgba(255, 215, 0, 0.4),
    0 0 24px rgba(255, 140, 0, 0.3),
    0 0 48px rgba(218, 165, 32, 0.2);
}

.ideditor .ui-popover-section::before {
  content: "";
  position: absolute;
  top: -42%;
  left: 43%;
  width: 87%;
  height: 207%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-34deg);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.ideditor .ui-popover-section.analysis::before {
  background-image: url('/assets/images/analysis-bg.png');
}

.ideditor .ui-popover-section.loan::before {
  background-image: url('/assets/images/loan-bg.png');
}

.ideditor .ui-popover-section svg {
  color: initial;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.ideditor .ui-popover-section:hover svg {
  color: #DAA520;
  /*transform: scale(1.1);*/
  /*transform-origin: center;*/
}

/* Содержимое поверх */
.ideditor .ui-popover-section > * {
  position: relative;
  z-index: 1;
}

.ideditor .ui-popover-section-title {
  padding: 0;
  margin-left: 16px;
  font-size: 16px;
  transition: font-size 0.3s ease;
}

/*.ui-popover-section:hover h4 {*/
/*  font-size: 17px;*/
/*}*/

.ideditor .ui-popover-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.ideditor .polygon-info-modal {
  position: fixed;
  top: 0;
  right: -100vw;
  width: calc(100vw - var(--sidebar-width) - var(--navbar-width) - var(--sidebar-filter-block-width) - var(--resizer-width));
  height: 100%;
  background-color: #fff;
  z-index: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: right 0.5s ease-out, opacity 0.5s ease-out;
  overflow: hidden;
}

.ideditor .polygon-info-modal.is-visible {
  right: 0;
  opacity: 1;
}

.ideditor .polygon-info-modal.is-hidden {
  right: -100vw;
  opacity: 0;
}

.ideditor .sidebar.collapsed ~ .polygon-info-modal,
.ideditor .sidebar.collapsed + .polygon-info-modal,
body.sidebar-collapsed .polygon-info-modal {
  width: calc(100vw - var(--navbar-width) - var(--resizer-width));
}

.ideditor .polygon-modal-content {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  border-left: 1px solid #ccc;
  padding-bottom: 20px;
}

.ideditor .polygon-modal-loading {
  position: absolute;
  inset: 0;
}

.ideditor .polygon-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 20px;
  border-bottom: 1px solid #ccc;
  gap: 12px;
  flex-wrap: wrap;
}

.ideditor .polygon-modal-title-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex: 1 1 260px;
}

.ideditor .polygon-modal-header-subtitle {
  color: #1C1C1E;
  font-size: 14px;
}

.ideditor .polygon-modal-index-content {
  display: flex;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 10px;
  margin-right: 0;
  flex: 1 1 300px;
  flex-wrap: wrap;
}

.ideditor .polygon-modal-index-container {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  cursor: pointer;
  min-width: 120px;
}

.ideditor .polygon-modal-index-container img {
  width: 20px;
  height: 20px;
  margin-top: -2px;
}

.ideditor .polygon-modal-index-container p {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.ideditor .polygon-modal-index-container p svg {
  width: 25px;
  height: 25px;
  transform-origin: center center;
  animation: rotateClockwise 3s linear infinite;
}

@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1200px) {
  .ideditor .polygon-modal-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ideditor .polygon-modal-index-content {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
}

.ideditor .polygon-modal-main-block {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 30px;
  overflow-y: auto;
}

.ideditor .polygon-modal-widget-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  width: 100%;
  gap: 16px;
}

.ideditor .polygon-modal-widget {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 62px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e5ea;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.ideditor .polygon-modal-widget:hover {
  background: linear-gradient(135deg, #F6CF79 0%, #3eb86b 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 6px 15px rgba(0, 0, 0, 0.08);
  transform: scale(1.01);
}

.ideditor .polygon-modal-widget-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.ideditor .polygon-modal-widget-temperature {
  font-size: 24px;
  font-weight: 600;
}

.ideditor .polygon-modal-widget-icon-and-temperature {
  display: flex;
  align-items: center;
}

.ideditor .polygon-modal-widget-detail-info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ideditor .polygon-modal-info-block {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 30px;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 30px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease-in-out;
}

.ideditor .polygon-modal-map-block,
.ideditor .polygon-modal-field-info-block {
  border-radius: 20px;
  width: 50%;
}

.ideditor .polygon-modal-map-block {
  position: relative;
  overflow: hidden;
  padding: 0;
  height: 500px;
}

.ideditor .map-block-index-select-container,
.ideditor .map-block-date-select {
  position: absolute;
  top: 6%;
  background: #fff;
  border-radius: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ideditor .map-block-date-select {
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 10px;
  z-index: 3050;
}

.ideditor .map-block-index-select-container {
  position: absolute;
  right: 2%;
  transform: translate(0, -42%);
  width: 90px;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  perspective: 1000px;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  overflow: visible;
}

.ideditor .map-block-index-select {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 5px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 10;
}

.ideditor .map-block-index-select::after {
  content: '▼';
  font-size: 0.8em;
  color: #666;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}

.ideditor .map-block-index-select-container:hover .map-block-index-select {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #d4edf6 0%, #b3d7e6 100%);
}

.ideditor .map-block-index-select-container.open .map-block-index-select {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: linear-gradient(135deg, #b3d7e6 0%, #9bcbe0 100%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.ideditor .map-block-index-select-container.open .map-block-index-select::after {
  transform: rotate(180deg);
}

.ideditor .map-block-index-select-options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.3s ease, transform 0.4s ease-out;
  opacity: 0;
  transform: translateY(-10px);
  z-index: 5;
}

.ideditor .map-block-index-select-container.open .map-block-index-select-options-list {
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
}

.ideditor .map-block-index-select-option {
  padding: 10px 20px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ideditor .map-block-index-select-option:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.ideditor .map-block-index-select-option:hover {
  background-color: #e0f7fa;
  color: #00796b;
  transform: translateX(5px);
}

.ideditor .map-block-index-select-option.selected {
  background-color: #c1e0e9;
  font-weight: bold;
  color: #004d40;
}

.ideditor .polygon-modal-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  margin-bottom: 0;
  border-bottom: 1px dashed #e9ecef;
  font-size: 16px;
  color: #495057;
  transition: background-color 0.2s ease;
}

.ideditor .polygon-modal-info-row:last-child {
  border-bottom: none;
}

.ideditor .polygon-modal-info-row:hover {
  background-color: #f8f9fa;
  cursor: default;
}

.ideditor .polygon-modal-info-row p {
  font-weight: 600;
  color: #212529;
  margin-right: 15px;
  flex-shrink: 0;
}

.ideditor .polygon-modal-info-row span {
  font-weight: 500;
  color: #007bff;
  text-align: right;
  flex-grow: 1;
  word-break: break-word;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ideditor .charts-container {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 30px;
  border: 1px solid #e0e0e0;
}

.ideditor .charts-options-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ideditor .charts-date-picker {
  width: 350px;
  justify-content: space-between;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  gap: 10px;
}

.ideditor .charts-date-picker-placeholder {
  font-size: 14px;
}

.ideditor .chart-card {
  display: flex;
  gap: 24px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.ideditor .chart-canvas-container {
  width: 100%;
}

.ideditor .chart-wrapper {
  width: 100%;
  max-height: 230px;
  min-height: 150px;
}

.ideditor .chart-canvas {
  width: 100%;
  height: 100%;
}

.ideditor .chart-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.ideditor .chart-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 16px;
}

.ideditor .chart-value {
  font-size: 24px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 6px;
  width: -moz-fit-content;
  width: fit-content;
}

.ideditor .chart-subtitle {
  font-size: 12px;
  color: #636366;
}

.ideditor .polygon-modal-interpretation-block {
  display: flex;
  flex-direction: column;
  padding: 30px;
  align-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
  margin-top: 25px;
}

.ideditor .interpretation-block-title {
  font-size: 24px;
  font-weight: 700;
  color: #3A5F0B;
  margin-bottom: 25px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.ideditor .polygon-modal-cards-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

.ideditor .polygon-modal-index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
  width: calc(50% - 20px);
  min-width: 280px;
  height: 120px;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  align-items: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ideditor .polygon-modal-index-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  transition: box-shadow 0.3s ease;
}

.ideditor .polygon-modal-index-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}


.ideditor .polygon-modal-index-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.ideditor .polygon-modal-index-card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.ideditor .polygon-modal-index-card-title span {
  font-size: 14px;
  font-weight: 400;
  display: block;
}


.ideditor .polygon-modal-status-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.ideditor .polygon-modal-status-icon svg {
  width: 20px;
  height: 20px;
}

.ideditor .polygon-modal-status-icon:hover {
  transform: scale(1.1);
}

.ideditor .polygon-modal-index-card-content {
  display: flex;
  width: 100%;
  gap: 16px;
}

.ideditor .index-value-display {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -1px;
}

.ideditor .index-value-display span {
  display: inline-block;
  border: 2px solid #fff;
  background: transparent;
  padding: 5px 12px;
  border-radius: 8px;
}


.ideditor .index-interpretation-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.ideditor .index-select-wrapper {
  position: relative;
  width: 302px;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ideditor .index-select-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  gap: 10px;
}

.ideditor .index-select-display .arrow-icon {
  margin-left: 10px;
  font-size: 10px;
  color: #888;
}

.ideditor .index-select-options {
  position: absolute;
  top: 100%; /* Помещает список под дисплеем */
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none; /* Для создания эффекта единого блока */
  background-color: #fff;
  z-index: 100; /* Чтобы список был поверх других элементов */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 0 0 4px 4px;
  max-height: 200px; /* Ограничиваем высоту для прокрутки */
  overflow-y: auto; /* Добавляем прокрутку, если опций много */
}

.ideditor .index-select-options.hidden {
  display: none;
}

.ideditor .index-select-option {
  padding: 8px 10px;
  cursor: pointer;
}

.ideditor .index-select-option:hover {
  background-color: #f0f0f0;
}

@media (max-width: 1400px) {
  .ideditor .polygon-modal-info-block {
    flex-direction: column;
    gap: 30px;
  }

  .ideditor .polygon-modal-info-row {
    font-size: 0.95rem;
    padding: 10px 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .ideditor .polygon-modal-map-block,
  .ideditor .polygon-modal-field-info-block {
    width: 100%;
    padding: 20px;
    border-radius: 15px;

  }

  .ideditor .polygon-modal-map-block {
    padding: 0;
  }

  .ideditor .polygon-modal-info-row p {
    margin-bottom: 5px;
  }

  .ideditor .polygon-modal-info-row span {
    text-align: left;
    width: 100%;
  }

  .ideditor .polygon-modal-index-card {
    width: 100%;
  }
}


@media (max-width: 1200px) {
  .ideditor .chart-card {
    flex-direction: column-reverse;
  }

  .ideditor .polygon-modal-header {
    align-items: start;
    gap: 20px;
    padding: 20px 20px 21px;
    flex-direction: column;
  }

  .ideditor .polygon-modal-index-content {
    justify-content: start;
    align-self: start;
    margin-right: 50px;
    flex-wrap: wrap;
  }
}

.ideditor .polygon-modal-images-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.ideditor .polygon-modal-gallery-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  gap: 28px;
}

.ideditor .polygon-modal-images-title {
  font-size: 24px;
  font-weight: 700;
  color: #3A5F0B;
  text-align: center;
  margin-bottom: 0;
}

.ideditor .polygon-modal-images-block::-webkit-scrollbar {
  height: 6px;
}

.ideditor .polygon-modal-images-block::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.ideditor .polygon-modal-images-block::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.ideditor .polygon-modal-images-block::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.ideditor .polygon-modal-image-thumb-wrap {
  flex: 0 0 162px;
  width: 162px;
  height: 162px;
  min-width: 162px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ideditor .is-clickable {
  cursor: pointer;
}

.ideditor .polygon-modal-thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ideditor .polygon-modal-thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ideditor .polygon-modal-image-thumb-wrap:hover .polygon-modal-thumb-overlay {
  opacity: 1;
}

.ideditor .blurred {
  filter: blur(2px) brightness(0.5);
}

.ideditor .polygon-modal-thumb-more-count {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ideditor .polygon-modal-gallery-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

.ideditor .polygon-modal-gallery-image {
  max-width: 90%;
  max-height: 90vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
}

.ideditor .polygon-modal-gallery-close-button {
  position: fixed;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  z-index: 10000;
  cursor: pointer;
}

.ideditor .polygon-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;
}

.ideditor .polygon-gallery-title {
  margin: 0;
  font-size: 1.1em;
}

.ideditor .toggle-icon svg {
  transition: transform 0.3s ease;
}

.ideditor .collapsed .toggle-icon svg {
  transform: rotate(180deg);
}

.ideditor .polygon-modal-images-block.hidden {
  display: none;
}

.ideditor .no-images-message {
  color: #999;
  padding: 10px;
  font-style: italic;
  font-size: 15px;
}

.ideditor .polygon-year-select-container {
  position: relative;
  background: #fff;
  border-radius: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 90px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #e5e5ea;
}

.ideditor .polygon-year-select-container.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ideditor .polygon-year-select {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ideditor .polygon-year-select::after {
  content: '▼';
  font-size: 10px;
}

.ideditor .polygon-year-options-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
}

.ideditor .polygon-year-select-container.open .polygon-year-options-list {
  display: block;
}

.ideditor .polygon-year-select-option {
  padding: 8px 12px;
  cursor: pointer;
}

.ideditor .polygon-year-select-option:hover {
  background: #f0f0f0;
}

.ideditor .polygon-year-select-option.selected {
  background: #e0e0e0;
}

.ideditor .culture-dzz-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ideditor .culture-dzz-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ideditor .culture-dzz-row-item {
  display: flex;
  flex-direction: row;
  padding-left: 35px;
  justify-content: space-between;
}

@media (max-width: 1024px) {
  .ideditor .polygon-info-modal {
    width: calc(100vw - var(--sidebar-width) - var(--navbar-width));
  }
}

@media (max-width: 768px) {
  .ideditor .polygon-info-modal {
    width: calc(100vw - var(--navbar-width));
  }

  .ideditor .polygon-modal-index-container p {
    font-size: 12px;
  }

  .ideditor .polygon-year-select-container {
    border-radius: 14px;
    padding: 4px 6px;
  }

  .ideditor .polygon-year-select {
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 14px;
  }

  .ideditor .polygon-modal-index-container img {
    width: 12px;
  }

  .ideditor .polygon-modal-index-container p svg {
    display: inline-block;
    width: 15px;
    height: 15px;
  }

  .ideditor .map-block-index-select-container {
    top: 14%
  }

  .ideditor .sidebar.collapsed ~ .polygon-info-modal,
  .ideditor .sidebar.collapsed + .polygon-info-modal,
  body.sidebar-collapsed .polygon-info-modal {
    width: 100dvw;
    padding-bottom: 60px;
  }

  .ideditor .culture-dzz-wrapper {
    width: 100%;
  }

  .ideditor .culture-dzz-row-item {
    gap: 0px;
  }

  .ideditor .polygon-modal-content {
    padding: 0;
  }

  .ideditor .polygon-modal-header {
    gap: 10px;
    padding: 20px 5px 15px;
  }

  .ideditor .polygon-modal-index-content {
    justify-content: center;
    margin: 0;
    gap: 6px;
  }

  .ideditor .polygon-modal-index-content > :first-child {
    order: 1;
  }

  .ideditor .polygon-modal-main-block {
    padding: 15px 5px
  }

  .ideditor .polygon-modal-info-block {
    padding: 5px;
    gap: 0;
  }

  .ideditor .polygon-modal-info-row {
    font-size: 12px;
    padding: 5px 0;
  }

  .ideditor .map-block-index-select-container {
    width: 80px;
    font-size: 12.6px;
    font-weight: 600;
    transform: translate(0, -50%);
  }

  .ideditor .polygon-modal-interpretation-block {
    margin: 0;
    padding: 15px 5px;
  }

  .ideditor .interpretation-block-title {
    font-size: 20px;
    margin: 10px 0 20px;
  }

  .ideditor .polygon-modal-index-card-title {
    font-size: 15px;
  }

  .ideditor .index-interpretation-text {
    font-size: 12px;
  }

  .ideditor .polygon-modal-index-card {
    height: 100px;
    padding: 8px;
    justify-content: center;
  }

  .ideditor .index-value-display span {
    padding: 0 10px;
    border: 1px solid #fff;
  }

  .ideditor .index-value-display {
    font-weight: 400;
  }

  .ideditor .charts-container {
    padding: 15px 5px;
  }

  .ideditor .charts-options-container {
    flex-direction: column;
    align-items: stretch;
    gap: 25px;
  }

  .ideditor .index-select-display,
  .ideditor .charts-date-picker {
    width: 100%;
    padding: 8px 12px;
  }

  .ideditor .charts-date-picker {
    justify-content: space-between;
  }

  .ideditor .index-select-wrapper {
    width: 100%;
  }

  .ideditor .index-value-display {
    font-size: 18px;
  }

  .ideditor .chart-value {
    font-size: 16px;
  }

}
.ideditor .table-loading-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666;
  font-size: 1.1em;
  font-style: italic;
  background-color: transparent;
  border-radius: 8px;
  margin-top: 20px;
  min-height: 150px;
}

.ideditor .spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #255F38;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1.2s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* UiRejectReasonModal.css */

.ideditor .reject-reason-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.ideditor .reject-reason-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 10000;
  width: 400px;
  max-width: 90%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.ideditor .reject-reason-modal h3 {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.ideditor .rejection-reason-wrapper {
  margin-bottom: 20px;
}

.ideditor .rejection-reason-textarea {
  width: 100%;
  height: 100px;
  resize: vertical;
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #f9fafb;
  color: #4b5563;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ideditor .rejection-reason-textarea:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.ideditor .rejection-reason-textarea.invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.ideditor .reject-reason-modal .buttons-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.ideditor .reject-reason-modal-cancel-button,
.ideditor .reject-reason-modal-confirm-button {
  width: 100%;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.ideditor .reject-reason-modal-cancel-button {
  border: 1px solid #dee2e6;
  background: #f1f3f5;
  color: #495057;
}

.ideditor .reject-reason-modal-cancel-button:hover {
  background: #e9ecef;
}

.ideditor .reject-reason-modal-confirm-button {
  border: none;
  background: #dc3545;
  color: #fff;
}

.ideditor .reject-reason-modal-confirm-button:hover {
  background: #c2255c;
}

/* Анимация появления и исчезновения */
.ideditor .reject-reason-modal.enter {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

.ideditor .reject-reason-modal.enter-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ideditor .reject-reason-modal.exit {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ideditor .reject-reason-modal.exit-active {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}
.ideditor .land-type-checkbox-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .ideditor .land-type-checkbox-item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.ideditor .land-type-checkbox-item:hover {
  background-color: #e6e8eb;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.ideditor .land-type-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

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

.ideditor .checkbox-label-wrapper input[type="checkbox"] {
    margin-right: 5px;
}

.ideditor .land-type-checkbox-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ideditor .land-type-checkbox-item span.land-type-checkbox-label {
    flex: 1;
}

.ideditor .category-toggle-icon {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ideditor .category-toggle-icon svg {
    width: 10px;
    height: 10px;
}

.ideditor .nested-filters {
  transition: all 0.2s ease;
  display: none;
}
.ideditor .expanded .nested-filters {
  display: block;
}
.ideditor .category-toggle-icon {
  margin-left: 5px;
  cursor: pointer;
}

.ideditor .crop-filters {
  display: flex;
  align-items: start;
  gap: 20%;
  padding: 5px 10px;
}

.ideditor .crop-filters.is-hidden {
  display: none;
}

.ideditor .year-select-layer-header {
  display: flex;
  flex-direction: column;
}

.ideditor .crops-filter-block,
.ideditor .years-filter-block {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.ideditor .sections-wrapper {
  display: flex;
  flex-direction: column;
}
.ideditor .services-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.ideditor .services-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E0E0E0;
}

.ideditor .services-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.ideditor .services-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}



.ideditor .service-item {
  /*margin-top: 20px;*/
  padding: 25px;
  display: flex;
  border-radius: 8px;
  border: 1px solid #E0E0E0;
  flex-direction: column;
  max-width: 360px;
  position: relative;
  overflow: hidden;
  background-color: white;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

@media (max-width: 900px) {
  .ideditor .service-item {
    max-width: unset;
  }
}

.ideditor .service-item:hover {
  transform: scale(1.05);
  cursor: pointer;
  border: 1px solid transparent;
  background-image: linear-gradient(white, white),
  radial-gradient(circle at top left, #FFD700, #FF8C00, #DAA520);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 8px rgba(255, 215, 0, 0.4),
    0 0 24px rgba(255, 140, 0, 0.3),
    0 0 48px rgba(218, 165, 32, 0.2);
}

.ideditor .service-item::before {
  content: "";
  position: absolute;
  top: -42%;
  left: 43%;
  width: 87%;
  height: 207%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-34deg);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.ideditor .service-item.analysis::before {
  background-image: url('/assets/images/analysis-bg.png');
}

.ideditor .service-item.loan::before {
  background-image: url('/assets/images/loan-bg.png');
}

.ideditor .service-item svg {
  color: initial;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.ideditor .service-item:hover svg {
  color: #DAA520;
}

.ideditor .service-icon svg {
  width: 32px;
  height: 32px;
  fill: #fff;
  transition: color 0.3s ease;
}

.ideditor .service-item:hover .service-icon svg {
  color: #DAA520;
}

/* Содержимое поверх */
.ideditor .service-item > * {
  position: relative;
  z-index: 1;
}

.ideditor .service-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ideditor .service-icon {
  flex-shrink: 0;
}

.ideditor .service-icon img {
  width: 32px;
  height: 32px;
}

.ideditor .service-icon {
  font-size: 32px;
}

.ideditor .service-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  flex: 1;
}

.ideditor .service-description {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin: 0;
}

.ideditor .service-button {
  margin-top: 12px;
  padding: 8px 16px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.3s ease;
}

.ideditor .service-button:hover {
  background: var(--darker-color, inherit) !important;
}
.ideditor .ui-spinner-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 3599;
  transition: opacity 0.3s ease-in-out;
}

.ideditor .ui-spinner-wrapper {
  z-index: 3600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ideditor .ui-spinner {
  z-index: 3600;
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid;
  border-color: #333 #333 transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.ideditor .ui-spinner::after,
.ideditor .ui-spinner::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #2e7d32 #66bb6a;
  box-shadow:
    0 0 15px rgba(102, 187, 106, 0.6),
    0 0 30px rgba(46, 125, 50, 0.4),
    inset 0 0 8px rgba(255, 255, 255, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}

.ideditor .ui-spinner::before {
  width: 32px;
  height: 32px;
  border-color: #a5d6a7 #81c784 transparent transparent;
  animation: rotation 1.5s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.ideditor .weather-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease-out forwards;
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.ideditor .weather-modal-wrapper {
  height: auto;
}

.ideditor .weather-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 20px;
  max-width: 95%;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  opacity: 0;
  animation: scaleIn 0.3s ease-out 0.1s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.ideditor .weather-modal-header {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

@media (max-width: 900px) {
  .ideditor .weather-modal {
    top: 47%;
  }
}

@media (min-width: 769px) {
  .ideditor .weather-modal {
    max-width: 70%;
    padding: 30px;
  }

  .ideditor .weather-modal-forecast-block {
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 16px 6px;
  }

  .ideditor .forecast-thead,
  .ideditor .forecast-tbody {
    display: flex;
  }

  .ideditor .forecast-table-column {
    display: flex;
    flex-direction: column;
    width: 12.5%;
    padding: 0 12px;
    gap: 10px;
  }

  .ideditor .forecast-table-column:not(:last-child) {
    border-right: 1px solid #e5e5ea;
  }

  .ideditor .forecast-table-column-cell {
    font-size: 12px;
  }

  .ideditor .cell-bold { font-weight: 600; }
  .ideditor .cell-day { font-size: 14px; color: #636366; font-weight: 600; }
  .ideditor .cell-date { font-size: 10px; color: #636366; }
  .ideditor .forecast-weather-label { color: #636366; font-weight: 400; }
}

@media (max-width: 768px) {
  .ideditor .weather-modal-forecast-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .ideditor .forecast-day-block {
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e5e5ea;
  }

  .ideditor .forecast-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 15px;
  }

  .ideditor .forecast-day-date {
    font-size: 11px;
    color: #636366;
  }

  .ideditor .forecast-day-logo {
    width: 40px;
    height: 40px;
    margin-left: 8px;
  }

  .ideditor .forecast-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    font-size: 13px;
  }

  .ideditor .forecast-param-label {
    color: #636366;
    font-weight: 400;
  }

  .ideditor .forecast-param-value {
    font-weight: 500;
    text-align: right;
  }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.ideditor .login-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.ideditor .login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ideditor .login-modal-header {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex: 1 1 auto;
  align-items: center;
}

.ideditor .login-modal-header-title {
  font-weight: 700;
  margin: 0;
  font-size: 1.25rem;
}

.ideditor .login-modal-header img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  padding: 5px;
}

.ideditor .login-modal-title {
  text-align: center;
  font-size: 24px;
}

.ideditor .login-modal-error {
  color: red;
  margin-top: 10px;
  min-height: 18px;
  text-align: center;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

.ideditor .shake {
  animation: shake 0.5s ease-in-out;
}

.ideditor .login-modal > div {
  box-sizing: border-box;
  background: white;
  padding: 32px 24px;
  border-radius: 12px;
  width: 460px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.3s ease-out;
}

.ideditor .login-modal input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.ideditor .login-modal input:focus {
  border-color: #1976d2;
}

.ideditor .login-submit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 10px;
  background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ideditor .login-modal .button-esi {
  background: #555;
}

.ideditor .login-submit-btn:hover {
  filter: brightness(0.9);
}

.ideditor .login-modal-divider{
  display: flex;
  align-items: center;
  text-align: center;
  color: #777;
  font-size: 14px;
}

.ideditor .login-modal-divider::before,
.ideditor .login-modal-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.ideditor .login-modal-divider:not(:empty)::before {
  margin-right: .75em;
}

.ideditor .login-modal-divider:not(:empty)::after {
  margin-left: .75em;
}

.ideditor .loader {
  z-index: 3600;
  display: flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid;
  border-color: #333 #333 transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.ideditor .loader::after,
.ideditor .loader::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid;
  border-color: transparent transparent #2e7d32 #66bb6a;
  box-shadow:
    0 0 15px rgba(102, 187, 106, 0.6),
    0 0 30px rgba(46, 125, 50, 0.4),
    inset 0 0 8px rgba(255, 255, 255, 0.3);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}

.ideditor .loader::before {
  width: 16px;
  height: 16px;
  border-color: #a5d6a7 #81c784 transparent transparent;
  animation: rotation 1.5s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.ideditor .hidden {
  display: none;
}

.ideditor .button-disabled {
  background: #000;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.ideditor .login-type-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

.ideditor .login-modal-header {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex: 1 1 auto;
  align-items: center;
}

.ideditor .login-modal-header-title {
  font-weight: 700;
  margin: 0;
  font-size: 1.25rem;
}

.ideditor .login-modal-header img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  padding: 5px;
}

.ideditor .login-modal-title {
  text-align: center;
  font-size: 24px;
}

.ideditor .login-modal-title {
  text-align: center;
  font-size: 24px;
}

.ideditor .login-type-modal > div {
  box-sizing: border-box;
  background: white;
  padding: 32px 24px;
  border-radius: 12px;
  width: 460px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.3s ease-out;
}

.ideditor .login-type-modal button {
  padding: 10px;
  background: linear-gradient(180deg, #4caf50 0%, #388e3c 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ideditor .login-modal-divider{
  display: flex;
  align-items: center;
  text-align: center;
  color: #777;
  font-size: 14px;
}

.ideditor .login-modal-divider::before,
.ideditor .login-modal-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.ideditor .login-modal-divider:not(:empty)::before {
  margin-right: .75em;
}

.ideditor .login-modal-divider:not(:empty)::after {
  margin-left: .75em;
}
.ideditor .disabled:hover {
  border-color: #ccc !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.ideditor .ui-inline-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ideditor .ui-inline-spinner.absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Контейнер с абсолютным спиннером */
.ideditor *:has(> .ui-inline-spinner.absolute) {
  position: relative;
  pointer-events: none;
}

/* Все элементы внутри контейнера кроме спиннера */
.ideditor .button-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ideditor *:has(> .ui-inline-spinner.absolute) > *:not(.ui-inline-spinner) {
  filter: blur(1px);
  opacity: 0.5;
}

@keyframes spinner-rotate {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
.ideditor .icon-green {
  color: var(--dark-green);
}

.ideditor .input-customization::-moz-placeholder {
  color: var(--dark-green);
  font-size: 14px;
  opacity: 0.5;
}

.ideditor .input-customization::placeholder {
  color: var(--dark-green);
  font-size: 14px;
  opacity: 0.5;
}

.ideditor .editable-field-icon {
  color: var(--red);
  position: absolute;
  top: calc(7px + 0.9rem);
  left: -5px;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  z-index: 1;
}

.ideditor .editable-field-icon.second {
  top: calc(7px + 6.6rem);
}

.ideditor .editable-field-close-icon {
  color: var(--red);
  position: absolute;
  top: -5px;
  right: 0;
  cursor: pointer;
  z-index: 1;
}

.ideditor .is-required-icon {
  color: var(--red);
  position: absolute;
  top: 2px;
  left: -10px;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1;
  z-index: 1;
}
.ideditor .navigation-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: var(--navbar-width);
  height: 100%;
  background-color: #f2f2f7;
  border-right: 1px solid #E3E3E3;
  position: fixed;
  flex: 0 0 60px;
  box-sizing: border-box;
  margin: 0;
  overflow: visible;
  z-index: 3000;
  padding-bottom: 10px;
}

.ideditor .navigation-sidebar > :nth-last-child(2) {
  margin-top: auto;
}

.ideditor .profile-button-wrapper {
  width: 100%;
  position: relative;
  display: inline-block;
}

.ideditor .icon-button {
  width: 100%;
  height: 55px;
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.1s ease-out;
  outline: none;
}

.ideditor .sidebar-toggle-button img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.ideditor .icon-button::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    45deg,
    #FF00FF, /* Ярко-розовый/фуксия */
    #00FFFF, /* Бирюзовый/циан */
    #FFFF00, /* Ярко-желтый */
    #00FF00, /* Ярко-зеленый */
    #FF00FF  /* Повторяем первый цвет для плавности */
  );
  background-size: 400% 400%;
  z-index: -1;
  opacity: 0;
  filter: blur(24px);
  transition: opacity 0.6s ease-out, animation 0.3s ease-out;
}

.ideditor .icon-button:hover::before {
  opacity: 1;
  animation: glowing-border 3s linear infinite;
}

.ideditor .icon-button-active::before {
  opacity: 1;
  animation: glowing-border 3s linear infinite;
}

@keyframes glowing-border {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ideditor .icon-button:hover,
.ideditor .icon-button:focus {
  background: rgba(255, 255, 255, 0.05);
}

.ideditor .icon-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.05);
  z-index: 0;
  transition: background-color 0.3s ease-out;
}

.ideditor .icon-button:hover::after,
.ideditor .icon-button:focus::after {
  background-color: rgba(255, 255, 255, 0.15);
}

.ideditor .tooltip {
  display: none;
  position: absolute;
  left: 52px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #1C1C1E;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 1000;
}

.ideditor .tooltip::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid #1C1C1E;
}

.ideditor .profile-menu {
  position: absolute;
  bottom: 35px;
  left: 17px;
  transform: none;
  background-color: #ffffff;
  border: 1px solid #E3E3E3;
  border-radius: 8px;
  padding: 8px;
  min-width: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1000;
  margin-left: 10px;
}

.ideditor .menu-item {
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.ideditor .menu-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.ideditor .icon-button img,
.ideditor .menu-item img {
  pointer-events: none;
  width: 24px;
  height: 24px;
}

.ideditor .menu-item img {
  width: 16px;
  height: 16px;
}

.ideditor .header-sidebar {
  position: relative;
  z-index: 100;
}

.ideditor .hide-sidebar,
.ideditor .open-filter-sidebar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 3px;
  right: 40px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.ideditor .open-filter-sidebar {
  right: 0
}

@media (max-width: 768px) {
  .ideditor .navigation-sidebar {
    width: 100%;
    height: var(--navbar-height);
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid #E3E3E3;
    z-index: 5000;
    padding: 0;
  }

  .ideditor .tooltip {
    display: none !important;
  }

  .ideditor .profile-button-wrapper,
  .ideditor .icon-button {
    height: 100%;
  }

  .ideditor .profile-menu {
    top: auto;
    bottom: var(--navbar-height);
    left: auto;
    right: 10px;
  }

  .ideditor .create-field-menu-mob {
    position: fixed;
    left: 50%;
    bottom: 91px;
    transform: translateX(-50%);
    z-index: 9999;
    background: #f2f2f7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 16px 24px;
  }

  .ideditor .create-field-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .ideditor .create-field-menu-mob button {
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    width: 100px;
  }

  .ideditor .create-field-back-btn-mob {
    border: 1px solid #ccc;
    background: #f5f5f5;
  }

  .ideditor .create-field-close-btn-mob {
    border: 1px solid #dc3545;
    background: #fff;
    color: #dc3545;
  }
}
.ideditor .feature-list-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.ideditor .footer {
  width: 100%;
  background: #fff;
  padding: 15px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.ideditor .create-field-icon {
  margin-bottom: 5px;
}

.ideditor .create-field-text {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}
.ideditor .filter-sidebar-container {
  position: absolute;
  top: 0;
  left: calc(var(--sidebar-width) + var(--navbar-width));
  width: var(--sidebar-filter-block-width);
  height: 100%;
  font-size: 13px;
  background: #fff;
  border-left: 1px solid var(--light-grey);
  border-right: 1px solid var(--light-grey);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
}

.ideditor .filter-sidebar-container.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-out,
  visibility 0s linear 0s;
}

.ideditor .filter-sidebar-container.is-hidden {
  opacity: 0;
  visibility: hidden;
  border: none;
}

.ideditor .filter-sidebar-content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  height: 100%;
  overflow-y: auto;
}

.ideditor .filter-sidebar-content-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 auto 10px;
  color: var(--dark-grey-text);
}

.ideditor .filter-sidebar-regions-block,
.ideditor .filter-sidebar-landtypes-block,
.ideditor .filter-sidebar-areasort-block {
  margin: 10px 0 10px 20px;
}

.ideditor .filter-sidebar-block-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.ideditor .filter-sidebar-regions-block-item,
.ideditor .filter-sidebar-districts-block-item,
.ideditor .filter-sidebar-landtypes-block-item,
.ideditor .filter-sidebar-areasort-block {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-bottom: 7px;
}

.ideditor .filter-sidebar-content input[type="radio"] {
  display: none;
}

.ideditor .region-label-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ideditor .region-label-container label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

.ideditor .region-label-container label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 1px solid var(--text-color);
  border-radius: 50%;
  background: white;
  box-sizing: border-box;
  transition: background 0.2s;
}

.ideditor .region-label-container input[type="radio"]:checked + label::before {
  border: 4px solid #2d914e;
}

.ideditor .filter-sidebar-districts {
  margin-top: 4px;
  padding-left: 16px;
}

.ideditor .filter-sidebar-districts.highlighted,
.ideditor .filter-sidebar-districts.highlighted {
  border-left: 2px solid #255F38;
  margin-left: 6px;
  padding: 10px 30px 5px 10px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 90%;
  background: rgba(76, 175, 80, 0.1);
}

.ideditor .filter-sidebar-districts .filter-sidebar-regions-block-item {
  border-bottom: none;
  font-weight: 400;
}

.ideditor .close-filter-sidebar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 3px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.ideditor .close-filter-sidebar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.ideditor .category-checkbox-item {
  display: flex;
  flex-direction: column;
}

.ideditor .category-checkbox-item,
.ideditor .sub {
  list-style: none;
  margin-bottom: 5px;
}

.ideditor .nested-filters {
  padding-left: 0;
}

.ideditor .land-type-checkbox-item.sub {
  margin-left: 20px;
}

.ideditor .nested-filters {
  list-style: none;
  padding-left: 0;
  margin-top: 5px;
}

.ideditor .nested-filters li {
  margin-left: 20px;
  padding-left: 5px;
  margin-bottom: 5px;
}

.ideditor .nested-filters .land-type-checkbox-item .land-type-checkbox-label {
  color: #555;
}

.ideditor .nested-filters .land-type-checkbox-item input[type="checkbox"]:checked + .land-type-checkbox-label::before {
  border: 4px solid #2d914e;
}

.ideditor .api-filter-category {
  margin-bottom: 10px;
}

.ideditor .api-filter-category > label.land-type-checkbox-item {
  font-weight: bold;
}

.ideditor .api-filter-category > label.land-type-checkbox-item .land-type-checkbox-label {
  color: var(--dark-grey-text);
}

.ideditor .hide-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ideditor .hide-toggle-main {
  display: flex;
  align-items: center;
}

.ideditor .year-select {
  margin-left: 20px;
}

.ideditor .year-select.is-hidden {
  display: none;
}

.ideditor .year-select.is-visible {
  display: block;
}

.ideditor .year-radio {
  margin-right: 20px;
  cursor: pointer;
}

.ideditor .year-radio input {
  margin-right: 5px;
}

.ideditor .collapsible-group-item {
  display: flex;
  flex-direction: column;
}

.ideditor .collapsible-list {
  padding: 0 0 10px 10px;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.ideditor .collapsible-list:not(.is-hidden) {
  max-height: 100%;
  opacity: 1;
}

.ideditor .collapsible-list.is-hidden {
  display: none;
}

.ideditor .filter-sidebar-back-button {
  margin: 20px auto;
}

.ideditor .filter-sidebar-back-button {
  display: none;
}

@media (max-width: 1024px) {
  .ideditor .filter-sidebar-container {
    position: absolute;
    top: var(--filter-sidebar-top);
    left: 0;
    width: calc(var(--sidebar-width) + var(--navbar-width));
    height: calc(100% - var(--filter-sidebar-top));
    padding: 10px 0 10px var(--navbar-width);
    font-size: 13px;
    background: #fff;
    border: 1px solid var(--light-grey);
    z-index: 3500;
  }

  .ideditor .close-filter-sidebar {
    display: none;
  }

  .ideditor .filter-sidebar-content {
     padding: 10px 0;
   }

  .ideditor .filter-sidebar-back-button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    width: 80%;
  }
}

@media (max-width: 768px) {
  .ideditor .filter-sidebar-container {
    padding: 16px 0 16px 16px;
    width: 100%;
    height: calc(100% - var(--navbar-height) - 103px);
  }
}
.ideditor .tags-editor-block {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ideditor .tags-editor-header {
  margin-bottom: 5px;
  padding: 10px 15px;
}

.ideditor .tags-editor-container {
  flex: 1;
  padding: 10px 10px 30px;
  overflow: auto;
}

.ideditor .form-field-item {
  position: relative;
  margin-bottom: 15px;
}

.ideditor .land-type-select-item {
  margin-top: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ideditor .form-field-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  font-size: 0.9rem;
  color: rgb(73, 80, 87);
}

.ideditor .form-field-item input,
.ideditor .form-field-item select {
  color: #333;
  display: block;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-clip: padding-box;
  border: 1px solid rgb(206, 212, 218);
  border-radius: 6px;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.ideditor .form-field-item input {
  background-color: rgb(255, 255, 255);
}

.ideditor .form-field-item input::-moz-placeholder {
  color: #6C757D;
}

.ideditor .form-field-item input::placeholder {
  color: #6C757D;
}

.ideditor .area-input-wrapper {
  position: relative;
}

.ideditor .form-field-item select {
  background-color: unset;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.ideditor .tags-editor-footer {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.ideditor .button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.ideditor .button-group .cancel,
.ideditor .button-group .save {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.ideditor .button-group .cancel {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}

.ideditor .button-group .save {
  background-color: #28a745;
  border: none;
  color: #fff;
}

.ideditor .button-group .save:disabled {
  background-color: #f5f5f5;
  color: #333;
}

.ideditor .irrigated-checkbox-container {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 5px 0;
  width: 100%;
}

.ideditor .irrigated-checkbox-container input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.ideditor .irrigated-checkbox-container label {
  font-size: 14px;
  color: #495057;
  cursor: pointer;
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.ideditor .irrigated-checkbox-container:hover label {
  color: #333;
}

.ideditor .add-select-button {
  font-size: 14px;
}
.ideditor .zemBalance input {
  font-size: 18px;
  font-weight: 400;
}

.ideditor .zemBalance input.key {
  background-color: transparent;
  padding-top: 10px;
  border: 0;
  cursor: default;
}

.ideditor .zemBalance input.value {
  padding: 15px ;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.ideditor .zemBalance input.value[readonly] {
  cursor: not-allowed;
}

.ideditor .zemBalance:first-child input.key {
  border: 0;
}

.ideditor .tags-edit-button-container {
  width: 100%;
  text-align: center;
}

.ideditor .tags-edit-button {
  margin-top: 40px;
  border-radius: 8px;
  font-size: 18px;
  background-color: #F6CF79;
  width: 100%;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.ideditor .tags-edit-button.tags-cancel-button {
  margin-top: 20px;
}

.ideditor .tags-edit-button:hover {
  background-color: #e0b95a;
}

.ideditor .tags-edit-button:focus,
.ideditor .tags-edit-button:active {
  background-color: #F6CF79;
}

.ideditor .tags-edit-button:disabled {
  background-color: #ccc;
}
.ideditor .close-icon {
  z-index: 100;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
  border: none;
  animation: spinCloseIcon 1.5s ease-out forwards;
}

.ideditor .close-icon:hover {
  background: linear-gradient(135deg, #F6CF79 0%, #3eb86b 100%);
}

.ideditor .close-icon::before,
.ideditor .close-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19px;
  height: 1px;
  background-color: #fff;
  transform-origin: center;
  transition: all 0.4s ease-out;
}

.ideditor .close-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ideditor .close-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes spinCloseIcon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1440deg);
  }
}

@media (max-width: 900px) {
  .ideditor .close-icon {
    width: 35px;
    height: 35px;
  }
}
.ideditor .sheet-container {
  position: relative;
  display: flex;
  padding: 0 20px 20px 0;
  width: calc(100dvw - 8dvw);
  height: calc(100dvh - 22dvh);
  overflow: scroll;
}

.ideditor .sheet-container-save-btn {
  position: fixed;
  bottom: 3rem;
  right: 50%;
  transform: translateX(50%);
  padding: 10px 30px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #66b35d 0%, #3eb86b 100%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
  z-index: 1000;
}

.ideditor .sheet-container-save-btn:hover {
  background: linear-gradient(135deg, #F6CF79 0%, #3eb86b 100%);
}

.ideditor .sheet-table {
  table-layout: fixed;
}

.ideditor .sheet-table-head {
  /*position: sticky;*/
  /*top: 0;*/
  background-color: #fff;
  z-index: 10;
  border-collapse: separate;
  border-spacing: 0;
}

.ideditor .sheet-table-head th,
.ideditor .sheet-table-body td {
  padding: 3px 2px;
  text-align: center;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 400;
  white-space: normal;
  border: 1px solid #949494;
}

.ideditor .sheet-table-head tr:last-child {
  height: 30px;
}

.ideditor .sheet-table-head th.vertical-text {
  writing-mode: sideways-lr;
  text-orientation: mixed;
  text-align: center;
  padding: 4px 8px;
}

.ideditor .editable-cell {
  cursor: pointer;
}

.ideditor .editable-cell:hover {
  color: #000;
  background-color: #f0f0f0;
}

.ideditor .editable-cell input {
  width: calc(100% - 4px);
  border: none;
  outline: none;
  font-size: 10px;
  text-align: inherit;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.ideditor .sheet-table-body tr {
  position: relative;
  cursor: pointer;
}

.ideditor .sheet-table-body tr {
  position: relative;
  transition: background-color 0.2s ease-in-out;
}

.ideditor .sheet-table-body td:first-child {
  position: relative;
}

.ideditor .add-row-tooltip-option {
  padding: 4px 8px;
  cursor: pointer;
  background-color: transparent;
}

.ideditor .add-row-tooltip-option:hover {
  background-color: #f0f0f0;
}
.ideditor .create-field-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 250px;
}

.ideditor .sections-wrapper {
  padding: 0 50px 0 10px;
}

.ideditor .sections-wrapper-title {
  text-align: center;
  color: var(--dark-grey);
}

.ideditor .zb-field-create-selects {
  display: flex;
  gap: 20px;
}

.ideditor .land-type-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ideditor .land-type-wrapper label {
  font-weight: 400;
  color: var(--light-grey2);
}

.ideditor .land-type-select-item placeholder {
  color: #6c757d;
}

.ideditor .form-section-fieldset {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 15px;
}

.ideditor .form-section-legend {
  font-size: 0.7em;
  color: var(--light-grey2);
  padding: 0 10px;
  margin-left: -5px;
  text-transform: uppercase;
}

.ideditor .custom-form-field {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 350px;
  margin-right: 20px;
}

.ideditor .custom-form-field label {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: -5px;
  color: var(--light-grey2);
}

.ideditor .custom-form-field input {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

.ideditor .custom-form-field input:hover {
  border-color: #a6d2ff;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.15);
}

.ideditor .create-field-form .form-select {
  width: 350px;
  background: #fff;
}

.ideditor .create-field-form .form-select.placeholder {
  color: #6c757d;
}

.ideditor .create-field-form .form-select:not(.placeholder) {
  color: var(--chartText);
}

.ideditor .form-select:focus {
  outline: none;
  border-color: #a6d2ff;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.15);
}

.ideditor .create-select-wrapper {
  position: relative;
  width: 350px;
  font-size: 95%;
  margin-right: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ideditor .coordinates-wrapper {
  display: flex;
  position: relative;
  align-items: center;
}

.ideditor .coordinates-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.ideditor .poligon-form-row {
  display: flex;
  flex-wrap: wrap;
}

.ideditor .coordinates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}

.ideditor .coordinates-wrapper-title {
  color: var(--chartText);
  align-self: center;
  font-size: 16px;
  margin-right: 15px;
}

.ideditor .add-coordinates-btn {
  align-self: flex-start;
  margin-top: 30px;
  min-height: 40px;
}

.ideditor .land-use-add-btn {
  display: block;
  margin: 0 auto;
}

.ideditor .polygon-valid-btn {
  align-self: center;
}

.ideditor .coordinates-add-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 0 0 auto;
}

.ideditor .land-use-row {
  align-items: flex-start;
  gap: 20px;
}

.ideditor .land-type-row {
  align-items: flex-start;
}

.ideditor .land-use-spacer {
  width: 370px;
  flex: 0 0 auto;
}

@media (max-width: 1382px) {
  .ideditor .coordinates-block {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .ideditor .coordinates-add-wrapper {
    justify-content: center;
  }

  .ideditor .add-coordinates-btn {
    align-self: center;
    margin-top: 15px;
    min-height: 50px;
  }

  .ideditor .land-use-spacer {
    width: 100%;
    height: 0;
  }
}

.ideditor .create-save-btn {
  align-self: center;
}

@media (max-width: 1012px) and (min-width: 901px) {
  .ideditor .coordinates-wrapper {
    flex-direction: column;
  }

  .ideditor .coordinates-wrapper .custom-form-field {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 900px) {
  .ideditor .zb-field-create-selects {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .ideditor .sections-wrapper {
    padding: 0;
  }

  .ideditor .sections-wrapper-title {
    font-size: 20px;
  }

  .ideditor .form-section-fieldset {
    align-items: stretch;
    gap: 10px;
  }

  .ideditor .coordinates-wrapper {
    flex-direction: column;
  }

  .ideditor .custom-form-field {
    width: 100%;
    margin: 0;
  }

  .ideditor .create-field-form .create-select-wrapper {
    width: 100%;
    margin-right: 0;
  }

  .ideditor .create-field-form .form-select {
    width: 100%;
  }

  .ideditor .charts-date-picker {
    width: 100%;
    box-sizing: border-box;
  }

  .ideditor .create-field-form .land-type-wrapper {
    width: 100%;
  }

  .ideditor .create-field-form .land-type-wrapper .create-select-wrapper,
  .ideditor .create-field-form .land-type-wrapper .custom-form-field {
    width: 100%;
    margin-right: 0;
  }

  .ideditor .land-use-row {
    gap: 0;
  }
}
.ideditor .fullscreen-modal {
  position: fixed;
  top: 0;
  left: var(--navbar-width);
  width: calc(100vw - var(--navbar-width));;
  height: 100dvh;
  background-color: #F4F6F8;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ideditor .sidebar.collapsed ~ .adaptive-fullscreen-modal,
.ideditor .sidebar.collapsed + .adaptive-fullscreen-modal,
body.sidebar-collapsed .adaptive-fullscreen-modal {
  left: calc(var(--navbar-width) + var(--resizer-width));
  width: calc(100vw - var(--navbar-width) - var(--resizer-width));
}

.ideditor .adaptive-fullscreen-modal {
  left: calc(var(--navbar-width) + var(--sidebar-width) + var(--resizer-width));
  width: calc(100vw - var(--navbar-width) - var(--sidebar-width) - var(--resizer-width));
}


@media (max-width: 768px) {
  .ideditor .fullscreen-modal {
    left: 0;
    height: calc(100dvh - var(--navbar-height));
    width: 100dvw;
  }
}

.ideditor .fullscreen-modal.show {
  opacity: 1;
  transform: translateX(0);
}

.ideditor .fullscreen-modal.hide {
  opacity: 0;
  transform: translateX(-100%);
}

.ideditor .fullscreen-modal-content {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.ideditor .fullscreen-modal-content-header,
.ideditor .fullscreen-modal-content-main-block,
.ideditor .fullscreen-modal-content-footer {
  position: relative;
  font-size: 18px;
}

.ideditor .fullscreen-modal-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 0 20px;
}

.ideditor .fullscreen-modal-content-title {
  background-image: var(--dark-green-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  font-weight: bold;
}

.ideditor .fullscreen-modal-content-main-block {
  padding: 0 20px 20px 20px;
  margin-top: 40px;
  flex: 1;
}

.ideditor .fullscreen-modal-content-main-block h3 {
  color: #000;
}

@media (max-width: 768px) {
  .ideditor .fullscreen-modal-content-main-block {
    margin-top: 40px;
  }
  .ideditor .fullscreen-modal-content-title {
    font-size: 16px;
  }
}


.ideditor .profile-block {
  padding: 32px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.ideditor .profile-form-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ideditor .profile-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ideditor .profile-form h3 {
  margin: 0;
}

.ideditor .field-group {
  position: relative;
  flex: 1;
}

.ideditor .form-row {
  display: flex;
  width: 100%;
  gap: 28px;
}

.ideditor .field-group label {
  font-weight: 500;
  font-size: 15px;
  color: #333;
}

.ideditor .field-group input {
  font-size: 15px;
  line-height: 1.2;
  padding: 12px 38px 12px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  width: 100%;
  min-height: 44px;
  letter-spacing: normal;
}

.ideditor .field-group input:focus {
  border-color: #157efb;
  box-shadow: 0 0 0 3px rgba(21, 126, 251, 0.15);
}

.ideditor .save-button {
  padding: 12px 24px;
  font-size: 16px;
  background-color: #157efb;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  align-self: flex-end;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.ideditor .save-button:hover {
  background-color: #0f6fe0;
  box-shadow: 0 4px 12px rgba(21, 126, 251, 0.3);
}

.ideditor .toggle-password-change {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 15px;
  background: #f5f7fa;
  color: #157efb;
  border: 1px solid #157efb;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.ideditor .toggle-password-change:hover {
  background: #eaf2ff;
  color: #0f6fe0;
}

.ideditor .secondary-action-button {
  margin-top: 16px;
  padding: 10px 24px;
  font-size: 15px;
  background: #fff;
  color: #157efb;
  border: 1px solid #157efb;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.ideditor .secondary-action-button:hover {
  background: #eaf2ff;
  color: #0f6fe0;
}

.ideditor .password-form-block {
  margin-top: 24px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(21,126,251,0.06);
}

.ideditor .eye-toggle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  font-size: 18px;
  color: #888;
  z-index: 2;
  height: 28px;
  display: flex;
  align-items: center;
}

.ideditor .password-change-section {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.ideditor .password-change-section.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ideditor .download-button-wrapper {
  position: relative;
}

.ideditor .external-link-button {
  height: 100%;
  background-color: #f0f4ff;
  color: #1E3A8A;
  border: none;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.ideditor .external-link-button:hover {
  background-color: #dbeafe;
}

.ideditor .download-dropdown {
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 999;
  border-radius: 4px;
  overflow: hidden;
}

.ideditor .download-option {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #1E3A8A;
  transition: background-color 0.2s ease;
}

.ideditor .download-option:hover {
  background-color: #f3f4f6;
}

.ideditor .external-link-button.download-btn {
  background-color: #eff6ff;
}

.ideditor .external-link-button.website-btn {
  background-color: #e0f2fe;
}

.ideditor .external-link-button.download-btn:hover {
  background-color: #dbeafe;
}

.ideditor .external-link-button.website-btn:hover {
  background-color: #bae6fd;
}


.ideditor .download-option.loading {
  pointer-events: none;
  opacity: 0.6;
}

.ideditor .download-option .spinner {
  border: 2px solid #dbeafe;
  border-top: 2px solid #1E3A8A;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 0.8s linear infinite;
  margin-right: 6px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ideditor .analytics-tooltip {
  position: absolute;
  pointer-events: none;
  background: #111;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1.5px 6px rgba(0,0,0,0.12);
  padding: 14px 18px 12px 18px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  z-index: 1000;
  min-width: 120px;
  max-width: 320px;
  transition: opacity 0.18s cubic-bezier(.4,0,.2,1), transform 0.18s cubic-bezier(.4,0,.2,1);
  border: none;
  letter-spacing: 0.01em;
  word-break: break-word;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ideditor .analytics-tooltip b {
  color: #53D5C3;
  font-weight: 700;
}

@media (max-width: 900px) {
  .ideditor .profile-block, .ideditor .profile-form {
    padding: 10px;
    max-width: 100vw;
  }
  .ideditor .profile-form-block {
    padding: 10px 0;
  }
  .ideditor .form-row {
    flex-direction: column;
    gap: 10px;
  }
  .ideditor .field-group {
    width: 100%;
  }
  .ideditor .save-button, .ideditor .external-link-button, .ideditor .secondary-action-button {
    width: 100%;
    min-width: unset;
    font-size: 1rem;
  }
  .ideditor .action-btns-left {
    flex-direction: column;
    gap: 10px;
  }
  .ideditor .download-button-wrapper {
    width: 100%;
  }
  .ideditor .download-dropdown {
    left: 0 !important;
    right: auto !important;
    min-width: 140px;
  }
}

@media (max-width: 900px) {
  .ideditor .profile-block, .ideditor .profile-form {
    padding: 4px;
  }
  .ideditor .profile-form-block h3 {
    font-size: 1.1rem;
  }
  .ideditor .field-group label {
    font-size: 0.95rem;
  }
  .ideditor .field-group input {
    font-size: 1rem;
    padding: 6px 8px;
  }
  .ideditor .save-button, .ideditor .external-link-button, .ideditor .secondary-action-button {
    font-size: 0.95rem;
    padding: 10px;
  }
}
.ideditor .report-filter-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

.ideditor .report-filter-form-title {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  text-transform: uppercase;
}

.ideditor .report-filter-selects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 40px;
}

.ideditor .report-filter-form-generate-btn {
  margin-top: 40px;
  border-radius: 8px;
  font-size: 18px;
  background-color: #F6CF79;
  padding: 10px 30px;
  border: none;
  align-self: center;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ideditor .report-filter-form-generate-btn:hover {
  background-color: #e0b95a;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.ideditor .report-filter-form-generate-btn:disabled {
  background-color: #f1f5f9;
}

.ideditor .report-filter-form-generate-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.ideditor .report-filter-form-generate-buttons-wrapper {
  display: flex;
  gap: 20px;
  margin: 0 auto;
}

.ideditor .report-filter-form-generate-buttons-wrapper button {
  min-height: 50px;
  background-color: #F6CF79;
  padding: 0 20px;
  color: #333;
  width: 220px;
  margin: 0 auto;
  border-radius: 8px;
  font-size: 18px;
}

.ideditor .report-filter-form-generate-buttons-wrapper button:hover {
  background-color: #e0b95a;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .ideditor .report-filter-selects {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px 40px;
  }

  .ideditor .report-filter-form-generate-buttons-wrapper {
    flex-direction: column;
    width: 100%;
  }
}
.ideditor .ui-report-type-modal {
  border-radius: 8px;
  padding: 20px;
}

.ideditor .ui-report-type-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  padding: 0;
  margin-bottom: 40px;
}

.ideditor .ui-report-type-modal-header h3 {
  font-size: 18px;
  margin: 0;
}

.ideditor .ui-report-type-modal-actions button {
  min-height: 50px;
  background-color: #F6CF79;
  color: #000;
  width: 40%;
  margin: 0 auto;
  border-radius: 8px;
  font-size: 18px;
}

.ideditor .ui-report-type-modal-actions button:hover {
  background-color: #e0b95a;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.ideditor .ui-select-wrapper {
  position: relative;
  width: 400px;
  font-size: 95%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ideditor .ui-select-label {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 4px;
  color: var(--light-grey2);
  display: block;
}

.ideditor .ui-select-selected {
  color: inherit;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.40625rem 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  transition: border-color 0.3s;
}

.ideditor .ui-select-selected:hover {
  border-color: #A6D2FF;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.15);
}

.ideditor .ui-select-selected.open {
  border-color: #A6D2FF;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
}

.ideditor .ui-select-selected.placeholder {
  color: #6C757D;
}

.ideditor .ui-select-selected span,
.ideditor .placeholder span {
  font-size: 16px;
}

.ideditor .ui-select-selected:not(.placeholder) {
  color: var(--chartText);
}

.ideditor .ui-select-selected.open {
  border-color: #A6D2FF;
}

.ideditor .ui-select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  pointer-events: none;
}

.ideditor .ui-select-options {
  list-style-type: none;
  font-size: 14px;
  margin: 2px 0 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 300px;
  overflow-y: auto;
  position: absolute;
  width: 100%;
  z-index: 1010;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ideditor .ui-select-option {
  color: var(--chartText);
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ideditor .ui-select-option:first-child {
  color: #ccc;
}

.ideditor .ui-select-option:hover {
  background-color: #f2f2f2;
}

@media (max-width: 900px) {
  .ideditor .ui-select-wrapper {
    width: 100%;
  }

  .ideditor .ui-select-selected.placeholder span {
    font-size: 84%;
  }
}
.ideditor .ui-reports-list-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-family: Arial, sans-serif;
  font-size: 12px;
  margin: 30px 0 50px;
  margin-top: 20px;
}

.ideditor .ui-reports-list-table tbody tr.clickable-row {
  cursor: pointer;
  transition: all 0.3s ease;
}

.ideditor .ui-reports-list-table tbody tr.clickable-row:hover {
  background: linear-gradient(90deg, #f0f4f8 0%, #e0e7f0 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.ideditor .ui-reports-list-table tbody tr.clickable-row:hover td {
  color: #2d3748;
}

.ideditor .ui-reports-list-table tbody tr.active-row {
  background: #e6f0fa;
  font-weight: 500;
}

.ideditor .ui-reports-list-table thead {
  border-top: none;
  background: var(--light-green-gradient);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.ideditor .ui-reports-list-table th {
  padding: 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
}

.ideditor .ui-reports-list-table td {
  padding: 15px;
  text-align: left;
}

.ideditor .ui-reports-list-table thead th:first-child {
  border-left: none;
  border-top-left-radius: 10px;
}

.ideditor .ui-reports-list-table thead th:last-child {
  border-right: none;
  border-top-right-radius: 10px;
}

.ideditor .ui-reports-list-table tbody tr:nth-child(odd) {
  background-color: #fff;
}

.ideditor .ui-reports-list-table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

.ideditor .ui-reports-list-table tbody tr:nth-child(even) td:first-child {
  border-left: 1px solid #fff;
}

.ideditor .ui-reports-list-table tbody tr:nth-child(even) td:last-child {
  border-right: 1px solid #fff;
}

.ideditor .ui-reports-list-table tbody tr:last-child {
  border-bottom: 1px solid #fff;
}

.ideditor .ui-reports-list-table a {
  color: var(--blue);
  text-decoration: none;
}

.ideditor .ui-reports-list-table a:hover {
  text-decoration: underline;
}

.ideditor .details-button,
.ideditor .pdf-report-button {
  background: transparent;
  border: none;
  color: var(--blue);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ideditor .details-button {
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

.ideditor .details-button::before {
  content: '...';
  font-weight: bold;
  font-size: 1.4em;
  line-height: 1;
  letter-spacing: 0.1em;
}

.ideditor .details-button:hover,
.ideditor .pdf-report-button:hover {
  background: transparent;
  color: var(--dark-blue);
  text-decoration: none;
}

.ideditor .details-button:active,
.ideditor .pdf-report-button:active,
.ideditor .details-button:focus,
.ideditor .pdf-report-button:focus  {
  background: transparent;
  color: var(--dark-blue-2);
}

.ideditor .pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  gap: 10px;
  flex-wrap: wrap;
}

.ideditor .pagination-container-top {
  margin-bottom: 10px;
}

.ideditor .pagination-container-bottom {
  margin-top: 10px;
}

.ideditor .pagination-button {
  background: var(--light-green-gradient);
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.ideditor .pagination-button:hover:not(.disabled) {
  background: var(--light-green-gradient);
}

.ideditor .pagination-button.disabled {
  background: var(--light-green-gradient);
  cursor: not-allowed;
  color: white;
  opacity: 0.7;
}

.ideditor .pagination-info {
  font-size: 14px;
  color: var(--dark-grey);
  white-space: nowrap;
}

.ideditor .items-per-page-select {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.ideditor .items-per-page-select:focus {
  outline: none;
  border-color: var(--dark-green);
}

.ideditor .ui-reports-list-edit-button {
  border-radius: 50%;
  background: var(--light-green-gradient);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.ideditor .ui-reports-list-edit-button:hover {
  opacity: 0.8;
}


@media (max-width: 900px) {
  .ideditor .ui-reports-list-table {
    border: none;
  }

  .ideditor .ui-reports-list-table thead {
    display: none;
  }

  .ideditor .ui-reports-list-table tbody,
  .ideditor .ui-reports-list-table tr,
  .ideditor .ui-reports-list-table td {
    display: block;
  }

  .ideditor .ui-reports-list-table tr {
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #fff;
  }

  .ideditor .ui-reports-list-table tbody tr:nth-child(odd),
  .ideditor .ui-reports-list-table tbody tr:nth-child(even) {
    background-color: transparent;
    padding: 10px 0;
  }


  .ideditor .ui-reports-list-table td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 5px 15px;
    text-align: right;
    background-color: transparent !important;
  }

  .ideditor .ui-reports-list-table td:last-child {
    border-bottom: none;
  }

  .ideditor .ui-reports-list-table tbody tr:nth-child(even) td:first-child,
  .ideditor .ui-reports-list-table tbody tr:nth-child(even) td:last-child {
    border-left: none;
    border-right: none;
  }

  .ideditor .ui-reports-list-table tbody tr:last-child {
    border-bottom: none;
  }

  .ideditor .ui-reports-list-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 15px;
    white-space: nowrap;
    font-weight: bold;
    text-align: left;
    color: var(--dark-grey);
  }

  .ideditor .ui-reports-list-table td button.details-button {
    width: auto;
    display: inline-block;
    margin-top: 5px;

  }
}