mapshaper/www/page.css

A tool for editing geospatial data for mapping and GIS.

/*
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
*/

@font-face {
  font-family: 'SourceSans3';
  src: url('assets/SourceSans3-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}

@font-face {
	font-family: 'Iosevka';
	src: url('assets/iosevka-light.woff2') format('woff2');
}

:root {
	--bg-col: #eaf2f4; /* #f8fdff */
	--xlt-theme-col: #f4f8f9;
	--accent-col: #ffa; /* yellow logo text */
	--theme-col: #1385B7; /* blue header / btn col */
	--dk-theme-col: #196d8e; /* #1A6A96;  btn hover col */
	--lt-theme-col: #e6f7ff;
	--colored-text: #10699b;
	--normal-text: #333;
	--left-sidebar-width: 420px;
	--sidebar-panels-separator-position: 50%;
	--sidebar-resize-col: #f2c65a; /* #d6a51d; */
}


html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	overflow: hidden;
	background-color: var(--bg-col);
	font: 14px/1.4 'SourceSans3', Arial, sans-serif;
	font-weight: 400;
	color: #444;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	cursor: default;
}

body.map-view {
	background-color: #fff;
}


.fade-out {
  animation: fadeOut ease forwards 0.6s;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.selectable,.selectable * {
	user-select: text;
	cursor: text;
}


/* --- Themed elements -------------- */

.page-header,
.dialog-btn,
.sidebar-btn {
	background-color: var(--theme-col);
}

.colored-text,
.save-menu-link,
.context-menu-item,
.save-menu-btn,
.add-field-btn,
.nav-menu-item,
.edit-data-btn {
	color: var(--colored-text);
}

.dot-underline {
	border-color: var(--colored-text);
}

.dot-underline {
	border-bottom: 1px dotted;
}

.dot-underline-black {
	border-bottom: 1px dotted black;
}

/*.nav-btn * {
	fill: var(--theme-col);
}*/

.nav-btn * {
	fill: var(--theme-col);
}

.alert-btn + .alert-btn {
	margin-left: 4px;
}

.dialog-btn {
	display: inline-block;
	margin-bottom: 1px;
	margin-top: 3px;
	font-size: 13px;
	color: white;
	font-weight: 500;
	min-width: 28px;
}

.dialog-btn:hover:not(.disabled),
.sidebar-btn:hover,
.btn.header-btn:hover,
.btn.active-layer-label:hover,
.dialog-btn.default-btn,
.dialog-btn.selected-btn {
	background-color: var(--dk-theme-col);
}

.dialog-btn.disabled {
	opacity:  0.5;
}

.colored-text::selection {
	background-color: var(--lt-theme-col);
}

.colored-text::-moz-selection {
	background-color: var(--lt-theme-col);
}

.layer-item.active {
	background-color: var(--lt-theme-col);
}

/* --- Page header --------------- */

.page-header {
	position: absolute;
	color: white;
	top: 0;
	left: 0;
	z-index: 40;
	width: 100%;
	height: 30px;
}

.mapshaper-logo {
	font-weight: 600;
	font-size: 17px;
	margin: 3px 0 0 11px;
}

.mapshaper-logo .logo-highlight {
	color: var(--accent-col);
}

.page-header a {
	text-decoration: none;
}

#mode-buttons.page-header-buttons {
	display: none;

}

/* When the page is preloaded with data (CLI files, ?files= or ?catalog= URL
   params), suppress the splash header links so they don't flash into view
   for ~a second before the editor mounts and hides them. */
.mapshaper-preload #splash-buttons {
	display: none;
}

/* On narrow screens, splash links collide with the logo; keep the header clean
   until data is loaded and the editor controls take over. */
@media (max-width: 500px) {
	#splash-buttons {
		display: none;
	}
}

.page-header-buttons {
	z-index: 20;
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0 2px 3px 0;
}

.btn.header-btn,
.btn.active-layer-label {
	color: #fff;
	border: none;
	margin-top: 0px;
	height: 29px;
	box-sizing: border-box;
	border-radius: 1px;
	line-height: 1;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 8px 0px 8px;
}

.page-header .header-btn.disabled,
.page-header .header-btn.disabled:hover {
	background-color: transparent;
	opacity: 0.5;
}

.page-header .btn.header-btn.active,
.btn.toggle-btn.active {
	background-color: black;
}

#sponsor-btn {
	color: var(--accent-col);
}

#sponsor-btn svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	vertical-align: -1px;
}

/* --- Hamburger menu (post-edit overflow links) --- */

#header-menu-btn {
	cursor: pointer;
	user-select: none;
	/* All header buttons are 29px tall, so top-align the hamburger to keep its
	   row baseline-neutral. Without this, the SVG-only button (no text) makes
	   its inline-block baseline = bottom edge, which drags the surrounding
	   text-containing buttons down to match. */
	vertical-align: top;
}

#header-menu-btn svg {
	display: block;
	width: 14px;
	height: 13px;
	fill: currentColor;
}

#header-menu-dropdown {
	position: absolute;
	top: 30px;
	right: 0;
	min-width: 180px;
	background-color: #fff;
	color: var(--normal-text);
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	padding: 4px 0;
	z-index: 50;
}

.history-menu-dropdown {
	pointer-events: none;
}

.header-menu-item {
	display: block;
	padding: 4px 14px;
	color: var(--normal-text);
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.header-menu-item:hover,
.header-menu-item:focus {
	background-color: var(--lt-theme-col);
	color: #1A6A96;
	outline: none;
}

.header-menu-item.disabled {
	color: #999;
	pointer-events: none;
}

.history-menu-dropdown .info-box {
	pointer-events: initial;
	min-width: 185px;
}

.history-menu-item {
	color: var(--normal-text);
	cursor: pointer;
	padding-top: 2px;
	white-space: nowrap;
}

.history-menu-item:hover,
.history-menu-item:focus {
	color: #1A6A96;
	outline: none;
}

.history-menu-item.disabled {
	color: #999;
	cursor: default;
	opacity: 0.55;
	pointer-events: none;
}

.history-menu-note {
	color: #777;
	font-size: 12px;
	line-height: 1.25;
	max-width: 215px;
	padding: 0 0 5px 0;
	white-space: normal;
}


.history-snapshot-list .save-menu-item {
	right: auto;
	text-align: left;
	padding-left: 0;
	padding-right: 0;
}

.header-menu-item.header-menu-sponsor svg {
	width: 12px;
	height: 12px;
	fill: #d63384;
	vertical-align: -1px;
	margin-right: 6px;
}

.separator {
	border-left: 1px solid white;
	height: 10px;
	margin: 0 2px 0 2px;
	display: none;
}

/* --- Selection tool dialog --------- */

.selection-tool-options {
	pointer-events: none;
}

.selection-tool-options .info-box {
	pointer-events: initial;
	text-align: center;
}

/* --- Box tool dialog --------- */
.box-tool-options {
	pointer-events: none;
}

.box-tool-options .btn,
.selection-tool-options .btn {
	pointer-events: initial;
}

.box-coords {
	margin-top: -23px;
	pointer-events: initial;
	position: absolute;
	z-index: -1;
	padding: 1px 25px;
	right: 55px;
}

/* --- Export dialog --------- */

.export-options .dialog-btn {
	min-width: 20px;
}

.export-options table {
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.export-layer-list {
	max-height: 160px;
	overflow: hidden;
	overflow-y: auto;
	margin-right: -3px;
}

.export-layer-list > div {
	white-space: nowrap;
}

.gpkg-layer-list .gpkg-layer-item {
	display: block;
	white-space: nowrap;
}

.gpkg-layer-list {
	max-height: 200px;
	overflow: hidden;
	overflow-y: auto;
	margin-right: -3px;
}

/* --- Main area ------------- */

.main-area {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 29px 0 0 0;
}


/* --- Error message ---------- */

.alert-wrapper {
	z-index: 120;
	text-align: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.alert-wrapper.non-blocking {
	pointer-events: none;
}

.non-blocking > div {
	pointer-events: auto;
}

.alert-wrapper p.alert-message {
	margin: 1px 0 0 0;
}

.alert-title {
	line-height: 1.1;
	font-weight: 600;
	margin-bottom: 7px;
}

div.alert-title, div.alert-message {
	font-size: 16px;
}

.alert-wrapper .alert-btn {
	margin-top: 8px;
}

div.alert-box {
	margin-top: 42px; /* 55px; */
	overflow: auto;
	max-height: 70%;
	max-width: 400px;
}



/* --- Splash screen -------------- */

.import-instructions {
	margin: 8px 0 0 0;
	font-size: 15px;
}

.mini-drop-area {
	border: 1.5px dashed #999;
	max-width: 260px;
	border-radius: 9px;
	line-height: 1.45;
	padding: 9px 11px 6px 11px;
	margin: 9px -1px 3px -1px;
	min-height: 130px;
	background: var(--xlt-theme-col);
}

.catalog-mode .file-catalog {
	height: 32%;
}


/*#file-selection-btn.inline-btn {
	padding: 2px 4px 3px 3px;
}*/

/* --- File catalog --------------- */

.catalog-mode .file-catalog,
.catalog-mode .file-catalog-spacer {
	display: block;
}

.catalog-area {
	overflow: hidden;
	border: 1.5px solid #aaa;
	border-radius: 19px;
	background-color: var(--bg-col);
}

.file-catalog table {
	margin: 0;
	border-collapse: collapse;
	height: 100%;
	width: 100%;
}

.file-catalog th {
	vertical-align: top;
	height: 40px;
}

.file-catalog,
.file-catalog-spacer {
	display: none;
}

.file-catalog td {
	margin: 0;
	cursor: pointer;
	vertical-align: top;
}

.file-catalog td:hover {
	background-color: #e2e2e2;
}

.file-catalog.downloading td.downloading {
	background-color: #d5d5d5;
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: top left;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFt7e3AAAAgOo4JQAAAA5JREFUeNpiYAABgAADAAAGAAHgQhFOAAAAAElFTkSuQmCC);
}

/* --- Import screen -------------- */

.option-menu .text-input {
	width: 230px;
	background: rgba(255, 255, 255, 0.4);
	border: 1px solid #999;
	padding: 0 3px;
	height: 18px;
	font-size: 13px;
	margin: 0 0 5px 0;
}

input[type=text]:focus,
input[type=number]:focus,
textarea:focus {
	outline: none;
	border-color: #d3aa00;
	box-shadow: 0 0 0 2px rgba(212, 168, 0, 0.4);
}

::placeholder {
	color: #aaa;
	opacity: 1;
}


#mshp-not-supported {
	display: none;
	z-index: 100;
	text-align: center;
}

.dropped-file-list {
	margin-bottom: 4px;
	max-height: 300px;
	overflow-y: auto;
}

.dropped-file-list img.close-btn {
	position: absolute;
	cursor: pointer;
	width: 14px;
	height: 14px;
	padding: 0;
	top: 3px;
	right: 0px;
}

.dropped-file-list > div {
	position: relative;
}

.dropped-file-list span {
	margin-right: 16px;
}

#import-options .queued-file-section {
	display: none;
}

.queued-files #import-options .queued-file-section {
	margin-top: 10px;
	display: block;
}

.queued-files #import-options .import-instructions {
	display: none;
}


#import-options .dropped-file-list p {
	line-height: 1;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 600;
}

.popup-dialog {
	display: none;
	z-index: 80;	
	text-align: center;
}

.popup-dialog.popup-align-left {
	text-align: left;
	padding-left: 12px;
}

.contextmenu {
	position: absolute;
	border-radius: 6px;
	border: 1px solid #d5d5d5;
	box-shadow: 0 1px 7px rgba(0,0,0,0.18);
	background-color: #fff;
	font-size: 13px;
	/* z-index: 40; */
	z-index: 200;
	padding: 4px 0;
}

.contextmenu-item {
	padding: 6px;
}

.info-box,.popup {
	border-radius: 11px;
	border: 1px solid #d5d5d5;
	box-shadow: 0 1px 7px rgba(0,0,0,0.18);
	background-color: #fff;
}

.info-box {
	min-width: 230px;
	word-wrap: break-word;
	text-align: left;
	margin-top: 16px;
	padding: 14px 16px 13px 18px;
	vertical-align: top;
	display: inline-block;
	/* border: 1px solid #aaa; */
}

.info-box label {
	cursor: pointer;
}

.sidebar-buttons {
	display: none;
	position: absolute;
	background-color: white;
	padding: 1px 3px;
	top: 207px;
	right: 0;
	z-index: 19;
}

.btn.sidebar-btn {
	display: block;
	margin-bottom: 2px;
	margin-top: 2px;
	font-size: 13px;
	color: white;
	min-width: 28px;
}

.btn.sidebar-btn.hidden {
	display: none;
}

.info-box h3 {
	font-size: 17px;
	line-height: 1.1;
	padding: 0;
	margin: 0 0 0.4em 0;
	font-weight: 500;
}

.info-box h3.list-header {
	margin-bottom: 0.1em;
}

.info-box h4 {
	font-size: 15.5px;
	font-weight: 400;
	margin: 5px 0 2px 0;
}

.info-box p {
	white-space: pre-line;
	margin: 0 0 6px 0;
	line-height: 1.25;
	/* font-size: 90%; */
}



/*.option-menu input[type="radio"],
.option-menu input[type="checkbox"]  */
input[type="radio"],
input[type="checkbox"] 
{
	position: relative;
	top: 1px;
	width: 12px;
	height: 12px;
	cursor: pointer;
}

.info-box .tip-button {
	margin: 3px 2px 0 10px;

}

.info-box input[type="checkbox"] {
	margin: 3px 5px 0 1px;
}

.info-box input.radio {
	margin: 0 5px 0 0;
}

/* --- Progress bar --------------- */

.progress-message {
	position: absolute;
	width: 100%;
	z-index: 90;
	text-align: center;
	top: 52px;
}

.progress-message > div {
	display: inline-block;
	text-transform: uppercase;
	padding: 3px 6px;
	font-size: 15px;
	color: black;
	background-color: rgba(255, 255, 222, 0.85);
	border: 1px solid var(--normal-text);
}

/* === Editing interface ========== */

#mshp-main-page {
	position: relative;
	height: 100%;
	width: 100%;
}


/* --- Sidebar panels ------------ */

.sidebar-panels {
	right: auto;
	width: var(--left-sidebar-width);
	max-width: 100%;
	box-sizing: border-box;
	border-right: 1px solid #c6c6c6; /*#cfd8dc;*/
	/* box-shadow: 2px 0 8px rgba(0,0,0,0.12); */
	z-index: 30;
	pointer-events: none;
	display: none;
}

.sidebar-panel {
	position: relative;
}

.sidebar-panel:first-child {
	height: var(--sidebar-panels-separator-position);
}

.sidebar-panel:last-child {
	height: calc(100% - var(--sidebar-panels-separator-position));
}

.sidebar-panels:not(:has(> .sidebar-panel.open ~ .sidebar-panel.open)) > .sidebar-panel.open {
	height: 100%;
}

.sidebar-panels:not(:has(> .sidebar-panel.open ~ .sidebar-panel.open)) .sidebar-panels-resize-handle {
	display: none;
}

body.sidebar-open .sidebar-panels {
	display: flex;
	flex-direction: column;
}

.console-area {
	font-size: 12px;
}

body.sidebar-open .map-area {
	left: var(--left-sidebar-width);
}

.sidebar-resize-handle {
	display: none;
	position: absolute;
	top: 29px;
	bottom: 0;
	left: calc(var(--left-sidebar-width) - 4px);
	width: 8px;
	z-index: 35;
	cursor: ew-resize;
	pointer-events: auto;
}

.sidebar-resize-handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3px;
	width: 2px;
	background-color: transparent;
}

body.sidebar-open .sidebar-resize-handle {
	display: block;
}

body.sidebar-resizing,
body.sidebar-resizing * {
	cursor: ew-resize !important;
	user-select: none;
}

body.sidebar-resizing .sidebar-resize-handle::before,
.sidebar-resize-handle:hover::before {
	background-color: var(--sidebar-resize-col);
}

.sidebar-panels-resize-handle {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: -4px;
	height: 8px;
	z-index: 35;
	cursor: ns-resize;
	pointer-events: auto;
}

.sidebar-panels-resize-handle::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 3px;
	height: 2px;
	background-color: transparent;
}

body.sidebar-panels-resizing,
body.sidebar-panels-resizing * {
	cursor: ns-resize !important;
	user-select: none;
}

body.sidebar-panels-resizing .sidebar-panels-resize-handle::before,
.sidebar-panels-resize-handle:hover::before {
	background-color: var(--sidebar-resize-col);
}

/* Give the console a little more line length on wide screens. */
@media screen and (max-width: 525px) {
	body.sidebar-open .map-area {
		display: none;
	}
}

@media screen and (min-width: 1200px) {
	:root {
		--left-sidebar-width: 460px;
	}

	.console-area {
		font-size: 13px;
	}
}

@media screen and (min-width: 1400px) {
	:root {
		--left-sidebar-width: 500px;
	}

	.console-area {
		font-size: 14px;
	}
}

.sidebar-tabs {
	position: absolute;
	top: 66px; /* below line intersection repair link */
	left: 0;
	z-index: 40;
	pointer-events: auto;
}

body.sidebar-open .sidebar-tabs {
	left: var(--left-sidebar-width);
	margin-left: -1.5px;
}

body.sidebar-tabs-over-popup .sidebar-tabs {
	z-index: 90;
}

.sidebar-tab {
	border: 1px solid rgba(255,255,255,0.8);
	border-right: none;																										;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	background-color: var(--theme-col);
	color: white;
	padding: 9px 4px;
	margin-bottom: 4px;
	border-radius: 5px 0 0 5px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	pointer-events: auto;
}

.sidebar-tab:hover {
	background-color: var(--dk-theme-col);
}

body.layers-open .layer-tab,
body.console-open .console-tab {
	background-color: black;
}



.console-window {
	pointer-events: auto;
	background-color: black;
	position: absolute;
	text-align: center;
	overflow: auto;
	width: 100%;
	height: 100%;
}

.console-buffer {
	cursor: text;
	width: 100%;
	position: relative;
	color: white;
	font-family: Iosevka, monospace;
	line-height: 1.35;
	margin: 8px 0 20px 0;
	word-break: break-all;
	word-wrap: break-word;
	white-space: pre-wrap;
	 /* Removing this workaround: non-standard behavior fixed in recent Chrome
	white-space: pre; */
}

.console-buffer > div {
	text-align: left;
	/* max-width: 640px; */
	margin: 0 auto;
	padding: 0 10px 0 14px;
}

.console-error {
	color: #f93b00;
}

.console-warn {
	color: #f5b542;
}

.console-message {
	color: #eddd98;
}

.console-example {
	color: #b9dffc;
}

.console-help,
.console-info {
	white-space: normal;
	word-break: normal;
	overflow-wrap: anywhere;
}

.console-help-line,
.console-info-title,
.console-info-subtitle {
	white-space: pre-wrap;
}

.console-help-spacer {
	height: 0.75em;
}

.console-help-table,
.console-info-table,
.console-attribute-table {
	border-collapse: collapse;
	margin: 2px 0 8px 0;
	width: 100%;
}

.console-help-table td,
.console-info-table td,
.console-attribute-table td,
.console-attribute-table th {
	padding: 1px 10px 1px 0;
	vertical-align: top;
	text-align: left;
	font-weight: normal;
}

.console-help-table td:first-child,
.console-info-table td:first-child,
.console-attribute-table td:first-child,
.console-attribute-table th:first-child {
	white-space: nowrap;
	width: 1%;
	color: #b9dffc;
}

.console-attribute-table tr:first-child {
	border-bottom: 1px solid rgba(255,255,255,0.35);
}

.console-info-layer + .console-info-layer {
	margin-top: 1em;
}

.console-info-title {
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.35);
	line-height: 1.45; /* space between border and text */
}

.console-info-subtitle {
	margin-top: 0.65em;
}

.layer-info-popup .console-info-title {
	color: var(--normal-text);
	border-bottom-color: #ccc;
}

.layer-info-popup .console-attribute-table tr:first-child {
	border-bottom-color: #ccc;
}

.layer-info-popup .console-info-table td:first-child,
.layer-info-popup .console-attribute-table td:first-child,
.layer-info-popup .console-attribute-table th:first-child {
	color: #555;
}

.input-field {
	outline: none;
	min-width: 100px;
}

/* --- Layer menu ----------- */

.layer-control-btn {
	top: 0;
	width: 100%;
	position: absolute;
	text-align: center;
	z-index: 30;
	display: none;
	pointer-events: none;
}

.layer-control-btn.active {
	display: block;
}

.active-layer-label {
	white-space: nowrap;
	pointer-events: auto;
	margin-right: 20px;
}

.active-layer-label:focus,
.active-layer-label:focus-visible {
	outline: none;
}

body.simplify .layer-control-btn {
	display: none;
}

@media (max-width: 850px) {
	.layer-control-btn,
	.layer-control-btn.active {
		display: none;
	}
}

@media (max-width: 700px) {
	.info-box {
		margin-top: 8px;
	}

	div.nav-buttons {
		top: 2px;
	}

	.btn.header-btn {
		padding-left: 5px;
		padding-right: 5px;
	}

	.mshp-main-map .basemap-overlay-buttons {
		top: 10px;
		right: 33px;
		padding: 0;
		background: transparent;
		border-radius: 0;
	}

	.mshp-main-map .basemap-overlay-buttons .basemap-style-btn.basemap-overlay-btn {
		width: 30px !important;
		height: 30px !important;
		margin: 0 0 0 4px !important;
		border-radius: 4px !important;
	}
}

.layer-control .info-box {
	padding: 0;
	pointer-events: none;
}

.layer-control div.info-box-scrolled {
	position: relative;
	z-index: -1;
	background-color: white;
	max-height: 500px;
	overflow: hidden;
	overflow-y: auto;
	padding: 9px 14px 10px 14px;
	pointer-events: auto;
	border-radius: 9px;
}

.layer-control .info-box {
	/* (Chrome fix) raise layer menu above container to catch events */ 
	position: relative;
	z-index: 90;
}

.layer-area {
	background-color: #fff;
}

.layer-area .info-box {
	position: static;
	z-index: auto;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-width: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.layer-area div.info-box-scrolled {
	z-index: auto;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-height: none;
	border-radius: 0;
}

.layer-control .no-layer-note {
	color: #999;
	margin: 0 0 5px 0;
}

.layer-add-links {
	margin: 2px 0 2px 0;
	font-size: 13px;
	line-height: 1.2;
}

.layer-menu-link {
	color: var(--colored-text);
	cursor: pointer;
}

.layer-menu-link:hover {
	text-decoration: underline;
}

.layer-menu-link-separator {
	color: #777;
	font-weight: bold;
}

.layer-menu .layer-list {
	margin-top: -5px;
	/* margin: 0 0 7px 0; */
}

.layer-menu .layer-item {
	position: relative;
	margin-left: -14px;
	margin-right: 6px;
	padding: 6px 14px;
	width: 100%;
}

.layer-menu .layer-list .layer-item {
	cursor: pointer;
}

.pin-all img,
.layer-item img
{
	width: 16px;
	height: 16px;
	padding: 1px 2px 3px 2px;
	right: 6px;
}

.layer-item .layer-btn {
	position: absolute;
	top: 5px;
}


.layer-item .more-btn {
	position: absolute;
	right: 28px;
	width: 18px;
	height: 18px;
	opacity: 1;
	cursor: pointer;
	border-radius: 3px;
}


img.close-btn {
	opacity: 0.2;
}

.close2-btn {
	display: inline-block;
	background-color: #e5e5e5;
	background-image: url("images/close2.png");
	background-size: cover;
	float: right;
	height:  18px;
	width:  18px;
	margin-right: -3px;
	cursor: pointer;
	border-radius: 4px;
}

.close2-btn:hover {
	background-color: #d5d5d5;
}

.pin-all img {
	position: absolute;
	top: 11px;
	cursor: pointer;
}


.layer-item .more-btn::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 2px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #000;
	box-shadow: 5px 0 0 #000, 10px 0 0 #000;
}

.layer-item .more-btn:hover {
	background-color: #e5e5e5;
}

img.eye-btn {
	opacity: 0;
}

.pinnable:not(.pinned):not(.active) img.black-eye,
.pinnable.active.invisible img.black-eye {
	opacity: 0.2;
}

.pinnable:not(.pinned) img.black-eye:hover {
	opacity: 0.3;
}

/*.pinnable.pinned.active img.black-eye {
	opacity: 0;
}*/

.pinnable.active:not(.pinned):not(.invisible) img.black-eye,
.pinnable.pinned:not(.active) img.green-eye,
.pinnable.active.pinned:not(.invisible) img.black-eye {
	opacity: 1
}

.pinnable img.black-eye {
	z-index: 1;
}

.layer-item .row {
	line-height: 17px;
	margin-bottom: 1px;
	white-space: nowrap;
}

.layer-item .layer-name {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
	min-height: 14px; /* For FF when content is empty */
	min-width: 2px;
	outline: none;
}

.layer-item .row.layer-problems {
	color: #f93b00;
}

.layer-item .layer-name.editing {
	border-bottom: 1px solid transparent;
	max-width: none;
	overflow: visible;
	position: relative;
	z-index: 3;
}

.layer-item .layer-name::selection {
	background: black;
	color: white;
	text-decoration: none;
}

.layer-item .layer-name::-moz-selection {
	background: black;
	color: white;
	text-decoration: none;
}

.layer-list .layer-item:hover:not(.active):not(.dragging) {
	background-color: #f7f7f7;
}

.layer-item .row > div {
	display: inline-block;
}

.layer-item .col1 {
	width: 84px;
}

.layer-item .row1 .col2 {
	margin-right: 44px; /* room for row controls */
	max-width: calc(100% - 132px);
	vertical-align: top;
}


.layer-item.drag-target:not(.active) {
	background-color: #f7f7f7;
}

.layer-item.drag-target * {
	/* opacity: 0.3; */
}

.layer-item.drag-target.active {
	/* background-color: #BDE2F4; */
}

.layer-item.insert-above:not(.drag-target) {
	border-top: 1px solid black;
}

.layer-item.insert-below:not(.drag-target) {
	border-bottom: 1px solid black;
}

/* --- Intersection control ----------*/

.intersection-display {
	cursor: default;
	visibility: visible;
	display: none;
	position: absolute;
	z-index: 20;
	top: 10px;
	left: 13px;
}

.intersection-check {
	display: none;
}

.intersection-count .icon {
	background-color: #F24400;
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 5px 2px 0;
}

.intersection-count .icon.black {
	background-color: black;
}

.intersection-display .close-btn {
	width: 16px;
	height: 16px;
	cursor: pointer;
	position: relative;
	top: 4px;
	margin-left: 1px;
}

/*.intersection-display .text-btn.disabled {
	visibility: hidden;
}*/


/* --- Popup -------------------- */

.popup {
	font-size: 13px;
	box-sizing: border-box;
	position: absolute;
	z-index: 40;
	top: 12px;
	left: 12px;
	padding: 5px 0;
}

.popup div.popup-tab {
	position: absolute;
	pointer-events: none;
	right: -81px;
	width: 80px;
	top: 6px;
}

.popup-tab .popup-nav {
	display: inline-block;
	pointer-events: auto;
	background-color: rgba(234,234,234,0.85);
	padding: 3px 5px 3px 4px;
	white-space: nowrap;
}

.popup-nav .popup-nav-arrow {
	cursor: pointer;
	padding: 0 1px;
}

.popup > div.popup-content {
	box-sizing: border-box;
	overflow: hidden;
	overflow-y: auto;
	padding: 4px 12px 3px;
	line-height: 1.2;
}

.popup table {
	border-spacing: 0px;
}

.popup table td {
	vertical-align: top;
	/* padding: 2px 0; */
	min-width: 80px;
	max-width: 180px;
	color: black;
	height: 17px; /* functions like min-height on <td> */
}

.popup td.field-name {
	color: #aaa;
	padding-right: 7px;
	font-weight: normal;
	min-width: 60px;
	max-width: 260px;
}

.popup .value {
	outline: none;
	word-wrap: break-word;
}

.popup .num-field {
	font-style: italic;
}

.popup .empty, .popup .null-value {
	min-width: 4px;
	display: inline-block;
	min-height: 13px;
}

.popup .null-value {
	color: #aaa;
}

.popup .note {
	font-style: italic;
	min-height: 16px;
}

.popup .editable-cell .value.editing {
	color: black;
	border-bottom: none;
}

.popup .editable-cell .value::selection {
	color: white;
	background: black;
}

.popup .editable-cell .value::-moz-selection {
	color: white;
	background: black;
}


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

.map-layers {
	z-index: 0;
	position: relative;
	height: 100%;
}

.display-options {
	pointer-events: none;
}

.display-options .info-box {
	width:  min-content;
	pointer-events: initial;
}

/* --- Messages inbox --------------- */

.messages-btn.btn {
	/* SVG-only button; align like the hamburger so its baseline doesn't drag
	   the row's text-bearing buttons down. */
	padding: 8px 8px 4px 8px;
	user-select: none;
	vertical-align: top;
	cursor: pointer;
	position: relative;
}

.messages-btn.btn.hidden {
	display: none;
}

.messages-btn svg {
	display: block;
	fill: currentColor;
}

.messages-badge {
	position: absolute;
	top: 2px;
	right: -1px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 7px;
	background-color: #d63333;
	color: #fff;
	font-size: 10px;
	line-height: 14px;
	font-weight: 600;
	text-align: center;
	box-sizing: border-box;
	pointer-events: none;
}

.messages-badge.warn {
	background-color: #d68f33;
}

/* Quick pulse to draw attention when a new message arrives. The animation
   is added by JS for ~2s and then removed, so it doesn't cycle forever. */
.messages-btn.pulse .messages-badge {
	animation: messages-pulse 0.9s ease-out 2;
}

@keyframes messages-pulse {
	0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(214, 51, 51, 0.55); }
	60%  { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(214, 51, 51, 0); }
	100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(214, 51, 51, 0); }
}

.messages-panel {
	pointer-events: none;
}

.messages-panel .info-box {
	pointer-events: initial;
	width: 360px;
	max-width: 90vw;
}

.messages-empty {
	color: #888;
	font-size: 13px;
	font-style: italic;
	padding: 4px 0 8px 0;
}

.messages-list {
	max-height: 50vh;
	overflow: hidden;
	overflow-y: auto;
	margin: 0 -4px 6px -4px;
	user-select: text;
}

.message-item {
	position: relative;
	border-left: 3px solid #888;
	background-color: #f4f7fa;
	padding: 6px 22px 6px 9px;
	margin: 4px 4px;
	border-radius: 3px;
	font-size: 13px;
	line-height: 1.35;
}

.message-item.severity-warn {
	border-left-color: #d68f33;
	background-color: #fbf3e6;
}

.message-item.severity-error {
	border-left-color: #d63333;
	background-color: #fbecec;
}

.message-item .message-title {
	font-weight: 600;
	display: block;
	margin-bottom: 1px;
}

.message-item .message-body {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.message-item .message-time {
	color: #888;
	font-size: 11px;
	margin-top: 2px;
	display: block;
}

.message-item .message-dismiss {
	position: absolute;
	top: 3px;
	right: 5px;
	width: 16px;
	height: 16px;
	line-height: 14px;
	text-align: center;
	color: #888;
	cursor: pointer;
	font-size: 14px;
	user-select: none;
	border-radius: 8px;
}

.message-item .message-dismiss:hover {
	color: var(--normal-text);
	background-color: rgba(0, 0, 0, 0.05);
}

.messages-footer {
	text-align: right;
	padding-top: 4px;
	border-top: 1px solid #eee;
}

.messages-footer .messages-clear-btn {
	font-size: 12px;
	min-width: 0;
	padding: 3px 9px;
}

.basemap-container {
	z-index: -1;
	position:  absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.basemap {
	display: none;
	position: relative;
	height: 100%;
}


p.basemap-warning {
	color: #cc0000;
	font-size: 87%;
	margin-bottom: 0;
}

.basemap-note {
	font-size: 87%;
}

.basemap-prompt {
	width: 100%;
	text-align:  center;
	z-index:  -2;
	bottom: 8px;
	font-size: 22px;
	color: #aaa;
	position: absolute;
}

.basemap-style-btn {
	position:  relative;
	border-width: 2px;
	border-color: #bbddea;
	border-style: solid;
	border-radius: 6px;
}

div.basemap-style-btn.active {
	border-color: #f7ba23;
}

.basemap-style-btn:not(.disabled) {
	cursor: pointer;
}

.basemap-buttons:not(.disabled) .basemap-style-btn:hover:not(.active) {
	border-color: #f7e286;
}

.basemap-overlay-buttons {
	z-index: 20;
	position: absolute;
	top: 6px;
	right: 36px;
	padding: 4px;
	background: white;
	border-radius: 7px;
	line-height: 0px;
	display: none;
}

.basemap-style-btn.basemap-overlay-btn {
	width: 40px;
	height: 40px;
	margin: 3px;
	overflow: hidden;
	display: inline-block;
}

.basemap-overlay-buttons.disabled > div {
	opacity: 0.5;
}

.basemap-overlay-btn img {
	margin-left: -31px;
	margin-top: -5px;
	width: 90px;
}

.add-basemap-menu input[type=text] {
	width: 222px;
	margin-top: 3px;
	margin-bottom: 4px;
	padding: 2px;
	font-size: 12px;
}

.add-basemap-menu .menu-section {
	margin-top: 7px;
	margin-bottom: 6px;
}

.added-basemaps {
	margin-bottom: 4px;
}

.added-basemaps > div {
	position: relative;
	cursor: pointer;
}

.added-basemaps img.close-btn {
	position: absolute;
	cursor: pointer;
	width: 14px;
	height: 14px;
	padding: 0;
	top: 3px;
	right: 0px;
}

.basemap-list-item.active img.off-icon {
	display:none;
}

.basemap-list-item:not(.active) img.on-icon {
	display:none;
}

.basemap-list-item img.off-icon {
	opacity: 0.3;
}

.basemap-list-item:hover img.off-icon {
	opacity: 0.7;
}

.added-basemaps img {
	width: 14px;
	height: 14px;
	padding-top: 2px;
	padding-right: 2px;
	vertical-align: top;
}


.mapbox-improve-map {
	display: none;
}

.mshp-main-map {
	/* background-color: #fff; */
}

.map-layers.symbol-hit {
	cursor: pointer;
}

.map-layers.symbol-hit.dragging {
	cursor: default;
}

.map-layers.add-points,
.map-layers.draw-tool {
	cursor: crosshair;
}

.map-layers.draw-tool.dragging {
	cursor: default;
}

body.pan .map-layers:not(.drawing) {
	cursor: grab;
}

body.pan.panning .map-layers:not(.drawing) {
	cursor: grabbing;
}
.map-layers canvas {
	pointer-events: none;
	position: absolute;
}

.map-layers canvas.retina {
	transform-origin: top left;
	-webkit-transform-origin: top left;
	transform: scale3D(0.5, 0.5, 1);
	-webkit-transform: scale3D(0.5, 0.5, 1);
}

.map-layers > svg {
	position: absolute;
}

.map-layers > svg text.selected {
	stroke: #FFC3FF;
	stroke-width: 4;
	paint-order: stroke;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.map-layers > svg.dragging,
.map-layers > svg text.selected {
	cursor: pointer;
}

.map-layers > svg text.active-label {
	stroke: #fac0ff; /* #efacf4; */
	paint-order: stroke fill;
	stroke-width: 4px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.map-layers > svg text.label-style-selected {
	stroke: #fce300;
	stroke-opacity: 0.25;
	paint-order: stroke fill;
	stroke-width: 4px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---  MAP BUTTONS --- */

/*.pointer-btn {
	z-index: 2;
}*/

.nav-buttons {
	z-index: 20;
	position: absolute;
	text-align: center;
	top: 6px;
	right: 0;
	padding: 3px; 
	background-color: rgba(255, 255, 255, 1);
	border-radius: 7px;
}

.nav-btn-wrapper {
	position: relative;
}

.nav-sub-btn {
	position: absolute;
	display: none;
	cursor: pointer;
	top: 4px;
	padding: 4px;
	right: 20px;
	z-index: -2;
}

.nav-sub-btn svg * {
	fill: black !important;
}


.inline-checkbox {
	margin-left: 5px;
}

#save-preference {
	/* display: none; */
}

.nav-sub-menu {
	position: absolute;
	z-index: -1;
	display: none;
	pointer-events: none;
	padding: 5px 0px;
	background-color: white;
	top: 0px;
	right: 24px;
	text-align: right;
	white-space: nowrap;
	border-radius: 6px;
	border: 1px solid #ddd;
	box-shadow: 0 1px 7px rgba(0,0,0,0.12);
}

.pointer-btn .nav-sub-menu {
	top: -3px;
}

.nav-btn.open .nav-sub-menu {
	display: block;
	pointer-events: inherit;
}


.nav-btn {
	position: relative;
	cursor:pointer;
	/* padding: 3px 3px 5px 3px; */
	padding: 4px 5px;
	line-height: 1;
}

.nav-btn.menu-btn {
	padding-top:  3px;
}

.nav-btn.selected {
	background-color: black;
	border-radius: 5px;
}

.nav-btn:hover:not(.disabled) svg *,
.nav-btn.hover.menu-btn:not(.disabled) svg * {
	fill: #166689;
}

.nav-btn.menu-btn.selected:not(.disabled) svg * {
	fill: white;
}

.label-style-panel {
	position: absolute;
	z-index: 21;
	top: 6px;
	right: 36px;
	width: 185px;
	padding: 8px 12px 12px;
	text-align: left;
	background-color: white;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 1px 7px rgba(0,0,0,0.12);
}

.label-style-panel button,
.label-style-panel select,
.label-style-panel input {
	font-size: 12.5px;
}

.label-style-panel button.label-style-close {
	font-size: 16px; /* close button icon */
}


.label-style-panel select {
	padding: 1px 0;
}

.label-style-panel-title {
	position: relative;
	font-weight: 600;
	font-size: 16px;
}

.label-style-close {
	position: absolute;
	right: -5px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.label-style-row {
	display: block;
	margin-top: 7px;
}

.label-style-row span,
.label-style-row-label {
	display: block;
	/* margin-bottom: 3px; */
	color: #555;
}

.label-style-row select {
	width: 100%;
	box-sizing: border-box;
}

.label-style-panel select {
	background-color: white;
	border: 1px solid #999;
	box-shadow: none;
}

.label-style-panel select:focus {
	border-color: #d3aa00;
	box-shadow: none;
	outline: none;
}

.label-style-panel input[type="text"] {
	-webkit-appearance: none;
	appearance: none;
	background: white;
	border: 1px solid #999;
	border-radius: 0;
	box-shadow: none;
}

.label-style-panel input[type="text"]:focus {
	border-color: #d3aa00;
	box-shadow: none;
	outline: none;
}

.label-create-expression-row input {
	width: 100%;
	box-sizing: border-box;
}

.label-create-copy-row {
	display: flex;
	align-items: flex-start;
	gap: 5px;
}

.label-create-copy-row input {
	margin-top: 1px;
}

.label-create-copy-row span {
	display: inline;
	margin: 0;
	color: #555;
}

.label-saved-style-row select {
	width: 100%;
	margin-bottom: 4px;
}

.label-saved-style-row {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid #ccc;
}

.label-saved-style-row button,
.label-style-row button {
	margin-right: 5px;
}

.label-split-row {
	display: grid;
	grid-template-columns: 105px 1fr;
	column-gap: 8px;
	align-items: start;
}

.label-split-cell > span,
.label-split-cell > .label-style-row-label {
	display: block;
	margin-bottom: 2px;
	color: #555;
}

.label-split-row .label-size-row,
.label-split-row .label-icon-size-row {
	justify-self: end;
	white-space: nowrap;
}

.label-color-row {
	position: relative;
}

.label-panel-btn {
	box-sizing: border-box;
	user-select: none;
	cursor: pointer;
	border: 1px solid #999;
	border-radius: 3px;
	background: #eee;
	padding: 0;
	height: 19px;
	width: 19px;
}

.label-panel-btn.disabled {
	color: #999;
	cursor: default;
	opacity: 0.45;
}

.label-color-row .label-color-chit {
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 5px;
	padding: 0;
	vertical-align: top;
	border: 1px solid #888;
	cursor: pointer;
}

.label-color-row input[type="text"] {
	width: 79px;
	height: 19px;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
	vertical-align: top;
}

.label-color-row .label-color-picker {
	left: auto;
	right: 0;
}

.label-color-row .label-color-picker input[type="text"] {
	width: 45px;
}

.label-css-row input {
	width: 100%;
	box-sizing: border-box;
}

.layer-style-panel .layer-color-row {
	position: relative;
}

.point-style-section + .point-style-section {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid #ccc;
}

.point-style-section.point-style-first-visible {
	margin-top: 7px;
	padding-top: 0;
	border-top: 0;
}

.point-style-note {
	color: #555;
	line-height: 1.25;
}

.point-create-labels-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.point-create-circles-row {
	display: flex;
	align-items: baseline;
	gap: 2px;
	color: #555;
}

.point-create-circles-row span {
	display: inline;
	margin: 0;
	color: #555;
}

.point-create-copy-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	color: #555;
}

.point-create-copy-label span {
	display: inline;
	margin: 0;
	color: #555;
}

.point-symbol-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.point-symbol-size-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.point-symbol-stepper-control {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.point-symbol-stepper-control:last-child {
	margin-left: auto;
	align-items: flex-end;
}

.point-symbol-color-cell {
	position: relative;
	white-space: nowrap;
	flex: 1;
}

.point-symbol-row .layer-number-control input[type="text"],
.point-symbol-width-row input[type="text"] {
	width: 45px;
	height: 19px;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
}

.point-symbol-width-row input[type="text"] {
	width: 55px;
}

.layer-style-control-line {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.layer-color-cell {
	position: relative;
	white-space: nowrap;
}

.layer-style-panel .layer-color-row input[type="text"] {
	width: 79px;
	height: 19px;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
	vertical-align: top;
}

.layer-row-controls {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	justify-content: flex-start;
}

.layer-number-control {
	display: block;
	margin: 0;
}

.layer-number-control > span,
.label-color-row > span,
.layer-color-cell > span {
	display: block;
	margin-bottom: 3px;
	color: #555;
}

.layer-style-panel .layer-number-control input[type="text"] {
	width: 45px;
	height: 19px;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
}

.layer-stepper-control {
	display: flex;
	align-items: center;
	gap: 2px;
}

.layer-stepper-control .label-panel-btn {
	text-align: center;
	line-height: 18px;
}

.layer-stroke-width-value {
	display: inline-block;
	width: 30px;
	min-height: 17px;
	line-height: 17px;
	text-align: center;
	border: 1px solid #999;
	background: white;
	cursor: pointer;
	box-sizing: border-box;
}

.layer-stroke-width-value.editing {
	cursor: text;
}

.layer-stroke-width-row .layer-number-control {
	display: block;
}

.layer-style-panel .layer-color-row .label-color-picker input[type="text"] {
	width: 45px;
}

.label-color-picker {
	position: absolute;
	z-index: 25;
	top: 48px;
	right: 0;
	padding: 8px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 1px 7px rgba(0,0,0,0.18);
}

.label-color-picker canvas {
	display: block;
	width: 256px;
	margin: 0 0 6px 0;
	cursor: crosshair;
}

.label-color-presets {
	margin: 0 0 6px 0;
}

.label-color-preset-row {
	display: flex;
	gap: 2px;
	margin-bottom: 2px;
}

.label-color-preset {
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.label-color-preset:hover,
.label-color-preset:focus {
	outline: 1px solid #d3aa00;
	outline-offset: 1px;
}

.label-color-preset-group-start {
	margin-left: 2px;
}

.label-color-picker.dragging-color canvas {
	cursor: none;
}

body.dragging-color-picker,
body.dragging-color-picker * {
	cursor: none !important;
}

.label-color-canvas-wrap {
	position: relative;
	width: 256px;
	overflow: visible;
}

.label-color-marker {
	position: absolute;
	pointer-events: none;
	overflow: visible;
}

.label-color-marker circle {
	fill: none;
	stroke-width: 1.5;
}

.label-color-picker-fields {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}

.label-color-picker-fields label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	color: #555;
}

.label-color-picker-fields span {
	display: inline;
	margin: 0;
	color: #555;
}

.label-color-picker-fields input {
	width: 34px;
	box-sizing: border-box;
}

.label-color-picker-fields button {
	margin-left: auto;
}

.label-style-selection-row button {
	margin-right: 5px;
}

.label-style-selection-row .label-editing-status,
.label-style-selection-row .label-editing-clear {
	display: inline;
}

.label-style-selection-row .label-editing-clear.hidden {
	display: none;
}

.label-editing-status {
	color: #555;
}

.label-style-selection-row .label-editing-clear {
	margin-left: 8px;
	color: var(--colored-text);
	cursor: pointer;
}

.label-style-selection-row .label-editing-clear:hover,
.repair-btn:hover {
	text-decoration: underline;
}

.label-position-grid {
	display: grid;
	grid-template-columns: repeat(3, 10px);
	gap: 2px;
}

.label-position-grid .label-panel-btn {
	width: 9px;
	height: 9px;
	cursor: pointer;
	border-radius: 0;
	background: white;
}

.label-panel-btn.selected {
	background-color: black;
	border-color: black;
	color: white;
}

.label-icon-buttons {
	display: flex;
	gap: 2px;
}

.label-icon-buttons .label-panel-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.label-icon-symbol {
	display: block;
	width: 13px;
	height: 13px;
	fill: currentColor;
	stroke: none;
}

.label-icon-buttons .label-panel-btn[data-icon="none"] .label-icon-symbol,
.label-icon-buttons .label-panel-btn[data-icon="ring"] .label-icon-symbol {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.label-icon-buttons .label-panel-btn[data-icon="star"] .label-icon-symbol {
	transform: scale(1.4);
}

.label-size-row .label-panel-btn,
.label-icon-size-row .label-panel-btn {
	display: inline-block;
	text-align: center;
	line-height: 18px;
}

.label-size-row .label-panel-btn,
.label-icon-size-row .label-panel-btn {
	margin-right: 4px;
}

.label-split-row .label-size-row .label-panel-btn,
.label-split-row .label-icon-size-row .label-panel-btn {
	margin-right: 2px;
}

.label-split-row .label-size-row .label-panel-btn:last-child,
.label-split-row .label-icon-size-row .label-panel-btn:last-child {
	margin-right: 0;
}

.label-size-row .label-size-value,
.label-icon-size-row .label-icon-size-value {
	display: inline-block;
	width: 28px;
	margin: 0 3px 0 0;
	text-align: center;
	color: black;
}

.label-split-row .label-size-value,
.label-split-row .label-icon-size-value {
	width: 24px;
	margin-right: 2px;
}

.nav-menu-item,
.contextmenu-item {
	background-color: #fff;
	white-space: nowrap;
	padding: 3px 10px 4px 10px;
	cursor: pointer;
	font-size: 13px;
	line-height: 13px;
}

.contextmenu-label {
	color: #999;
	white-space: nowrap;
	padding: 4px 10px 1px 10px;
	font-size: 12px;
	line-height: 12px;
	margin-top: -2px;
}

.nav-menu-item:hover,
.contextmenu-item:hover,
.nav-btn:hover .nav-sub-menu:not(.active):not(:hover) .nav-menu-item[data-name=info] {
	color: black;
	background: var(--lt-theme-col);
}

.nav-menu-item.selected {
	color: black;
}

/* bullets https://www.w3schools.com/charsets/ref_utf_geometric.asp */
.nav-sub-menu.active .nav-menu-item.selected:before {
	content: "\25B8";
	position: relative;
	margin-left: -7px;
	left: -2px;
	top: 1px;
}

.save-menu {
	text-align: right;
	padding-bottom: 5px;
}

.save-menu-entry {
	line-height: 11px;
	padding: 4px 7px 5px 7px;
	background: white;
}

.save-menu-btn {
	display: inline-block;
	border-radius: 4px;
	border: 1px solid #aaa;
	font-size: 13px;
	margin-left: 4px;
	padding: 2px 4px 3px 4px;
}

.add-field-btn,
.edit-data-btn {
	display: inline-block;
	font-size: 12px;
	margin-top: 3px;
}

.save-menu-btn:hover,
.add-field-btn:hover,
.edit-data-btn:hover {
	color: black;
}

.save-menu-link,
.save-menu-btn,
.add-field-btn,
.edit-data-btn {
	cursor: pointer;
}



.save-menu-link:hover {
	color: black;
}

.save-item-label {
	font-weight: 600;
}

.save-item-size {
	/*color: #999;*/
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.5;
}

.save-menu-item {
	position: relative;
	right: 0;
	text-align: right;
	background-color: #fff;
	white-space: nowrap;
	padding: 3px 7px 0px 7px;
	line-height: 11px;
	cursor: pointer;
}

.nav-btn.disabled {
	opacity: 0.4;
	cursor: default;
}

/* --- FLOATING TOOLBAR --- */

/*
 * Anchored at bottom-center of the map area. Multiple toolbars stack
 * vertically (newest on top). Designed to host buttons and other small
 * controls; the inner content slot leaves room for a future drag handle.
 */

.floating-toolbar-stack {
	position: absolute;
	z-index: 25;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.floating-toolbar {
	pointer-events: auto;
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.96);
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	padding: 4px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 150ms ease, transform 150ms ease;
}

.floating-toolbar.visible {
	opacity: 1;
	transform: translateY(0);
}

.floating-toolbar-content {
	display: flex;
	align-items: center;
	gap: 0;
}

.floating-toolbar-separator {
	width: 1px;
	height: 18px;
	margin: 0 4px;
	background-color: #ddd;
}

.floating-toolbar-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 5px;
	cursor: pointer;
	user-select: none;
}

.floating-toolbar-btn svg {
	width: 24px;
	height: 24px;
}

.floating-toolbar-btn svg * {
	fill: var(--theme-col);
	transition: fill 100ms ease;
}

.floating-toolbar-btn:hover:not(.disabled) {
	background-color: var(--lt-theme-col);
}

.floating-toolbar-btn:hover:not(.disabled) svg * {
	fill: #166689;
}

.floating-toolbar-btn:active:not(.disabled) {
	background-color: #cdebf9;
}

.floating-toolbar-btn.disabled {
	cursor: default;
}

.floating-toolbar-btn.disabled svg * {
	fill: #b8c4ca;
}

/* Tooltip shown above the button on hover */
.floating-toolbar-btn[data-tooltip]:hover:not(.disabled)::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(40, 40, 40, 0.92);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
	padding: 5px 7px;
	border-radius: 4px;
	pointer-events: none;
	z-index: 1;
}

.zoom-box {
	position: absolute;
	border: 1px solid #cc6acc;
	z-index: 15;
	pointer-events: none;
}

.zoom-box.rectangles {
	border: none;
	cursor: default;
}

.zoom-box .handle {
	position: absolute;
	z-index: 16;
	/* cursor: pointer; */
	background: #cc6acc;
	/* pointer-events: all; */
}

.zoom-box.hittable .handle {
	pointer-events: all;
}

/* Simplification control ------------ */

@media (max-width: 765px) {
	body.simplify  .simplify-control-wrapper {
		top: 26px;
	}

	body.simplify .page-header {
		height: 55px;
	}

	body.simplify .main-area {
		margin-top: 55px;
	}
}

.simplify-control-wrapper {
	display: none;
	position: absolute;
	width: 100%;
	overflow: hidden;
	margin: 0 auto 0 auto;
	top: 0px;
}

.simplify-control {
	text-align: center;
	white-space: nowrap;
	padding: 0 90px 0 12px;
}

.simplify-control .slider {
	margin: 15px 5px 0 3px;
	position: relative;
	vertical-align: top;
	display: inline-block;
}

.simplify-control .track {
	border-radius: 2px;
	width: 340px;
	background-color: #fff;
	height: 2px;
}

.simplify-control .handle {
	position: absolute;
	top: -3px;
}

.simplify-control .handle img {
	width: 20px;
	height: 20px;
	margin-left: -10px;
	margin-top: -10px;
}

.simplify-control .clicktext {
	width: 56px;
	background: rgba(255, 255, 255, 0.5);
	text-align: center;
	border: 1px solid rgba(0,0,0,0);
	font-size: 13px;
}

.simplify-control .clicktext:focus {
	background: #fff;
}